Prof. Licdo. Miguel A. Pirela C.. AnimacionInteractividad Flash Web o escritorioRIA.

Presentación del tema: "Prof. Licdo. Miguel A. Pirela C.. AnimacionInteractividad Flash Web o escritorioRIA."— Transcripción de la presentación:

1 Prof. Licdo. Miguel A. Pirela C.

2 AnimacionInteractividad Flash Web o escritorioRIA

3 Tipos de Archivo Es el archivo editable del programa FLA Es el archivo en forma SWF de pelicula que se subira a internet Es el archivo no comprimido, en XFL estructura de carpetas

4 Tipo de Barra de menu espacio de trabajo Linea de tiempo Herramientas de diseno y dibujo Panel de Escenario propiedades (cambia segun seleccion

5 Herramientas SeleccionSubseleccion Rotacion 3D Transformacion Lazo Texto Pluma Rectangulo Linea Pincel Lapiz Cubo pintura Herramienta Deco Borrador Hueso Zoom Cuentagotas Color trazo Mano Color relleno

6 Proyecto 1: Cubo Seleccionar la herramienta rectangulo Elegir trazo negro con altura 2, tipo solido y relleno rojo Mantener presionada la tecla Shift Trazar el cuadrado Duplique la figura y mover a nueva posicion

7 Use la herramienta linea y complete los lados del cubo Elimine la linea pequena y cambie el color rojo por un tono mas claro Elimine las linea del cubo y listo

8 Proyecto 2: Texto 3D Escriba el texto flash, fuente bauhaus, tamano 91, azul claro Duplicar y cambiar de color Enviar al fondo el texto duplicado negro, realizar el ajuste necesario

9 Proyecto 3: Boton sombra Traze el circulo sin trazo Duplique la figura, cambie el color y agrupe Agrupe el primer circulo Enviar al fondo el segundo Notese que para evitar la combinacion de las figuras es necesario agrupar.

10 Proyecto 4: Formas propuestas Disene lo siguiente:

11 Proyecto 5: Paisaje Definir propiedades del documento: Clic en herramienta seleccion y definir el tamano del escenario en 600 x 500, 12 fps, color de escenario celeste

12 Clic en la herramienta rectangulo. Definir las propiedades en el panel de propiedades

13 Trazar el rectangulo en el escenario. Hacer clic en la linea de tiempo y observar que aparece un punto negro lo cual significa que la imagen esta ocupando un fotograma y se encuentra en la capa 1

14 Realizar la siguiente modificacion: Poner el cursor en la esquina superior izquierda y modificar, poner el cursor en el borde y crear curva Eliminar el trazo: hacer doble clic en el contorno y suprimir

15 Utilice la herramienta pincel para dibujar un cesped de un color verde mas oscuro. Aplique ahora la herramienta cubo de pintura, notese como se aplica a la nueva area.

16 Bloque la capa «Parque» Inserte una nueva capa llamada «tronco» y dibuje con la herramienta pincel, color marron. Aplique relleno

17 Aplique pincel para crear una nueva area en el arbol que anada profundidad Utilice la herramienta borrador para borrar la zona innecesaria

18 Anade la capa «copa» y dibuje esta parte del arbol con la herramienta pincel Con el pincel anada una nueva area con un verde mas claro para aplicar profundidad

19 Mueva la capa «copa» al segundo nivel. Vamos a crear un cielo con degradado Anadir la capa cielo y dibujar un rectangulo Ajustar al escenario usando la herramienta «alinear»

20 Opciones Ir al panel de color, de color seleccionar degradado radial Ir al panel de color y aplicar al primer selector blanco y al segundo celeste Selector de color

21 Hacer clic en herramienta transformacion de degradado Cambiar el centro del relleno

22 Cambia el ancho del relleno Indica el centro del Cambia la relleno altura del relleno Gira el relleno

23 Mover la capa cielo al primer nivel

24 Proyecto 6: Mariposa Bloquear las capas del trabajo anterior Insertar nueva capa «mariposa» Ir a propiedades de herramienta Polystar y aplicar las siguientes propiedades.

25 Dibuje el triangulo y aplique las siguientes modificaciones. Duplique la figura y aplique voltear horizontalmente Aplique relleno degradado

26 Para las alas inferiores dibuje un ovalo y aplique la siguiente modificacion. Repita el procedimiento de duplicar. Aplique color solido. Acomode la posicion de las figuras

27 Dibuje el cuerpo de las mariposa, sus antenas. Con la herramienta zoom y seleccion realice los ajustes.

28 Elimine los contornos y trazos, agrupe la figura y modificar su apariencia y tamano.

29 Proyecto 7: Mariposa volando Vamos a realizar una animacion fotograma a fotograma. Abrir el proyecto 6.fla En linea de tiempo ir al fotograma de la capa mariposa e insertar e insertar 10 «fotograma clave» Notese que las demas capas de la animacion solo tienen un fotograma, por ello ir al fotograma 10, boton derecho «insertar fotograma»

30 Cambiamos la configuracion los fps a 10, lo cual significa que la 10 fotogramas se reproduciran en 1 segundo. Ir a ver y mostrar reglas Luego mostrar guias

31 En cada fotograma clave cambiar de posicion, giro y acercar al arbol Probar pelicula Finalmente exportar como pelicula.swf y como.gif animado Luego ir a «Vista previa de publicacion», HTML