1

Diplomado en Diseño Digital

Animando interactivos con Flash

1. Entorno de Flash
2. Herramientas de diseño
3. Creación de símbolos
4. Tipos de animación
5. Guías y máscaras
6. Diseño de una presentación en flash
7. Diseño de un interactivo
8. Código AS3
 2
Entorno de Flash

Timeline

Barra de
propiedades

Caja de Paletas o
herramientas paneles

Tela, lienzo
o canvas
 3
Entorno de Flash

Canvas
El canvas en Flash, es el espacio o
lienzo donde se llevará a cabo una
animación.

El canvas se define seleccionando la

opción "Modify" del menú principal
y escogiendo la opción "Document"

Podemos escoger sus dimensiones la

cuales aparecen por default en
unidades de pixeles.

Así mismo podemos definir el color

del fondo y la velocidad en que correrá
nuestra película.
 4
Herramientas de diseño

1. Selección

A. El puntero negro sirve para mover

objetos. Cuando un de estos se
A encuentra desagrupado este puntero
B C
nos permite mover la línea o relleno.
Cuando pasamos por el borde de un
objeto desagrupado, el puntero negro
cambia de forma indicando que
podemos realizar una edición con él.

Con un "click" seleccionamos el relleno

o el contorno, pero si damos doble
"click" seleccionamos ambos.

B. Para mover los puntos anclas, es

necesario usar el puntero blanco.
D C. El lazo o rectángulo de selección
opera de forma muy similar a FW y
Ai, sin embargo con el podemos hacer
cortes directos como en el Paint.

D. Bajo la herramienta "Tranformación

Libre" se encuentra la herramienta de
"Transformación de Gradiente" que
sirve para dar forma y dirección a
cualquier degradado.
 5
Herramientas de diseño

2. Dibujo
C

Flash permite al usuario poder usar

herramientas de dibujo tal y como se
A hace en Illustrator

A. La pluma, el lápiz, el pincel y la

recta sirven para hacer líneas
vectoriales compuestas por puntos
anclas y beziers.

B. Así mismo podemos hacer figuras

geométricas básicas.

C. El Texto también puede ser

convertido a curvas mediante la opción
"Break Apart" o Ctrl+B (en pc)
B
Partiendo de Ai o de Fw podemos
cortar y pegar gráficos vectoriales
hacia Flash. Notaremos que los efectos
en ambos casos no se transfieren en
forma vectorial.
 6
Herramientas de diseño

3. Color en Objetos

A. En Flash existen dos herramientas

B para aplicar color. El tradicional
"Bucket" sirve para dar color al relleno
A mientras que el "ink bottle" sirve para
C dar color a los contornos.

B. Con el gotero podemo copiar

colores sólidos o gradientes, tanto de
formas vectoriales como de imágenes.
importadas, tal y como se realiza en
Ai y FW.

C. Es importante señalar que el color

D del contorno y del relleno pueden ser
manipulados en los recuadros de color
que se encuentran en la parte baja de
la barra de herramientas justo donde
se encuentran también, la opciones
para administrar la vista.

D. La goma borra en forma directa

tanto contornos como rellenos en
forma similar al programa "Paint".
Obsérvese como puede adquirir
diversas formas y tamaños.
 7
Herramientas de diseño
4. Propiedades

Como hemos visto anteriormente en

la parte baja de la interfaz de Flash
se encuentra la barra de propiedades.

Cuando seleccionamos un objeto o

símbolo en pantalla, sus variantes y
cualidades se ven reflejadas
inmediatamente en la barra de
propiedades, desde donde pueden ser
editadas.

Si no contamos con esta barra por

default, se puede extraer de la opción
"Window" como se hace en toda la
suite de Adobe.

Posteriormente veremos que, junto a

la barra de propiedades, se agregará
también, la barra de acciones.
 8
Herramientas de diseño

5. Paletas o Paneles

En la barra de paletas se encuentran

comunmente todas las opciones para
crear variantes para los objetos. Por
ejemplo podemos crear una muestra
o modificar un color moviéndo su
composición.

Todos las paletas pueden obtenerse

desde la opción "Window" en el menú
superior.

Una de las paletas más importantes

es "Library". En ella se guardan todos
los símbolos que vamos creando y
pueden utilizados, modificados y
reutilizados las veces que querramos.
 9
Creación de símbolos

6. Creación de símbolos

Para hacer animaciones o interfaces,

es muy recomendable que primero
creemos y diseñemos el material
gráfico para acumularlo en la Librería.

Existen 2 tipos de gráficos: los objetos

gráficos agrupados o desagrupados y
los símbolos.

Existen 3 tipos de símbolos.

A. Graphic, B. Button y C. Movie Clip

Para crear un símbolo, basta con

seleccionar el objeto que se desea
hacer símbolo y presionar una vez la
tecla "F8". En la ventana emergente
se selecciona el tipo de símbolo al cual
convertiremos el objeto.

También se puede ir a la opción

"Insert" en el menú principal, escoger
"New Symbol" escoger también el
tipo de símbolo y crear en cuadro de
edición nuestro símbolo.
 10
Creación de símbolos

A 6. Cualidades de los símbolos

A. Graphic.
Sonido Cuando hacemos un simbolo gráfico
nuestro objeto puede ser animado en
B la línea de tiempo. El cuadro de
edición de un gráfico es sencillo

B. Button
El botón tiene en su cuadro de edición
4 instancias básicas que son Up, Over
Down y Hit. El primero es el estado
del botón antes de cualquier acción.
C El Over es el estado del botón cuando
se pasa el cursor por encima de él. El
Down es el estado del botón cuando
es presionado. Por último el Hit es el
área activa del botón.

C. Movie Clip
Los clips de película, son simbolos que
contiene más de un fotograma y
pueden contener en sí, animaciones
complejas. En nuestro timeline
principal pueden ser animados igual
Up Over Down que todos los símbolos anteriores.
 11
Animación

7. Timeline Para empezar a hacer animaciones es

necesario conocer primero la línea de
tiempo o "Timeline".

Aguja

Capa / Layer Capa3

Sirven como canales donde corren las animaciones y
distinguen los planos. El objeto que se encuentre en
la capa más alta aparecerá en primer plano. Capa2

Fotograma / Frame Capa1 Primer plano

Los frames son cuadros fotográficos en una animación.
Tal como si observáramos una cinta de película como
eran antes.

Fotograma clave vacío / Empty keyframe

Los frames vacíos sirven para hacer pausas en ciertas
animaciones y se incrustan cuando vamos a iniciar
una animación

Fotograma clave / Keyframe

Los fotogramas claves son cuadros donde se marcan
cambios sustanciales en las animaciones que pueden
ser cuadro por cuadro, de movimiento o forma
Cuadros o fotogramas.
 12
Tipos de animación

8. Tipos de animación En Flash existen 3 tipos de animación

y se identifican con facilidad en la
línea de tiempo.

Cuadro por cuadro

Movimiento

Forma
 13
Tipos de animación

9. Animación cuadro
por cuadro

Es la animación más sencilla. Cada frame provee un

movimiento específico a la animación del objeto

Frame 1 Frame 2 Frame 3 Frame 4

Se controla cuadro por cuadro la

forma y la posición del objeto

El objeto puede ser símbolo, grupo

o puede estar desagrupado.

Tipos de animación
9. Animación cuadro
por cuadro
1. En el timeline elige un frame y selecciónalo.
2. En el menú superior selecciona Insertar >
Fotograma clave. Notarás en el timeline que
el frame seleccionado ha quedado encerrado
en un cuadro y se ha agregado un circulo
vacío.
14
3. Una vez preparado el keyframe dibuja
un objeto en la posición que tu quieras.
4. Haz la misma operación en los frames
subsecuentes de manera que tengas una
serie de keyframes en los cuales cuides la
posición, forma y tamaño del objeto. Esta
sucesión debe crear la ilusión de movimiento
 15
Tipos de animación

10. interpolación de
movimiento

Animación automática. Se establece en un Keyframe, la

posición inicial de un objeto -símbolo y en otro Keyframe la
posición final del mismo. Flash genera automáticamente las
posiciones intermedias de la serie de frames.

KeyFrame Inicio Frame 2 Frame 3 Frame 4 KeyFrame final

Posiciones intermedias
Incluye aumento o disminución de
tamaño entre inicio y fin.

Exige que el objeto sea un símbolo

Se pueden hacer cambios de color

 16
Tipos de animación

10. interpolación de
movimiento

1. En el timeline elige un frame, selecciónalo 5. Coloca el cursor entre el fotograma clave

e inserta en el un fotograma clave.
2. Luego coloca un símbolo de tipo Graphic
en el fotograma clave que será el de inicio.
3. Con la tecla F5 inserta nuevos fotogramas
en la línea de tiempo
de inicio y el fotograma clave de destino y
dando botón izquierdo en el mouse elige
la opción "Create Motion Tween".
Listo haz hecho una animación de
movimiento.

4. Haz un fotograma clave más adelante en

la línea de tiempo a fin de que sea el
fotograma clave de destino de la animación
 17
Tipos de animación

11. Interpolación
de forma Forma
Animación que realiza automáticamente la transición de
forma de un objeto a otro. Un objeto "X" se coloca
desagrupado en un Keyframe inicial y otro objeto "Y" se
coloca también desagrupado en un Keyframe final.

KeyFrame Inicio Frame 2 Frame 3 Frame 4 KeyFrame final

Posiciones intermedias
Fusión cuadro x cuadro
Incluye aumento o disminución de
tamaño entre inicio y fin.

Exige que el objeto esté

desagrupado en los keyframes de
inicio y fin
 18
Guías

12. Animación con guías Las animaciones de tipo "Motion Tween puede seguir
trayectorias, siguiendo lineas vectoriales.

1. Inserta un fotograma clave inicial en la

línea de tiempo y ahí un símbolo.

2. Bajo el contenedor de layer elige la opción

"Add Motion Guide".

Verás que se ha sumado un layer por encima

de tu primer layer, el cual ha quedado
contenido en el layer guia.

3. En el layer guía dibuja la trayectoria que

deseas que siga tu símbolo.

4. Con la tecla "F5" adiciona más fotogramas

en la linea de tiempo

5. Con el símbolo que insertaste haz una

animación de movimiento.

Para que el símbolo siga la trayectoria debes

hacer coincidir su centro con la línea guía.
 19
Máscaras

Cómo hacer una máscara

Para hacer una máscara bastan dos layers uno que

contiene el objeto máscara y el otro que contiene el
objeto enmascarado.

1. Haz un layer que contenga la foto de un paisaje.

2. Extiende el tiempo en dicho layer hasta el frame

40 ó 50.

3. Por encima de ese layer crea un nuevo layer para

que sea el layer contenedor de la máscara.

4. En dicho layer realiza una animación de tipo

Tween para que enmascare el paisaje. Ejemplo: La
palabra “Acapulco” que aparezca de un lado a otro
del escenario mostrando en su interior el paisaje.

5. Haz click derecho en la capa de arriba y escoge

“Máscara”.

Observa el resultado
 20
Máscaras

Botones animados

En sí los botones en flash son

animados. Es decir tienen
cierta animación en 3 estados
básicos.

Sin embargo colocando Movie

Clips en los estados podemos
agregar más animación.

Por ejemplo colocar una

animacion cíclica en el estado
de over.
 21
Proyectos

Proyecto 1

Realiza un banner animado para incluirlo en el

portal de tu empresa.

Proyecto 2

Realiza una presentación lineal a manera de

presentación.

Proyecto 3

Realiza un interactivo no lineal para presentar un

tema sencillo.

No te olvides incluir algún video.

Proyecto 4

Realiza una presentación en flash con pestañas

utilizando código AS3