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

Post on 24-Jan-2016

221 views 0 download

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

Prof. Licdo. Miguel A. Pirela C.

Animacion Interactividad

Flash

Web o escritorio RIA

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

Tipo de Barra de menu Barra de menu espacio de

trabajo

Linea de tiempo

Herramientas de diseno y

dibujo

Panel de Escenario propiedades

(cambia segun seleccion

Herramientas Seleccion Subseleccion

Rotacion 3D Transformacion

Lazo Texto

Pluma Rectangulo

Linea Pincel

Lapiz Cubo pintura Herramienta Deco Borrador

Hueso Zoom

Cuentagotas Color trazo

Mano Color relleno

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

• 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

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

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.

Proyecto 4: Formas propuestas • Disene lo siguiente:

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

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

• 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

• 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

• 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.

• Bloque la capa «Parque»

• Inserte una nueva capa llamada «tronco» y dibuje con la herramienta pincel, color marron.

• Aplique relleno

• Aplique pincel para crear una nueva area en el arbol que anada profundidad

• Utilice la herramienta borrador para borrar la zona innecesaria

• 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

• 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»

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

• Hacer clic en herramienta transformacion de degradado

• Cambiar el centro del relleno

Cambia el ancho del

relleno

Indica el centro del Cambia la

relleno altura del relleno

Gira el relleno

• Mover la capa cielo al primer nivel

Proyecto 6: Mariposa • Bloquear las capas del

trabajo anterior • Insertar nueva capa

«mariposa» • Ir a propiedades de

herramienta Polystar y aplicar las siguientes propiedades.

• Dibuje el triangulo y aplique las siguientes modificaciones.

• Duplique la figura y aplique voltear horizontalmente

• Aplique relleno degradado

• 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

• Dibuje el cuerpo de las mariposa, sus antenas.

• Con la herramienta zoom y seleccion realice los ajustes.

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

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»

• 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

• 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