ANIMACIONESANIMACIONES

FLASHFLASH

APLICACIONESAPLICACIONES

PROFESOR:

ing. Fabián Guerrero Medina

ALUMNO:

Nubia Gómez Albitres

ENTORNO DE TRABAJO DE FLASH:

TIPOS DE ANIMACIONESTIPOS DE ANIMACIONESEN FLASHEN FLASH

TIPOS DE ANIMACIONES:

En Flash existen tres tipos de animación:fotograma a fotograma interpolación de movimiento interpolación de forma

A.-En la animación fotograma a fotograma : (frame by frame) debemos dibujar cada uno de los fotogramas de la animación uno por uno, al estilo de las clásicas películas de dibujos animados. Permite una gran flexibilidad, pero a costa de un elevado esfuerzo. Además, el archivo debe almacenar los cambios de cada fotograma.

B.-La animación por interpolación: consiste en crear dos objetos diferentes, cada uno de ellos en fotogramas claves no contiguos, y hacer que Flash dibuje automáticamente los pasos intermedios. En este caso, el archivo sólo almacena los estados inicial y final. Esta a su vez puede serLa animación por interpolación de movimiento; (motion tween) es que la debemos elegir cuando los objetos de los dos fotogramas claves sólo se diferencian en su posición, escala o rotación.

La animación por interpolación de forma; (shape tween) ese diferencia en que gradúa el cambio de la forma del objeto, realizada a través de la manipulación de sus puntos de control bezier. También permite cambiar el color.

 

BOTONESBOTONES

DESCRIPCIONDESCRIPCION

CREACIONCREACION

LINEA DE TIEMPOLINEA DE TIEMPO

FORMASFORMAS

DESCRIPCION Y CREACION DE BOTONES:

Los botones de flash son objetos gráficos a los que podemos asignar diferentes estados (normal, sobre, presionado...) y que cuando los pulsemos (o pasemos por encima), se ejecuten determinadas acciones.

Para crear un botón podemos primero dibujarlo, por ejemplo en el estado de reposo, y después convertirlo en símbolo; para ello, una vez seleccionado, elegimos el menú: "Insertar-Convertir en símbolo". Debemos escribirle un nombre, y elegir el comportamiento de Botón.

De esta forma ya tenemos transformado el objeto para que se comporte como un botón. Ahora lo completaremos internamente.

Los botones tienen su propia línea de tiempos. Esta es independiente pero, sin embargo, esta formada únicamente por cuatro fotogramas, uno para cada estado posible del botón.

Up (Reposo). Aspecto por defecto del botón, es decir, cuando el puntero del ratón no está situado sobre él.

Over (Sobre). Aspecto del botón cuando situamos el puntero sobre él. 

Down (Presionado). Apariencia que deseamos tenga nuestro botón mientras lo mantengamos pulsado.

Hit (Zona activa). Aquí debemos indicar el área real en la que queremos que actúe nuestro botón. Esto es importante sobre todo en botones compuestos sólo por texto como veremos más adelante.

Los botones pueden contener a su vez otros símbolos, como clips o gráficos (también de tipo Bitmap). La unión de las posibilidades de todos los símbolos dota a los botones de gran espectacularidad .

Para determinar cómo debe reaccionar el botón en función de las acciones del ratón, lo editaremos haciendo click con el botón derecho del ratón sobre nuestro nuevo botón y seleccionando la opción Edit.

Cuando tengamos delante la línea de tiempos del botón (observa que tiene el aspecto que hemos mostrado anteriormente), seleccionaremos cada uno de los frames (Up, Over, Down y Hit) y pulsaremos F6 para crear un fotograma clave en cada uno de ellos.

Los botones son símbolos que pueden tener multitud de formas. Si bien lo más habitual es ver botones rectangulares, cuadrados y circulares, cuya creación es inmediata, también hay otros muchos tipos de botones que, entre estos están los creados mediante formas poligonales, aquellos que están formados por texto únicamente, dibujos con diferentes motivos, botones en relieve, etc. Es interesante su uso para dar más vistosidad ya que algunos resultan más expresivos, y en esto Flash nos ayuda mucho, debido a la relativa sencillez de creación de botones que sus herramientas de dibujo nos ofrece.

.

GUIA DE MOVIMIENTOGUIA DE MOVIMIENTO

DESCRIPCION DESCRIPCION

CREACIONCREACION

Guía de movimiento: Si ya disponemos de las imágenes claves que

definen la animación. En una animación por interpolación con trayectoria, una guía de movimiento puede ser cualquier línea -curva, recta o con cualquier otra forma-, que describa el "camino"

que se quiere siga el objeto en la animación. Esta trayectoria se logra mediante una capa especial llamada guía de movimiento que es una capa que contiene una línea sobre la cual podemos colocar nuestros objetos de manera a que dicho objeto se mueva de una posición a otra respetando la trayectoria definida por esta línea.

Creación de guía de movimiento:

1º. Tener, previamente realizada, una interpolación de movimiento.

2º. Seleccionar la opción del menú INSERTAR > GUÍA DE MOVIMIENTO ó botón inferior añade guía de movimiento

Automáticamente, Flash añade una nueva capa en la Línea de Tiempo justo encima de la que tiene la animación interpolada.

Capa de guia

3º. En esta nueva capa, crear la línea -curva, recta o con cualquier otra forma- que hará las veces de guía, (utilizando el lápiz y/o cualquiera de las herramientas de dibujo)

(Un extremo de la línea marcará el punto de partida y el extremo contrario será el punto de destino para el elemento animado)

4º. Seleccionar el elemento, o imagen, en el fotograma origen y ajustarlo (circulito) al extremo inicial de la guía.

(Para facilitar el proceso de "ajuste" es preferible tener activada la opción del menú VER > AJUSTAR A OBJETO)

5º. Seleccionar el elemento, o imagen, en el fotograma destino y ajustarlo (circulito) al otro extremo de la guía.

6º. Para comprobar visualmente el resultado de la animación, se puede utilizar la opción de pulsar Intro(no olvidar, para visualizarlo mejor, desactivar el icono de mostrar capa),

o la del menú CONTROL > PROBAR

Ejemplos de guía de movimiento :

ANIMACION CON CAPAS ANIMACION CON CAPAS MASCARASMASCARAS

DESCRIPCION DESCRIPCION

CREACIONCREACION

Con la Animación con Capas Máscara, cualquier forma que dibujemos en la capa máscara, será la forma a través de las que se muestre el contenido de las capas enmascaradas

En otras palabras, quedará visible sólo lo que quede dentro de esta forma - a modo de agujero a través del cual se puedan ver las capas situadas por debajo-. e invisible lo que quede fuera

Creación de capas de máscara

(con la capa activada) hacer clic con botón izquierdo sobre ella y elegir máscara.

1. Dibujamos -o escribimos- en el escenario la imagen -o el texto- que queremos sea mostrado a través de la máscara (p.e: el texto: "Realización Multimedia") e identificamos esta capa (p.e.: "texto", o "RealMulti", o similar)

2. Insertar una nueva capa, por encima de la del texto (la identificamos como "máscara")

3. En la capa máscara dibujar el objeto máscara través del cual queremos que se muestre el contenido de la capa texto "realización multimedia" (por ejemplo un círculo ovalado que rellenamos de color rojo), y lo agrupamos (modificar>agrupar).

4. Situamos el objeto máscara dibujado en el punto inicial de la trayectoria a seguir. (p.e.: parte izquierda del escenario sin que tape al texto)

5. En la Línea de Tiempo colocamos un fotograma clave (F6) en el final de la trayectoria (fotograma 25), del objeto máscara (que hemos agrupado), y otro en el mismo fotograma de la capa del texto (fotograma 25).

6. En el fotograma final de la capa "máscara" (fotograma 25), disponemos al objeto máscara en la situación final de su trayectoria.

7.En la misma capa "máscara" volvemos al primer fotograma para Interpolar el movimiento del objeto máscara

8.Transformamos la capa "máscara" que, hasta el momento es una capa normal (que en el ejemplo tiene el texto: "Realización Multimedia") en una capa máscara.

Transformación de una capa normal a una capa máscara

1. Clic con el botón derecho del ratón sobre el nombre de la capa a transformar (que en el ejemplo tiene el círculo ovalado rojo, esto es el "objeto máscara") y escoger la opción "máscara".

Observamos: - como la capa "máscara" obtiene, delante de su

nombre, un icono cuadrado negro con un círculo azul en su interior

- como la capa "texto:RealMulti" obtiene, delante de su nombre, un icono cuadrado azul con una esquina medio doblada y se coloca ligeramente deslazada hacia el interior indicando su dependencia de la "capa máscara".

Por último Pulsar Intro - o la opción del menú CONTROL > PROBAR PELÍCULA- para ver el resultado

Diferentes estados de un texto con capa mascara con forma cilíndrica

*Después de hacer esto se puede animar una capa máscara con un trazado de movimiento determinado (guía de movimiento).

Para hacer un hipervinculo primero debes crear un boton, pasa hacerlo estos son los paso :

1.Selecciona una imagen o crea una figura. (circulo, cuadrado, etc)

2.Presiona F8, despues elije boton y da clic en Aceptar

3.Selecciona de nuevo el boton y presiona F9, te saldra un cuadro, debes copiar este texto:

on (release) {getURL("http://www.google.com", "_blank");}

Nota: Debes de cambiar la URL por la que gustes.

CREACION DE HIPERVINCULOS:

Dale click al objeto o capa que quieres que tenga el vinculo y despues en acciones le das doble click a geturl, ahi ingresas el vinculo y debajo el destino.