Cap133 Flas cs6 PDF

CAPTULO 11: ANIMACIONES
11
Captulo
Animaciones
11.1 La animacin con Flash
ara crear animacin en una pelcula Flash, se modifica el contenido de

fotogramas sucesivos. Flash ofrece dos maneras de crear secuencias de
animacin: fotograma a fotograma y por interpolacin.
En la animacin fotograma a fotograma, el diseador crea la

imagen de cada fotograma.
En la animacin por interpolacin, el diseador crea los fotogramas inicial y
final, y Flash genera automticamente los fotogramas intermedios. La animacin
interpolada es una forma eficaz de crear movimiento y cambios a lo largo del tiempo y de
reducir el tamao del archivo.
11.2 La lnea de tiempo

La Lnea de tiempo organiza y controla el contenido de una pelcula a travs del
tiempo, en capas y fotogramas. Los componentes principales de la Lnea de tiempo son
las capas, los fotogramas y la cabeza lectora.
Vamos a abrir la pelcula natura.fla contenida en la
Flash/ejemplos para observar detalles de su lnea de tiempo.
1.
2.
3.
carpeta
Curso
Mediante Archivo > Abrir busca y selecciona el archivo natura.fla.

Haciendo clic sobre los extremos de la barra de desplazamiento
horizontal de la Lnea temporal podrs observar todos los fotogramas de
sus respectivas capas.
Los nombres de las capas de la pelcula aparecen en una columna
situada a la izquierda de la lnea de tiempo. Los fotogramas contenidos
en cada capa se organizan secuencialmente en una fila a la derecha del
nombre de la capa. El encabezado de la Lnea de tiempo indica el
nmero de fotograma. La cabeza lectora apunta al fotograma actual que
se muestra en el Escenario.
Diseo Flash de recursos web y multimedia para la enseanza
117
Figura 11.1 La lnea de tiempo
4.
5.
La informacin de estado de la Lnea de tiempo situada en la parte

inferior de la misma indica el nmero de fotograma actual, la velocidad
de fotogramas y el tiempo transcurrido hasta el fotograma actual.
Para visualizar la pelcula sin perder de vista la lnea de tiempo, elige
Control > Reproducir. Observa que la cabeza lectora lee en cada
instante simultneamente el fotograma de todas y cada una de las
capas. Para visualizar la pelcula tal y como quedar en el reproductor,
selecciona Control >Probar pelcula.
Un fotograma clave es un tipo de fotograma en el que el diseador dibuja la

imagen utilizando las herramientas que le proporciona Flash. En la animacin fotograma a
fotograma, cada fotograma es clave. En la interpolada, se definen fotogramas clave en
puntos importantes y Flash genera automticamente el contenido de los intermedios.
11.3 Interpolacin de movimiento I : el vuelo de un

guila
En la interpolacin de movimiento, el diseador define la posicin, el tamao y la
rotacin de un objeto sobre el escenario en un fotograma clave inicial. Estas propiedades
las modifica en el fotograma clave final. Flash generar sobre el escenario la secuencia de
transicin de un estado a otro.
118
Figura 11.2 Simbolo del guila sobre el escenario.
En este ejemplo vamos a disear el vuelo de un guila.

1.
2.
3.
4.
5.
6.
7.
8.
Cuando se abre un archivo de pelcula nueva mediante Archivo >

Nuevo, Flash se sita en la capa actual Capa 1 y en ella sita en la
posicin n 1 un fotograma clave (rectngulo con punto hueco en su
base) a la espera de rellenarlo con alguna imagen.
Arrastra una instancia del smbolo grfico guila desde la carpeta
Grficos en Ventana > Otros paneles > Bibliotecas comunes >
Curso. Sita el guila en la esquina inferior izquierda del escenario.
Observa que el fotograma clave ahora muestra un punto negro indicando
que ya contiene una imagen.
Crea un segundo fotograma clave (fotograma clave final) donde desees
que concluya la animacin. Por ejemplo, haz clic sobre el fotograma n
30 de esa capa. Una vez seleccionado, elige la opcin Insertar > Lnea
de tiempo > Fotograma Clave. Otra opcin es hacer directamente
clic derecho sobre el fotograma n 30 y seleccionar Insertar
fotograma clave en el men contextual que se despliega. Flash
automticamente rellena ese nuevo fotograma clave con el contenido del
anterior.
Asegrate que est seleccionado el fotograma n 30. Ahora pincha y
arrastra el guila para moverlo hasta la esquina superior derecha del
escenario.
Tambin puedes reducir su tamao. Utiliza la herramienta
Transformacin libre (Q) y su opcin Escalar. Arrastra el selector de
la esquina superior derecha del guila.
Advierte que los cambios de posicin y tamao slo afectan al fotograma
clave n 30. Al hacer clic en la lnea de tiempo sobre el fotograma clave
n 1, se observa la posicin y tamao inicial del objeto.
Clic sobre el fotograma clave n1. Si el Inspector de Propiedades no
est visible, selecciona Ventana > Propiedades.
En la lista desplegable Animar del Inspector de propiedades selecciona
Movimiento. ste es el tipo de interpolacin que vamos a utilizar.
119
Figura 11.3 Inspector de propiedades del fotograma inicial
9.
10.
Activa la casilla Escalar para interpolar el cambio de tamao del

elemento seleccionado.
En la lista desplegable Aceleracin arrastra el deslizador o se introduce
un valor para ajustar la velocidad del cambio entre fotogramas
interpolados:
Para empezar la interpolacin de movimiento lentamente y acelerar hacia
el final de la animacin, arrastra el deslizador hacia abajo o introduce un
valor entre -1 y -100. Nota que aparece la etiqueta Dentro.
Para empezar la interpolacin de movimiento rpidamente y ralentizar
hacia el final de la animacin, arrastra el deslizador hacia arriba o
introduce un valor entre 1 y 100. Aparece la etiqueta Fuera.
La velocidad de cambio predeterminada entre los fotogramas interpolados es

constante. La opcin Aceleracin crea una apariencia ms natural de aceleracin o
ralentizacin ajustando gradualmente la velocidad de cambio.
11.
Al concluir estas tareas en la capa actual los fotogramas clave estn

indicados por un punto negro mientras que los fotogramas intermedios
muestran una flecha negra sobre fondo azul claro.
Figura 11.4 Representacin de una animacin de movimiento por interpolacin en la lnea de tiempo
Si se elimina el fotograma clave final esta flecha se transforma en una lnea

discontinua.
Figura 11.5 No hay interpolacin porque falta fotograma final
12.
Para visualizar la animacin resultante selecciona

Reproducir o bien Control > Probar Pelcula.
Control
>
120
Nota: El objeto que se anima por interpolacin debe encontrarse solo en

una capa. Es posible animar simultneamente varios objetos sobre el
escenario si se sita cada uno en una capa distinta. Esta es la razn ms
importante que justifica el uso de capas en Flash.
11.4 Interpolacin de movimiento II: la rueda que

gira
En este ejemplo disearemos una animacin en la cual una rueda gira y aumenta de
tamao.
1.
2.
3.
4.
5.
6.
Cuando se abre un archivo de pelcula nueva mediante Archivo >

Nuevo, Flash se sita en la capa actual Capa 1 y en ella sita en la
posicin n 1 un fotograma clave (rectngulo con punto hueco en su
base) a la espera de rellenarlo con alguna imagen.
Arrastra una instancia de un smbolo desde la carpeta Grficos en
Bibliotecas Comunes-Curso: Ventana > Otros paneles > Bibliotecas
comunes > Curso. Por ejemplo el smbolo grfico Rueda. Sitalo en el
centro del escenario.
Crea un segundo fotograma clave donde desees que termine la
animacin. Clic sobre el fotograma n 30, por ejemplo, de esa capa. Una
vez seleccionado elegir la opcin Insertar > Lnea de tiempo >
Fotograma clave o bien clic derecho para seleccionar Insertar
fotograma clave.
Asegrate que est seleccionado el fotograma n 30. Ahora utilizando el
panel Transformar vamos a realizar algunos cambios en esta rueda del
fotograma clave final. Selecciona Ventana > Paneles de diseo >
Transformar.
Activa la casilla Restringir para que el aumento de escala sea
proporcional en altura y anchura.
Introduce el valor 200% en Escala y 180 grados en Girar. Para concluir
pulsa la tecla <enter> y cierra el panel Transformar.
Figura 11.6 Modificacin de la escala y giro de la instancia usando el panel Transformar
121
7.
8.
9.
10.
Clic para volver a seleccionar el fotograma n1 en la lnea de tiempo.

Selecciona Insertar > Lnea de tiempo > Crear interpolacin de
movimiento. Al concluir estas tareas en la capa actual los fotogramas
clave estn indicados por un punto negro mientras que los fotogramas
intermedios muestran una flecha negra sobre fondo azul claro.
Para visualizar la animacin seleccionar Control > Reproducir o bien
Control > Probar Pelcula.
Si deseas modificar algn parmetro de la animacin por interpolacin,
clic sobre el fotograma clave inicial y realiza los cambios oportunos sobre
el Inspector de Propiedades.
Pulsa y arrastra el deslizador de la casilla Aceleracin o introduce un
valor para ajustar la velocidad del giro entre fotogramas interpolados:
Para empezar la interpolacin de movimiento lentamente y acelerar la
interpolacin hacia el final de la animacin, arrastra el deslizador hacia
abajo o introduce un valor entre -1 y -100. (dentro)
Para empezar la interpolacin de movimiento rpidamente y ralentizar la
interpolacin hacia el final de la animacin, arrastre el deslizador hacia
arriba o introduce un valor entre 1 y 100. (fuera)
La velocidad de cambio predeterminada entre los fotogramas interpolados es

constante. La opcin Aceleracin crea una apariencia ms natural de aceleracin o
ralentizacin ajustando gradualmente la velocidad de cambio.
11.
12.
Elige una opcin de la lista desplegable Girar:

Ninguno: Es la configuracin predeterminada. Para no aplicar ninguna
rotacin.
Auto (Automtica): para girar el objeto una vez en la direccin que requiera
el movimiento menor.
Horario o Antihorario (Sentido de las agujas del reloj o sentido contrario):
para girar el objeto como corresponda y luego introduce un nmero en la
casilla veces para especificar el nmero de rotaciones. Por ejemplo 2 veces.
Estas 2 opciones permiten alterar el sentido del giro.
Para visualizar la animacin resultante selecciona Control >
Reproducir o bien Control > Probar Pelcula. A continuacin vamos
a aadir un nuevo movimiento.
122
13.
14.
15.
16.
17.
18.
Clic en fotograma n50 e inserta un fotograma clave mediante Insertar

> Lnea de tiempo > Fotograma Clave
Nota que la rueda aparece seleccionada en este nuevo fotograma clave.
Selecciona Ventana > Paneles de diseo > Transformar.
En el panel Transformar, activa la casilla Restringir para que la
disminucin de escala sea proporcional en altura y anchura.
Restaura el valor 100 en Escala y deja el valor 180 introducido con
anterioridad. Para concluir pulsa la tecla <enter> y cierra el panel
Transformar.
Clic en el fotograma clave situado en el fotograma n 30 e introduce una
interpolacin de movimiento mediante Insertar > Lnea de tiempo >
Crear interpolacin de movimiento.
Para ver la animacin completa selecciona Control > Reproducir o
bien Control > Probar pelcula.
11.5
Interpolacin de cambio de color: el
fantasma
En este ejemplo, disearemos una animacin en la cual un fantasma desaparece o
cambia de color.
Figura 11.8 El punto de registro se sita en el centro del smbolo
1.
2.
3.
Arrastra una instancia de un smbolo desde Bibliotecas Comunes-Curso:

Ventana > Otros paneles > Bibliotecas comunes > Curso >
Grficos. Por ejemplo el smbolo grfico Fantasma. Sitalo en el centro
del escenario.
Crea un segundo fotograma clave donde desees que termine la
animacin. Clic sobre el fotograma n 30, por ejemplo, de esa capa. Una
vez seleccionado elegir la opcin Insertar > Lnea de tiempo >
Fotograma clave o bien clic derecho para seleccionar Insertar
fotograma clave. Advierte que este fotograma est seleccionado. En el
Inspector de Propiedades aparece la informacin relativa al
Fotograma seleccionado.
Haz clic sobre la instancia del fantasma en el fotograma n30. El
Inspector de propiedades ahora muestra la informacin de la
instancia seleccionada y no del fotograma.
123
Figura 11.9 Inspector de propiedades de la instancia del objeto seleccionado
4.
5.
6.
En el men desplegable Color selecciona la opcin Alfa .Pincha y

arrastra el deslizador hasta el 0% . Nota que el fantasma se ha hecho
invisible. Otro efecto distinto puede ser con la opcin Tinta, 50% y tinta
de color rojo.
Clic para volver a seleccionar el fotograma inicial en la Lnea de Tiempo.
Selecciona Insertar > Lnea de tiempo > Crear interpolacin de
movimiento.
Para visualizar la animacin seleccionar Control > Reproducir o bien
Control > Probar Pelcula.
11.6 Animaciones fotograma a fotograma

En la animacin fotograma a fotograma se cambia el contenido del escenario en
cada fotograma. Es idneo para las animaciones complejas en las que la imagen cambia
en cada fotograma adems de moverse. Este tipo de animacin genera archivos ms
grandes que por interpolacin.
Figura 11.10 Smbolo dance01
1.
2.
Arrastra una instancia del smbolo dance01 desde la carpeta

Grficos/Baile en Ventana > Otros paneles > Bibliotecas
comunes > Curso hasta el escenario.
Con la instancia de dance1 seleccionada en el escenario, introduce 50
como valores en las casillas X e Y del Inspector de propiedades. De
esta forma este elemento se situar en un mismo sitio del escenario.
124
Figura 11.11 Sita con precisin el objeto introduciendo las coordenadas X e Y
3.
4.
Clic en el siguiente fotograma hacia la derecha de la misma capa.

Selecciona Insertar > Lnea de tiempo > Fotograma clave vaco o
bien clic derecho sobre el fotograma para seleccionar la opcin Insertar
fotograma clave vaco en el men contextual. Repite los pasos 1 y 2
para ir insertando en cada nuevo fotograma clave un nuevo smbolo de
la carpeta Baile: dance02, dance03, etc. hasta crear el movimiento
completo.
Para visualizar la animacin completa seleccionar Control >
Figura 11.12 Detalle de la lnea de tiempo de una animacin fotograma a fotograma
11.7 Interpolacin de movimiento utilizando capa

gua
Las capas de gua de movimiento permiten dibujar trazados no visibles al usuario
a lo largo de los cuales se mueven objetos en el escenario. Se pueden vincular varias
capas a una capa de gua de movimiento para hacer que varios objetos sigan el mismo
trazado. Al vincular una capa normal a una capa de gua de movimiento se convierte en
un tipo de capa con gua.
1.
2.
Doble clic sobre el nombre de la Capa 1 para cambiar su nombre: Escribe

Fondo y luego pulsa <enter>
Abre la Biblioteca comn Curso: Ventana > Otros paneles >
Bibliotecas comunes> Curso. Desde la carpeta Grficos , arrastra
una instancia del smbolo colmena hasta el borde izquierdo del
escenario y una instancia del smbolo flor hasta el extremo derecho.
125
Figura 11.13 Botn Insertar capa en la base de la Lnea de Tiempo
3.
4.
Aade una nueva capa siguiendo uno de estos mtodos:

Clic derecho sobre el nombre de la Capa Fondo y seleccionar Insertar
capa en el men contextual
Clic en el botn Nueva Capa en la esquina inferior derecha de la Lnea
de tiempo.
Insertar > Lnea de tiempo > Capa
Doble clic sobre el nombre de la Capa 2 para cambiar su nombre: Escribe
Abeja y luego pulsa <enter>. Arrastra una instancia del smbolo Abeja
hasta el centro del escenario en esta capa.
Figura 11.14 Situacin de la colmena y la flor en el ejercicio
5.
6.
7.
8.
En la capa Abeja crea un fotograma clave en la posicin n 30. Clic en

este fotograma y seleccionar Insertar > Lnea de tiempo >
Fotograma clave.
En la capa Fondo crea un fotograma en la posicin n30. Clic en este
fotograma y seleccionar Insertar > Lnea de tiempo > Fotograma.
Clic para seleccionar el fotograma 1 de la capa Abeja. Selecciona la
herramienta Flecha, pincha y arrastra la abeja para situarla sobre la flor.
Clic para seleccionar el fotograma 30 de la capa Abeja. Selecciona la
herramienta Flecha, pincha y arrastra la abeja para situarla sobre la
colmena.
126
Figura 11.15 Botn Aadir gua de movimiento
9.
Para crear una capa gua asociada a la capa "Abeja", puedes optar por
uno de los siguientes procedimientos:
Selecciona la capa que contiene la animacin y eliges Insertar > Gua
de movimiento
Clic con el botn derecho del ratn en la capa que contiene la animacin
y elige Aadir Gua de Movimiento en el men contextual que se
despliega.
Clic en el botn Aadir gua de movimiento
Flash crea una nueva capa sobre la seleccionada con el icono de gua de movimiento
a la izquierda del nombre de la capa.
10.
11.
Selecciona el fotograma 1 de la capa gua. Utilizando la herramienta

Lpiz dibuja una trayectoria curva desde la flor a la colmena. Elige
previamente la opcin Suavizar del Lpiz en la caja de herramientas
para conseguir bordes ms suaves en la trayectoria dibujada.
En la capa Abeja haz clic sobre el fotograma 1. Selecciona la
herramienta Flecha, clic en la abeja y haz clic en el modificador Ajustar
a objetos.
Figura 11.16 Modificador Ajustar a objetos de la herramienta Flecha
12.
13.
Arrastra el smbolo por su punto de registro hasta ajustar el centro del

smbolo animado al comienzo de la lnea en este primer fotograma.
Repite esta operacin para ajustar el centro del smbolo al final de la
lnea en el ltimo fotograma de la capa Abeja. El centro del smbolo
adquiere la apariencia de un anillo negro cuando est correctamente
ajustado.
127
Figura 11.17 Aspecto de anillo negro que toma el punto de registro del objeto
Nota: La operacin de enganchar el objeto con el principio y final de la

trayectoria requiere bastante pericia con el ratn. A veces el anillo negro no
se consigue ver porque no se arrastra el objeto precisamente por su punto
de registro. Si tienes bien cogido el objeto, observa cmo ste efecta un
pequeo saltito, como si fuese un imn, para pegarse al acercarlo a la lnea
trayectoria. Esto es un indicio de que la operacin se ha realizado con xito.
14.
15.
16.
Crea una secuencia de animacin interpolada de movimiento mediante:

Selecciona el fotograma n 1 de la capa Abeja y a continuacin clic
derecho y Crear interpolacin de movimiento o bien Insertar >
Lnea de tiempo > Crear interpolacin de movimiento.
En el Inspector de Propiedades activa la casilla Orientar segn
trazado para que la lnea base del smbolo interpolado se oriente hacia
el trazado de movimiento. Activa tambin la casilla Ajustar, para que el
punto de registro del elemento interpolado se ajuste al trazado de
movimiento.
Para visualizar la animacin completa selecciona Control > Reproducir
o bien Control > Probar Pelcula.
Figura 11.18 Visualizacin con papel cebolla de la animacin resultante
128
Nota: Se recomienda seguir el orden sugerido en este apartado para el

diseo con capas gua. Puedes realizar otro ejercicio similar utilizando el
smbolo autoloco en la carpeta Grficos o bien el smbolo avin en la
carpeta Clips de pelcula de la biblioteca comn Curso.
11.8 Papel Cebolla

Por defecto, Flash slo muestra en el escenario el fotograma de la Lnea de Tiempo
sobre el que est situado la cabeza lectora. Sin embargo es posible ver varios fotogramas
de una animacin en el escenario de forma simultnea utilizando la edicin con papel
cebolla.
Con la animacin del vuelo de la abeja diseada en el apartado anterior, puedes
experimentar las distintas opciones de visualizacin utilizando el papel cebolla:
Figura 11.19 Botones para controlar la visualizacin de la animacin con Papel Cebolla
1.
2.
3.
4.
Clic en el botn Papel cebolla de la lnea de tiempo. Todos los

fotogramas entre los marcadores de Inicio y Fin de Papel Cebolla (en el
encabezado de la lnea de tiempo) aparecern superpuestos en el
escenario. El fotograma situado bajo el cabezal de lectura aparece en
color normal mientras que los fotogramas anteriores y posteriores
aparecen atenuados.
Para ver los fotogramas de papel cebolla como contornos, haz clic en el
botn Contornos de papel cebolla.
Para cambiar la posicin de los marcadores de Inicio y Fin de Papel
Cebolla, arrastra el puntero correspondiente hasta una nueva posicin.
Los marcadores se mueven de forma conjunta cuando se desplaza la
cabeza lectora.
Si deseas editar todos los fotogramas situados entre los marcadores de
papel cebolla, haz clic previamente en el botn Editar varios
129
5.
fotogramas. Si la capa est bloqueada no se mostrar en el escenario

al hacer clic sobre el botn Papel cebolla.
Para cambiar los marcadores de papel cebolla, hacer clic en el botn
Modificar marcadores de papel cebolla y selecciona una opcin en
la lista que se despliega:
Siempre mostrar los marcadores: Muestra los marcadores en el
encabezado de la lnea de tiempo, est activada o no la opcin Papel
cebolla.
Definir papel transparente: con esta opcin se anclan los marcadores
de papel cebolla de tal forma que no se desplazan en conjunto cuando lo
hace el puntero sobre el fotograma actual.
Papel cebolla 2, 5 o todo: Muestra 2, 5 o todos los fotogramas a cada
lado del fotograma actual.
Figura 11.20 Opciones de los marcadores de Papel Cebolla
130
1.9 Interpolacin de cambio de forma I: del

crculo al cuadrado
Flash puede realizar por interpolacin la animacin de una silueta que cambia de
forma en el transcurso del tiempo.
Figura 11.21 Inspector de propiedades de la forma crculo
1.
2.
3.
4.
5.
6.
7.
Crea la imagen del primer fotograma de la secuencia. Para crear la

forma, utiliza una de las herramientas de dibujo. Traza, por ejemplo, un
crculo con relleno.
Doble clic sobre el crculo para seleccionar su trazo y su relleno. En el
Inspector de propiedades define los siguientes parmetros: An
(anchura) 100 y de Al (altura) 100 y situado en la posicin X e Y
(200,200) del escenario.
Crea otro fotograma clave a una distancia de tantos fotogramas hacia la
derecha como desees agregar: Insertar > Lnea de tiempo >
Fotograma Clave Vaco en la posicin n 20, por ejemplo.
Crea la imagen del ltimo fotograma de la secuencia. Puede ser otra
imagen distinta, por ejemplo, un cuadrado con relleno. Tambin puede
ser la imagen original pero modificada.
Doble clic sobre el cuadrado para seleccionar su trazo y su relleno. En el
Inspector de propiedades puedes definir los siguientes parmetros:
anchura 100 y de altura 100 y situado en la posicin (200,200) del
escenario. Con ello se consigue que la silueta cambie de forma pero que
no desplace su posicin sobre el escenario.
Clic para seleccionar el primer fotograma clave.
En la lista desplegable Animar selecciona la opcin de interpolacin
Forma. Observa que al realizar esta seleccin en la lnea de tiempo la
interpolacin de forma aparece representada por una flecha del
fotograma inicial al final sobre fondo verde claro.
131
Figura 11.22 Representacin de la animacin de cambio de forma por interpolacin
8.
9.
Ajusta el valor en la casilla Aceleracin.

Elige una opcin para Mezcla:
Distributivo: crea una animacin con formas intermedias suaves y
regulares.
Angular: crea una animacin que mantiene las esquinas y lneas rectas
en las formas intermedias.
Figura 11.23 En el Inspector de propiedades del fotograma inicial se pueden configurar parmetros de la
animacin por interpolacin: aceleracin, mezcla, etc.
10.
Para visualizar la animacin completa seleccionar

Control
>
11.10 Interpolacin de cambio de forma II: del

uno al dos
1.
2.
3.
4.
5.
6.
Crea la imagen del primer fotograma de la secuencia: Selecciona la

herramienta Texto; en el Inspector de propiedades define un tamao
de fuente de 120 puntos y sita un "1" en el centro del escenario.
Flash no puede cambiar la forma mediante interpolacin de grupos,
smbolos, bloques de texto ni imgenes de mapas de bits. Es necesario
transformar estos objetos en simples formas en el escenario. Selecciona
la herramienta Flecha y a continuacin haz clic sobre el cuadro de texto
que contiene el "1"
Selecciona Modificar > Separar. Observa que tras realizar esta
operacin el Inspector de propiedades indica que se trata de una
forma y no ya un cuadro de texto.
Ajusta su posicin al punto (200,200) del escenario, introduciendo estos
valores en las casillas X e Y del Inspector de propiedades.
Crea otro fotograma clave a una distancia de tantos fotogramas hacia la
derecha como desees agregar: Insertar > Lnea de tiempo >
Fotograma Clave Vaco en la posicin n 20
Sobre este fotograma repite los pasos anteriores del 1 al 4 para situar un
"2"
132
7.
8.
9.
10.
Clic para seleccionar el primer fotograma clave.

En la lista desplegable Animar selecciona la opcin de interpolacin
Forma.
Ajusta el valor en la casilla de Aceleracin.
Elige una opcin para Mezcla:
Distributivo: crea una animacin con formas intermedias suaves y
regulares.
Angular: crea una animacin que mantiene las esquinas y lneas rectas
en las formas intermedias.
11.
Para visualizar la animacin completa seleccionar

Control
>
11.11 Capas Mscara

Una capa mscara es un tipo de capa donde los elementos que contiene: formas,
instancias de smbolos, etc definen reas o agujeros a travs de los cuales es visible el
contenido de la capa situada debajo.
Las formas y smbolos de una capa mscara admiten animacin. Por ello las capas
mscara se suelen utilizar para obtener el efecto de foco y de transiciones. Vamos a
disear una animacin que muestre un efecto de foco luminoso sobre la palabra
Bienvenidos.
1.
Mediante Modificar > Documento despliega el cuadro de dilogo

Propiedades del documento. En el men desplegable Color de
fondo selecciona el color negro.
133
Figura 11.25 Configuracin de las propiedades de la pelcula
2.
3.
4.
5.
6.
7.
8.
9.
10.
Selecciona la herramienta Texto. En el Inspector de propiedades

define como Color de relleno de caracteres el color blanco y como
tamao de la fuente 60 puntos. Clic en el centro del escenario y escribe
Bienvenidos .
Elige la herramienta Flecha, pincha y arrastra este cuadro de texto para
situarlo en el centro del escenario.
Con la capa seleccionada, elige Insertar > Lnea de tiempo > Capa
para crear una capa nueva encima. Esta nueva capa ser la mscara.
Haz clic derecho sobre el nombre de la capa de mscara en la Lnea de
Tiempo y elige Mscara en el men contextual. La capa se convierte en
una capa de mscara, sealada por un icono de capa mscara. La capa
situada inmediatamente debajo est vinculada a la capa de mscara y se
muestra su contenido a travs del rea rellena en la mscara. El nombre
de capa de mscara aparece con sangra y su icono cambia.
Desbloquea la capa mscara antes de editarla.
En la capa mscara, dibuja un crculo seleccionando previamente la
herramienta valo. Una capa de mscara siempre cubre la capa situada
debajo, por tanto asegrate de crear la capa de mscara en el lugar
correcto. Puedes dibujar una forma rellena, colocar un texto o crear una
instancia de un smbolo en la capa de mscara. Flash ignora los mapas
de bits, degradados, transparencias, colores y estilos de lnea en una
capa de mscara. Todas las reas rellenas de una mscara son
transparentes; y las reas no rellenas son opacas
Selecciona la herramienta Flecha y haz doble clic sobre el valo
dibujado. A continuacin selecciona Modificar > Convertir en
smbolo . En el cuadro de dilogo Convertir en smbolo define como
nombre del smbolo: Foco y como comportamiento Grfico. Clic en
Aceptar. La animacin de movimiento por interpolacin slo se puede
aplicar a instancias de smbolos luego es necesario convertir este forma
circular sobre el escenario en un smbolo.
Arrastra este nuevo smbolo para situarlo a la izquierda y a la misma
altura del rtulo que dice Bienvenidos.
Desbloquea la capa que contiene el rtulo de texto y para que el texto se
visualice hasta el fotograma n 20, clic sobre este fotograma en esta
134
11.
12.
13.
capa y selecciona Insertar > Lnea de tiempo > Fotograma (no es

necesario insertar un fotograma clave puesto que el contenido en esta
capa no cambia).
Ahora vamos a crear por interpolacin la animacin de movimiento del
foco. Mediante Insertar > Lnea de tiempo > Fotograma Clave,
crea un fotograma clave en el fotograma n 20 de la capa mscara. Clic
sobre este fotograma. Una vez situado en l desplazar la instancia del
Foco al lado derecho del rtulo Bienvenidos manteniendo su altura.
Clic derecho sobre el fotograma 1 de la capa mscara y selecciona Crear
interpolacin de movimiento. Con esta operacin hemos dotado de
movimiento por interpolacin a la instancia foco dentro de la capa
mscara.
Control > Probar pelcula para comprobar el efecto foco diseado.
Figura 11.26 Aspecto final de la lnea de tiempo y el escenario en este ejercicio
Nota: Puedes dotar al foco de una animacin de aumento de tamao

para simular la apertura del foco sobre este rtulo luminoso.
11.12 Clips de pelcula

Los smbolos de clips de pelculas son piezas de animacin reutilizables que tienen
su propia lnea de tiempo de varios fotogramas que se reproducen independientemente de
la lnea de tiempo de la pelcula principal. Un clip de pelcula es como una minipelcula
dentro de una pelcula.
1.
Selecciona Insertar > Nuevo Smbolo. Teclea vuelo como nombre

y activa el botn de radio Clip de pelcula como comportamiento. Clic
en Aceptar.
135
2.
3.
4.
5.
6.
Entras en el modo edicin del smbolo. Utilizando su particular lnea de

tiempo, crea una animacin por interpolacin como la del vuelo de
guila, por ejemplo. Para probar la animacin debes utilizar Control >
Reproducir.
Clic en el nombre Escena 1 para regresar a la pelcula principal.
Pincha y arrastra desde la biblioteca al escenario, el clip de pelcula
vuelo.
A continuacin selecciona Control > Probar pelcula.
Advierte que la pelcula principal slo tiene un fotograma pero que el clip
de pelcula vuelo est reproducindose indefinidamente con
independencia de la lnea de tiempo principal.
136

Cap133 Flas cs6 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Cap133 Flas cs6 PDF

Cargado por

Copyright:

Formatos disponibles

CAPTULO 11: ANIMACIONES

ara crear animacin en una pelcula Flash, se modifica el contenido de

En la animacin fotograma a fotograma, el diseador crea la

11.2 La lnea de tiempo

Mediante Archivo > Abrir busca y selecciona el archivo natura.fla.

Diseo Flash de recursos web y multimedia para la enseanza

CAPTULO 11: ANIMACIONES

Figura 11.1 La lnea de tiempo

La informacin de estado de la Lnea de tiempo situada en la parte

Un fotograma clave es un tipo de fotograma en el que el diseador dibuja la

11.3 Interpolacin de movimiento I : el vuelo de un

Diseo Flash de recursos web y multimedia para la enseanza

CAPTULO 11: ANIMACIONES

Figura 11.2 Simbolo del guila sobre el escenario.

En este ejemplo vamos a disear el vuelo de un guila.

Cuando se abre un archivo de pelcula nueva mediante Archivo >

Diseo Flash de recursos web y multimedia para la enseanza

CAPTULO 11: ANIMACIONES

Figura 11.3 Inspector de propiedades del fotograma inicial

Activa la casilla Escalar para interpolar el cambio de tamao del

La velocidad de cambio predeterminada entre los fotogramas interpolados es

Al concluir estas tareas en la capa actual los fotogramas clave estn

Si se elimina el fotograma clave final esta flecha se transforma en una lnea

Figura 11.5 No hay interpolacin porque falta fotograma final

Para visualizar la animacin resultante selecciona

Diseo Flash de recursos web y multimedia para la enseanza

CAPTULO 11: ANIMACIONES

Nota: El objeto que se anima por interpolacin debe encontrarse solo en

11.4 Interpolacin de movimiento II: la rueda que

Cuando se abre un archivo de pelcula nueva mediante Archivo >

Figura 11.6 Modificacin de la escala y giro de la instancia usando el panel Transformar

Diseo Flash de recursos web y multimedia para la enseanza

CAPTULO 11: ANIMACIONES

Clic para volver a seleccionar el fotograma n1 en la lnea de tiempo.

La velocidad de cambio predeterminada entre los fotogramas interpolados es

Figura 11.7 Inspector de propiedades del fotograma inicial

Elige una opcin de la lista desplegable Girar:

Diseo Flash de recursos web y multimedia para la enseanza

CAPTULO 11: ANIMACIONES

Clic en fotograma n50 e inserta un fotograma clave mediante Insertar

Figura 11.8 El punto de registro se sita en el centro del smbolo

Arrastra una instancia de un smbolo desde Bibliotecas Comunes-Curso:

Diseo Flash de recursos web y multimedia para la enseanza

CAPTULO 11: ANIMACIONES

Figura 11.9 Inspector de propiedades de la instancia del objeto seleccionado

En el men desplegable Color selecciona la opcin Alfa .Pincha y

11.6 Animaciones fotograma a fotograma

Figura 11.10 Smbolo dance01

Arrastra una instancia del smbolo dance01 desde la carpeta

Diseo Flash de recursos web y multimedia para la enseanza

CAPTULO 11: ANIMACIONES

Figura 11.11 Sita con precisin el objeto introduciendo las coordenadas X e Y

Clic en el siguiente fotograma hacia la derecha de la misma capa.

Figura 11.12 Detalle de la lnea de tiempo de una animacin fotograma a fotograma

11.7 Interpolacin de movimiento utilizando capa

Doble clic sobre el nombre de la Capa 1 para cambiar su nombre: Escribe

Diseo Flash de recursos web y multimedia para la enseanza

CAPTULO 11: ANIMACIONES

Figura 11.13 Botn Insertar capa en la base de la Lnea de Tiempo

Aade una nueva capa siguiendo uno de estos mtodos:

Figura 11.14 Situacin de la colmena y la flor en el ejercicio

En la capa Abeja crea un fotograma clave en la posicin n 30. Clic en

Diseo Flash de recursos web y multimedia para la enseanza