CIS

Sandro Miguel Honores Vasquez

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.

Animación Interactividad

Web o escritorio RIA

Flash

Tipos de Archivo

FLA

SWF

XFL

Es el archivo editable del programa

Es el archivo en forma de película que se subirá a internet

Es el archivo no comprimido, en

estructura de carpetas

Herramientas de diseño y

dibujo

Escenario Panel de

propiedades (cambia según

selección

Línea de tiempo

Barra de menú Tipo de

espacio de trabajo

Barra de menú

Herramientas Selección Subselección

Transformación Rotación 3D

Lazo

Pluma

Linea

Lapiz

Herramienta Deco

Hueso

Cuentagotas

Texto

Rectangulo

Pincel

Cubo pintura

Borrador

Mano

Zoom

Color trazo

Color relleno

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

• 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

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

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.

Proyecto 4: Formas propuestas

• Diseñe lo siguiente:

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

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

• 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

• 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

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

• Bloque la capa «Parque»

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

• Aplique relleno

• Aplique pincel para crear una nueva área en el árbol que añada profundidad

• Utilice la herramienta borrador para borrar la zona innecesaria

• 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

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

• Ir al panel de color, seleccionar degradado radial

Opciones de color

• Ir al panel de color y aplicar al primer selector blanco y al segundo celeste

Selector de color

• Hacer clic en herramienta transformación de degradado

• Cambiar el centro del relleno

Gira el relleno

Cambia el ancho del

relleno

Cambia la altura del

relleno

Indica el centro del

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 modificación.

• Repita el procedimiento de duplicar. Aplique color solido.

• Acomode la posición de las figuras

• Dibuje el cuerpo de las mariposa, sus antenas.

• Con la herramienta zoom y selección realice los ajustes.

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

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»

• 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

• 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

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