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

31
Prof. Licdo. Miguel A. Pirela C.

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

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

Prof. Licdo. Miguel A. Pirela C.

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

Animacion Interactividad

Flash

Web o escritorio RIA

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

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

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

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

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

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

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

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

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

• 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

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

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

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

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.

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

Proyecto 4: Formas propuestas • Disene lo siguiente:

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

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

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

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

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

• 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

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

• 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

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

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

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

• Bloque la capa «Parque»

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

• Aplique relleno

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

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

• Utilice la herramienta borrador para borrar la zona innecesaria

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

• 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

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

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

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

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

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

• Hacer clic en herramienta transformacion de degradado

• Cambiar el centro del relleno

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

Cambia el ancho del

relleno

Indica el centro del Cambia la

relleno altura del relleno

Gira el relleno

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

• Mover la capa cielo al primer nivel

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

Proyecto 6: Mariposa • Bloquear las capas del

trabajo anterior • Insertar nueva capa

«mariposa» • Ir a propiedades de

herramienta Polystar y aplicar las siguientes propiedades.

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

• Dibuje el triangulo y aplique las siguientes modificaciones.

• Duplique la figura y aplique voltear horizontalmente

• Aplique relleno degradado

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

• 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

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

• Dibuje el cuerpo de las mariposa, sus antenas.

• Con la herramienta zoom y seleccion realice los ajustes.

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

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

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

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»

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

• 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

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

• 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