Tutorial Nº10 Introducción a Flash Taller de diseño y ... · 1º Crear una capa nueva con el...

Tutorial Nº10_Introducción a Flash Taller de diseño y Aplicaciones Web

Carrera: Diseño GráficoMódulo:Taller de diseño y aplicaciones web

Escuela de comunicación_ Instituto Profesional AIEPDocentes:_Verónica Brito_Gustavo Varela_Marcela Rosende

Procedimientos Básicos Flash CS3:-

Interpolación de forma:

En la interpolación de formas, se dibuja una forma en un fotograma específico y se modifica o

se dibuja otra forma en otro fotograma. La interpolación será entonces la fusión de ambas figuras.

Nota: No se puede animar formas con grupos (elementos agrupados), símbolos, textos o

imágenes mapa de bits (constituida por píxeles).

Para aplicar interpolación de formas a grupos, instancias o imágenes de mapas de bits, separe estos

elementos. Para aplicar interpolación de formas a texto, separe el texto dos veces y se convierte en

objeto (modificar>>separar)

Interpolación de movimiento:

Se definen propiedades tales como la posición, el tamaño y la rotación de una instancia, un grupo o

un bloque de texto en un fotograma específico, y estas propiedades se pueden cambiar en otro

fotograma.

Creación de símbolos gráficos:

Un símbolo es un gráfico, botón o clip de película que se crea sólo una vez para la misma figura.

Estos símbolos pueden volver a utilizarse en el mismo o en otros documentos.

Los símbolos pueden incluir ilustraciones importadas de otras aplicaciones. Los símbolos creados

forman parte automáticamente de la biblioteca del documento activo.

Instancias:

Una instancia es una copia de un símbolo ubicada en el escenario o anidada en otro símbolo. Una

instancia puede tener un color, tamaño o función diferente de los de su símbolo. Al editar el símbolo,

se actualizan todas sus instancias, pero al aplicar efectos a una instancia de un símbolo, sólo se

aplica a la instancia en cuestión.

La utilización de símbolos en los documentos reduce el tamaño del archivo de forma considerable;

el almacenamiento de varias instancias de un símbolo requiere menos espacio que el almacenamiento

de varias copias del contenido del símbolo. Por ejemplo, el tamaño de archivo de los documentos

se reduce convirtiendo gráficos estáticos, como imágenes de fondo, en símbolos y volviéndolos a

utilizar. La utilización de símbolos acelera la reproducción de los archivos SWF, ya que éstos tan sólo

deben descargarse una vez en Flash Player.

Uso de máscara:

La animación con propiedad de máscara proporciona un recorte que muestra la capa anterior.

Guía de recorrido:

Permite dibujar manualmente el recorrido de un objeto.

Comenzamos enumerando los pasos a seguir cada vez que se lleva a cabo unaanimación:

1º Crear una capa nueva con el nombre del elemento a animar (la animación no funcionasi tenemos más de un elemento en una sola capa)2º Incorporar el elemento a animar (símbolo o dibujo dependiendo de la animación)3º Crear fotograma clave (función de teclado f6)4º Volver al fotograma 1 y proporcionar tipo de animación (forma o movimiento)5º En fotograma clave cambiar posición y forma.

Nombrar capa Cerrar capa Iniciar fotograma 1 Crear fotogtama clave (f6)




1)Crear archivo nuevo

2) Dimensionar archivo a 400 x 400 px determine color de fondo si así lo desea.

3) Comenzaremos realizando una interpolación de movimiento>Sobre el escenario dibuje un rectángulo

3)Con puntero negro seleccione por arrastre sobre el dibujo>Menu superior > modificar>> convertir en símbolo gráfico (f8)>Nombrar la capa (doble click sobre capa1)




4) Seleccione con puntero sobre fotograma 15 y f6>Puntero nuevamente sobre fotograma 1 y seleccione opción de animación (Movimiento omotion)

5)Pinche sobre fotograma clave en fotograma 15

>Cambie el elemento de posición

> control>> probar película, luego cierre con candado la capa

6) Para interpolar forma:>> Capa nueva llamada forma>>Cursor sobre fotograma 15 y f6 (Crear fotograma clave)>>Sobre fotograma 1 escriba una tipografía a 300 pts, mantenga seleccionada >>modificar>> separar

7)Cursor sobre fotograma 1 y determine tipo de animación>> Animar de forma




7)Luego sobre fotograma 15 dibuje en el escenario un circulo sinconvertir en símbolo oagrupar

9) Tendremos entonces 3 capas con 3 tipos de animación Clip de película, interpolación deforma y de movimiento

8)Arrastre la cabeza del controlador para probar animación.

10)Para crear un clip de película dibujaremos un polígono>>luego convertiremos en simbolográfico(nombre rombo), pues para crear un clip de película con interpolación de movimientodebemos contar con un gráfico




11)Convierta nuevamente en simbolo esta vez clip de película:-rombo_mov(ojo un clip depelícula puede partir en blanco pero el objeto a animar si es interpolación de movimientodebe ser simbolo gráfico)

12)Doble click sobre rombo_mov en escenario o en biblioteca (menu superiror>> ventana>>biblioteca)>>Realice animación de movimiento.

>>Incorpore desde biblioteca en escenario principal.

Verifique ubicación en borde de ventana

13) Mismo procedimiento para construir un nuevo clip de película llamado "rombito_mov""anidado

en Rombo_mov

>> Nuevo gráfico "rombito"con polígono de otro color.

>>Convertir en símbolo gráfico

>>Convertir en clip de película y animar de movimiento (Giro sentido opuesto)




14) Dentro del clip de película rombo_mov cree una nueva capa llamada clip y arrastre

desde bilbioteca rombito_mov y sitúelo en el centro (verifique que es el clip de película)

15) Vuelva a la escena principal

>> Nueva capa llamada clip e inserte desde la biblioteca todas las veces que necesite

rombo_mov que en su interior contiene rombito_mov

>ojo: Rombo mov puede animarse en la escena principal como un simbolo gráfico con

recorrido, para eso debe estar sólo en una capa.

16) Entonces traemos a escenario muchas instacias de rombo_mov




17) MÁSCARA>>

1) Dibuje una figura de fondo a enmascarar

>>En este caso existe un texto estático en una capa independiente

2) Cree una capa nueva con un elemento a interpolar de movimiento ojo: Sobre la capa

estática de texto

3) Sobre la capa superior de movimiento botón derecho y seleccionar " máscara"

4) Ventana>> Control>> Probar película




18) Guía de movimiento

1) Construya una interpolación de movimiento

>> Posicione el cursor sobre la capa de movimiento y pinche ícono de guia de movimiento

>>Sobre la capa nueva dijbuje con lápiz el recorrido a utilizar

>>cursor sobre fotograma 1 en capa de movimiento seleccione el objeto e imante al origende la linea (mismo prodcedimiento al final de la línea)

>> Pinche sobre el fotograma 1 de capa de movimiento y luego seleccione orientar segúntrazado.

Así el objeto cambia de posición según recorrido




Para animación de PEZ:Crear un archivo nuevo de 400 x 400 px.

>> Importar archivo freehand a escenario

>>convertir en simbolo gráfico todos los objetos a animar

>>Para animar el fondo crear interpolación de forma y modificar el ángulo de degradado enfotograma clave.

>>Pez será clip de película

>>Contiene las siguientes capas>>

Según los procedimientos revisados aplique en su animación ejemplo de pez.




>>Mueva aleta y cola

>>Inserte ojo como clip de película anidado

>>para visualizar cada capa seleccione cuadro de color en cada capa que mostrará contenido

en contorno>>

>>Para construir el suelo inserte en la escena principal un clip de película con el movimientode suelo.

>>Agrupe los peces y construya un símbolo gráfico llamado cardumen.

>> interpole de movimiento y añada guia de movimiento sobre capa de cardumen




>>Las burbujas funcionarán como clip de película

>>El aumento en el ojo del pollito es una máscara donde la animación sencilla de un círculomuestra un pollo aculto de mayor tamaño.

>> Para versiones anteriores a CS3 >> archivo exportar movie>> como swf

fin

Tutorial Nº10 Introducción a Flash Taller de diseño y ... · 1º Crear una capa nueva con el...

Documents

Transcript of Tutorial Nº10 Introducción a Flash Taller de diseño y ... · 1º Crear una capa nueva con el...