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