R.M.N 0568-94-ED/ R.M.N 699-98-ED/ REVALIDADO R.D.N0542-2006-ED.

CURSO: DISEO GRFICO

AUTOR: ING.RONAL ALBINES MACALUP
CLASE/LABORATORIO 11 CREACION DE UN BANNER
HERRAMIENTAS A USAR:

flash CS6 PORTABLE

IMAGEN.

OBEJTIVOS:

USO DE EFECTOS DE EDICION EN CAPAS

TALLER PRCTICO

Despus de haber visto las diferentes formas de animar que hay en Adobe Flash CS6, que mejor forma de
recordarlas que con un banner animado, el cual podemos utilizar para nuestra propia web, la de un amigo
o incluso la de un cliente. En prximos tutoriales veremos como hacer banners que requieran de la
intervencin del usuario y de esta forma crear una nueva modalidad de banners de publicidad.
Antes de meternos en materia, debemos tener claro el resultado final del banner, as como las medidas del
mismo. En mi caso suelo utilizar Photoshop para montar el banner de forma esttica y separar las partes que
voy a animar. Esta ser nuestra plantilla:

Ing. Ronal Albines Macalup

Pgina 1

DISEO GRFICO

R.M.N 0568-94-ED/ R.M.N 699-98-ED/ REVALIDADO R.D.N0542-2006-ED.

Una vez tenemos la composicin, tenemos que identificar que elementos vamos a animar y de que forma. En
nuestro ejemplo vamos hacer que las cartas caigan aparezcan de arriba a abajo y en primer lugar las de la
parte de atrs y despus las de delante. Acto seguido aparecer el texto de la izquierda y finalmente el texto
de la derecha. La forma de animar el banner depende mucho de los elementos que aparezcan en el mismo y
en funcin de cada uno, utilizar una forma de animar u otra.
Ahora si que abrimos el Adobe Flash CS6 y creamos un nuevo archivo de ActionScript 3. Una vez tenemos el
archivo creado, vamos a la pestaa Propiedades o en el men superior, vamos a Modificar -> Documento y
establecemos el tamao del banner. En nuestro caso ser de 989 pxeles de ancho por 300 pxeles de alto y lo
vamos a crear a 24 fotogramas por segundo (lo que viene por defecto)

Una vez tenemos nuestro archivo configurado, vamos a importar la composicin final, ya que nos servir como
gua para ir creando las animaciones. Para ello, pulsamos en el men Archivo -> Importar -> Importar a
escenario o pulsamos Control + R (en Mac Comando + R) y seleccionamos el archivo.

Ing. Ronal Albines Macalup

Pgina 2

DISEO GRFICO

R.M.N 0568-94-ED/ R.M.N 699-98-ED/ REVALIDADO R.D.N0542-2006-ED.

Una vez tenemos la gua en el escenario, para que se nos centre de forma correcta en el mismo, pulsamos
Control + K (en Mac Comando + K) y nos aparece el men de alinear, desde el cual podemos establecer la
alineacin del elemento o elementos que tengamos seleccionados en este momento. En nuestro caso,
seleccionamos la imagen y en el men alinear, marcamos la casilla de Alinear en escenario y as lo podemos
centrar tanto vertical como horizontlmente en el mismo. Para ello pulsamos los botones

Ahora que ya tenemos alineada la imagen gua, vamos a cambiarle el nombre a la capa donde tenemos la
imagen gua y el tipo. Como nombre le podemos poner Imagen gua y como tipo Gua. Para poner una
capa como gua, pulsamos el botn derecho sobre la capa y seleccionamos la opcin Gua. las capas gua no
aparecen en el resultado final cuando publicamos el archivo.
Una vez hecho esto, vamos a importar el resto de imgenes, pero esta vez las vamos a importar a la Biblioteca
ya que si seleccionamos Importar al escenario, apareceran en la capa gua y si creamos una capa nueva y
pulsamos importar al escenario, nos apareceran todas las imgenes en la misma capa y nosotros queremos
animar cada imagen de una forma, por lo que vamos a crear una capa por elemento animado. As que en el
men, pulsamos Archivo -> Importar -> Importar a la biblioteca, seleccionamos todos los archivos y pulsamos
Abrir. Para ver la Biblioteca pulsamos Control + L (en Mac comando + L) y veremos los elementos que tenemos
en la misma.

Ing. Ronal Albines Macalup

Pgina 3

DISEO GRFICO

R.M.N 0568-94-ED/ R.M.N 699-98-ED/ REVALIDADO R.D.N0542-2006-ED.

Ya con los elementos en la Biblioteca, creamos una capa por elemento, y arrastramos cada elemento a su capa
correspondiente y lo convertimos en un clip de pelcula. En funcin del nmero de elementos tendremos ms
o menos capas, por lo que no vendra mal que furamos nombrando las capas para poder identificarlas mejor.
Una vez tengamos los clips de pelcula en el escenario podemos ordenar las capas para hacer que un elemento
est por detrs de otro o por delante y as que cuando los animemos, no se tapen los elementos que no se
tienen que tapar.

Ing. Ronal Albines Macalup

Pgina 4

DISEO GRFICO

R.M.N 0568-94-ED/ R.M.N 699-98-ED/ REVALIDADO R.D.N0542-2006-ED.

Vamos a crear el resto de elementos, como los textos y los fondos de los textos. El fondo del banner lo
dejaremos para el final, ya que si lo creamos ahora, perderemos la vista de la capa gua. En nuestro caso
tenemos 8 grupos de texto y cuatro formas que actan como fondo de texto. Un consejo, aquellas formas que
lleven sombra o cualquier otro efecto, convertirlas a clip de pelcula pero si no llevan ningn efecto, dejarlas
como forma. Lo mismo para los textos. Una vez tengamos creados el resto de elementos, si ocultamos la capa
gua (pulsando sobre el icono correspondiente de la columna de visibilidad) veremos todos los elementos
creados a falta del fondo.

Nuestro escenario debe estar tal que as

Ing. Ronal Albines Macalup

Pgina 5

DISEO GRFICO

R.M.N 0568-94-ED/ R.M.N 699-98-ED/ REVALIDADO R.D.N0542-2006-ED.

Y ya con los elementos listos, solo nos queda animar. Para ello y despus de los anteriores tutoriales, dejo a
vuestra eleccin el tipo de animacin que queris utilizar. Nosotros vamos a usar tanto animaciones de
movimiento, como interpolaciones en las propiedades de los clips de pelcula (vamos a cambiar la propiedad
alfa). Una cosa a tener en cuenta, es que cada vez que creis una interpolacin, la probis, ya que en muchos
casos y ms cuando tenemos muchos elementos, algunos de estos aparecen o desaparecen donde no lo deben
hacer.
Una vez hemos creado las animaciones, solo nos quedara crear el fondo en una capa que este por encima de
la capa gua y por debajo del resto, ya que sino el fondo tapar los elementos y las animaciones.

Ing. Ronal Albines Macalup

Pgina 6

DISEO GRFICO

R.M.N 0568-94-ED/ R.M.N 699-98-ED/ REVALIDADO R.D.N0542-2006-ED.

Como podis ver en la imagen superior, despus de cada interpolacin continan los fotogramas, ya que sino,
tras cada una de las interpolaciones, los elementos iran desapareciendo y lo que queremos conseguir es que
una vez aparezcan en el escenario, se mantengan visibles. Por ejemplo, una vez hemos creado la primera
interpolacin y estamos creando la segunda, y esta ltima termina despus de la primera y queremos que el
resultado de la primera interpolacin contine siendo visible, lo que hacemos es, en el fotograma de la capa
de la primera interpolacin donde termina la segunda, pulsamos F5 o el botn derecho del ratn y
seleccionamos Insertar fotograma. En la siguiente imagen, lo veris ms claro:

Ing. Ronal Albines Macalup

Pgina 7

DISEO GRFICO

R.M.N 0568-94-ED/ R.M.N 699-98-ED/ REVALIDADO R.D.N0542-2006-ED.

De esta forma, podemos hacer que cadavez que un elemento aparezca en el escenario, se mantenga o se
ocultes simplemente incorporando fotogramas o eliminndolos.
Tambin es importante que una vez termine la animacin de todos los elementos del banner, todo se pare y
se quede como en el diseo que establecimos al principio del tutorial y que no se repitan las animaciones una
y otra vez. Para ello, haremos uso de una de las acciones ms veteranas de Adobe Flash, el stop. Adobe
Flash incorpora una serie de acciones sencillas para controlar el flujo de nuestra animacin sin tener que
utilizar programacin avanzada como play, stop, gotoAndPlay, gotoAndStop, etc. En nuestro caso
necesitamos el stop en el ltimo fotograma de la animacin para que una vez termine todo, se mantenga
con el resultado final. Para ello, vamos hasta el ltimo fotograma y hacemos clic con el botn izquierdo del
ratn para seleccionarlo y mostramos el panel de acciones o bien pulsando F9 o bien a travs del men
Ventana -> Acciones.

Una vez abierto el panel de acciones escribimos lo siguiente: stop(); (el ; tambin) que es como se llama a la
accin parar de ActionsScript, el lenguaje de programacin de Adobe Flash. Con esto conseguimos que nuestra
pelcula, pare en el ltimo fotograma. Si queris hacer pruebas, probad a seleccionar cualquier otro fotograma
y ponerle un stop(); y veris como vuestra pelcula se para en dicho fotograma. En futuros tutoriales nos
introduciremos ms de lleno en la programacin con ActionScript 3.0 pero por ahora con esto es suficiente.

Ing. Ronal Albines Macalup

Pgina 8

DISEO GRFICO

R.M.N 0568-94-ED/ R.M.N 699-98-ED/ REVALIDADO R.D.N0542-2006-ED.

Y con esto, ya tendramos nuestro banner terminado, solo faltara publicarlo, pero antes de publicarlo
debemos siempre previsualizarlo o como lo habamos llamado en los anteriores tutoriales, probarlo. Para ello
o bien pulsamos Control + Intro (en Mac Comando + Intro) o en el men seleccionamos Control -> Probar
pelcula -> Probar. Se nos abrir una ventana y nos mostrar el resultado final y si estamos conformes la
publicamos.

Una vez hemos probado la pelcula, y estamos conformes con el resultado, vamos a publicarla. El proceso de
publicacin lo que har ser crear nuestra pelcula dentro de un archivo sfw, el cual podremos subir a nuestra
web o entregrselo a un cliente o amigo. Adems del archivo swf, Adobe Flash nos permite generar un archivo
html asociado el cual contiene todo lo necesario para mostrar la pelcula y no tener nosotros que
preocuparnos de insertar el swf en nuestro cdigo html. Para ello, vamos en el men Archivo -> Configuracin
de publicacin y se nos abrir una ventana con las opciones de publicacin.

Ing. Ronal Albines Macalup

Pgina 9

DISEO GRFICO

R.M.N 0568-94-ED/ R.M.N 699-98-ED/ REVALIDADO R.D.N0542-2006-ED.

En la primera pestaa, le indicamos que queremos tanto el swf como el html y los nombres y rutas donde los
queremos. El resto de pestaas las dejamos igual y pulsamos sobre el botn Publicar y Adobe Flash nos
generar los archivos correspondientes donde le hemos indicado. Si queris investigar por vuestra cuenta las
opciones de las otras dos pestaas, os invito hacerlo y si tenis cualquier duda, preguntarla. Otra cosa, por
cada formato que seleccionis en la primera pestaa, os aparecer una pestaa asociada a dicho formato.

Ing. Ronal Albines Macalup

Pgina 10

DISEO GRFICO