Arte

ARTE Y CREACIÓN MULTIMEDIA

Galería de Personajes (Vip’s by Pixels)

© Ilustraciones: Supertotto http://www.supertotto.com/

Objetivos

En este ejercicio afrontaremos la creación de una mini galería de personajes retratados según la estética de la denominada “píxel art” tal y como publicado en la siguiente URL: http://www.arquimatica.com/personajes

Primeros pasos

Desde la pagina demuestra descarga a tu espacio de trabajo las imágenes (iconos de 32 x 32 pixels) de unos cuantos personajes usando la tecla derecha del ratón y seleccionando la opción “descargar imagen a disco”. Crea un nuevo fichero de Flash de 320 por 160 pixels; ajusta la cuadrícula con una malla de 32 por 32 pixels y activa la opción de ajustar a cuadrícula. Guarda el fichero con el nombre “personajes” EN LAMISMA CARPETA donde has descargado las imágenes.

Cargar Imágenes externas

En lugar de importar las imágenes de nuestros personajes a la biblioteca de nuestra película utilizaremos la técnica de enlazar de forma dinámicas unas imágenes externas. De esta manera nos resultará más facil intercambiar los distintos personajes en nuestra aplicación. Nombra la “Capa 1” como “Personajes”. Dibuja enel primer fotograma un rectángulo sin relleno (forma) de 32 pixels por 32 (un cuadrado de cuadrícula) apoyado en el margen izquierdo de la película a un cuadrado de

© UNIVERSIDAD EUROPEA DE MADRID

Escuela Superior de Arte y Arquitectura

1

ARTE Y CREACIÓN MULTIMEDIA

distancia (32 pixels) desde el extremo superior. Convierte la forma rectangular en Clip de Película con el nombre“CP_Personajes” asegurándote de seleccio!nar como punto de registro el extremo superior izquierdo. Este detalle nos resultará de vital importancia a la hora de importar imágenes externas. En el Inspector de propiedades asigna como nombre de la instancia “primero”; modifica el tamaño del Clip de Película “primero” hasta llevarlo al doble del original (dos cuadrados de cuadrícula por dos) preservando laalineación con el margen izquierdo de la animación y el cuadrado de distancia desde el extremo superior. Para cargar la imagen de uno de nuestros personajes en nuestro Clip de Película “primero” crea una nueva capa con el nombre “acciones”, selecciona el primer fotograma de esta capa, abre la ventana de ActionScript y introduce el siguiente código: _root.primero.loadMovie("nombre_del_fichero"); usapor ejemplo: _root.primero.loadMovie("silvio.jpg"); para importar el icono de Silvio (Berlusconi). Guarda tu trabajo y comprueba en la vista previa el correcto funcionamiento de nuestro script. Coloca en la capa “personajes” en una fila horizontal otras 4 instancias del Clip de película “CP_Personajes” para que ocupen todo el ancho de la animación y asígnales los nombres “segundo”, “tercero”,“cuarto” y “quinto” respectivamente. Completa el código del primer fotograma de la capa “acciones” para importar el resto de los personajes. // carga los personajes _root.primero.loadMovie("silvio.jpg"); _root.segundo.loadMovie("fidel.jpg"); _root.tercero.loadMovie("karol.jpg"); _root.cuarto.loadMovie("kofi.jpg"); _root.quinto.loadMovie("osama.jpg"); Inserta un fotograma clave en el fotograma “2” de lacapa “acciones” y otro fotograma clave en el fotograma “3” de la misma capa. Inserta un fotograma (normal) en el fotograma “3” de la capa “Personajes”. Coloca en el fotograma “3” de la capa “acciones” el siguiente código: gotoAndPlay(2);

Personajes que deslizan …
Para obtener el efecto de “deslizamiento” de los 5 personajes modificaremos de forma dinámica su coordinada _x a través deActionScript. Crea una nueva capa con el nombre “botones”; coloca en ella 5 botones alineados horizontalmente (Librerías comunes / Playback / Gel en el ejemplo). Nombra la instancia de cada botón con los nombres “B1, B2 … B5) respectivamente. Utilizaremos el Clip de Película “Primero”, el primero de la izquierda, como guía para los movimientos de los demás personajes; en su posición actual su...