Introducción a la creación de animaciones con Flash

1. Flash

2. El entorno de trabajo

3. Caja de Herramientas

4. Dibujar formas geométricas
Líneas Óvalos Rectángulos

5. Actividad 1
Elije y reproduce 3 de los siguientes dibujos:

6. Herramientas de dibujo
Lápiz Pincel Cubo Pluma
Borrador

7. Herramientas de selección
Flecha negra Lazo Flecha blanca
Selección Modificación de
contorno
Desplazamiento

8. Actividad 2
Dibuja tres polígonos regulares y deformalos para
obtener algo parecido a ésto:

9. Herramientas de transformación
Transformación libre
Escalar
Estirar
Sesgar
Rotar
Distorsión

10. Alineación de objetos
Ventana > Alinear

11. La biblioteca
Propia del archivo Importar biblioteca
Archivo > Importar >
Abrir biblioteca externa
Bibliotecas comunes
Ventana > Bibliotecas comunes

12. Actividad 3
Abre el archivo actividad3.fla
Inserta, escala, alinea, coloca,... los símbolos
para obtener algo
parecido a:

13. Capas
Organización de capas en carpetas

14. Actividad 4
Abre el archivo actividad4.fla
Inserta y coloca capas, importa, escala,... símbolos
de la biblioteca y obtén un “acuario”:

15. Animaciones
La línea del tiempo

16. Crear fotogramas
Insertar > Línea de tiempo > Fotograma (F5)
Fotograma clave (F6)
Fotograma clave vacío
(F7)

17. Actividad 5
Abre el archivo actividad4.fla (el del acuario)
Inserta fotogramas clave (F6) en la capa de los
peces para moverlos por el escenario
Inserta fotogramas
(F5) en las otras
capas para tener
el fondo

18. Interpolación de movimiento
Basta con tener el primer y el último fotograma
El programa crea y adapta los fotogramas intermedios
El objeto que se mueva debe estar solo en la capa

19. Actividad 6
Abre el archivo actividad6.fla
Crea un fotograma clave vacío (F7) al principio de
la línea de tiempo e inserta el símbolo del águila
Inserta un fotograma clave
(F6) en la posición 30 y
mueve y escala el águila
Crea la interpolación
Cuida:

20. Guía de movimiento
Con la capa del objeto ya creada
Fotogramas inicial y final del movimiento
Crear capa guía
Dibujar la línea por donde se moverá el objeto
Colocar la posición inicial sobre la línea
Colocar la posición final sobre la línea

21. Actividad 7
Abre el archivo actividad7.fla
Crea capas para la colmena y la flor y para la abeja
Inserta fotogramas para las
posiciones inicial y final de
la abeja
Crea la capa guía, dibuja la
trayectoria y coloca la abeja
Crea la
interpolación
Cuida:

22. Interpolación de forma
Basta con tener la primera y la última formas
El programa crea y adapta los fotogramas intermedios
El objeto que se deforme debe estar solo en la capa
Si acaso no funciona, pulsa sobre el objeto en el primer
fotograma y en el último con el botón derecho y
selecciona Separar

23. Actividad 8
Crea un fotograma clave vacío (F7) en posición 20
Crea la interpolación de movimiento y transfórmala
en interpolación de forma
Dibuja un círculo en el
fotograma inicial y un cuadrado
en el fotograma 20
Cuida:

24. Símbolos
Gráfico
Clip de película
Botón

25. Símbolo: Gráfico

Imagen estática

Al crear el gráfico aparece en la biblioteca

Cada vez que se inserte el gráfico en el escenario
tenemos una instancia del mismo

26. Símbolo: Clip de película

Es una animación con sus capas y fotogramas

27. Actividad 9
• Crea un Clip de película con dos capas, una llamada
cuerpo y otra llamada brazo
• En la capa cuerpo dibuja el cuerpo de un muñeco
• En la capa brazo crea fotogramas para animar el
movimiento de un brazo

Cierra el Clip

Inserta dos instancias del Clip

28. Símbolo: Botón

Cuatro estados

Se asocian con acciones sobre la película

29. Actividad 10
Abre el archivo actividad7.fla (el de la abeja)
Crea una capa para botones de control
Abre Ventana > Bibliotecas comunes > Botones
Inserta dos botones
Asocia la acción on (release) { stop (); } a uno
Asocia la acción play ();
al otro

30. Mover objetos
Coordenadas cartesianas
Posición:
instancia._x
instancia._y
(Propiedades > Nombre de
Instancia)
Debe aparecer como Clip de
película
Punto de enganche:
(Ventana >Información)

31. Actividad 11: Práctica de movimiento
Abre el archivo actividad7.fla e inserta una instancia
de la abeja en el fotograma
En panel Propiedades, dale nombre abejita
Inserta cuatro botones y asígnales acciones:
on (release) {
abejita._y = abejita._y - 1;
}

32. Actividad 11: Práctica de movimiento
Abre el archivo actividad7.fla e inserta una instancia
de la abeja en el fotograma
En panel Propiedades, dale nombre abejita
Inserta cuatro botones y asígnales acciones:
on (release) {
abejita._y = abejita._y - 1;
} ._y =._y - 1
._x =._x- 1 ._x =._x+ 1
._y =._y+ 1

33. Movimiento con el teclado
Elimina los botones y crea una capa de Acciones
Crea un fotograma clave vacío (F7) en el fotograma 2
Escribe en el primer fotograma las acciones para
mover la abejita con el teclado:
onEnterFrame = function(){
if(Key.isDown(Key.UP))
{abejita._y=abejita._y-1 ; }
}
Key.UP
Key.LEFT Key.RIGHT
Key.DOWN

34. Girar objetos
Orientación por ángulos sexagesimales
Ángulo:
instancia._rotation
Centro de giro:
(Ventana >Información)

35. Práctica 13: Giro
Abre el archivo actividad7.fla e inserta una instancia
de la abeja en el fotograma
En panel Propiedades, dale nombre abejita
Inserta dos botones y asígnales acciones:
on (release) on (release)
{abejita._rotation- = 1;} {abejita._rotation+ = 1;}

36. Movimientos
elTanque.fla
http://www.redribera.es/formacion/tutoriales

37. Movimiento del tanque

Orientación: Ángulo
ángulo

Posición del punto de anclaje:
x = x 0 + vX * t
y = y 0 + vY * t

Vector velocidad:
vX = v * sen (ángulo)
vY = v * cos (ángulo)
(ángulo en radianes)

38. Práctica 14: El coche

39. Práctica 14: El coche

Insertar > Nuevo símbolo > Gráfico

Dibujar un “coche”

Insertar una instancia en el escenario

Ponerle nombre, por ejemplo car

40. Práctica 14: El coche

Definir variables: Importante:
var velocidadx;
var vel = 5 ;
var velocidady;
var giro = 2 ;
var angulo;

Imponer que se verifique al cargar el fotograma:
onEnterFrame = function () {

Calcular ángulo y velocidades:
angulo = car._rotation*Math.PI/180;
velocidadx = vel*Math.sin(angulo);
velocidady = vel*Math.cos (angulo);

41. Práctica 14: El coche

Funciones de movimiento combinado:
if(Key.isDown(Key.RIGHT) && Key.isDown(Key.UP)){
car._rotation = car._rotation + giro;
}

Funciones de movimiento puro:
if(Key.isDown(Key.UP)){
car._x + = car._x + velocidadx;
car._y = car._y - velocidady;
}

42. FIN
José Ramón López 2009