FLASH

1

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 FormaConsejos 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

2

animación de un objeto además de determinar los cambios en el formato, sino 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

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

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

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

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

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

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

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

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

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 lo mismo en el fotograma 10, presione ENTER y vera el cambio.

12

Haga clic aquí.

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

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

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

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

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

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

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

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

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

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