Este documento presenta una introducción al uso del software Adobe Flash para crear animaciones e interactividad web. Explica las herramientas básicas de Flash como capas, línea de tiempo y animación por fotogramas. Luego, detalla 7 proyectos prácticos que muestran cómo dibujar formas, aplicar estilos, crear degradados de color y realizar una animación de mariposa volando fotograma a fotograma. Finalmente, propone como ejercicio animar una hoja cayendo de un árbol.

1. CIS
Sandro Miguel Honores Vasquez

2. Adobe Flash es el entorno de creación de animaciones,
interactividad y expresividad mas utilizado del mundo.
Empezaremos el taller analizando las herramientas de
dibujo, el uso de capas y terminaremos en la animación
clasica de fotograma a fotograma.

3. Animación Interactividad
Flash
Web o escritorio RIA

4. Tipos de Archivo
Es el archivo editable
del programa
FLA
Es el archivo en forma
de película que se SWF
subirá a internet
Es el archivo no
comprimido, en
XFL estructura de carpetas

5. Tipo de
Barra de menú Barra de menú espacio de
trabajo
Línea de
tiempo
Herramientas
de diseño y
dibujo
Panel de
Escenario propiedades
(cambia según
selección

6. Herramientas
Selección Subselección
Transformación Rotación 3D
Lazo Texto
Pluma Rectangulo
Linea Pincel
Lapiz Cubo pintura
Herramienta Deco Borrador
Hueso Zoom
Cuentagotas Color trazo
Mano Color relleno

7. Proyecto 1: Cubo
• Seleccionar la
herramienta rectángulo
• 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 posición

8. • Use la herramienta
linea y complete los
lados del cubo
• Elimine la línea
pequeña y cambie el
color rojo por un tono
mas claro
• Elimine las línea del
cubo y listo

9. Proyecto 2: Texto 3D
• Escriba el texto flash,
fuente bauhaus,
tamaño 91, azul claro
• Duplicar y cambiar de
color
• Enviar al fondo el texto
duplicado negro,
realizar el ajuste
necesario

10. Proyecto 3: Botón sombra
• Traze el circulo sin trazo
• Duplique la figura, cambie
el color y agrupe
• Agrupe el primer circulo
• Enviar al fondo el
segundo
• Nótese que para evitar la
combinación de las
figuras es necesario
agrupar.

11. Proyecto 4: Formas propuestas
• Diseñe lo siguiente:

12. Proyecto 5: Paisaje
• Definir propiedades del
documento: Clic en
herramienta selección y
definir el tamaño del
escenario en 600 x 500,
12 fps, color de
escenario celeste

13. • Clic en la herramienta
rectángulo. Definir las
propiedades en el panel
de propiedades

14. • Trazar el rectángulo en
el escenario.
• Hacer clic en la línea 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

15. • Realizar la siguiente
modificación: 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

16. • Utilice la herramienta
pincel para dibujar un
cesped de un color
verde mas oscuro.
• Aplique ahora la
herramienta cubo de
pintura, nótese como se
aplica a la nueva área.

17. • Bloque la capa
«Parque»
• Inserte una nueva capa
llamada «tronco» y
dibuje con la
herramienta pincel,
color marrón.
• Aplique relleno

18. • Aplique pincel para
crear una nueva área en
el árbol que añada
profundidad
• Utilice la herramienta
borrador para borrar la
zona innecesaria

19. • Añade la capa «copa» y
dibuje esta parte del
árbol con la
herramienta pincel
• Con el pincel añada una
nueva área con un
verde mas claro para
aplicar profundidad

20. • Mueva la capa «copa»
al segundo nivel.
• Vamos a crear un cielo
con degradado
• Añadir la capa cielo y
dibujar un rectángulo
• Ajustar al escenario
usando la herramienta
«alinear»

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

22. • Hacer clic en
herramienta
transformación de
degradado
• Cambiar el centro del
relleno

23. Cambia el
ancho del
relleno
Indica el
centro del Cambia la
relleno altura del
relleno
Gira el
relleno

24. • Mover la capa cielo al
primer nivel

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

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

27. • Para las alas inferiores
dibuje un ovalo y
aplique la siguiente
modificación.
• Repita el procedimiento
de duplicar. Aplique
color solido.
• Acomode la posición de
las figuras

28. • Dibuje el cuerpo de las
mariposa, sus antenas.
• Con la herramienta
zoom y selección realice
los ajustes.

29. • Elimine los contornos y
trazos, agrupe la figura
y modificar su
apariencia y tamaño.

30. Proyecto 7: Mariposa volando
• Vamos a realizar una
animación fotograma a
fotograma.
• Abrir el proyecto 6.fla
• En línea de tiempo ir al
fotograma de la capa
mariposa e insertar e
insertar 10 «fotograma
clave»
• Nótese que las demás capas
de la animación solo tienen
un fotograma, por ello ir al
fotograma 10, botón
derecho «insertar
fotograma»

31. • Cambiamos la
configuración los fps a
10, lo cual significa que
la 10 fotogramas se
reproducirán en 1
segundo.
• Ir a ver y mostrar reglas
• Luego mostrar guías

32. • En cada fotograma clave cambiar de posición, giro y acercar al árbol
• Probar película
• Finalmente exportar como película .swf y como .gif animado
• Luego ir a «Vista previa de publicación», HTML

33. Ejercicio Propuesto
• Abra el proyecto 6 .fla, bloquear las capas
anteriores. Añada la capa «Hoja».
• Dibuje la hoja sin trazo de color verde, agrupe y
aplique animación fotograma a fotograma de forma
que caiga del árbol al suelo
• Recuerde que usted puede ocultar las capas para
diseñar la hoja.
• Exportar como swf