flash cs6 basico

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

Ing. Ronal Albines Macalup Pgina 1 DISEO GRFICO

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:



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.



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 y

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.



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.



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



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.



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:



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.



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.



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.

flash cs6 basico

Documents