FLASH

Creacin de animaciones
Adobe Flash CS3 Professional proporciona distintos mtodos para crear animaciones y efectos
especiales; los efectos en lnea de tiempo, las animaciones interpoladas, el cambio del contenido de
fotogramas sucesivos en la lnea de tiempo y la animacin fotograma a fotograma le ofrecen diversas
posibilidades para crear un contenido animado atractivo!
Conceptos bsicos de animaciones
"as escenas de los documentos de Flash pueden constar de varias capas! #tilice capas y carpetas de
capas para organi$ar los componentes de las secuencias de animacin y para separar ob%etos animados
de forma &ue no se borren, conecten ni segmenten entre s! Para interpolar elmovimiento dem's de un
grupo o smbolo de forma simult'nea, cada uno debe estar en una capa diferente! (ormalmente, la capa
de fondo contiene ilustraciones est'ticas, mientras &ue el resto de las capas contienen un ob%eto animado
cada una!
"os cambios en la animacin se definen en un fotograma clave! )n la animacin fotograma a
fotograma, cada fotograma es clave! )n la animacin interpolada, se definen fotogramas clave en puntos
significativos de la animacin y Flash crea el contenido de los fotogramas intermedios!
Creacin de fotogramas clave para la animacin
"os fotogramas interpolados se muestran en verde claro o a$ul claro con una flecha entre los
fotogramas clave! Puesto &ue los documentos de Flash guardan las formas en cada fotograma clave, cree
fotogramas clave slo en los puntos de las ilustraciones en los &ue se produ$ca alguna modificacin!
"os fotogramas clave se indican en la lnea de tiempo* un crculo slido representa un fotograma con
contenido y un crculo vaco delante del fotograma representa uno vaco! "os fotogramas siguientes
a+adidos a la misma capa tendr'n el mismo contenido &ue el fotograma clave!
Representaciones de animaciones en la lnea de tiempo
Para insertar un fotograma clave, realice uno de los siguientes pasos*
Seleccione un fotograma en la lnea de tiempo y eli%a ,nsertar - "nea de tiempo - Fotograma clave!
. tambin /aga clic con el botn derecho del ratn en un fotograma de la lnea de tiempo y eli%a ,nsertar
fotograma clave!
Flash distingue la animacin fotograma por fotograma de la interpolada en la lnea de tiempo de la
siguiente forma*
Representacin Descripcin
Los fotogramas clave se indican en la lnea de tiempo
Un punto negro al principio del fotograma indica interpolaciones
de movimiento y una flecha negra con un fondo azul claro
indica fotogramas interpolados intermedios.
Un punto negro al principio del fotograma indica interpolaciones
de forma y una flecha negra con un fondo verde claro indica
fotogramas intermedios.
Una lnea discontinua indica que la interpolacin se ha
interrumpido o est incompleta, por ejemplo, cuando falta el
fotograma clave final.
Representacin Descripcin
Un punto negro indica un solo fotograma. Los fotogramas en
gris claro despus de un fotograma clave sencillo tienen el
mismo contenido sin ningn cam!io y tienen una lnea negra
con un rectngulo vaco en el ltimo fotograma del intervalo.
Una a peque"a #a# indica que al fotograma se ha asignado una
accin de fotograma con el panel $cciones.
Una !andera roja indica que el fotograma contiene una
etiqueta.
Un guin do!le verde indica que el fotograma contiene un
comentario
Un ancla dorada indica que el fotograma es un anclaje con
nom!re.
Velocidades de fotogramas
"a velocidad de fotogramas, la rapide$ con &ue se reproduce la animacin, se e0presa en fotogramas
por segundo 1fps2! Si la velocidad de fotogramas es muy ba%a, la animacin parece detenerse y volver a
empe$ar y si esmuy alta los detalles se ven borrosos!
)li%a una velocidad de 34 fps para obtener un resultado ptimo en ,nternet! )n general, la velocidad
est'ndar de movimiento de la imagen es de 45 fps, pero en las pelculas 6uic78ime y A9, es
habitualmente de 34 fps! "a comple%idad de la animacin y la velocidad del sistema en el &ue se
reproduce afectan a la suavidad de la reproduccin! Para determinar la velocidad de fotogramas ptima,
pruebe las animaciones en varios sistemas! Slo se especifica una velocidad de fotogramas para el
documento de Flash completo, por lo &ue debe definirla antes de crear la animacin!
Utilizacin de papel cebolla
(ormalmente slo se muestra un fotograma de la secuencia de animacin en el escenario! Para
facilitar la colocacin y edicin de la animacin fotograma a fotograma, se pueden ver varios fotogramas
a la ve$ en el escenario! )l fotograma situado ba%o la cabe$a lectora aparece de color normal,mientras
&ue los fotogramas circundantes aparecen atenuados; cada fotograma parece estar dibu%ado sobre ho%as
de papel trasl:cido 1papel cebolla2 colocadas una encima de otra! "os fotogramas atenuados no pueden
editarse!
Las capas de mscaras
Para obtener el efecto de foco y de transiciones, utilice una capa dem'scara para crear un agu%ero a
travs del cual se puedan ver las capas situadas por deba%o! #n elemento de m'scara puede ser una forma
rellena, un blo&ue de te0to, una instancia de un smbolo de gr'fico o un clip de pelcula
Representacin de Animacin interpolada
Flash puede crear dos tipos de animaciones interpoladas*
32 )n la interpolacin de movimiento, se definen propiedades tales como la posicin, el tama+o y
la rotacin de una instancia, un grupo o un blo&ue de te0to en un momento especfico, y estas
propiedades se pueden cambiar en otro momento! 8ambin se puede crear una interpolacin de
movimiento a lo largo de un tra$ado!
42 )n la interpolacin de formas, se dibu%a una forma en un momento especfico y se modifica o se
dibu%a otra forma en otro momento! Flash interpola los valores o formas de los fotogramas
intermedios para crear la animacin! .bseva como traba%a una ,nterpolacin de movimiento y
una de forma!
EJERCICIOS DE
FLASH
1) T!T" #$CA$%&C$T'
)l e%ercicio consiste en &ue el te0to &ue se escriba tiene el efecto de ;prenderse; y ;apagarse;
(aso 1' Cree un nuevo documento de Flash! )n Propiedades del documento estable$ca las
dimensiones de 3<< pi0els por 3=< pi0els y una velocidad de fotogramas de 34 fps! )stable$ca un color
de fondo, &ue para este caso elegimos el negro! Clic en Aceptar!
(aso )' #tili$ando la herramienta 8e0to 1A2 escribimos un te0to, para este e%emplo,
,8/,(>?)@!C.A!AB, lo seleccionamos y en el panel de Propiedades establecemos el color de
te0to*blanco!
(aso *' Con el te0to seleccionado lo separamos utili$ando el men: Aodificar - Separar, o con la
combinacin de teclas C8C"D @! .tra forma de hacerlo es dando clic con botn derecho del ratn y del
men: conte0tual elegir Separar! )l te0to se ver' as*
(aso +' Con el te0to a:n seleccionado vuelva a repetir el procedimiento de Separar para convertir el
te0to en una forma!
(aso ,' Cree una nueva capa deba%o de la capa creada primeramente y pngale un nombre, por
e%emplo ;)fecto;! )n caso de &ue la nueva capa &uede encima de la primera, damos clic sobre ella y la
arrastramos hacia aba%o para colocarla en la posicin deseada! )n este paso deber' copiar el te0to de la
primera capa y pegarlo en la capa ;)fecto;! @lo&uee la capa ;te0to; para &ue no podamos reali$ar
ninguna modificacin inesperada!
(aso -' Con el te0to seleccionado, ir a men: Aodificar - Forma - Suavi$ar bordes de relleno y
establecer las siguientes propiedades* Eistancia 3<p0; (:mero de escenarios 3=; Eireccin* )0pandir!
(aso .' Se puede apreciar el efecto producido alrededor del te0to! 9uelva a seleccionarlo y
convirtalo en Clip de pelcula con el men: Aodificar - Convertir en smbolo 1FF2! Clic en Aceptar!
(aso /' Ahora tenemos &ue insertar Fotogramas clave en los siguientes lugares de la capa ;)fecto;*
Fotograma 3<, Fotograma 3= y Fotograma 4=! Para insertar Fotogramas clave podemos hacerlo de varias
maneras* Clic sobre el fotograma y oprimimos FG; clic con botn derecho sobre el fotograma y elegimos
,nsertar Fotograma clave del men: conte0tual y otra m's es con el men: ,nsertar -lnea de tiempo -
Fotograma clave!
(aso 0' Ahora vamos insertar los niveles Alpha en el Clip de pelcula dentro de cada uno de los
correspondientes Fotogramas de la capa ;)fecto;* Fotograma 3 1Alfa H <I; 1Fotograma 3< 1Alfa H
G=I2; Fotograma 4= 1Alfa H <I2! Para aplicar la propiedad Alfa debemos tener seleccionado el
Fotograma y el Clip de pelcula!
(aso 11' ,nserte Aovimiento entre los Fotogramas 3 y 3< y entre los fotogramas 3= y 4=! Para
insertar el movimiento, de clc sobre cual&uier fotograma intermedio y oprima botn derecho y del men:
conte0tula eli%a Crear ,nterpolacin de Aovimiento! 8ambin se puede utili$ar la opcin Animar del
panel de Propiedades y eligiendo Aovimiento
(aso 11' Finalmente inserte un fotograma en la capa ;te0to; en el fotograma 4=! esto lo hacemos
dando clic con botn derecho sobre el fotograma 4= y elegimos ,nsertar fotograma! Puedes ver el
e%emplo traba%ando!
)) T!T" C"$ %&(LA2A3#$T"'
)ste e%ercicio consiste en permitir &ue un te0to se desplace por toda la pantalla en forma vertical y
con un fondo &ue puede ser una imagen o un color definido! )l te0to aparece en la parte inferior y se
despla$a verticalmente hacia la parte superior! Para nuestro e%emplo utili$aremos una imagen de fondo!
Paso 1. Cree un nuevo documento de Flash! )n Propiedades del documento estable$ca las
dimensiones de 3<< pi0els por 43< pi0els y una velocidad de fotogramas de 34 fps! ,mporte la imagen
hacia el documento con el men: Archivo - ,mportar - ,mportar a @iblioteca! (os debemos asegurar &ue
la imagen &uede centrada en el escenario! Si &ueremos &ue la imagen cubra todo el escenario deberemos
a%ustar las dimensiones del escenario a las de la imagen!
Paso 2. Asigne un nombre a la primera capa, por e%emplo ;imagen; y luego seleccione el Fotograma
4= e inserte un fotograma simple, se hace con F=, luego blo&uee la capa para evitar &ue se mueva la
imagen!
Paso 3. ,nserte una nueva capa dando clic sobre el icono ;,nsertar capa; &ue se encuentra en la "nea
de tiempo! Asignarle el nombre de ;te0to;! Seleccione la herramienta de te0to y escriba el te0to &ue
desee pudiendo constar de varias lneas pero con un ancho menor al 'rea disponible! Seleccionar el te0to
y luego lo convertimos en un smbolo Jr'fico y para ello bastar' con oprimir FF y elegir Jr'fico y
Aceptar! )n la biblioteca aparece el nuevo smbolo pero seguimos usando el original!
Paso 4. Ahora nos colocamos en la capa ;te0to; y seleccionamos el :ltimo fotograma &ue es el 4= e
insertamos un fotograma clave con FG! "uego damos clic sobre fotograma 3 y colocamos el gr'fico del
te0to como se muestra a continuacin!
"uego nos trasladamos al fotograma 4= y colocamos el te0to como se muestra en la siguiente
imagen!
Paso 5. Seleccione cual&uier parte del centro entre el fotograma 3 y el 4= de la capa ;te0to; y con el
botn derecho elgir Crear ,nterpolacin de movimiento! )n este paso ya podemos ver el efecto de
despla$amiento y para ello nos colocamos en el fotograma 3 de la capa ;te0to; y oprimimos )nter!
Ejercicio 3:
Crear un fotograma para una animacin
Con la barra de herramientas, seleccione la herramienta Rectngulo y elija
un tono azul para el relleno.
Utilizando el ratn, trace un rectngulo en la escena. Para ello debe
mantener presionado el botn del ratn mientras lo desplaza.
Para animar el rectngulo con mayor facilidad lo convertiremos en un
smbolo, para ello seleccione la opcin Convertir en smbolo del men!
"odificar, en la barra de men!s. #n el cuadro de dilogo $ue aparece pulse
el botn %ceptar.
Pulse en el men! &nsertar de la barra de men!s y seleccione la opcin
'nea de tiempo(Capa. %s obtendremos una segunda capa en la lnea de
tiempo.
)eleccione la herramienta *e+to en la barra de herramientas y elija el color
blanco para el relleno.
#n el men! *e+to de la barra de men!s seleccione la opcin *ama,o y
escoja -.. *ambi/n puede modificar la fuente en ese mismo men!.
0aga clic en la escena y escriba el te+to 1*rabajando con 2lash3.
Cuando termine de escribir el te+to, seleccione la herramienta 2lecha 4la
flecha negra5 en la barra de herramientas.
Ejercicio 4:
Crear una animacin
#n la lnea de tiempo seleccione las dos casillas de la posicin -6
arrastrando el ratn sobre ellas mientras mantiene pulsado el botn del
ratn.
#n el men! insertar de la barra de men!s seleccione la opcin 'nea de
tiempo(2otograma clave.
0aga clic en cual$uier lugar de la escena para $uitar la seleccin.
0aga clic sobre el te+to para
seleccionarlo y a continuacin
arrstrelo hacia la derecha.
)eleccione la escena 7 de la
segunda capa 4la $ue contiene
el te+to5 haciendo clic sobre
su nombre en la lnea de
tiempo.
#n el men! insertar de la
barra de men!s seleccione la
opcin 'nea de tiempo(Crear
interpolacin de movimiento.
Para ver la animacin pulse la
tecla &ntro.
Ejercicio 5:
Crear una animacin por interpolacin de movimiento.
Cree, una nueva pelcula.
&nserte un nuevo smbolo, llamado %vin, con un dibujo similar al de la
figura.
8e vuelta en la escena, inserte un rectngulo $ue ocupe todo el fondo de la
escena y asgnele un color con un degradado.
#n la lnea de tiempo, cambie el nombre de la capa9 llmela 2ondo.
'a pelcula durar 76 fotogramas. Para conseguirlo, haga clic en el
fotograma 76 y seleccione la opcin &nsertar( 'nea de tiempo(2otograma.
&nserte una nueva capa pulsando en el botn Insertar capa en la parte
inferior de la lnea de tiempo.
Utilice la palabra Avin como nombre para la nueva capa.
%rrastre el smbolo Avin desde la biblioteca hasta la es$uina inferior
iz$uierda de la escena.
0aga clic en la casilla 76 de esta capa e inserte un fotograma clave
pulsando la tecla F6.
8esplace el avin hasta la es$uina superior derecha. Ya est todo
preparado. 0a llegado el momento de aplicar la interpolacin. Para ello
necesita utilizar el panel Propiedades.
Ejercicio 6:
Crear una interpolacin de movimiento (continuacin),
)eleccione la casilla 7 de la capa %vin. :bservar $ue el avin vuelve a su
posicin original.
#n el panel Propiedades, seleccione la opcin "ovimiento en el cuadro
%nimar. #n la lnea de tiempo las casillas intermedias se vuelven de color
azul, atravesadas por una flecha $ue une los dos fotogramas clave.
Pulse &ntro para reproducir la animacin o Control;&ntro para probar la
escena.
Ejercicio 7:
Crear una mscara en movimiento.
Cree una nueva pelcula, con tama,o <66 por =66 p+eles y seleccione un
tono naranja para el fondo.
#n la librera inserte un smbolo en forma de elipse, llmelo Elipse.
%,ada un nuevo smbolo $ue contenga el te+to 1as mscaras en Flas!".
Utilice dos colores, negro para el principio y rojo para la palabra 12lash>.
%,ada un smbolo ms, con un dibujo similar la de la figura.
Regrese a la escena e inserte el smbolo en forma de mscara en la capa
7.
%mple la duracin de la pelcula a =6 fotogramas, haciendo clic sobre la
casilla =6 y pulsando la tecla F#.
&nserte una nueva capa, llamada $e%to y sit!e en ella el smbolo $ue
contiene el te+to.
%,ada una tercera capa, llamada &scara e inserte la elipse en ella. )it!ela
sobre la parte iz$uierda del te+to, tapando el principio de /ste.
&nserte un fotograma clave 4pulsando F65 en el fotograma =6 y en el 7< de
la capa "scara.
#n el fotograma 7< de la capa "scara desplace la elipse hasta el final del
te+to.
0aga clic sobre el nombre de la capa &scara y en el panel 'ropiedades
seleccione como interpolacin de "ovimiento. 8e este modo aplicamos la
interpolacin a todos los fotogramas clave de la capa.
Pulse con el botn derecho sobre el nombre de la capa y active la opcin
"scara.
'os iconos $ue aparecen junto al nombre de esta capa y de la inferior
cambian, al tiempo $ue el candado de ambas capas se activa, para $ue no
se puedan editar. Puede ver estos iconos en la figura.
Pruebe la pelcula pulsando Intro o Control(Intro