Ing. Ing. FabiánFabián Guerrero Guerrero MedinaMedina

PROFESOR:PROFESOR:

ALUMNO:ALUMNO:

Miguel Angel Cari ChampiMiguel Angel Cari Champi

ENTORNO DE TRABAJO DE FLASH:ENTORNO DE TRABAJO DE FLASH:

TIPOS DE ANIMACIONES:TIPOS DE ANIMACIONES:

En Flash existen tres tipos de animación:En Flash existen tres tipos de animación:

Fotograma a fotogramaFotograma a fotograma Interpolación de movimientoInterpolación de movimiento Interpolación de formaInterpolación de forma

LA ANIMACIÓN LA ANIMACIÓN FOTOGRAMA A FOTOGRAMAFOTOGRAMA A FOTOGRAMA : :

(frame by frame) debemos dibujar cada uno de los fotogramas de (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 la animación uno por uno, al estilo de las clásicas películas de dibujos animados.dibujos animados.

Permite una gran flexibilidad, pero a costa de un elevado Permite una gran flexibilidad, pero a costa de un elevado esfuerzo. Además, el archivo debe almacenar los cambios de esfuerzo. Además, el archivo debe almacenar los cambios de cada fotograma.cada fotograma.

LA ANIMACIÓN POR INTERPOLACIÓN: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 ser

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.

La 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.

Para crear un botón podemos primero dibujarlo, por ejemplo en el 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 estado de reposo, y después convertirlo en símbolo; para ello, una vez seleccionado, elegimos el menú: "Insertar-Convertir en símbolo".vez seleccionado, elegimos el menú: "Insertar-Convertir en símbolo".

Debemos escribirle un nombre, y elegir el comportamiento de BotónDebemos escribirle un nombre, y elegir el comportamiento de Botón..

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.

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

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

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

Los botones son símbolos que pueden tener multitud de Los botones son símbolos que pueden tener multitud de formas. formas.

Si bien lo más habitual es ver botones rectangulares, Si bien lo más habitual es ver botones rectangulares, cuadrados y circulares, cuya creación es inmediata, también cuadrados y circulares, cuya creación es inmediata, también hay otros muchos tipos de botones que, entre estos están los hay otros muchos tipos de botones que, entre estos están los creados mediante formas poligonales, aquellos que están creados mediante formas poligonales, aquellos que están formados por texto únicamente, dibujos con diferentes formados por texto únicamente, dibujos con diferentes motivos, botones en relieve, etc. motivos, botones en relieve, etc.

Es interesante su uso para dar más vistosidad ya que algunos Es interesante su uso para dar más vistosidad ya que algunos resultan más expresivos, y en esto Flash nos ayuda mucho, resultan más expresivos, y en esto Flash nos ayuda mucho, debido a la relativa sencillez de creación de botones que sus debido a la relativa sencillez de creación de botones que sus herramientas de dibujo nos ofrece.herramientas de dibujo nos ofrece.

GUÍA DE MOVIMIENTO:GUÍA DE MOVIMIENTO:

CREACIÓN DE GUÍA DE MOVIMIENTO:

• Tener, previamente realizada, una interpolación de movimiento.

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

• 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)

• 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)

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

• 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

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

Ejemplos de guía de movimiento :Ejemplos de guía de movimiento :

Con la Animación con Capas Máscara, cualquier forma que 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 dibujemos en la capa máscara, será la forma a través de las que se muestre el contenido de las capas enmascaradas se muestre el contenido de las capas enmascaradas

En otras palabras, quedará visible sólo lo que quede dentro de 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 esta forma - a modo de agujero a través del cual se puedan ver las capas situadas por debajo-. e invisible lo que quede fueralas 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.

Dibujamos -o escribimos- en el escenario la imagen -o el texto- Dibujamos -o escribimos- en el escenario la imagen -o el texto- que que queremos sea mostrado a través de la máscara (p.e: el texto: queremos sea mostrado a través de la máscara (p.e: el texto:

"Realización Multimedia") e identificamos esta capa (p.e.: "Realización Multimedia") e identificamos esta capa (p.e.: "texto", o "texto", o "RealMulti", o similar)"RealMulti", o similar)

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

En la capa máscara dibujar el objeto máscara través del cual En la capa máscara dibujar el objeto máscara través del cual queremos que se muestre el contenido de la capa texto queremos que se muestre el contenido de la capa texto

"realización "realización multimedia"(por ejemplo un círculo ovalado que multimedia"(por ejemplo un círculo ovalado que rellenamos de color rellenamos de color rojo), y lo agrupamos (modificar>agrupar). rojo), y lo agrupamos (modificar>agrupar).

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

que que tape al texto)tape al texto)

PASOS PARA HACER UN TRABAJO EN FLASH

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

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

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

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

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

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

ObservamosObservamos: :

- - como la capa "máscara" obtiene, delante de su como la capa "máscara" obtiene, delante de su nombre, un icono cuadrado negro con un círculo azul nombre, un icono cuadrado negro con un círculo azul en su interior en su interior

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

- Por último Pulsar Intro - o la opción del menúPor último Pulsar Intro - o la opción del menú

CONTROL > PROBAR PELÍCULA- CONTROL > PROBAR PELÍCULA- para ver el resultadopara ver el resultado

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

1.Selecciona una imagen o crea una figura. (circulo, cuadrado, etc)1.Selecciona una imagen o crea una figura. (circulo, cuadrado, etc)2.Presiona F8, despues elije boton y da clic en Aceptar2.Presiona F8, despues elije boton y da clic en Aceptar

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

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

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

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

CREACION DE HIPERVINCULOS:

VISITEN LA SIGUIENTE PAGINA VISITEN LA SIGUIENTE PAGINA WEB DONDE LES EXPLICARA WEB DONDE LES EXPLICARA TODO DETALLADAMENTE LO QUE TODO DETALLADAMENTE LO QUE SE DESEA APRENDER EN FLASH 8 SE DESEA APRENDER EN FLASH 8 MACROMEDIA:MACROMEDIA:

(HACER CLIC EN LA IMGEN)(HACER CLIC EN LA IMGEN)