Flash
description
Transcript of Flash
![Page 1: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/1.jpg)
Flash
![Page 2: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/2.jpg)
El entorno de trabajo
![Page 3: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/3.jpg)
Caja de Herramientas
![Page 4: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/4.jpg)
Dibujar formas geométricasLíneas Óvalos Rectángulos
![Page 5: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/5.jpg)
Actividad 1Elije y reproduce 3 de los siguientes dibujos:
![Page 6: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/6.jpg)
Herramientas de dibujo
Lápiz Pincel Cubo Pluma
Borrador
![Page 7: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/7.jpg)
Herramientas de selección
Flecha negra Lazo Flecha blanca
Desplazamiento
Selección Modificación de contorno
![Page 8: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/8.jpg)
Actividad 2Dibuja tres polígonos regulares y deformalos para obtener algo parecido a ésto:
![Page 9: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/9.jpg)
Herramientas de transformaciónTransformación libre
Escalar
Estirar
Sesgar
Rotar
Distorsión
![Page 10: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/10.jpg)
Alineación de objetos
Ventana > Alinear
![Page 11: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/11.jpg)
La bibliotecaPropia del archivo Importar biblioteca
Archivo > Importar >Abrir biblioteca externa
Bibliotecas comunes
Ventana > Bibliotecas comunes
![Page 12: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/12.jpg)
Actividad 3Abre el archivo actividad3.flaInserta, escala, alinea, coloca,... los símbolos para obtener algoparecido a:
![Page 13: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/13.jpg)
Capas
Organización de capas en carpetas
![Page 14: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/14.jpg)
Actividad 4Abre el archivo actividad4.flaInserta y coloca capas, importa, escala,... símbolos de la biblioteca y obtén un “acuario”:
![Page 15: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/15.jpg)
AnimacionesLa línea del tiempo
![Page 16: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/16.jpg)
Crear fotogramas
Insertar > Línea de tiempo > Fotograma (F5)
Fotograma clave (F6)
Fotograma clave vacío (F7)
![Page 17: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/17.jpg)
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
![Page 18: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/18.jpg)
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
![Page 19: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/19.jpg)
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:
![Page 20: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/20.jpg)
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
![Page 21: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/21.jpg)
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
![Page 22: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/22.jpg)
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
![Page 23: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/23.jpg)
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:
![Page 24: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/24.jpg)
Símbolos
Gráfico
Clip de película
Botón
![Page 25: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/25.jpg)
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
![Page 26: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/26.jpg)
Símbolo: Clip de película
Es una animación con sus capas y fotogramas
![Page 27: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/27.jpg)
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
![Page 28: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/28.jpg)
Símbolo: Botón Cuatro estados
Se asocian con acciones sobre la película
![Page 29: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/29.jpg)
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
![Page 30: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/30.jpg)
Mover objetosCoordenadas cartesianas
Posición:instancia._xinstancia._y
(Propiedades > Nombre deInstancia)
Debe aparecer como Clip de película
Punto de enganche:(Ventana >Información)
![Page 31: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/31.jpg)
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;}
![Page 32: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/32.jpg)
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
![Page 33: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/33.jpg)
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:
![Page 34: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/34.jpg)
Girar objetosOrientación por ángulos sexagesimales
Ángulo:instancia._rotation
Centro de giro:(Ventana >Información)
![Page 35: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/35.jpg)
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;}
![Page 36: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/36.jpg)
Movimientos
http://www.redribera.es/formacion/tutoriales
elTanque.fla
![Page 37: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/37.jpg)
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
![Page 38: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/38.jpg)
Práctica 14: El coche
![Page 39: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/39.jpg)
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
![Page 40: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/40.jpg)
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 ;
![Page 41: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/41.jpg)
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;
}
![Page 42: Flash](https://reader036.fdocuments.co/reader036/viewer/2022062405/557b854dd8b42aff318b56cb/html5/thumbnails/42.jpg)
FIN
José Ramón López 2009