![Page 1: Prof. Licdo. Miguel A. Pirela C.. AnimacionInteractividad Flash Web o escritorioRIA](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/1.jpg)
Prof. Licdo. Miguel A. Pirela C.
![Page 2: Prof. Licdo. Miguel A. Pirela C.. AnimacionInteractividad Flash Web o escritorioRIA](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/2.jpg)
Animacion Interactividad
Flash
Web o escritorio RIA
![Page 3: Prof. Licdo. Miguel A. Pirela C.. AnimacionInteractividad Flash Web o escritorioRIA](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/3.jpg)
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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/4.jpg)
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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/5.jpg)
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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/6.jpg)
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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/7.jpg)
• 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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/8.jpg)
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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/9.jpg)
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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/10.jpg)
Proyecto 4: Formas propuestas • Disene lo siguiente:
![Page 11: Prof. Licdo. Miguel A. Pirela C.. AnimacionInteractividad Flash Web o escritorioRIA](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/11.jpg)
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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/12.jpg)
• 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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/13.jpg)
• 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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/14.jpg)
• 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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/15.jpg)
• 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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/16.jpg)
• 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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/17.jpg)
• 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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/18.jpg)
• 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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/19.jpg)
• 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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/20.jpg)
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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/21.jpg)
• 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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/22.jpg)
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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/23.jpg)
• Mover la capa cielo al primer nivel
![Page 24: Prof. Licdo. Miguel A. Pirela C.. AnimacionInteractividad Flash Web o escritorioRIA](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/24.jpg)
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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/25.jpg)
• 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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/26.jpg)
• 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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/27.jpg)
• 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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/28.jpg)
• 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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/29.jpg)
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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/30.jpg)
• 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](https://reader035.vdocumento.com/reader035/viewer/2022062323/5665b4a91a28abb57c92fd6e/html5/thumbnails/31.jpg)
• 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