Anda di halaman 1dari 21

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.
14
Tipos de animación

9. Animación cuadro
por cuadro

1. En el timeline elige un frame y selecciónalo. 3. Una vez preparado el keyframe dibuja


un objeto en la posición que tu quieras.
2. En el menú superior selecciona Insertar >
Fotograma clave. Notarás en el timeline que 4. Haz la misma operación en los frames
el frame seleccionado ha quedado encerrado subsecuentes de manera que tengas una
en un cuadro y se ha agregado un circulo serie de keyframes en los cuales cuides la
vacío. 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. de inicio y el fotograma clave de destino y
dando botón izquierdo en el mouse elige
2. Luego coloca un símbolo de tipo Graphic la opción "Create Motion Tween".
en el fotograma clave que será el de inicio.
Listo haz hecho una animación de
3. Con la tecla F5 inserta nuevos fotogramas movimiento.
en la línea de tiempo

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