Para crear una animación se muestran sucesivamente fotogramas que
contienen elementos diferentes. Flash ofrece dos maneras de crear secuencias
de animación:
Fotograma a fotograma. Para
ello es necesario crear la imagen de cada fotograma.
Por interpolación.
En este caso sólo se crea los fotogramas inicial y final. Flash genera
automáticamente los fotogramas intermedios. Esta es una forma eficaz
de crear movimiento y cambios a lo largo del tiempo. Además se reduce
el tamaño del archivo.
9.2 La línea de tiempo
Controla el contenido de una película a través del tiempo. Los
componentes principales a considerar en la Línea de tiempo son las capas,
los fotogramas y la cabeza
lectora.
Los documentos de Flash dividen el tiempo en fotogramas.
Podemos considerar las capas como bandas de película apiladas unas sobre
otras. Cada una de ellas contiene una imagen diferente que aparece en el escenario
A la izquierda puede ver las capas (1).
A la derecha del nombre de la capa puede ver los números (2)
de los fotogramas. La cabeza lectora (3)
indica el fotograma actual que se muestra en el escenario. Mientras se reproduce
el documento de Flash, la cabeza lectora se desplaza de izquierda a derecha
de la línea de tiempo.
En la parte inferior de la línea de tiempo se indica el número
del fotograma seleccionado (4),
la velocidad de fotogramas actual (5)
y el tiempo transcurrido hasta el fotograma actual (6).
La animación utiliza algunos fotogramas como referencia. Estos fotogramas
se denominan fotogramas clave (7).
Aparecen en la línea de tiempo con una marca en forma de círculo
hueco si están
vacíos. Si el fotograma clave tiene contenido se indica con un punto
negro . Cuando
se crea un documento siempre aparece un primer fotograma clave vacío
.
En la animación interpolada (8),
se definen fotogramas clave en puntos importantes y Flash genera automáticamente
el contenido de los intermedios.
La sección de capas de la línea de tiempo tiene controles para
mostrar u ocultar y bloquear o desbloquear capas. La columna que aparece debajo
del ojo se utiliza
para ocultar
o mostrar y
la que hay debajo del candado para bloquear
o desbloquear .
9.3 Animación
por interpolación
Colocamos una imagen sobre el escenario en un fotograma clave inicial. Se inserta
un fotograma clave final, por ejemplo en la posición 30. Se cambia la
posición del objeto y su tamaño, forma, color, etc. Flash genera
una secuencia de transición de un estado a otro.
9.4 Ejercicio (Animación
de un círculo por interpolación)
En esta práctica verá que para conseguir animaciones por interpolación
debe convertir las imágenes en símbolos
y utilizar instancias de esos símbolos.
Cree un nuevo documento flash. En la parte superior del escenario, a la
derecha, tiene una lista desplegable. Probablemente la lista indique
para el aspecto del escenario. Seleccione .
Observe además, que en la línea de tiempo aparece un fotograma
clave vacío
en la posición 1.
Seleccione la herramienta Óvalo .
Seleccione sin trazo
y relleno multicolor .
Arriba y a la izquierda del escenario dibuje un círculo de 120 de ancho.
Para poder reutilizar el círculo, es
necesario convertirlo en símbolo. Con la herramienta
selección ,
haga clic en el círculo del escenario para seleccionarlo. Elija Modificar
> Convertir en símbolo. Para el nombre del símbolo,
utilice la palabra círculo.
Para el comportamiento seleccione Clip de
película.
Seleccione el centro de la rejilla . Haga
clic en Aceptar. El nuevo símbolo
aparece en el panel Biblioteca. En el escenario, una especie de cruz rodeada
de una circunferencia
indica que el objeto es una instancia de un
símbolo. Las instancias son como apuntadores a la
imagen de la biblioteca y le sirve al programa para mostrar la imagen almacenada
en la biblioteca.
Un fotograma clave
es un fotograma en el que se cambia de manera explícita alguna propiedad
de un objeto. Insertaremos En la línea de tiempo, un fotograma clave
y en él, cambiaremos la ubicación del círculo.
Haga clic en el fotograma 60 en la línea de tiempo. Seleccione Insertar
> Línea de tiempo > Fotograma clave. Observe
que Flash añade fotogramas normales hasta el 59 incluído y
el 60 es en cambio un fotograma clave. Concretamente, tiene el fotograma
1 que es clave, los fotogramas del 2 al 59 que son fotogramas normales
y el fotograma 60 que es un fotograma clave y todos rellenos con instancias
al círculo multicolor que dibujó.
Asegúrese de tener seleccionado el fotograma 60, para ello no hga
clic en la banda del cabezal de lectura sino
en la banda de fotogramas .
En lo sucesivo no confunda la cabeza lectora con
el fotograma . Sitúe
el puntero sobre la instancia del círculo y cuando adopte la forma
de cuatro puntas de flecha,
pinche y arrastre el círculo a la izquierda del escenario y hacia
abajo.
Si selecciona los fotogramas anteriores al 60 verá que contienen
el círculo en la posición de partida, mientras que el 60 muestra
el círculo en la nueva posición.
Seleccione le fotograma 60, . Haga clic en la herramienta transformación
. Reduzca
el tamaño del círculo.
Seleccione el fotograma 1.
En el inspector de propiedades, seleccione Movimiento
en el menú emergente Animar.
En la línea de tiempo aparece una flecha entre los fotogramas 1 y 60
para indicar que hay definida una interpolación de movimiento.
En la línea de tiempo, arrastre la cabeza lectora roja
hacia adelante y hacia atrás desde el fotograma 1 al 60 para previsualizar
la animación.
Seleccione el fotograma 1. En el inspector de propiedades, seleccione Aceleración
70. Esto hará que el movimiento sea más rápido al principio
y que vaya disminuyendo la velocidad conforme se aleja el círculo.
Una aceleración negativa hace exactamente lo contrario, es decir, el
movimiento va de lento a rápido.
Seleccione Giro Horario. De
esa forma la trnsición del círculo se adornará con un
giro simultáneo.
Seleccione Archivo > Guardar. Guarde en una carpeta SimpleFlash y asigne
el nombre SimpleFlash.fla.
Seleccione Control > Probar película.
Si ve el movimiento como a saltos, debe aumentar el número de fotogramas
por segundo. Haga doble clic en la parte inferior de la línea de tiempo
en la casilla fps. En la ventana
de diálogo coloque 24 fps. Pruebe de nuevo la película.
Cierre la ventana de prueba.
Haga clic en Control > Reproducir.
Esta forma de probar, muestra el desplazamiento de la cabeza lectora a través
de la línea de tiempo.
9.5 Ejercicio (Publicación
de una película)
Utilice la animación SimpleFlash.fla creada en el ejercicio anterior.
La animación .fla la puede modificar utilizando el programa FLASH.
Es necesario pasarla a otro formato para verla en un navegador de internet.
Publicar la animación es pasarla un formato que pueda reconocer un
navegador.
Al publicar un archivo FLA, se comprime
en el formato de archivo SWF, que es el formato que
se aplica a una página Web. El comando Publicar
puede generar de forma automática un archivo HTML con las etiquetas
necesarias.
Antes de publicar hay que configurar la publicación. Seleccione
Archivo > Configuración de publicación.
En el cuadro de diálogo, seleccione la ficha Formatos y compruebe
que sólo están activadas las opciones HTML y Flash. Con esta
acción, Flash sólo publicará el archivo SWF y un archivo
HTML. El archivo HTML se utiliza para mostrar el archivo SWF en un navegador
Web.
Seleccione la ficha HTML y compruebe que en el menú emergente Plantilla
aparece seleccionado Sólo Flash.
Esta plantilla crea un archivo HTML simple que contiene sólo el archivo
SWF cuando se muestra en una ventana del navegador. Haga clic en Aceptar.
Elija Archivo > Publicar.
Abra su navegador Web. En el navegador Web, seleccione Archivo > Abrir.
Desplácese a la carpeta en la que ha guardado el archivo FLA. Allí
se encuentran los archivos SimpleFlash.swf y SimpleFlash.html. Estos archivos
los creó Flash cuando hizo clic en Publicar. Seleccione el archivo
denominado SimpleFlash.html. Haga clic en Abrir. El documento de Flash se
muestra en la ventana del navegador.
9.6
Ejercicio Animación por interpolación (Utilizando una biblioteca
externa)
Recuerde que en esta práctica debe utilizar la opción Archivo
> Importar para utilizar una biblioteca externa (no abra
el archivo directamente).
Como sabe una biblioteca es un archivo .fla que contiene símbolos.
Bájese el archivo de biblioteca curso.fla
y guárdelo en una carpeta Biblioteca
Flash. Puede importar símbolos a su documento desde
una biblioteca externa para utilizarlos en sus documentos mediante Archivo
> Importar > Abrir biblioteca externa.
Si la biblioteca Curso.fla la guarda en C:\Archivos de programa\Macromedia\Flash
8\es\Configuration\Libraries, aparecerá en la opción del menú
Ventana > Bibliotecas comunes y la puede utilizar a través de esta
opción del menú.
Cree un nuevo documento Flash, vacío.
Haga clic en Archivo > Importar > Abrir
biblioteca externa. Navegue en la ventana
de diálogo y localice la biblioteca curso.fla para utilizarla como
biblioteca externa.
Pinche el símbolo águila y arrástrelo a su documento.
Verá como aparece una instancia de ese símbolo en el escenario
al mismo tiempo que se incorpora a la biblioteca del documento. Ya puede cerrar
la biblioteca externa que sólo sirvió para importar el símbolo.
Haga una animación de 60 fotogramas, que vaya desde la esquina inferior
izquierda del escenario a la superior derecha, con reducción del tamaño
y de la velocidad.
Guarde la animación con el nombre aguila.fla.
9.7 Ejercicio. Animación en dos capas
El objeto que se anima por interpolación debe encontrarse solo en una
capa. Es posible animar simultáneamente varios objetos sobre el escenario
si se sitúa cada uno en una capa distinta. Esta es la razón más
importante que justifica el uso de capas en Flash.
Utilice la animación aguila.fla del ejercicio anterior.
Haga clic en el botón Insertar capa
que aparece en la parte inferior de la línea de tiempo. En la línea
de tiempo aparece una nueva banda asociada a la capa 2 con un fotograma
clave 1 y fotogramas normales hasta el 60. Oculte la capa 1.
Seleccione la capa 2 y el fotograma 1. Inserte en el escenario una instancia
del símbolo águila en la esquina superior izquierda.
Con la herramienta transformación ,
gire el pájaro para que mire hacia abajo.
Seleccione el fotograma 60. Haga clic en Insertar
> Línea de tiempo > Fotograma clave. Arrastre
el pájaro hasta la esquina inferior derecha y reduzca su tamaño.
Seleccione el fotograma 1 y ajuste una animación por movimiento.
Haga visible la capa 1 y pruebe el vuelo de los dos pájaros.
Guarde el archivo con el nombre DobleAguila.fla.
9.8 Ejercicio. Mostrar una imagen paulatinamente
La animación por interpolación se puede utilizar para mostrar
una imagen de forma gradual.
Bájese el archivo de biblioteca asturias.fla
y guárdelo en una carpeta Biblioteca
Flash.
Cree un nuevo documento. Ponga color de fondo negro.
Haga clic en Archivo > Importar > Abrir
biblioteca externa y utilice la biblioteca externa asturias.fla.
Importe el símbolo fondo
(pinche y arrastre el símbolo al escenario). En el escenario verá
un paisaje. Cierre la biblioteca externa.
Cambie el tamaño de la imagen para que llene el escenario por completo.
Inserte un fotograma clave en la posición 25.
Seleccione el fotograma 1. Seleccione la imagen y ponga Color Alfa 0%. Como
sabe Alfa establece el grado de transparencia de una imagen. Al ser 0%, verá
el fotograma 1 en negro.
Haga clic en Animar y seleccione Movimiento.
Pruebe la película. Verá aparecer el paisaje lentamente.
Cree una carpeta paisaje y guarde en ella el documento con el nombre paisaje.fla.