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