Flash
description
Transcript of Flash
Flash
El entorno de trabajo
Caja de Herramientas
Dibujar formas geométricasLíneas Óvalos Rectángulos
Actividad 1Elije y reproduce 3 de los siguientes dibujos:
Herramientas de dibujo
Lápiz Pincel Cubo Pluma
Borrador
Herramientas de selección
Flecha negra Lazo Flecha blanca
Desplazamiento
Selección Modificación de contorno
Actividad 2Dibuja tres polígonos regulares y deformalos para obtener algo parecido a ésto:
Herramientas de transformaciónTransformación libre
Escalar
Estirar
Sesgar
Rotar
Distorsión
Alineación de objetos
Ventana > Alinear
La bibliotecaPropia del archivo Importar biblioteca
Archivo > Importar >Abrir biblioteca externa
Bibliotecas comunes
Ventana > Bibliotecas comunes
Actividad 3Abre el archivo actividad3.flaInserta, escala, alinea, coloca,... los símbolos para obtener algoparecido a:
Capas
Organización de capas en carpetas
Actividad 4Abre el archivo actividad4.flaInserta y coloca capas, importa, escala,... símbolos de la biblioteca y obtén un “acuario”:
AnimacionesLa línea del tiempo
Crear fotogramas
Insertar > Línea de tiempo > Fotograma (F5)
Fotograma clave (F6)
Fotograma clave vacío (F7)
Actividad 5Abre 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 otrascapas para tenerel fondo
Interpolación de movimientoBasta 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
Actividad 6Abre 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 águilaInserta un fotograma clave (F6) en la posición 30 y mueve y escala el águilaCrea la interpolación
Cuida:
Guía de movimientoCon la capa del objeto ya creadaFotogramas inicial y final del movimientoCrear capa guíaDibujar la línea por donde se moverá el objetoColocar la posición inicial sobre la líneaColocar la posición final sobre la línea
Actividad 7Abre el archivo actividad7.flaCrea capas para la colmena y la flor y para la abejaInserta fotogramas para las posiciones inicial y final de la abeja
Crea lainterpolación
Cuida:
Crea la capa guía, dibuja la trayectoria y coloca la abeja
Interpolación de formaBasta 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
Actividad 8Crea 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:
Símbolos
Gráfico
Clip de película
Botón
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
Símbolo: Clip de película
Es una animación con sus capas y fotogramas
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
Símbolo: Botón Cuatro estados
Se asocian con acciones sobre la película
Actividad 10Abre el archivo actividad7.fla (el de la abeja)Crea una capa para botones de control
Abre Ventana > Bibliotecas comunes > Botones
Asocia la acción on (release) { stop (); } a uno
Inserta dos botones
Asocia la acción play ();al otro
Mover objetosCoordenadas cartesianas
Posición:instancia._xinstancia._y
(Propiedades > Nombre deInstancia)
Debe aparecer como Clip de película
Punto de enganche:(Ventana >Información)
Actividad 11: Práctica de movimientoAbre 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;}
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
._y =._y+ 1
._x =._x+ 1._x =._x- 1
Actividad 11: Práctica de movimiento
Movimiento con el tecladoElimina los botones y crea una capa de AccionesCrea un fotograma clave vacío (F7) en el fotograma 2
onEnterFrame = function(){if(Key.isDown(Key.UP)){abejita._y=abejita._y-1 ; }
}
Key.UP
Key.DOWN
Key.LEFT Key.RIGHT
Escribe en el primer fotograma las acciones para mover la abejita con el teclado:
Girar objetosOrientación por ángulos sexagesimales
Ángulo:instancia._rotation
Centro de giro:(Ventana >Información)
Práctica 13: GiroAbre 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) {abejita._rotation- = 1;}
on (release) {abejita._rotation+ = 1;}
Movimientos
http://www.redribera.es/formacion/tutoriales
elTanque.fla
Movimiento del tanque
Posición del punto de anclaje:
x = x0 + vX * t
y = y0 + vY * t
Vector velocidad:
vX = v * sen (ángulo)
vY = v * cos (ángulo)
(ángulo en radianes)
Ángulo Orientación:
ángulo
Práctica 14: El coche
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
Práctica 14: El coche Definir variables:
var velocidadx;
var velocidady;
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);
Importante:
var vel = 5 ;
var giro = 2 ;
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;
}
FIN
José Ramón López 2009