GUIA 3

GUIA 3
Máscaras
Tema:
Símbolos e interpolación
Objetivo General
Lograr que los estudiantes desarrollen su conocimiento
en Adobe Flash con el uso de símbolos y la animación
nativa del programa: Interpolación clásica
Objetivos Específicos
- Que el estudiante sea capaz de entender y crear los
tipos diferentes de símbolos en Flash
- Que los alumnos conozcan las reglas para crear animación de interpolación y puedan aplicarla fácilmente.
Las máscaras son una forma selectiva de esconder y
mostrar contenido en una capa; en otras palabras, al
usar máscaras podemos controlar el contenido que
nuestra audiencia ve en una determinada capa.
Por ejemplo, en el caso de la figura 2: tenemos la capa
‘Círculo’, cuyo fotograma muestra justamente esa figura
geométrica, mientras que la capa ‘Niña’ muestra la
imagen de un personaje con un fondo en degradado. Si
convertimos la capa ‘Círculo’ en máscara, la capa ‘Niña’
automáticamente pasará a formar parte de la máscara
(dado que está justo abajo de la capa ‘Círculo’), con lo
que ahora, de ambas capas, solo veremos el contenido
que se encuentre dentro de las dimensiones de la
máscara.
Es como si la figura de la capa máscara se convirtiera en
una especie de ‘ventana’ que restringe nuestra visión de
la capa, o capas, contenidas en ella.
Contenidos
Capas: máscaras
Tipos de símbolos
Animación por interpolación Clásica y de Movimiento
Materiales y Equipo
Guía 3, previamente leída.
Anotaciones de clases anteriores.
........................................
¿Qué es una capa?
Las capas son como rollos o tiras de película apiladas
unas encima de otras. Las tiras que quedan en la parte
baja de la línea de tiempo son menos visibles que las
tiras por encima de ellas. Las capas aparecen en la
columna situada a la izquierda de la línea de tiempo,
como se puede apreciar en figura 1, y permiten organizar
los objetos en el escenario así como la animación a
través de los fotogramas que contienen. Cada capa
puede contener una o muchas imágenes diferentes para
que aparezcan en el escenario, y es posible editar cada
capa sin afectar a las otras.
figura 1
figura 2
Para convertir una capa en máscara, basta darle
click derecho y en el menú emergente, seleccionar
“máscara”. Una vez hecho esto veremos que, en la línea
de tiempo, el ícono de la capa cambia a un rectángulo
con un punto negro al centro. La capa inmediatamente
debajo de la máscara pasará a formar parte de ella, pero
también podemos añadir otras capas moviéndolas hacia
la parte baja de la máscara.
Es importante tomar en cuenta que el efecto de ‘ventana’
que la máscara provee solo puede apreciarse cuando,
tanto la máscara como sus capas contenidas, están
bloqueadas en la línea de tiempo; es decir, está activo
el ícono del candado para cada capa. Sin embargo,
con las capas bloqueadas o no, el efecto siempre será
visible al momento de probar la animación.
La capa máscara debe mantenerse como tal durante
toda la animación, así que no hace falta añadir más
fotogramas a menos que se necesiten otras figuras para
cambiar las dimensiones de la ‘ventana’ o para animar a
la propia máscara.
Símbolos
En términos generales, los símbolos en Flash son
gráficos que se utilizan con frecuencia para animación e
interactividad, cada símbolo posee una línea de tiempo
propia e interna y se almacenan en la biblioteca. Dado
que los símbolos también son un tipo de contenedor
de gráficos, podemos diferenciarlos de los grupos, por
ejemplo, porque un símbolo seleccionado estará rodeado
por un recuadro de color celeste oscuro, mientras que
a un grupo seleccionado lo rodea un recuadro celeste
claro, como se ve en la figura 3.
figura 3
Existen tres tipos de símbolos: Clip de película, Botón y
Gráfico. Cada tipo se utiliza para un propósito específico
y podemos diferenciarlos por el ícono que representa a
cada uno, y que podemos apreciar en la figura 4.
figura 4
Clips de Película. Estos símbolos son los más flexibles
y versátiles en Flash. Al crear una animación usaremos
típicamente este tipo de símbolo ya que permite aplicar
filtros, características especiales de color y el uso de
modos de mezcla para realzar su apariencia. Además,
la herramienta 3D solamente funciona con los Clips de
Película
Estos símbolos se pueden controlar a través de
ActionScript para que respondan a acciones del usuario.
La línea de tiempo interna de un símbolo puede contener
otros símbolos con su propia línea de tiempo, esto
permite realizar animaciones muy complejas que se
conocen como “nesting” en inglés, o animación dentro
de animación en español.
Botones. Los símbolos de Botón se utilizan principalmente
para interacción. También se les puede aplicar filtros y
modos de mezcla, pero su línea de tiempo está limitada
a tres estados posibles de Botón que describen cómo
aparecen en pantalla cuando el cursor interactúa con
ellos y un zona activa. Podemos ver una comparación
de las líneas de tiempo de un Clip de Película y un Botón
en la figura 5.
Aunque podemos crear y ver los diferentes estados
de un botón en un archivo SWF, la funcionalidad
de la interacción necesita por fuerza programación
ActionScript.
Símbolos Gráficos. Este es el tipo más básico de símbolo
en Flash. Los símbolos gráficos no se pueden manejar
con ActionScript ni se les puede aplicar filtros. Sin
embargo, todavía pueden ser útiles cuando se necesite
sincronizar una animación interna con la línea de tiempo
principal. La línea de tiempo de un símbolo gráfico
funciona de la misma forma que un Clip de Película.
Existen además un par de características comunes y
especiales que hace muy importante el uso de símbolos
en la creación de animaciones en Flash. Por ejemplo:
figura 5
-Los símbolos reducen el tamaño y el tiempo de descarga
de muchas animaciones debido a que pueden ser
reusados constantemente sin que hay ningún impacto
en el tamaño del archivo. Cada símbolo se almacena en
el panel de Biblioteca y gracias a esto es fácil acceder a
ellos, organizarlos o editarlos.
-Dado que los símbolos son contenedores, es posible
añadirles imágenes de casi cualquier tipo de formato,
o gráficos creados en Ilustrador. Es posible, incluso,
encapsular video en un símbolo.
Para crear un símbolo a partir de un gráfico ya creado en
Flash, basta seleccionar el gráfico completo y presionar
F8, o ir al menú-->Modificar-->Convertir en símbolo y
luego elegir el tipo de símbolo que necesitamos.
Animación de Interpolación
Flash puede trabajar con tres tipos de animación nativa: Interpolación de forma, Interpolación Clásica e Interpolación
de Movimiento. Aunque la Interpolación de forma puede ser útil en ciertos casos, nos concentraremos en las últimas
dos ya que son las que más posibilidades control creativo ofrecen. Cada Interpolación exije ciertas reglas que hay que
cumplir para que funcione bien la animación. En el caso de la Interpolación clásica las reglas son las siguientes:
1-Solo se puede hacer Interpolación clásica con símbolos, aunque pueden ser de cualquier tipo. Si tratamos de crear
una Interpolación clásica con una forma que no sea símbolo, Flash hará la conversión automáticamente y asignará un
nombre genérico.
2-Es necesario que existan al menos dos fotogramas clave: el inicial y el final. En otras palabras, el estado con el que
inicia el objeto y el estado al que queremos que llegue al terminar la animación.
3-No puede haber más objetos que el símbolo a animar en los fotogramas inicial y final. De haberlos, Flash los integrará
todos en un solo símbolo y asignará un nombre genérico.
Una vez creado el símbolo a animar en el fotograma incial, extendemos la línea de tiempo hasta el fotograma final y
cambiamos algún aspecto del símbolo en este fotograma. Los símbolos solo nos permitirán cambios de tamaño (y ciertas deformaciones), posición, tinte, brillo y transparencia. Una vez hecho esto, podemos dar click derecho a cualquiera
de los fotogramas de en medio y elegir ‘Crear interpolación clásica’. Si lo hicimos bien, veremos que los fotogramas
cambian a un color morado y una flecha nos indica el inicio y final de la animación. Podemos ver ejemplos de este tipo
de animación en la figura 6.
En los siguientes ejemplos hemos activado el
‘papel cebolla’ para poder apreciar mejor la interpolación, pero esto no
es siempre necesario.
figura 6
Interpolación de Movimiento
Las ventaja de este tipo de animación sobre la anterior es que optimiza el flujo de trabajo al permitir realizar cambios
automáticos sin la necesidad de añadir fotogramas finales con anterioridad. Sin embargo, también es necesario seguir
ciertas reglas:
1-De nuevo solo se puede hacer Interpolación con símbolos. Si tratamos de crear una Interpolación con una forma que
no sea símbolo, Flash hará la conversión automáticamente y asignará un nombre genérico.
2-Los símbolos a animar deben estar separados en su propia capa, si existe algún otro elemento en la capa, Flash
automáticamente trasladará el símbolo a animar a una capa nueva.
Para poder realizar una Interpolación de movimiento bastará con un fotograma inicial y la extensión adecuada en la
línea de tiempo. Una vez hecho esto podemos dar click derecho en cualquiera de los fotogramas añadidos y seleccionar “Crear Interpolación de Movimiento”, veremos que los fotogramas cambian a un color celeste. Para completar la
interpolación podemos seleccionar cualquiera de los fotogramas de color celeste y realizar algún cambio al símbolo,
esto creará automáticamente un nuevo fotograma; si luego queremos continuar animando, bastará con seleccionar otro
fotograma celeste y aplicar otro cambio.
Por ejemplo, en la figura 7, la interpolación se extiende hasta el fotograma 20, pero también hay cambios de posición en
los fotogramas 6 y 11. Podemos incluso añadir más fotogramas y con eso extender la duración de la interpolación. Las
Interpolaciones de movimiento, además, muestran gráficamente los cambios de posición de un objeto con una línea de
trayectoria de color celeste y enlazada por puntos.
figura 7
Esa trayectoria es editable: si con la herramienta de
selección activada posicionamos nuestro cursor cerca
de algún punto de la trayectoria, veremos que nos da
las mismas posibilidades de deformación que una
línea normal. Podemos arrastrar nuestro cursor para
crear curvas o ángulos en la trayectoria (lo que alterará
también a la animación) como se ve en la figura 8.
Si seleccionamos la trayectoria directamente con la
herramienta de transformación libre, también veremos
que es posible aplicarle los mismos cambios que a un
objeto normal, por lo que podremos aumentar o disminuír
su tamaño, sesgarla o incluso cambiar totalmente la
posición de la trayectoria dentro del escenario. Podemos
ver un ejemplo de esto en la figura 9.
Finalmente, también es posible modificar la trayectoria
añadiéndole puntos de ancla. Los puntos normales de
la trayenctoria se convierten a puntos de ancla con el
uso de la “Herramienta ConvertirPunto de Ancla” que se
encuentra oculta bajo la herramienta de “Pluma” en la
barra de herramientas. Figura 10.
figura 8
Sin embargo, no todos los puntos de la trayectoria
pueden ser convertidos. Solo el punto de inicio y el del
final pueden convertirse inmediatamente, otro puntos se
pueden agregar creando ángulos con la herramienta de
selección, como vimos en la figura 8.
Una vez que tengamos los puntos de ancla, podremos
ver las manijas de control (como se ven en la figura 11) y
será posible utilizarlas para agrandar o estrechar curvas
figura 9
con solo arrastrar el cursor. Esto se puede lograr tanto
con la misma herramienta de Convertir punto de ancla,
como con la Herramienta de Subselección. La diferencia está en que con la Herramienta de Convertir punto de Ancla
moveremos las manijas de forma independiente, mientras que con la Herramienta de Subselección ambas se moverán
simultaneamente una vez arrastremos el cursor con una de ellas seleccionada.
figura 10
figura 11
Antes de hacer el parcial, practicaremos un poco la animación por interpolación. ((Sí, así es, tenemos parcial, no actúen
todos sorprendidos))
Ejercicio 1: Interpolación clásica
Procedimiento
Leé bien todas las indicaciones antes de empezar
1. Abrí Flash y creá un nuevo documento. En el panel de
propiedades dale click a las dimensiones que aparezcan
en “tamaño” y cambialas a 720 x 480 px. Una vez hecho
esto, da Ctrl+S (o menú-->archivo-->guardar) y ponele
un nombre al archivo para guardarlo (de veras, no vaya
a ser!).
2. Creá un gráfico similar a la de figura12, convertilo en
símbolo Clip de película y ponele un nombre. Ahora extendé la línea de tiempo hasta el fotograma 25, dale click
derecho o F5 para convertirlo en fotograma clave.
figura 12
3- Mové y hacé más grande el símbolo del fotograma
25, de tal forma que haya una diferencia evidente entre
esta imagen y la del fotograma 1. Ahora da click derecho
a cualquier fotograma de en medio y creá una Interpolación clásica. Figura 13. Presioná Ctrl+Enter para probar
la animación.
4- Ya tenemos una animación con principio y con final,
pero podemos continuar expandiéndola con otros cambios. Creá un fotograma clave en el número 40, si probás
la animación verás que se detiene por unos momentos,
esto es porque hemos extendido la duración del fotograma final por unos cuantos cuadros más. Esta es una de
las formas de Flash para manipular los tiempos de una
animación. Ahora creá otro fotograma clave en el número 60 y mové el símbolo al centro. Con la herramienta
de transformación libre, deformá el símbolo hasta aplastarlo por los lados, como en la figura 14. También creá
una nueva interpolación clásica entre los fotogramas 41
y 60. Probá la animación.
5. Insertá otro fotograma clave en el número 80 y una
vez más mové el símbolo a otra parte del escenario, tratá de devolverle su forma original (tamaño y proporciones) con la herramienta de transformación libre. Seleccioná un fotograma entre los fotogramas 61 y 80 y creá
otra interpolación clásica. Figura 15.
6. Es posible, y se usa mucho, hacer combinaciones de
animación tanto de tamaño y posición de un símbolo
como de otras características especiales. Por ejemplo,
seleccioná el símbolo siempre en el fotograma 80 y abrí
el inspector de propiedades. Ahí, buscá la parte que dice
“Efecto de color”--> “Estilo”. Debe decir “ninguno” Dale
click a “ninguno” y seleccioná “Tinta”. Debería aparecer
ahora un recuadro de color a la derecha de tinta y algunos controles más hacia abajo. Elegí el color rojo del
recuadro y seleccioná el valor de 77% en tinta. Dejá rojo,
verde y azul como están. Si lo has hecho bien, deberías
tener una imagen parecida a la de la figura 16. Ahora extendé la animación con un fotograma clave en el número
105 y probá la animación.
figura 13
figura 14
figura 15
7- Creá otro fotograma clave en el número 125 y mové
el símbolo hacia la parte baja del escenario. Con el símbolo seleccionado, cambiá el estilo “tinta” a “ninguno”.
Ahora creá otra interpolación clásica entre los fotogramas 106 y 125. Añadí un fotograma clave en el número
130 y deformá el símbolo como si estuviera aplastado,
tal como se ve en la figura 17. Creá interpolación entre
los fotogramas 126 y 130.
8- Creá otro fotograma clave en el número 135 y devolvele al símbolo su forma original ((lo más parecido que
se pueda)), además, siempre en este mismo fotograma,
subí un poco el símbolo, parecerá que está rebotando
del suelo y recobrando sus proporciones normales. Figura 18.
figura 16
9- Finalmente, creá un fotograma en el número 145 y
mové el símbolo un poco más arriba. Una vez hecho
esto, con el símbolo seleccionado, volvé al panel de propiedades y en estilo seleccioná “Alfa”, en el recuadro de
valor poné 0% y creá la última interpolación clásica entre
el fotograma 136 y el 145. Figura 19.
Para que la animación esté completa, también podés
crear un fotograma clave en blanco en el número 146 y
otro en el 160. Probá la animación.
Eso es todo por el momento. Si quedase tiempo antes
del parcial, podés intentar replicar esta misma animación pero usando Interpolación de movimiento. Como
siempre, cualquier duda, cuestionamiento o anexos,
preguntá con confianza al instructor. Feliz parcial!
figura 18
figura 17
figura 19