Flash

FLASH
Sesin 1: Introduccin a Adobe Flash Animacin

Flash

ndice
Interfaz grfica Animacin Frame By Frame Animacin de Forma Animacin de Movimiento Animacin de Mscara Animacin de Gua Animacin por ActionScript Publicar
2

Flash

Interfaz grfica

Flash

Crear una pelicula Archivo / Nuevo. Creamos una nueva pelicula y le indicamos que es una pelicula con ActionScript 2.0 Guardamos la pelicula y as tendremos un archivo .fla. El archivo fuente.

Flash

Configuracin de la pelicula Modificar / Documento. Donde podemos cambiar el tamao de nuestra pelicula y Escenario, el color de fondo y la velocidad de los fotogramas a la que se reproducir la pelicula.

Flash

Configuracin de la pelicula 24 fps es la velocidad a la que ve el ojo humano y es una buena velocidad para crear nuestras peliculas, menos fotogramas dara sensacin de error y ms simplemente ir ms rpido.

Flash

Bestpractice En Flash con ActionScript 2 se puede programar acciones en 3 lugares: en la lnea de tiempo (recomendable), sobre el botn y sobre el movieclip. Como bestpractice toda la programacin la juntaremos sobre la linea de tiempo y crearemos una capa para dicha programacin que llamaremos script. En esta capa de script tambin pondremos las etiquetas o nombres de los fotogramas. La capa se suele poner arriba de todas las capas.

Flash

Tipos de fotogramas

Flash

Animacin Fotograma por Fotograma Animacin tradicional en la cual se dibujaba cada uno de los pasos de la animacin. Creamos un fotograma clave para cada paso de la animacin.

Flash

Animacin de Forma Paso 1. Creamos un crculo con la herramienta de Crear circunferencias en un fotograma clave (el origen). Paso 2. Despus unos fotogramas ms tarde creamos un fotograma clave con F6 (el destino), eliminamos el circulo y creamos un cuadrado y lo situamos en otra posicin. Paso 3. Nos situamos en el fotograma clave origen y en propiedades le damos animacin de forma (ya que lo que se quiere hacer es una animacin entre dos formas).

10

Flash

Animacin de Forma

11

Flash

Crear un smbolo Para animar ciertos elementos: imgenes, textos, vdeos, etc. necesitamos convertir este tipo de elementos a smbolos. Tambin podemos convertir las formas en smbolos. Los smbolos nos pueden servir tambin como la agrupacin de varios elementos bsicos. Podemos crear los simbolos en Insertar / Nuevo Simbolo o Modificar / Convertir a Simbolo (F8)

12

Flash

Tipos de smbolos Clip de pelcula (MovieClip): Una pelcula pequea dentro de otra pelicula, posee su propia lnea de tiempo que se reproduce de forma independiente al que le contenga. Botn: Smbolo que funciona como un botn de estados para hacer interacciones con el usuario. Grfico: Agrupacin de elementos para hacer ms sencillas las lneas de tiempo.

13

Flash

Biblioteca Cada documento de Flash tiene su propia biblioteca de smbolos. Todos los smbolos que se utilizan en esa pelcula, se pueden organizar por carpetas y con nombres. Se pueden compartir bibliotecas entre simbolos. Si en la pelicula se utiliza ms de una vez el mismo smbolo el peso de la pelcula no se multiplica por las veces que aparece. Es decir si una imgen pesa 50 KB y la utilizamos 3 veces, la pelicula solo incrementa su peso en 50 KB.

14

Flash

Animacin de Movimiento Paso 1. Creamos una forma y la convertimos a simbolo mediante el panel Modificar / Convertir a smbolo o F8. Paso 2. Creamos un fotograma clave de origen, posicion inicial del Simbolo. Paso 3. Despus unos fotogramas ms tarde creamos un fotograma clave (destino), moviendo el simbolo y cambindole su propiedad de alpha en propiedades. Paso 4. Nos situamos en el fotograma clave origen y en propiedades le damos animacin de movimiento
15

Flash

Animacin de Movimiento

16

Flash

Animacin de Mscara

Botn derecho sobre la capa: marcar como mscara

17

Flash

Animacin de Gua

Botn derecho sobre la capa: marcar como gua

Hay que anclar centros: la linea con el centro del movieclip

18

Flash

Animacin de ActionScript Se realiza creando un movieclip y dandole nombre de instancia en este caso pelota_mc. Luego en la linea de tiempo se pone el siguiente cdigo.

import mx.transitions.Tween; import mx.transitions.easing.*; var animacion:Tween = new Tween(pelota_mc, "_x", Strong.easeOut, pelota_mc._x, 100, 34, false);

19

Flash

Publicar Ir a Archivo / Configuracin de la publicacin... Exportar en ejecutables para PC y MAC Tambin como pgina web. GENERA UN .SWF que es el compilado y el que se sube a internet
20

Flash

Publicar en HTML <object classid="clsid:D27CDB6E-AE6D-11cf-96B8444553540000" codebase="http://download.macromedia.com/pub/shockwave/c abs/flash/swflash.cab#version=6,0,29,0" width="650" height="480"> <param name="movie" value="web.swf"> <param name="quality" value="high"> <embed src="web.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="650" height="480"></embed> </object>
21

Flash

Algunos parmetros: <param name="movie" value="fla/sesion91.swf"> <param name="quality" value="high"> <param name=menu value=false> <param name=bgcolor value=#FFFFFF> <param name=wmode value=transparent> Utilizar la clase opensource de javascript SWFObject. Comprueba versin flash instalada, navegador web, autoinstalador...

22