Descargar pdf

CREIX
AMB
INTERNET
Flash II: Animación avanzada con Flash CS4
Flash II: Animación avanzada con Flash
CS4
Antes de animar
Antes de introducirnos en la animación avanzada, es conveniente conocer todos
los elementos de los que disponemos para animar. Estos elementos serán
considerados como los actores de nuestra película, donde tomarán más o menos
protagonismo.
La biblioteca será nuestra herramienta esencial para crearlos, guardarlos y
organizarlos.
Elementos de animación:
Para la realización de animaciones se necesita que los elementos aparezcan en
el escenario. Sabemos que Flash puede trabajar con ficheros gráficos, clips de
video y elementos de audio. Sin embargo, estos no son los elementos básicos
para realizar las animaciones. Flash utilizará una serie de elementos que
dependerán del tipo de animación que se quiera realizar. Estos elementos se
podrían agrupar en tres categorías:
•
Estructuras simples:
Son las formas. Cuando se dibuja un elemento en pantalla con alguna de las
herramientas para generar figuras y elementos de dibujo (lápiz, pluma, pincel,
óvalo, rectángulo y línea) se crean formas. Dependiendo del tipo de herramienta
empleada se generará un contorno, un relleno o bien un contorno más un relleno,
pero siempre son formas. Esto es importante porque son estructuras básicas y
son las únicas que pueden emplearse en una interpolación de forma (como vimos
2
en el tema anterior).
•
Estructura compuesta:
Un nivel por encima de las formas se encuentran las estructuras compuestas. Se
caracterizan porque actúan a modo de objetos individuales, es decir, no pueden
seleccionarse por partes.
Hay tres tipos:
o Grupos: Es una asociación de formas y/o objetos para que actúen
como si de un único elemento se tratase.
o Objetos de dibujo: AI crear un elemento en pantalla a través de las
herramientas proporcionadas (lápiz, pluma, pincel, óvalo, rectángulo
y línea) se pueden crear objetos que agrupen el contorno y el relleno.
Esta opción, nueva desde Flash 8, se activa haciendo clic en el icono
Dibujo de Objeto que aparece en Ia zona Opciones
Opciones de cada una de
estas herramientas.
o Texto: EI texto constituye en sí un elemento agrupado. Si se quiere
acceder a cada una de las piezas hay que seleccionar del menú
Modificar > Separar (CTRL + B).
B) Lo que se va a conseguir son las
letras, números, símbolos, etc., en los que se divide el texto. Si se
selecciona uno de estos caracteres y se vuelve a elegir la opción
Separar se conseguirá una forma. Este proceso es irreversible: la
forma nunca podrá volver a convertirse en texto.
•
Símbolos: Constituyen la estructura más importante de Flash (y son
básicos para realizar trabajos con ActionScript). Existen tres tipos de
símbolos: Clip de película,
película botones y gráficos.
gráficos
3
La Biblioteca
En el panel Biblioteca se guardan cada uno de los símbolos que se hayan creado
en Flash y los elementos externos incorporados (clips de video, ficheros de audio
e imágenes). Los elementos importados se pueden colocar directamente en el
escenario o bien incluirlos en la Biblioteca.
Biblioteca Conviene siempre recurrir a esta
última técnica, porque la Biblioteca permite reutilizar los elementos en cualquier
momento. Una vez que se haya colocado un elemento dentro de la Biblioteca
basta con seleccionarlo y moverlo al escenario. Automáticamente se creará una
instancia del elemento elegido.
AI panel Biblioteca se puede acceder de dos formas:
•
•
A través de Ventana > Biblioteca.
Presionando Ctrl+L (Windows) o Comando+L (Macintosh).
Los elementos se muestran dentro de la Biblioteca como una tabla con cinco
columnas y tantas filas como elementos existen.
4
Las columnas son:
•
Nombre:
Nombre Indica el nombre del elemento de la Biblioteca,
Biblioteca no el nombre del
elemento que aparece en el escenario. Conviene que el usuario se
acostumbre a dar un nombre diferente a cada uno de los elementos que
va incorporando al escenario. Esto le permitiré localizarlo a posteriori y
además cumplirá una de las pautas básicas del lenguaje ActionScript (si
se quiere trabajar con un objeto existente en pantalla, necesita un nombre
que sea diferente del resto). Al lado del nombre aparece un icono que
representa el tipo de elemento incluido en la Biblioteca.
•
Tipo:
Tipo Indica el tipo del elemento (clip de película, gráfico, botón, sonido,
video incorporado o clip compilado).
•
Número de usos:
usos Número de instancias en el escenario de un objeto de la
Biblioteca.
Biblioteca
•
Vinculación:
Vinculación ActionScript trabajará con los elementos existentes en
pantalla a través del nombre que se le asigne a la instancia. Ahora bien, si
se necesita trabajar con un elemento de la Biblioteca que no exista (por
ejemplo un clip de sonido) en el escenario es necesario asignarle un
nombre adicional (botón derecho > Vinculación).
Vinculación El nombre indicado será
el que aparezca en esta tabla.
•
Fecha de modificación:
modificación Indica la última fecha en la que se ha modificado
el elemento de pantalla.
Los elementos pueden ordenarse por columnas haciendo clic en la cabecera de
una de ellas. Para ampliar al ancho de la columna hay que colocar el puntero del
ratón entre los encabezados de dos columnas y arrastrar la línea para cambiar al
tamaño (Io que no se puede hacer es alterar el orden de las columnas).
Organización de símbolos en carpetas:
5
Según vaya avanzando el desarrollo de un proyecto, es normal que la paleta de la
Biblioteca vaya creciendo para almacenar un número cada vez mayor de
símbolos, hasta que llegue un punto en el que sea difícil manejar o identificar de
forma rápida todos y cada uno de los símbolos.
Para poder gestionar el conjunto de símbolos se pueden crear carpetas que
agrupen los distintos elementos en categorías. Así se podrá identificar y
encontrar un símbolo concreto con mayor rapidez. Para crear una carpeta en la
Biblioteca,
Biblioteca se hace clic en el botón de Nueva Carpeta dentro de la paleta de
Biblioteca. Aparecerá un nuevo icono de carpeta dentro de Ia Biblioteca. Para
colocar un símbolo dentro de una carpeta, se arrastra el icono del símbolo sobre
el icono de la carpeta.
También es posible colocar una carpeta dentro de otra, arrastrando dicha carpeta
sobre el icono de la carpeta dónde se pretende guardar aquella. De este modo, es
posible crear una jerarquía estructurada de carpetas dentro de la paleta
Biblioteca,
Biblioteca que permite gestionar mejor los símbolos y, en consecuencia, el
contenido de la película.
Importar símbolos a través de bibliotecas:
En muchas ocasiones se presentará la necesidad de utilizar en un proyecto otros
elementos utilizados en proyectos anteriores. No tiene ningún sentido volver a
crear un objeto si ya se ha establecido anteriormente en otro documento.
Supondría una pérdida de tiempo y de trabajo innecesario. Es posible aprovechar
todo el contenido de otros ficheros Flash, siempre y cuando se haya tenido la
prudencia de convertir dicho material en símbolos. Para adquirir símbolos de las
bibliotecas de otros documentos:
•
•
Se selecciona la opción de menú Archivo > Importar> Abrir biblioteca
externa. Aparecerá un cuadro de diálogo en que debe seleccionarse el
externa
documento Flash original (el fichero de trabajo, no Ia película SWF), que
incluye la biblioteca que pretende importarse.
Cuando se haya seleccionado el fichero adecuado y se haga clic en Abrir,
aparecerá la nueva paleta de Biblioteca, que mostrará todos los símbolos
que contiene dicho documento. El fondo de la paleta de Biblioteca
6
•
•
aparecerá de color gris (es la manera de indicar que no se trata de la
biblioteca original del fichero, sino de una biblioteca importada de otro
documento).
Para incorporar definitivamente un símbolo a la película en curso se
arrastra una instancia de Ia biblioteca importada al escenario.
A partir de ese momento se observará como el icono del símbolo
arrastrado pasa a formar parte de la biblioteca local (que aparece con el
fondo blanco).
Optimizar la Biblioteca:
Es importante que los elementos para la animación estén ordenados y
debidamente identificados i que la Biblioteca esté actualizada y su peso sea lo
menor posible.
Flash comprime los elementos gráficos para reducir al máximo el tamaño del
fichero SWF. Sin embargo, Io que puede hacer el usuario es eliminar aquellos
ficheros que no vaya a utilizar.
Hay dos formas de realizar esta tarea:
•
•
Ordenar los elementos a través de la columna Número de usos.
usos Los que
tengan valor 0, son los que todavía no se han empleado. Basta con
seleccionarlos y hacer clic en el icono de la parte inferior (Cubo
Cubo de basura)
basura
para eliminarlos.
Hacer clic en el icono que aparece a la derecha del nombre de la
Biblioteca.
Biblioteca En la lista de opciones escoger Seleccionar elementos no
utilizados.
utilizados Una vez elegidos se pueden eliminar a través del icono Eliminar
o a través de la tecla Suprimir.
Suprimir
Qué son los símbolos y cómo utilizamos los distintos tipos de símbolos:
Los símbolos constituyen uno de los elementos más importantes a la hora de
trabajar con Flash y representan un nuevo nivel de edición respecto a los grupos.
Un símbolo es un elemento que reside en la biblioteca de la película y que puede
reutilizarse tantas veces como sea necesario y en la cantidad deseada, dentro del
7
escenario de Flash. En cualquier fotograma y en cualquier escena. Cuando se
desea utilizar un símbolo, se arrastra su icono desde la ventana de Biblioteca
hasta el escenario. El elemento que aparece en el escenario se conoce con el
nombre de instancia.
instancia Cada vez que se arrastra el icono del símbolo de la
biblioteca al escenario, aparece una nueva instancia.
En una misma escena, y en un mismo fotograma, pueden coexistir cualquier
número de instancias de un mismo símbolo. Las instancias pueden colocarse,
rotar y cambiar de tamaño, de forma independiente una de las otras, pero
cualquier modificación que se realice directamente sobre el símbolo en el que
estén basadas, supondrá el cambio automático de todas las instancias que
reflejarán los nuevos cambios.
Este método permite, por un lado, aumentar el nivel de productividad: si en un
proyecto existen varios elementos que comparten la misma apariencia como
botones, logotipos, fondos de diferentes escenas, etc., y, en un momento dado, se
quiere cambiar el aspecto de todos ellos, bastará con modificar una sola vez el
símbolo original, para que los cambios sean heredados por todas las instancias y,
en pocos minutos, se habrá concluido con un trabajo que hubiera requerido de
mucho más tiempo si se hubieran tenido que editar cada uno de los elementos
por separado.
Por otro lado, los símbolos contribuyen al rendimiento de la película, ya que el
número de instancias puede ser múltiple en un documento pero, únicamente,
será necesario descargar y gestionar la memoria ocupada por el símbolo. Por
ejemplo, se puede dibujar un rosal entero utilizando solo la memoria requerida
por el símbolo de una rosa. Flash divide en tres clases los tipos de símbolo que
puede manejar. Cada uno de ellos tiene unas características y unas funciones
muy concretas.
Cada símbolo tiene su propia línea de tiempo que funciona en consonancia, o de
forma independiente, de la línea de tiempo de la escena principal (dependiendo
del tipo de símbolo del que se trate). Los símbolos pueden estar compuestos por
uno o más fotogramas y pueden ser estéticos o animados. Se modifican en un
nivel distinto de edición, al igual que los grupos, con la diferencia de que la línea
de tiempo que aparece en el nivel de edición de símbolos pertenece al propio
símbolo, y no a la escena principal.
8
Los símbolos pueden editarse en el contexto de la escena en la que estén siendo
utilizados, haciendo clic en cualquier instancia de ese símbolo, o bien, pueden
editarse de forma independiente de cualquier instancia haciendo doble clic en el
icono del símbolo que hay ubicado en la paleta de la Biblioteca.
Biblioteca Analicemos a
continuación los tres tipos de símbolo.
Símbolo Gráfico:
Gráfico:
Este tipo de símbolo está disponible desde las primeras versiones. Los símbolos
gráficos pueden utilizarse para incluir gráficos, fotografías u otros símbolos
gráficos. La utilidad principal de los símbolos gráficos es la de albergar aquellos
elementos que se van a utilizar repetidamente dentro de una película y son las
unidades mínimas que pueden ser utilizadas para crear una animación con
interpolación de movimiento. Un símbolo gráfico puede contener varios
fotogramas en su línea de tiempo (es decir, puede contener animaciones), pero la
reproducción de estos fotogramas se realiza de forma sincronizada con la línea
de tiempo principal.
Esto quiere decir que, para que el ciclo de animación de un símbolo gráfico se vea
9
completo, es preciso que la línea de tiempo principal tenga, al menos, el mismo
número de fotogramas que la línea de tiempo del símbolo. Si la línea de tiempo
principal alberga más fotogramas que la línea de tiempo del símbolo, la forma en
la que la animación del símbolo será representada en pantalla, dependerá de las
opciones escogidas para la instancia asociada, dentro del panel de Propiedades.
Propiedades
En el centro del panel aparece una lista desplegable que permite escoger una de
estas opciones:
•
Reproducir indefinidamente:
indefinidamente EI ciclo de animación del símbolo gráfico se
repite tantas veces como le sea posible, dentro de la Iongitud de la línea
de tiempo principal. Por ejemplo, un símbolo gráfico compuesto por siete
fotogramas, se reproducirá cinco veces en la línea de tiempo de una
escena que esté compuesta por 35 fotogramas.
•
Reproducir una vez: El ciclo de animación del símbolo se reproduce una
única vez, siempre y cuando la línea de tiempo principal tenga, como
mínimo, el mismo número de fotogramas que Ia línea de tiempo del
símbolo gráfico.
•
Fotograma único:
único La instancia muestra solo el primer fotograma del
símbolo, independientemente de la Iongitud de la animación que
contenga el símbolo.
Las instancias de símbolos gráficos no admiten nombre de instancia dentro de
sus propiedades, ya que no se utilizan como elemento de programación sino
únicamente por su función gráfica.
10
Símbolo Botón:
Este tipo de símbolos tiene una importancia muy especial dentro de los proyectos
de Flash, ya que se utilizan para crear botones que servirán para aportar
información de forma interactiva al usuario, o para trasladarle de una parte a otra
de la aplicación. De todos los tipos de símbolos que posee Flash, éste es el único
que tiene una línea de tiempo propia y los diferentes fotogramas que la
componen no sirven para crear animaciones, sino para identificar los posibles
estados en los que puede hallarse el botón.
Cada uno de estos fotogramas posee una etiqueta que permite identificar la
función que desempeña:
•
•
•
•
El fotograma Reposo contendrá el aspecto del botón cuando el usuario no
esté interactuando con él. Es el aspecto que tiene el botón por defecto.
El fotograma Sobre mostrará el aspecto del botón cuando el usuario
coloca el cursor del ratón sobre él sin hacer clic.
El fotograma Presionado será el aspecto que tomará el botón cuando el
usuario haga clic sobre él.
EI fotograma Zona activa delimita el área sensible del botón (no aparecerá
nunca en pantalla). Si no se asigna una zona activa a un botón, será la
misma que la del fotograma inmediatamente anterior. De esta forma, un
botón con forma de texto sólo será sensible en las partes gráficas de los
caracteres (el hueco de una "U", o una "P", no será sensible). En este caso,
sería preciso definir un área sensible rectangular que englobase toda la
palabra.
11
Para poder introducir un gráfico en cada uno de los fotogramas que forman parte
de un símbolo botón, es necesario convertir cada fotograma en un Fotograma
clave,
clave a través de la opción de menú Insertar > Línea de tiempo > Fotograma
clave.
clave Aparecerá un punto negro sobre el fotograma que permite insertar un
nuevo gráfico, o modificar el existente, sin que ello afecte a los fotogramas de los
otros estados.
Las instancias de un símbolo botón pueden tener un nombre de instancia que se
introduce en el panel de Propiedades
Propiedades,
ades cuando la instancia está seleccionada en el
escenario. Los botones son programables mediante ActionScript y suelen incluir
instrucciones que se ejecutan cuando el usuario interactúa con ellos.
Para probar el funcionamiento de los botones (y comprobar como cambian de
aspecto, cuando se pasa por encima de ellos con el puntero o cuando se hace
clic), se escoge la opción de menú Control> Habitar botones simples.
simples Para volver
al modo de selección y edición de botones se vuelve a seleccionar la misma
opción de menú. Para acceder a la línea de tiempo de un botón, se hace doble
clic sobre cualquier instancia de botón en el escenario, o bien, se hace doble clic
sobre el icono de símbolo, en la paleta de Biblioteca.
Biblioteca
Es posible crear botones invisibles. Lo único que hay que hacer es introducir un
grafico en el fotograma clave correspondiente a la zona activa; el resto de
fotogramas se dejan totalmente en blanco. AI arrastrar al escenario una instancia
de este botón aparecerá un gráfico semitransparente, de color cian y con la
silueta del elemento insertado en el fotograma Zona activa.
activa EI botón aparece de
este modo, para que el desarrollador no trabaje a ciegas y pueda situarlo en Ia
posición adecuada, pero será totalmente invisible en la película final.
Símbolo Clip de Película:
12
Éste es, probablemente, el tipo de símbolo más complejo que posee Flash, más
por su multitud de usos que por su dificultad de comprensión. Los clips de
película fueron pensados, originariamente, para albergar pequeñas secuencias
de animación en bucle que se ejecutan independientemente de la longitud en
fotogramas de la línea de tiempo de la escena principal.
Aunque la animación principal solo posea un fotograma, el clip de película se
mostrará en toda su longitud (aunque para poder observarlo sea necesario
publicar y visualizar el fichero SWF final).
AI contrario que los símbolos gráficos, un clip de película no muestra su
animación en modo de desarrollo, es decir, directamente en el escenario de
trabajo de Flash. Por este mismo motivo, la línea de tiempo interna de un clip de
película puede tener cualquier longitud, sin necesidad de preocuparse por la
Iongitud del resto de líneas de tiempo del documento.
Los clips de película también se utilizan con mucha frecuencia como elementos
de programación, ya que, mediante ActionScript, es posible activar o detener su
reproducción, ir a un fotograma concreto del clip o, incluso, cambiar sus
cualidades de tamaño, posición, rotación o transparencia (entre otros
parámetros). Se puede controlar el comportamiento de una instancia de clip de
13
película, a través de su nombre de instancia, que se introduce en el panel de
Propiedades.
Propiedades
Este tipo de instancias puede recoger eventos de ratón o teclado (al igual que los
botones) y puede incluir en su interior gráficos, grupos, símbolos gráficos, botones
u otros clips de película.
Si un símbolo de clip de película incluye una animación y se pretende observar el
aspecto que ofrece la animación de una o varias instancias de ese clip de película
en el contexto del escenario de Flash, es necesario visualizar el fichero SWF final,
ya que el fichero fuente original (con la extensión FLA) no permite visualizar
directamente la animación de los clips de película. Para ver el resultado no es
necesario proceder a la publicación final del fichero SWF, es posible observar el
resultado a través de la opción de menú Control > Probar película. Aparecerá una
nueva ventana mostrando el aspecto que del fichero SWF final, incluyendo la
animación de los clips de película. Para volver al modo de trabajo, se hace clic en
el botón Cerrar.
Cerrar
También se puede acceder con la tecla F12: abre el programa navegador que el
sistema operativo tenga asignado por defecto y muestra en su interior una página
Web con la película tal y como podrá ser observada en Internet, incluyendo sus
dimensiones finales.
Crear un símbolo desde cero:
•
•
•
•
Se selecciona la opción de menú Insertar > Nuevo símbolo (CTRL+F8).
(CTRL+F8) O
bien a través del botón Nuevo Símbolo de la barra de estado de la
Biblioteca.
Biblioteca
Aparecerá un cuadro de diálogo donde se introduce el nombre y el tipo del
nuevo símbolo (no así el punto de inserción, pues el símbolo no contiene
aún ningún gráfico respecto al que orientarse).
Aceptar.
Aceptar
Aparece un nuevo nivel de edición donde no existen los límites del
escenario, ya que es un escenario de trabajo abstracto, donde se supone
que el símbolo puede tener cualquier extensión y longitud. Una cruz en el
centro representa el punto de inserción que tendrá el símbolo cuando se
inserte una instancia en el escenario. Cualquier elaboración gráfica que se
14
•
•
haga, a partir de este momento, debe tener en cuenta esa cruz de registro
que orienta acerca de Ia futura posición del símbolo. La cruz, de hecho,
marca la coordenada (0,0) del símbolo dentro de su sistema local de
coordenadas.
Una vez se ha introducido todo el contenido del símbolo, se hace clic en el
icono de la claqueta, para volver al nivel de edición principal.
Si se observa la paleta de Biblioteca,
Biblioteca se puede ver como, ahora, aparece
un nuevo icono perteneciente al nuevo símbolo.
Crear un símbolo a partir de un elemento en el escenario:
•
•
•
•
•
Se selecciona el material que se pretende convertir en símbolo.
Se escoge la opción de menú Modificar > Convertir en símbolo (F8).
Aparecerá un cuadro de diálogo dónde se introduce el nombre del símbolo
y se escoge una opción entre los tres tipos de símbolo. En la opción Tipo se
decide si el símbolo será un clip de película, un botón o un gráfico.
En la opción Registro aparece una cuadrícula formada por nueve
pequeños cuadrados distribuidos en filas y columnas. Esos cuadrados
representan la ubicación que tendrá el punto de inserción del símbolo
(respecto al rectángulo de encaje del gráfico), cuando se incluya una
instancia en el escenario. Se hace clic en el punto que se desea que
funcione como punto de inserción.
Aceptar.
Aceptar
Si se observa la paleta de Biblioteca,
Biblioteca se puede ver como, ahora, aparece
15
un nuevo icono perteneciente al nuevo símbolo.
Crear un símbolo a partir de unos fotogramas (para clips de película y gráficos):
•
•
•
•
•
Se seleccionan los fotogramas que forman parte del fragmento que
pretende convertirse en símbolo, haciendo clic y arrastrando encima de las
celdas correspondientes en la línea de tiempo.
Se selecciona la opción de menú Edición > Línea de tiempo > Cortar
fotogramas
fotogramas.
togramas
Se crea un nuevo símbolo mediante la opción de menú Insertar > Nuevo
símbolo.
símbolo
En el cuadro de diálogo que aparece, se introduce el nombre y el tipo de
comportamiento (clip de película o gráfico).
Aceptar.
Técnicas de animación en la línea de tiempo en Flash CS4:
Flash CS4 presenta diferentes formas para crear animaciones y cada una de ellas
ofrece múltiples posibilidades:
16
•
•
•
•
•
Interpolaciones de movimiento.
movimiento Asignamos distintos valores en distintos
fotogramas a una o varias propiedades de un objeto como, por ejemplo, la
posición, la escala, la transparencia, etc. Flash calculará los valores
intermedios entre ambos fotogramas, de tal forma que el cambio sea
gradual.
Interpolación clásica.
clásica Es la técnica que inversiones anteriores ofrecía Flash
para realizar interpolaciones de movimiento. Son similares en algunos
aspectos a las interpolaciones de movimiento, aunque un poco más
difíciles de crear.
Cinemática inversa, animación mediante huesos.
huesos El objetivo de la
cinemática inversa consiste en encontrar el gesto que deben adoptar las
diferentes articulaciones para que el final del sistema articulado llegue a
una posición concreta.
Interpolaciones de forma. Son aquellas animaciones que nos permiten
pasar de una forma a otra, este tipo de interpolaciones solo se puede
realizar con formas que son los objetos menos complejos de Flash.
Fotograma a fotograma.
fotograma Se muestra cada fotograma en un momento en
el tiempo, se puede crear la sensación de animación al mostrar cada
fotograma un contenido diferente. En esta animación no hay
interpolaciones por lo que es la animación más costosa.
Interpolación de movimiento:
Para crear este tipo o cualquier interpolación, seleccionamos la instancia en el
escenario hacemos clic Mouse derecho y seleccionamos Crear Interpolación
Interpolación de
17
movimiento.
movimiento También podemos hacerlo a través del menú principal Insertar >
Interpolación de movimiento o seleccionando el fotograma en la línea de tiempo
y Mouse derecho Crear interpolación de movimiento.
Para crear una interpolación de movimiento, cada objeto debe estar en una capa.
Al crear esta animación, podemos ver que se han creado 24 fotogramas, se
añaden automáticamente dependiendo de los fotogramas por segundo del
cabezal lector que tengamos configurados en el documento.
18
El paso siguiente es llevar el cabezal reproductor de la línea de tiempo al
fotograma 24 y modificar las propiedades (tamaño, posición....escala...) que nos
interesen de la instancia en el escenario y automáticamente Flash creará un
fotograma clave que contiene el cambio de propiedades.
Este tipo de interpolación tiene la característica de dibujar en el escenario la
trayectoria del movimiento que permite ser modificada con la pluma o la
herramienta de subselección y crear movimientos curvos, lo que en versiones
anteriores realizábamos con la capa Guía de movimiento.
19
Animar con efecto máscara:
Las máscaras constituyen uno de los recursos estrellas para cualquier animador
o diseñador. Las máscaras son un recurso de animación muy útil, ya que
permiten mostrar un gráfico o una animación a través de la forma de otro gráfico
que actúa a modo de ventana. De esta forma, es posible recortar la visualización
y mostrar sólo un fragmento con una silueta determinada. EI objeto que actúa
como máscara puede ser un objeto estético, o bien otra animación. En otras
palabras, la máscara puede ser una máscara animada. EI procedimiento para
20
crear una máscara es el siguiente:
1. Se selecciona una capa en la que haya una animación.
2. Con esa capa seleccionada, se crea una nueva capa que, por defecto, debe
aparecer justo encima de la capa seleccionada.
3. En esta nueva capa se crea un gráfico o una animación. La única condición
que se debe seguir es que el objeto, u objetos, de esta capa estén
compuestos por colores planos. Este gráfico o animación debe coincidir,
en algún momento, con Ia posición de las imágenes de la capa inferior ya
que será el elemento que hará las funciones de máscara.
4. Una vez están ambas capas listas, se hace clic con el botón derecho del
ratón (Control
Control + clic en Macintosh) y, en el menú contextual que aparece,
se selecciona la opción Máscara.
5. La capa de máscara aparecerá con un nuevo icono y la capa inferior
también cambiará al nuevo estado de capa enmascarada. EI nuevo icono
de la capa muestra la subordinación a la máscara. Se puede ejecutar la
animación para observar el resultado.
Tanto las capas de máscara como las capas enmascaradas se bloquean en el
momento en que se realiza la operación, pero, en cualquier momento, es posible
volver a editarlas. Para ello, simplemente se hace clic en el icono del candado de
la capa enmascarada o de la capa de máscara. Las capas se desenmascaran
momentáneamente para permitir la edición de sus elementos. Una vez se ha
terminado con las modificaciones, se hace clic de nuevo en el icono del candado
y, automáticamente, las capas implicadas volverán a enmascararse.
Se pueden añadir a la máscara tantas capas enmascaradas como se desee. Para
conseguirlo se arrastra el icono de la capa que se desee enmascarar sobre el
icono de la capa de máscara. AI hacerlo, la nueva capa pasará a formar parte de
las capas subordinadas a la máscara.
21
Máscaras con degradados:
Como se ha comentado, Flash toma como máscara cualquier pieza sólida
dibujada en la capa que se haya indicado como máscara.
Esto genera un problema y es que Flash pasa por alto los mapas de bits, colores,
transparencias, estilos de línea, etc.; es decir, se ve... o no se ve. Las áreas
rellenas de una máscara se convierten en transparentes y las zonas no rellenas
en opacas. Lo más cómodo para emplear una máscara que utilice un degradado
(por ejemplo, una ventana de visión con los bordes difuminados) es simularla
desde una aplicación de retoque fotográfico. Por ejemplo, utilizando una
aplicación como PhotoShop o Firefox se pueden crear una forma opaca y con el
borrador eliminar las zonas que realmente se convertirán en máscara (aquí el
proceso es inverso, las zonas opacas se convertirán en las zonas transparentes y
las zonas no visibles harán de máscara).
Si, por ejemplo, se crea un recuadro negro y se borra una zona, éste área
transparente trabajará a modo de máscara. Sólo hace falta guardar la imagen en
un formato que permita transparencias e importarla a la biblioteca (por ejemplo
22
PNG).
Máscaras animadas:
Las máscaras también se pueden animar. Sólo hay que tener en cuenta que en
las interpolaciones de movimiento es necesario un símbolo, texto u objeto de
dibujo. Bastaría con convertir la máscara a símbolo y en la capa en la que se
encuentra la máscara realizar esta interpolación de movimiento.
EI efecto revelaría la imagen, texto, etc., que figure debajo de la máscara a
medida que ésta se desplace.
Si se necesita el contorno (hay que recordar que todo Io que figura en la máscara
se convierte en opaco y, por tanto, no existe el contorno) es necesario crear una
capa adicional fuera de la influencia de la máscara. Si se realiza una animación
de movimiento con la máscara sería necesario desplazar también ese contorno
para que simule el perímetro de la máscara.
Animación con filtros:
filtros:
Los filtros permiten incorporar distintos efectos visuales a botones, clips de
película y textos. Estas características solo se encuentran dentro de Flash
Professional. Para acceder a estos efectos de tipo filtro hay que hacer uso de la
pestaña existente en el panel Propiedades.
Propiedades
Un filtro gráfico consiste en un proceso que altera los píxeles de la imagen para
obtener algún tipo de efecto.
Por ejemplo, un efecto de desenfoque (blur) hace que los píxeles que conforman
los bordes de la imagen se vayan difuminando e integrando con los que la
imagen pasa a ser más borrosa. Ente los efectos incorporados dentro de Flash
23
Professional se encuentran el desenfoque, sombra, iluminado, bisel, iluminado
degradado, bisel degradado y ajuste de color.
•
•
•
•
•
•
•
Desenfocar: Se suavizan los bordes y los detalles de cada pieza. Se puede
utilizar para objeto que no estén en primeros planos o para simular
movimientos.
Sombra: Simula la sombra de un objeto, es decir, el propio objeto con
colores más suaves, desenfocado y puesto detrás del objeto principal.
Iluminado: Se puede utilizar para proporcionar un borde de color al texto.
Este iluminado puede ser interior o exterior.
Bisel: Emplea un efecto de resaltado para destacar el elemento a modo de
botón. Este efecto puede ser interior; exterior o completo.
Iluminado degradado: Genera un efecto de iluminación con un degradado
de una zona a otra. Esto requiere modificar el valor de alfa para que
cambie a Io largo del efecto
Bisel degradado: Es parecido al caso anterior pero ahora no es la
iluminación la que utiliza un color degradado sino el propio bisel de la
pieza
Ajuste de color: Uno de los problemas más graves de Flash era la
imposibilidad de variar el color para las instancias de un objeto de la
biblioteca. Lo que si se podía hacer era convertirlo en símbolo y variar el
color o el alfa para la pieza antes de realizar la animación. En esta versión
la opción Ajuste de color permite ajustar el nivel de brillo, contraste, matiz
y saturación del clip, texto o botón seleccionado.
Paso a paso:
1. Seleccionar en el escenario el botón objeto de texto o clip de película.
2. Hacer clic en el panel Filtros situado en el Inspector de Propiedades.
3. Utilizar el botón Añadir filtro (+) que mostrará un menú emergente con las
opciones expuestas antes. Se escoge una.
4. Ajustar los parámetros de configuración según el filtro escogido en el
menú emergente. Si se quiere quitar un filtro asignado, el proceso pasa
por:
• Seleccionar en el escenario la pieza que tenga el filtro
incorporado.
• Hacer clic en el panel Filtros
Filtros situada en el Inspector de
Propiedades.
• Seleccionar el filtro que se va a eliminar
• Utilizar el botón Eliminar filtro ((-) para descartar ese efecto.
24
La herramienta hueso y la cinemática inversa:
Cinemática inversa, animación mediante huesos. El objetivo de la cinemática
25
inversa consiste en encontrar el gesto que deben adoptar las diferentes
articulaciones para que el final del sistema articulado llegue a una posición
concreta.
El primer paso para crear movimientos articulados es definir los huesos del
objeto. Para ello podemos utilizar la herramienta hueso. La herramienta hueso le
indica a Flash cómo se conectan las series de instancias de clip de película. Los
clips de película conectados se denominan esqueleto y cada clip de película se
denomina nodo.
nodo
En el ejemplo hemos arrastrado los distintos clips del muñeco y puestos en su
lugar en la escena formando la figura deseada.
Una vez colocados, hacemos clic sobre la base de la instancia que será el hueso
principal, arrastramos hasta el inicio de la siguiente instancia y habremos
definido el primer hueso. Volvemos a hacer clic en la base de la segunda
instancia hasta el inicio de la siguiente para definir otro hueso jerarquizado.
26
Al primer hueso de un esqueleto se le considera el padre,
padre y al hueso conectado a
éste se le denomina hijo.
hijo Por ejemplo, un esqueleto de un muñeco podría tener
una pelvis conectada a dos muslos, los cuales a su vez estarían conectados con
dos pantorrillas. La pelvis sería el padre, cada uno de los muslos un hijo, siendo
los muslos “hermanos” entre sí. Conforme el esqueleto vaya adquiriendo
complejidad, podemos utilizar el inspector de propiedades para recorrer los
elementos de la jerarquía en base a sus relaciones.
27
Podemos modificar fácilmente el esqueleto recolocando los nodos o borrándolos
y agregando otros nuevos. Si uno de los nodos del esqueleto está levemente
desplazado, por ejemplo, se puede usar la herramienta de transformación libre
para rotarlo o moverlo a una nueva posición y esto no cambiará los huesos.
También podemos realizar modificaciones en los nodos pulsando la tecla Alt u
Opción mientras arrastramos el nodo.
Para eliminar huesos: se selecciona el hueso u presionar Supr en el teclado. Se
eliminará el hueso seleccionado y todos los huesos conectados a éste.
Realizar movimientos en 3D:
Las animaciones en 3D presentan la complicación adicional del tercer eje (z).
Cuando seleccionamos la herramienta de Rotación o Traslación rotación,
rotación
debemos tener en cuenta la opción Translación global
global que figura en la base del
panel Herramientas.
Herramientas La Transformación global conmuta entre la opción global
(botón hundido) y la opción local (botón levantado). Al mover un objeto con la
28
opción global las transformaciones se harán en relación al sistema de
coordenadas global, mientras que al mover un objeto con la opción local
activada, las transformaciones que se le apliquen serán en relativas a sí mismo.
Publicar la película de Flash: el SWF y otros archivos
La opción del menú principal Archivo > Configuración
Configuración de publicación (SWF), es la
opción más importante ya que es la que hace referencia a la película Flash como
tal. En esta opción, también podemos publicar distintos archivos de imagen y un
proyector de Flash que puede ser visto en cualquier ordenador tenga o no el
Player de Flash instalado.
29
Dentro de la pestaña Flash (SWF) se pueden encontrar todas las opciones
disponibles. Comentemos las principales:
•
Versión:
Versión
Como su nombre indica, se escoge la versión en la que se va a publicar la
película SWF, Una versión más baja asegura la compatibilidad con versiones
antiguas de Flash Player; pero supone sacrificar prestaciones. Si se tienen dudas
acerca de las prestaciones que pueden o no utilizarse, lo recomendable, si no se
quiere guardar en la última versión, es guardar en una versión anterior, ya que la
posibilidad de encontrar usuarios que conserven versiones más antiguas cada día
es más remota pues el propio navegador se encarga de proponer la actualización
al navegante.
Pero hay que tener cuidado con la versión que se emplea para crear el
reproductor. Las novedades incorporadas en cada una de las versiones de Flash
30
solo servirán para esa versión y posteriores.
•
Orden de carga:
Establece el orden de carga de las capas De arriba abajo o De abajo arriba.
arriba Si el
fichero no ocupa mucha memoria y se carga rápido, apenas se notará diferencia
entre una opción y otra, pero, de lo contrario, debe decidirse qué gráficos interesa
que aparezcan antes. Si nuestra película Flash contiene el logotipo de la empresa
en una capa superior, por ejemplo, y se desea que aparezca antes que cualquier
otro elemento, entonces, se escogerá la versión De arriba abajo.
abajo
•
Versión de ActionScript:
ActionScript
Permite escoger con qué versión de ActionScript va a trabajar la película. La
2.0 es nueva desde la versión MX 2004.
Dentro del apartado Opciones:
Opciones
•
Generar informe de tamaño:
tamaño
Crea un fichero de texto con un informe completo acerca de los contenidos de la
película, incluyendo también otros detalles como la duración, la cantidad de
fotogramas o el tamaño de memoria ocupado por los símbolos y los medios
importados. Este informe es de mucha utilidad cuando se quiere optimizar un
proyecto, pues aporta una información exhaustiva acerca del documento de
Flash.
•
Proteger frente a importación:
importación
Activar esta opción impide que la película SWF pueda ser importada por ningún
tipo de software, ni siquiera por el propio Flash. Hay que acordarse de activar esta
casilla si queremos proteger nuestro trabajo, o cualquier material con copyright,
que se prevea que pueda ser utilizado de forma indebida. Del mismo modo, hay
que asegurarse de que esta opción no esté marcada cuando se diseña una
31
película con el objetivo de utilizarla como material en otro documento.
•
Omitir acciones de trazado:
trazado
Dentro de la programación en ActionScript, es posible insertar una serie de
instrucciones (llamadas "instrucciones de trazado") que sirven para mostrar al
desarrollador, en una ventana aparte (la ventana de Salida),
Salida cualquier aspecto de
Ia programación que se quiera controlar durante el proceso de desarrollo. Para
que estos avisos no aparezcan en la película final, solo existen dos opciones:
borrar una por una todas las instrucciones de trazado o activar esta casilla.
•
Depuración permitida:
permitida
Si se activa esta opción, el desarrollador podrá realizar pruebas de depuración. La
depuración es un método de programación que consiste en comprobar el valor de
los datos generados por una aplicación, con el fin de encontrar errores y poder
proceder a su rectificación. Esta depuración se podrá realizar aunque la película
ya esté publicada en Internet. Al activar esta opción, se activa un campo de
entrada de contraseña. Es recomendable que el desarrollador introduzca una
contraseña. Ésta le permitirá, solo a él, proceder a la depuración.
•
Comprimir película:
película
Cuando esta opción está activada, la película de Flash se comprime para ocupar
menos espacio en disco. Por defecto, esta opción siempre está activada. EI único
caso en el que tendría sentido desactivarla sería cuando el destino final de la
película no va a ser una página Web de Internet sino, por ejemplo, una aplicación
independiente que se ejecute desde el disco duro.
•
Optimizar para Flash Player 6 r65:
r65
Si se escoge la versión 6 del Player, como formato de exportación, entonces, es
posible activar esta opción para aprovechar la revisión r65 que se hizo de esta
versión del Player. Es necesario que el usuario tenga instalada esta versión en su
navegador, para poder aprovechar las prestaciones de esta opción.
32
•
Calidad
Calidad JPEG:
JPEG
En este deslizador se decide el nivel de comprensión de las imágenes de mapa
de bits importadas en la película y a las que no se haya definido un nivel de
compresión específico dentro del panel de Biblioteca.
Biblioteca EI valor ajustado será el
utilizado de forma predeterminada.
•
Flujo de audio:
audio
Haciendo clic en el botón Establecer,
Establecer se escoge un nivel de compresión para
todos los sonidos de la película, con el tipo de sincronización Flujo,
Flujo que no se
hayan comprimido previamente, de forma individual, en el panel de Biblioteca.
Biblioteca
Las opciones de compresión que se muestran son las mismas que se comentaron
en el apartado de sonido.
•
Evento de audio:
audio
Haciendo clic en el botón Establecer,
Establecer se escoge un nivel de compresión para
todos los sonidos de la película, con el tipo de sincronización Evento o Inicio.
Inicio Las
opciones de compresión que se muestran son las mismas que se comentan en el
apartado de sonido. El hecho de que se puedan comprimir los dos tipos de sonido
por separado obedece a que los sonidos cortos (como clips de botones o
pequeños efectos) pueden comprimirse más que fragmentos musicales con
sincronización de tipo Flujo,
Flujo sin que se aprecien, de forma evidente, grandes
cambios de calidad.
•
Suplantar configuración de sonido:
sonido
Al activar esta casilla se ignora la configuración individual de compresión que
pueda haberse dado a un sonido dentro del panel de Biblioteca y se asignan los
ajustes genéricos a todos los sonidos del documento sin excepción. Esta opción
puede utilizarse para crear versiones de "borrador" de la aplicación (que ocuparán
menos memoria y tendrán menos calidad de audio), antes de realizar la
publicación definitiva.
33
•
Exportar sonidos de dispositivo:
dispositivo
Esta opción solo está disponible en la versión profesional de Flash y permite
utilizar los sonidos propios del dispositivo reproductor (como teléfonos móviles)
en lugar de los sonidos propios de la aplicación.
•
Seguridad de reproducción local:
Es un nuevo modelo de seguridad incluido en Flash 8 para determinar el nivel de
seguridad. Si se elige la opción Acceder solo a archivos locales,
locales la película SWF
publicada solo podrá interactuar con los recursos del sistema local (no podrá
enviar información ni datos a la red). Si se escoge la opción Acceder solo a la red
la película SWF publicada solo podrá interactuar con los recursos existentes en la
red (y no del sistema local).
34
35