Elaboracion de animaciones con el programa flash, realizacion y elafboracion

1. FLASH
1

2. Contenido
 Animación de objetos
 Animación Frame por Frame (Fotograma por
Fotograma)
 Animación por Interpolación de Movimiento
 Animación por Guía de Movimiento
 Animación de Forma
 Consejos de Forma
Animación de Objetos
La animación es el punto principal del trabajo con Flash y con cualquier
aplicación de animación multimedia, es por eso que vamos a darle mayor
importancia a todo lo relativo a la animación de objetos y las diferentes formas
que tenemos para lograr ese efecto especial que hemos visto en alguna pagina
Web. Pero primero lo primero, hay que definir como se realiza la animación en
Flash.
Hay que tener en cuenta que flash trabaja con dos tipo de fotogramas,
recordando que un fotograma es una unidad de tiempo y la velocidad de
reproducción de una película se mide en fotogramas por segundo (fps),
aproximadamente la velocidad promedio es de 12fps. Los tipos de fotogramas
que utiliza Flash son:
Los fotogramas simples.- donde se puede realizar la copia de un objeto o
imagen. Se insertan con la tecla de función F5, o ejemplo cuando queremos
que una imagen se repita lo largo de un cierto intervalo de tiempo hay que
hacer F5 en él ultimo fotograma donde aparecerá este objeto.
Los fotogramas Claves.- también conocidos como Keyframe, es sumamente
importante saber como maneja correctamente estos fotogramas, los
fotogramas claves no solo sirven para poder determinar el punto final de la
animación de un objeto además de determinar los cambios en el formato, sino
2

3. también permite el ingreso de código Action Script que podrá controlar parte de
la película en esa unidad de tiempo. Los Keyframe se insertan con al tecla de
función F6.
Bien ahora que ya conocemos a los personajes que hará posible nuestras
animaciones veamos como hacerlas.
Animación Frame por Frame
Es la más simple y a la vez la más trabajosa de las animaciones debido a que
tenemos que hacer la animación cuadro por cuadro esto requiere de mucha
concentración porque un cambio equivocado podría ocasionar volver a
construir toda la animación. Bien veamos un simple ejemplo, por favor preste
mucha atención y haga los pasos uno por uno.
Primero dibuje un cuadro en la película exactamente como se presenta en la
imagen:
Conviértalo en símbolo del tipo grafico, para mayor comodidad, dele como
nombre “cuadro1”
Ahora haga clic en el fotograma 1 y presione la tecla de función F6, recuerda
que esto hace que se inserte un fotograma clave.
3

4. Una vez en este fotograma vamos a visualizar las reglas para que nos den un
soporte exacto en la animación.
Desde el menú ver haga clic en REGLAS.
Y ahora trace líneas guías tal y como se muestra en la siguiente imagen.
Presione la tecla “Q” para poder transformar la figura. Luego el eje de la figura
ubíquela en el extremo inferior derecho. Tal y como se muestra en la imagen.
Haga un leve giro de la imagen tal y como se muestra en la figura.
4

5. Pase al siguiente fotograma (3) y conviértalo en fotograma clave, haga el giro
correspondiente hasta poner el lado del cuadrado en la base de la línea guía
horizontal.
Repita este proceso hasta el fotograma 5, siempre haciendo que el cuadro
avance hacia la derecha.
Ejecutando la película
Hay dos formas de ejecutar la película, una en el mismo Flash con la
combinación CTRL. + ENTER y la otra desde el navegador de Internet
configurado en su maquina con la tecla de función F12.
Cuando ejecute esta animación se dará cuenta que jamás para, es un movie
loop, generalmente las animaciones de flash no se detienen, en todo caso hay
que utilizar un código de Action Script para detener la animación, pero eso lo
veremos luego.
5

6. Bien ya hemos terminado la primera animación, lamentablemente el papel no
muestra animaciones pero si puede ver la pantalla que aparecerá al ejecutar la
animación.
Animación por Interpolación de movimiento
Esta animación es la más fácil de hacer y de la que va a obtener mejores
resultados debido a que su trabajo se va a limitar a solo establecer la forma de
inicio y final del objeto para ser animado.
Bien primero abramos una nueva película de 400 x 200 píxeles.
Ahora dibuje un círculo.
Conviértalo en símbolo
6

7. Haga clic en el fotograma 10 y presione F6
Esto crea una línea de fotogramas de copia donde el objeto se repite.
Mueva el objeto al extremo derecho de la película.
7

8. Haga clic derecho sobre el fotograma 10 y haga clic en CREAR
INTERPOLACIÓN DE MOVIMIENTO.
Haga lo mismos en el fotograma 1
Podrá ver una flecha negra sobre un fondo azul, indicando que se ha realizado
una animación.
8

9. Otra tercera forma de ejecutar la película es presionando ENTER, vera que la
película corre automáticamente, ahora si presiona CTRL. + ENTER se ejecuta
el reproductor interno de Flash, este es un tipo de animación muy sencillo y
fácil de aprender pero que será la piedra angular en todo su aprendizaje en la
animación multimedia para el Web.
Animación por guía de Movimiento.
Esta animación es relativamente importante si queremos hacer alguna
animación algo especial como por ejemplo para una empresa de transporte o
línea aérea que desea ver el recorrido de sus unidades a través de una
animación para el Web.
Primero abra una nueva película con las mismas dimensiones que la anterior.
Ahora dibuje un círculo.
Haga la interpolación de movimiento correspondiente hasta el fotograma 10
desplazando el objeto hacia la derecha. Tal y como lo hizo con el ejercicio
anterior.
Regrese al fotograma 1 y haga clic derecho sobre la capa.
Haga clic en AGREGAR GUIA DE MOVIMIENTO
9

10. Aparecerá una nueva capa tal y como se muestra en la imagen.
Ahora con la herramienta LAPIZ dibuje una ruta desde el centro del círculo en
el fotograma 1 hasta donde debería terminar la animación en el fotograma 10
Bueno la línea debería ser lo mas curva posible.
Ahora presione ENTER y vera la animación.
10

11. El objeto sigue la línea dibujada con el lápiz como si se tratase de una ruta
establecida.
Modificando la Ruta
Este trámite es fácil, primero haga clic en la herramienta de selección.
Luego pase el puntero sobre la línea y vera que el icono cambia tal y como lo
hizo cuando cambio la forma del dibujo en él capitulo anterior.
Ahora dele la forma que necesita y vera que es fácil.
Bien ahora pasemos al ultimo tipo de animación.
11

12. Animación de Forma
Este tipo de animación permite transformar un objeto en otro, pero si le paso
por su mente él poder transformar formas humanas en animales pues le digo
de un principio que es una tarea mucho más difícil pues en primer lugar estas
formas deben ser dibujadas y no importadas como imágenes, quizá estaba
pensando hacer una broma con algún compañero de trabajo.
Bien comencemos:
Primero abra un nuevo documento con las medidas ya conocidas.
Dibuje un cuadrado en el fotograma 1
Haga clic en el fotograma 10 y presiona F6
Dibuje al extremo derecho un circulo tal y como se muestra en la figura.
Regrese al fotograma 1 y en la barra de propiedades haga clic en ANIMAR, y
luego haga clic en FORMA, tal y como se muestra en la imagen.
Haga clic
aquí.
Haga lo mismo en el fotograma 10, presione ENTER y vera el cambio.
12

13. Ahora vaya al fotograma 10 y elimine el cuadro, esto de hacerlo para que no
quede huella de lo que fue la figura.
Añadiendo consejos de forma
Un consejo de forma es un punto de cambio desde el cual se puede dirigir la
forma de transformación entre una y otra figura.
Eso lo hace de la siguiente manera
Haga clic en el fotograma1 y luego vaya al menú MODIFICAR
Seleccione la opción FORMA y luego haga clic en AÑADIR CONSEJO DE
FORMA, combinación CTRL. + SHIFT + H
Vera un punto rojo con una letra, este es el consejo de forma
13

14. Ahora ubique este punto en el extremo superior derecho del cuadrado tal y
como se ve la siguiente imagen
Vaya al fotograma 10 y ubique el consejo de forma en un extremo del circulo tal
y como se muestra en la imagen.
14

15. Al presionar ENTER vera la animación, pero el objetivo de esto es que pueda
agregar y jugar con los consejos de forma, entonces ahora agregue mas
consejos de forma utilizando la combinación de teclas CTRL. + SHIFt + H y
ubíquelas tal y como se muestra en la siguiente imagen.
Y en el fotograma 10 ubíquelas tal y como se muestra en la siguiente imagen.
15

16. Presione CTRL. + ENTER y vera la animación.
Listo estas son las principales formas de animación, en el siguiente capitulo
veremos otras formas avanzadas de animación y combinando las animaciones
que hemos visto.
16

17.  Manejo de Mascaras
 Animación de Animaciones en Mascaras
Manejo de Mascara de Capas
La Mascara es una útil herramienta que permite visualizar solo una sección de
la imagen o figura que tenemos en la película.
La mascara puede tener diferentes formas, por ejemplo se puede dibujar un
mapa y convertirlo en mascara y dentro de ella tener un Movie Clip como lo
veremos en próximos ejemplos.
Bien pasemos a la creación de mascaras de capas.
Primero dibuje un rectángulo y sobre el una capa con una forma circular tal y
como esta en la imagen.
17

18. La capa2 será la mascara, recuerde que la capa de mascara siempre debe
estar sobre la capa donde se va a aplicar.
Ahora haga clic derecho sobre la capa2 y luego un clic sobre MASCARA y
tendrá el siguiente resultado.
18

19. Como puede ver, la capa1 se ubica dentro de la capa2 como subordinada y
estos a su vez están protegidos para no ser editados.
Editando una mascara de capa
Primero haga clic en cualquiera de los candado de las capas a editar, esto
automáticamente permite que puedan ser modificados sus contenidos. Ya sea
la forma de la capa o sino la capa interior.
Aquí se esta editando la segunda capa, ósea el contenido (EL RECTÁNGULO.
19

20. Y aquí se esta editando la forma de la mascara.
Reestablezca la protección de ambas capas.
Pero veamos como cambiar el dibujo del rectángulo por una imagen cualquiera
para luego animarla.
Primero edite la capa1 (EL RECTÁNGULO.
Elimine el rectángulo. (recuerde seleccionarlo con doble clic)
Importe una imagen cualquiera con dimensiones mayores a las del circulo.
Vuelva a proteger la capa1 y vera solo la zona contenida en el circulo.
20

21. Bien pero nos quedamos aquí, ahora vamos a animar esta imagen.
Combinando la Mascara con un Clip de Película.
Edite la capa1.
Selecciónela y conviértala en un clip de Película.
21

22. Ahora haga doble clic sobre la imagen, esto abrirá al símbolo y podrá crear la
animación.
Haga una animación simple, que la imagen se desplace de derecha a izquierda
con Interpolación de Movimiento.
Regrese a la escena1 y ejecute la película para que vea el resultado.
Es así de fácil como puede combinar una mascara de capa con un movie clip
por ejemplo con un botón.
22