Flash II: Animacin avanzada con Flash CS4

Antes de animar Antes de introducirnos en la animacin avanzada, es conveniente conocer todos los elementos de los que disponemos para animar. Estos elementos sern considerados como los actores de nuestra pelcula, donde tomarn ms o menos protagonismo. La biblioteca ser nuestra herramienta esencial para crearlos, guardarlos y organizarlos.

Elementos de animacin: Para la realizacin de animaciones se necesita que los elementos aparezcan en el escenario. Sabemos que Flash puede trabajar con ficheros grficos, clips de video y elementos de audio. Sin embargo, estos no son los elementos bsicos para realizar las animaciones. Flash utilizar una serie de elementos que dependern del tipo de animacin que se quiera realizar. Estos elementos se podran agrupar en tres categoras: Estructuras simples:

Son las formas. Cuando se dibuja un elemento en pantalla con alguna de las herramientas para generar figuras y elementos de dibujo (lpiz, pluma, pincel, valo, rectngulo y lnea) se crean formas. Dependiendo del tipo de herramienta empleada se generar un contorno, un relleno o bien un contorno ms un relleno, pero siempre son formas. Esto es importante porque son estructuras bsicas y son las nicas que pueden emplearse en una interpolacin de forma (como vimos en el tema anterior). Estructura compuesta:

Un nivel por encima de las formas se encuentran las estructuras compuestas. Se caracterizan porque actan a modo de objetos individuales, es decir, no pueden seleccionarse por partes. Hay tres tipos: o Grupos: Es una asociacin de formas y/o objetos para que acten como si de un nico elemento se tratase. o Objetos de dibujo: AI crear un elemento en pantalla a travs de las herramientas proporcionadas (lpiz, pluma, pincel, valo, rectngulo y lnea) se pueden crear objetos que agrupen el contorno y el relleno. Esta opcin, nueva desde Flash 8, se activa haciendo clic en el icono Dibujo de Objeto que aparece en Ia zona 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). Lo que se va a conseguir son las letras, nmeros, smbolos, etc., en los que se divide el texto. Si se selecciona uno de estos caracteres y se vuelve a elegir la opcin Separar se conseguir una forma. Este proceso es irreversible: la forma nunca podr volver a convertirse en texto. Smbolos: Constituyen la estructura ms importante de Flash (y son bsicos para realizar trabajos con ActionScript). Existen tres tipos de smbolos: Clip de pelcula, botones y grficos.

CI-011 v.01 Dossier / 1

La Biblioteca En el panel Biblioteca se guardan cada uno de los smbolos que se hayan creado en Flash y los elementos externos incorporados (clips de video, ficheros de audio e imgenes). Los elementos importados se pueden colocar directamente en el escenario o bien incluirlos en la Biblioteca. Conviene siempre recurrir a esta ltima tcnica, 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. Automticamente se crear una instancia del elemento elegido.

AI panel Biblioteca se puede acceder de dos formas: A travs 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. Las columnas son: Nombre: Indica el nombre del elemento de la 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 adems cumplir una de las pautas bsicas 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: Indica el tipo del elemento (clip de pelcula, grfico, botn, sonido, video incorporado o clip compilado). Nmero de usos: Nmero de instancias en el escenario de un objeto de la Biblioteca.
CI-011 v.01 Dossier / 2

Vinculacin: ActionScript trabajar con los elementos existentes en pantalla a travs 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 (botn derecho > Vinculacin). El nombre indicado ser el que aparezca en esta tabla. Fecha de modificacin: 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 ratn entre los encabezados de dos columnas y arrastrar la lnea para cambiar al tamao (Io que no se puede hacer es alterar el orden de las columnas).

Organizacin de smbolos en carpetas: Segn vaya avanzando el desarrollo de un proyecto, es normal que la paleta de la Biblioteca vaya creciendo para almacenar un nmero cada vez mayor de smbolos, hasta que llegue un punto en el que sea difcil manejar o identificar de forma rpida todos y cada uno de los smbolos. Para poder gestionar el conjunto de smbolos se pueden crear carpetas que agrupen los distintos elementos en categoras. As se podr identificar y encontrar un smbolo concreto con mayor rapidez. Para crear una carpeta en la Biblioteca, se hace clic en el botn de Nueva Carpeta dentro de la paleta de Biblioteca. Aparecer un nuevo icono de carpeta dentro de Ia Biblioteca. Para colocar un smbolo dentro de una carpeta, se arrastra el icono del smbolo sobre el icono de la carpeta. Tambin es posible colocar una carpeta dentro de otra, arrastrando dicha carpeta sobre el icono de la carpeta dnde se pretende guardar aquella. De este modo, es posible crear una jerarqua estructurada de carpetas dentro de la paleta Biblioteca, que permite gestionar mejor los smbolos y, en consecuencia, el contenido de la pelcula.

Importar smbolos a travs de bibliotecas: En muchas ocasiones se presentar la necesidad de utilizar en un proyecto otros elementos utilizados en proyectos anteriores. No tiene ningn sentido volver a crear un objeto si ya se ha establecido anteriormente en otro documento. Supondra una prdida 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 smbolos. Para adquirir smbolos de las bibliotecas de otros documentos: Se selecciona la opcin de men Archivo > Importar> Abrir biblioteca externa. Aparecer un cuadro de dilogo en que debe seleccionarse el documento Flash original (el fichero de trabajo, no Ia pelcula 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 smbolos que contiene dicho documento. El fondo de la paleta de Biblioteca 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 smbolo a la pelcula en curso se arrastra una instancia de Ia biblioteca importada al escenario.
CI-011 v.01 Dossier / 3

A partir de ese momento se observar como el icono del smbolo 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 animacin estn ordenados y debidamente identificados i que la Biblioteca est actualizada y su peso sea lo menor posible. Flash comprime los elementos grficos para reducir al mximo el tamao 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 travs de la columna Nmero de usos. Los que tengan valor 0, son los que todava no se han empleado. Basta con seleccionarlos y hacer clic en el icono de la parte inferior (Cubo de basura) para eliminarlos. Hacer clic en el icono que aparece a la derecha del nombre de la Biblioteca. En la lista de opciones escoger Seleccionar elementos no utilizados. Una vez elegidos se pueden eliminar a travs del icono Eliminar o a travs de la tecla Suprimir.

Qu son los smbolos y cmo utilizamos los distintos tipos de smbolos: Los smbolos constituyen uno de los elementos ms importantes a la hora de trabajar con Flash y representan un nuevo nivel de edicin respecto a los grupos. Un smbolo es un elemento que reside en la biblioteca de la pelcula y que puede reutilizarse tantas veces como sea necesario y en la cantidad deseada, dentro del escenario de Flash. En cualquier fotograma y en cualquier escena. Cuando se desea utilizar un smbolo, 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. Cada vez que se arrastra el icono del smbolo de la biblioteca al escenario, aparece una nueva instancia. En una misma escena, y en un mismo fotograma, pueden coexistir cualquier nmero de instancias de un mismo smbolo. Las instancias pueden colocarse, rotar y cambiar de tamao, de forma independiente una de las otras, pero cualquier modificacin que se realice directamente sobre el smbolo en el que estn basadas, supondr el cambio automtico de todas las instancias que reflejarn los nuevos cambios. Este mtodo 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 smbolo 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 ms tiempo si se hubieran tenido que editar cada uno de los elementos por separado. Por otro lado, los smbolos contribuyen al rendimiento de la pelcula, ya que el nmero de instancias puede ser mltiple en un documento pero, nicamente, ser necesario descargar y gestionar la memoria ocupada por el smbolo. Por ejemplo, se puede dibujar un rosal entero utilizando solo la memoria requerida por el smbolo de una rosa. Flash divide en tres clases los tipos de smbolo que puede manejar. Cada uno de ellos tiene unas caractersticas y unas funciones muy concretas. Cada smbolo tiene su propia lnea de tiempo que funciona en consonancia, o de forma independiente, de la lnea de tiempo de la escena principal (dependiendo del tipo de smbolo
CI-011 v.01 Dossier / 4

del que se trate). Los smbolos pueden estar compuestos por uno o ms fotogramas y pueden ser estticos o animados. Se modifican en un nivel distinto de edicin, al igual que los grupos, con la diferencia de que la lnea de tiempo que aparece en el nivel de edicin de smbolos pertenece al propio smbolo, y no a la escena principal. Los smbolos pueden editarse en el contexto de la escena en la que estn siendo utilizados, haciendo clic en cualquier instancia de ese smbolo, o bien, pueden editarse de forma independiente de cualquier instancia haciendo doble clic en el icono del smbolo que hay ubicado en la paleta de la Biblioteca. Analicemos a continuacin los tres tipos de smbolo.

Smbolo Grfico:

Este tipo de smbolo est disponible desde las primeras versiones. Los smbolos grficos pueden utilizarse para incluir grficos, fotografas u otros smbolos grficos. La utilidad principal de los smbolos grficos es la de albergar aquellos elementos que se van a utilizar repetidamente dentro de una pelcula y son las unidades mnimas que pueden ser utilizadas para crear una animacin con interpolacin de movimiento. Un smbolo grfico puede contener varios fotogramas en su lnea de tiempo (es decir, puede contener animaciones), pero la reproduccin de estos fotogramas se realiza de forma sincronizada con la lnea de tiempo principal. Esto quiere decir que, para que el ciclo de animacin de un smbolo grfico se vea completo, es preciso que la lnea de tiempo principal tenga, al menos, el mismo nmero de fotogramas que la lnea de tiempo del smbolo. Si la lnea de tiempo principal alberga ms fotogramas que la lnea de tiempo del smbolo, la forma en la que la animacin del smbolo ser representada en pantalla, depender de las opciones escogidas para la instancia asociada, dentro del panel de Propiedades. En el centro del panel aparece una lista desplegable que permite escoger una de estas opciones: Reproducir indefinidamente: EI ciclo de animacin del smbolo grfico se repite tantas veces como le sea posible, dentro de la Iongitud de la lnea de tiempo principal.
CI-011 v.01 Dossier / 5

Por ejemplo, un smbolo grfico compuesto por siete fotogramas, se reproducir cinco veces en la lnea de tiempo de una escena que est compuesta por 35 fotogramas. Reproducir una vez: El ciclo de animacin del smbolo se reproduce una nica vez, siempre y cuando la lnea de tiempo principal tenga, como mnimo, el mismo nmero de fotogramas que Ia lnea de tiempo del smbolo grfico. Fotograma nico: La instancia muestra solo el primer fotograma del smbolo, independientemente de la Iongitud de la animacin que contenga el smbolo.

Las instancias de smbolos grficos no admiten nombre de instancia dentro de sus propiedades, ya que no se utilizan como elemento de programacin sino nicamente por su funcin grfica. Smbolo Botn:

Este tipo de smbolos tiene una importancia muy especial dentro de los proyectos de Flash, ya que se utilizan para crear botones que servirn para aportar informacin de forma interactiva al usuario, o para trasladarle de una parte a otra de la aplicacin. De todos los tipos de smbolos que posee Flash, ste es el nico que tiene una lnea 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 botn. Cada uno de estos fotogramas posee una etiqueta que permite identificar la funcin que desempea: El fotograma Reposo contendr el aspecto del botn cuando el usuario no est interactuando con l. Es el aspecto que tiene el botn por defecto. El fotograma Sobre mostrar el aspecto del botn cuando el usuario coloca el cursor del ratn sobre l sin hacer clic. El fotograma Presionado ser el aspecto que tomar el botn cuando el usuario haga clic sobre l. EI fotograma Zona activa delimita el rea sensible del botn (no aparecer nunca en pantalla). Si no se asigna una zona activa a un botn, ser la misma que la del fotograma inmediatamente anterior. De esta forma, un botn con forma de texto slo
CI-011 v.01 Dossier / 6

ser sensible en las partes grficas de los caracteres (el hueco de una "U", o una "P", no ser sensible). En este caso, sera preciso definir un rea sensible rectangular que englobase toda la palabra. Para poder introducir un grfico en cada uno de los fotogramas que forman parte de un smbolo botn, es necesario convertir cada fotograma en un Fotograma clave, a travs de la opcin de men Insertar > Lnea de tiempo > Fotograma clave. Aparecer un punto negro sobre el fotograma que permite insertar un nuevo grfico, o modificar el existente, sin que ello afecte a los fotogramas de los otros estados. Las instancias de un smbolo botn pueden tener un nombre de instancia que se introduce en el panel de Propiedades, cuando la instancia est seleccionada en el escenario. Los botones son programables mediante ActionScript y suelen incluir instrucciones que se ejecutan cuando el usuario interacta 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 opcin de men Control> Habitar botones simples. Para volver al modo de seleccin y edicin de botones se vuelve a seleccionar la misma opcin de men. Para acceder a la lnea de tiempo de un botn, se hace doble clic sobre cualquier instancia de botn en el escenario, o bien, se hace doble clic sobre el icono de smbolo, en la paleta de 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 botn aparecer un grfico semitransparente, de color cian y con la silueta del elemento insertado en el fotograma Zona activa. EI botn aparece de este modo, para que el desarrollador no trabaje a ciegas y pueda situarlo en Ia posicin adecuada, pero ser totalmente invisible en la pelcula final.

Smbolo Clip de Pelcula:

ste es, probablemente, el tipo de smbolo ms complejo que posee Flash, ms por su multitud de usos que por su dificultad de comprensin. Los clips de pelcula fueron pensados, originariamente, para albergar pequeas secuencias de animacin en bucle que se ejecutan
CI-011 v.01 Dossier / 7

independientemente de la longitud en fotogramas de la lnea de tiempo de la escena principal. Aunque la animacin principal solo posea un fotograma, el clip de pelcula se mostrar en toda su longitud (aunque para poder observarlo sea necesario publicar y visualizar el fichero SWF final). AI contrario que los smbolos grficos, un clip de pelcula no muestra su animacin en modo de desarrollo, es decir, directamente en el escenario de trabajo de Flash. Por este mismo motivo, la lnea de tiempo interna de un clip de pelcula puede tener cualquier longitud, sin necesidad de preocuparse por la Iongitud del resto de lneas de tiempo del documento. Los clips de pelcula tambin se utilizan con mucha frecuencia como elementos de programacin, ya que, mediante ActionScript, es posible activar o detener su reproduccin, ir a un fotograma concreto del clip o, incluso, cambiar sus cualidades de tamao, posicin, rotacin o transparencia (entre otros parmetros). Se puede controlar el comportamiento de una instancia de clip de pelcula, a travs de su nombre de instancia, que se introduce en el panel de Propiedades. Este tipo de instancias puede recoger eventos de ratn o teclado (al igual que los botones) y puede incluir en su interior grficos, grupos, smbolos grficos, botones u otros clips de pelcula. Si un smbolo de clip de pelcula incluye una animacin y se pretende observar el aspecto que ofrece la animacin de una o varias instancias de ese clip de pelcula en el contexto del escenario de Flash, es necesario visualizar el fichero SWF final, ya que el fichero fuente original (con la extensin FLA) no permite visualizar directamente la animacin de los clips de pelcula. Para ver el resultado no es necesario proceder a la publicacin final del fichero SWF, es posible observar el resultado a travs de la opcin de men Control > Probar pelcula. Aparecer una nueva ventana mostrando el aspecto que del fichero SWF final, incluyendo la animacin de los clips de pelcula. Para volver al modo de trabajo, se hace clic en el botn Cerrar. Tambin 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 pgina Web con la pelcula tal y como podr ser observada en Internet, incluyendo sus dimensiones finales.

Crear un smbolo desde cero: Se selecciona la opcin de men Insertar > Nuevo smbolo (CTRL+F8). O bien a travs del botn Nuevo Smbolo de la barra de estado de la Biblioteca. Aparecer un cuadro de dilogo donde se introduce el nombre y el tipo del nuevo smbolo (no as el punto de insercin, pues el smbolo no contiene an ningn grfico respecto al que orientarse). Aceptar. Aparece un nuevo nivel de edicin donde no existen los lmites del escenario, ya que es un escenario de trabajo abstracto, donde se supone que el smbolo puede tener cualquier extensin y longitud. Una cruz en el centro representa el punto de insercin que tendr el smbolo cuando se inserte una instancia en el escenario. Cualquier elaboracin grfica que se haga, a partir de este momento, debe tener en cuenta esa cruz de registro que orienta acerca de Ia futura posicin del smbolo. La cruz, de hecho, marca la coordenada (0,0) del smbolo dentro de su sistema local de coordenadas. Una vez se ha introducido todo el contenido del smbolo, se hace clic en el icono de la claqueta, para volver al nivel de edicin principal. Si se observa la paleta de Biblioteca, se puede ver como, ahora, aparece un nuevo icono perteneciente al nuevo smbolo.

CI-011 v.01 Dossier / 8

Crear un smbolo a partir de un elemento en el escenario: Se selecciona el material que se pretende convertir en smbolo. Se escoge la opcin de men Modificar > Convertir en smbolo (F8). Aparecer un cuadro de dilogo dnde se introduce el nombre del smbolo y se escoge una opcin entre los tres tipos de smbolo. En la opcin Tipo se decide si el smbolo ser un clip de pelcula, un botn o un grfico. En la opcin Registro aparece una cuadrcula formada por nueve pequeos cuadrados distribuidos en filas y columnas. Esos cuadrados representan la ubicacin que tendr el punto de insercin del smbolo (respecto al rectngulo de encaje del grfico), cuando se incluya una instancia en el escenario. Se hace clic en el punto que se desea que funcione como punto de insercin. Aceptar. Si se observa la paleta de Biblioteca, se puede ver como, ahora, aparece un nuevo icono perteneciente al nuevo smbolo.

CI-011 v.01 Dossier / 9

Crear un smbolo a partir de unos fotogramas (para clips de pelcula y grficos): Se seleccionan los fotogramas que forman parte del fragmento que pretende convertirse en smbolo, haciendo clic y arrastrando encima de las celdas correspondientes en la lnea de tiempo. Se selecciona la opcin de men Edicin > Lnea de tiempo > Cortar fotogramas. Se crea un nuevo smbolo mediante la opcin de men Insertar > Nuevo smbolo. En el cuadro de dilogo que aparece, se introduce el nombre y el tipo de comportamiento (clip de pelcula o grfico). Aceptar.

Tcnicas de animacin en la lnea de tiempo en Flash CS4: Flash CS4 presenta diferentes formas para crear animaciones y cada una de ellas ofrece mltiples posibilidades: Interpolaciones de movimiento. Asignamos distintos valores en distintos fotogramas a una o varias propiedades de un objeto como, por ejemplo, la posicin, la escala, la transparencia, etc. Flash calcular los valores intermedios entre ambos fotogramas, de tal forma que el cambio sea gradual. Interpolacin clsica. Es la tcnica que inversiones anteriores ofreca Flash para realizar interpolaciones de movimiento. Son similares en algunos aspectos a las interpolaciones de movimiento, aunque un poco ms difciles de crear. Cinemtica inversa, animacin mediante huesos. El objetivo de la cinemtica inversa consiste en encontrar el gesto que deben adoptar las diferentes articulaciones para que el final del sistema articulado llegue a una posicin 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. Se muestra cada fotograma en un momento en el tiempo, se puede crear la sensacin de animacin al mostrar cada fotograma un contenido diferente. En esta animacin no hay interpolaciones por lo que es la animacin ms costosa.
CI-011 v.01 Dossier / 10

Interpolacin de movimiento: Para crear este tipo o cualquier interpolacin, seleccionamos la instancia en el escenario hacemos clic Mouse derecho y seleccionamos Crear Interpolacin de movimiento. Tambin podemos hacerlo a travs del men principal Insertar > Interpolacin de movimiento o seleccionando el fotograma en la lnea de tiempo y Mouse derecho Crear interpolacin de movimiento. Para crear una interpolacin de movimiento, cada objeto debe estar en una capa. Al crear esta animacin, podemos ver que se han creado 24 fotogramas, se aaden automticamente dependiendo de los fotogramas por segundo del cabezal lector que tengamos configurados en el documento.

CI-011 v.01 Dossier / 11

El paso siguiente es llevar el cabezal reproductor de la lnea de tiempo al fotograma 24 y modificar las propiedades (tamao, posicin....escala...) que nos interesen de la instancia en el escenario y automticamente Flash crear un fotograma clave que contiene el cambio de propiedades.

Este tipo de interpolacin tiene la caracterstica de dibujar en el escenario la trayectoria del movimiento que permite ser modificada con la pluma o la herramienta de subseleccin y crear movimientos curvos, lo que en versiones anteriores realizbamos con la capa Gua de movimiento.

CI-011 v.01 Dossier / 12

Animar con efecto mscara: Las mscaras constituyen uno de los recursos estrellas para cualquier animador o diseador. Las mscaras son un recurso de animacin muy til, ya que permiten mostrar un grfico o una animacin a travs de la forma de otro grfico que acta a modo de ventana. De esta forma, es posible recortar la visualizacin y mostrar slo un fragmento con una silueta determinada. EI objeto que acta como mscara puede ser un objeto esttico, o bien otra animacin. En otras palabras, la mscara puede ser una mscara animada. EI procedimiento para crear una mscara es el siguiente: 1. Se selecciona una capa en la que haya una animacin. 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 grfico o una animacin. La nica condicin que se debe seguir es que el objeto, u objetos, de esta capa estn compuestos por colores planos. Este grfico o animacin debe coincidir, en algn momento, con Ia posicin de las imgenes de la capa inferior ya que ser el elemento que har las funciones de mscara. 4. Una vez estn ambas capas listas, se hace clic con el botn derecho del ratn (Control + clic en Macintosh) y, en el men contextual que aparece, se selecciona la opcin Mscara. 5. La capa de mscara aparecer con un nuevo icono y la capa inferior tambin cambiar al nuevo estado de capa enmascarada. EI nuevo icono de la capa muestra la subordinacin a la mscara. Se puede ejecutar la animacin para observar el resultado. Tanto las capas de mscara como las capas enmascaradas se bloquean en el momento en que se realiza la operacin, 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 mscara. Las capas se desenmascaran momentneamente para permitir la edicin de sus elementos. Una vez se ha terminado con las modificaciones, se hace clic de nuevo en el icono del candado y, automticamente, las capas implicadas volvern a enmascararse. Se pueden aadir a la mscara 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 mscara. AI hacerlo, la nueva capa pasar a formar parte de las capas subordinadas a la mscara.

CI-011 v.01 Dossier / 13

Mscaras con degradados: Como se ha comentado, Flash toma como mscara cualquier pieza slida dibujada en la capa que se haya indicado como mscara. Esto genera un problema y es que Flash pasa por alto los mapas de bits, colores, transparencias, estilos de lnea, etc.; es decir, se ve... o no se ve. Las reas rellenas de una mscara se convierten en transparentes y las zonas no rellenas en opacas. Lo ms cmodo para emplear una mscara que utilice un degradado (por ejemplo, una ventana de visin con los bordes difuminados) es simularla desde una aplicacin de retoque fotogrfico. Por ejemplo, utilizando una aplicacin como PhotoShop o Firefox se pueden crear una forma opaca y con el borrador eliminar las zonas que realmente se convertirn en mscara (aqu el proceso es inverso, las zonas opacas se convertirn en las zonas transparentes y las zonas no visibles harn de mscara). Si, por ejemplo, se crea un recuadro negro y se borra una zona, ste rea transparente trabajar a modo de mscara. Slo hace falta guardar la imagen en un formato que permita transparencias e importarla a la biblioteca (por ejemplo PNG).

Mscaras animadas: Las mscaras tambin se pueden animar. Slo hay que tener en cuenta que en las interpolaciones de movimiento es necesario un smbolo, texto u objeto de dibujo. Bastara con convertir la mscara a smbolo y en la capa en la que se encuentra la mscara realizar esta interpolacin de movimiento. EI efecto revelara la imagen, texto, etc., que figure debajo de la mscara a medida que sta se desplace. Si se necesita el contorno (hay que recordar que todo Io que figura en la mscara se convierte en opaco y, por tanto, no existe el contorno) es necesario crear una capa adicional fuera de la influencia de la mscara. Si se realiza una animacin de movimiento con la mscara sera necesario desplazar tambin ese contorno para que simule el permetro de la mscara.
CI-011 v.01 Dossier / 14

Animacin con filtros: Los filtros permiten incorporar distintos efectos visuales a botones, clips de pelcula y textos. Estas caractersticas solo se encuentran dentro de Flash Professional. Para acceder a estos efectos de tipo filtro hay que hacer uso de la pestaa existente en el panel Propiedades. Un filtro grfico consiste en un proceso que altera los pxeles de la imagen para obtener algn tipo de efecto. Por ejemplo, un efecto de desenfoque (blur) hace que los pxeles que conforman los bordes de la imagen se vayan difuminando e integrando con los que la imagen pasa a ser ms borrosa. Ente los efectos incorporados dentro de Flash 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 estn en primeros planos o para simular movimientos. Sombra: Simula la sombra de un objeto, es decir, el propio objeto con colores ms suaves, desenfocado y puesto detrs 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 botn. Este efecto puede ser interior; exterior o completo. Iluminado degradado: Genera un efecto de iluminacin 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 iluminacin la que utiliza un color degradado sino el propio bisel de la pieza Ajuste de color: Uno de los problemas ms graves de Flash era la imposibilidad de variar el color para las instancias de un objeto de la biblioteca. Lo que si se poda hacer era convertirlo en smbolo y variar el color o el alfa para la pieza antes de realizar la animacin. En esta versin la opcin Ajuste de color permite ajustar el nivel de brillo, contraste, matiz y saturacin del clip, texto o botn seleccionado.

Paso a paso: 1. Seleccionar en el escenario el botn objeto de texto o clip de pelcula. 2. Hacer clic en el panel Filtros situado en el Inspector de Propiedades. 3. Utilizar el botn Aadir filtro (+) que mostrar un men emergente con las opciones expuestas antes. Se escoge una. 4. Ajustar los parmetros de configuracin segn 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 situada en el Inspector de Propiedades. Seleccionar el filtro que se va a eliminar Utilizar el botn Eliminar filtro (-) para descartar ese efecto.

CI-011 v.01 Dossier / 15

La herramienta hueso y la cinemtica inversa: Cinemtica inversa, animacin mediante huesos. El objetivo de la cinemtica inversa consiste en encontrar el gesto que deben adoptar las diferentes articulaciones para que el final del sistema articulado llegue a una posicin 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 cmo se conectan las series de instancias de clip de pelcula. Los clips de pelcula conectados se denominan esqueleto y cada clip de pelcula se denomina nodo.

CI-011 v.01 Dossier / 16

En el ejemplo hemos arrastrado los distintos clips del mueco 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.

Al primer hueso de un esqueleto se le considera el padre, y al hueso conectado a ste se le denomina hijo. Por ejemplo, un esqueleto de un mueco podra tener una pelvis conectada a

CI-011 v.01 Dossier / 17

dos muslos, los cuales a su vez estaran conectados con dos pantorrillas. La pelvis sera 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 jerarqua en base a sus relaciones.

Podemos modificar fcilmente el esqueleto recolocando los nodos o borrndolos y agregando otros nuevos. Si uno de los nodos del esqueleto est levemente desplazado, por ejemplo, se puede usar la herramienta de transformacin libre para rotarlo o moverlo a una nueva posicin y esto no cambiar los huesos. Tambin podemos realizar modificaciones en los nodos pulsando la tecla Alt u Opcin 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 complicacin adicional del tercer eje (z). Cuando seleccionamos la herramienta de Rotacin o Traslacin rotacin, debemos tener en cuenta la opcin Translacin global que figura en la base del panel Herramientas. La Transformacin global conmuta entre la opcin global (botn hundido) y la opcin local (botn levantado). Al mover un objeto con la opcin global las transformaciones se harn en relacin al sistema de coordenadas global, mientras que al mover un objeto con la opcin local activada, las transformaciones que se le apliquen sern en relativas a s mismo.

CI-011 v.01 Dossier / 18

Publicar la pelcula de Flash: el SWF y otros archivos La opcin del men principal Archivo > Configuracin de publicacin (SWF), es la opcin ms importante ya que es la que hace referencia a la pelcula Flash como tal. En esta opcin, tambin 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.

CI-011 v.01 Dossier / 19

Dentro de la pestaa Flash (SWF) se pueden encontrar todas las opciones disponibles. Comentemos las principales: Versin:

Como su nombre indica, se escoge la versin en la que se va a publicar la pelcula SWF, Una versin ms 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 versin, es guardar en una versin anterior, ya que la posibilidad de encontrar usuarios que conserven versiones ms antiguas cada da es ms remota pues el propio navegador se encarga de proponer la actualizacin al navegante. Pero hay que tener cuidado con la versin que se emplea para crear el reproductor. Las novedades incorporadas en cada una de las versiones de Flash solo servirn para esa versin y posteriores. Orden de carga:

Establece el orden de carga de las capas De arriba abajo o De abajo arriba. Si el fichero no ocupa mucha memoria y se carga rpido, apenas se notar diferencia entre una opcin y otra, pero, de lo contrario, debe decidirse qu grficos interesa que aparezcan antes. Si nuestra pelcula 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 versin De arriba abajo. Versin de ActionScript:

Permite escoger con qu versin de ActionScript va a trabajar la pelcula. La 2.0 es nueva desde la versin MX 2004. Dentro del apartado Opciones: Generar informe de tamao:

Crea un fichero de texto con un informe completo acerca de los contenidos de la pelcula, incluyendo tambin otros detalles como la duracin, la cantidad de fotogramas o el tamao de memoria ocupado por los smbolos y los medios importados. Este informe es de mucha utilidad cuando se quiere optimizar un proyecto, pues aporta una informacin exhaustiva acerca del documento de Flash. Proteger frente a importacin:

Activar esta opcin impide que la pelcula SWF pueda ser importada por ningn 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 opcin no est marcada cuando se disea una pelcula con el objetivo de utilizarla como material en otro documento. Omitir acciones de trazado:

Dentro de la programacin 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), cualquier aspecto de Ia programacin que se quiera controlar durante el proceso de desarrollo. Para que estos avisos no aparezcan en la pelcula final, solo existen dos opciones: borrar una por una todas las instrucciones de trazado o activar esta casilla.
CI-011 v.01 Dossier / 20

Depuracin permitida:

Si se activa esta opcin, el desarrollador podr realizar pruebas de depuracin. La depuracin es un mtodo de programacin que consiste en comprobar el valor de los datos generados por una aplicacin, con el fin de encontrar errores y poder proceder a su rectificacin. Esta depuracin se podr realizar aunque la pelcula ya est publicada en Internet. Al activar esta opcin, se activa un campo de entrada de contrasea. Es recomendable que el desarrollador introduzca una contrasea. sta le permitir, solo a l, proceder a la depuracin. Comprimir pelcula:

Cuando esta opcin est activada, la pelcula de Flash se comprime para ocupar menos espacio en disco. Por defecto, esta opcin siempre est activada. EI nico caso en el que tendra sentido desactivarla sera cuando el destino final de la pelcula no va a ser una pgina Web de Internet sino, por ejemplo, una aplicacin independiente que se ejecute desde el disco duro. Optimizar para Flash Player 6 r65:

Si se escoge la versin 6 del Player, como formato de exportacin, entonces, es posible activar esta opcin para aprovechar la revisin r65 que se hizo de esta versin del Player. Es necesario que el usuario tenga instalada esta versin en su navegador, para poder aprovechar las prestaciones de esta opcin. Calidad JPEG:

En este deslizador se decide el nivel de comprensin de las imgenes de mapa de bits importadas en la pelcula y a las que no se haya definido un nivel de compresin especfico dentro del panel de Biblioteca. EI valor ajustado ser el utilizado de forma predeterminada. Flujo de audio:

Haciendo clic en el botn Establecer, se escoge un nivel de compresin para todos los sonidos de la pelcula, con el tipo de sincronizacin Flujo, que no se hayan comprimido previamente, de forma individual, en el panel de Biblioteca. Las opciones de compresin que se muestran son las mismas que se comentaron en el apartado de sonido. Evento de audio:

Haciendo clic en el botn Establecer, se escoge un nivel de compresin para todos los sonidos de la pelcula, con el tipo de sincronizacin Evento o Inicio. Las opciones de compresin 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 pequeos efectos) pueden comprimirse ms que fragmentos musicales con sincronizacin de tipo Flujo, sin que se aprecien, de forma evidente, grandes cambios de calidad. Suplantar configuracin de sonido:

Al activar esta casilla se ignora la configuracin individual de compresin que pueda haberse dado a un sonido dentro del panel de Biblioteca y se asignan los ajustes genricos a todos los sonidos del documento sin excepcin. Esta opcin puede utilizarse para crear versiones de "borrador" de la aplicacin (que ocuparn menos memoria y tendrn menos calidad de audio), antes de realizar la publicacin definitiva.

CI-011 v.01 Dossier / 21

Exportar sonidos de dispositivo:

Esta opcin solo est disponible en la versin profesional de Flash y permite utilizar los sonidos propios del dispositivo reproductor (como telfonos mviles) en lugar de los sonidos propios de la aplicacin.

Seguridad de reproduccin local:

Es un nuevo modelo de seguridad incluido en Flash 8 para determinar el nivel de seguridad. Si se elige la opcin Acceder solo a archivos locales, la pelcula SWF publicada solo podr interactuar con los recursos del sistema local (no podr enviar informacin ni datos a la red). Si se escoge la opcin Acceder solo a la red la pelcula SWF publicada solo podr interactuar con los recursos existentes en la red (y no del sistema local).

CI-011 v.01 Dossier / 22

GUA DE RECURSOS Flash II: Animacin avanzada en Flash

Programa http://www.adobe.com/es/flash Formacin http://multimedia.forums.cat/ Nuestro foro de dudas: para todos los exalumnos, este foro resuelve todos los problemas que puedas tener en tus proyectos multimedia. Tanto en diseo como en programacin Cursos onLine

http://www.aulaclic.es
http://www.artenetcata.es/index.htm http://www.barcelonactiva.cat Tutoriales y recursos http://www. tutorial-enlace.net/tutoriales-flash.html http://www.actionscript.org/resources http://www.adobe.com/dunet/actionscript http://www.tutoriales.flash.com http://www.cristallab.com/tutoriales http://www.scourdesign.com/articulos/tutoriales http://www.actionscript

Aula de SGAE cursos presenciales subvencionados Cursos subvencionados

Tutoriales gratis de Flash, ActionScript y Flex Recursos y scripts, web Recursos y scripts, web tutoriales Adems de esta pgina de tutoriales, disponen de un foro muy activo Tutoriales y artculos de inters Tutoriales de actionscript, con ejemplos para descargar

Redes sociales y blogs http://carrero.es/ http://www.ezeql.com/blog http://www.codigoactionscript.org Sonidos i melodas de descarga gratuta Blog sobre tecnologa, muy til Blog sobre flash y actionScript, con muchos ejemplos Red social sobre flash, muy activa, es necesario registrarse con un perfil

CI-011 v.01 Dossier / 23

http://www.findsounds.com http://www.paradox-jungle.co.uk http://www.rah.gq.nu/bourbon http://www.cybernoc.com.pl/loopy.html http://www.meanbeat.cjb.net http://www.paradox-tunes.de.vu/ http://www.samplepoolz.de/ http://www.sound-effects-library.com/ http://freeradicalsounds.com/julbeat.htm

Sonidos para realzar tus interactivos, descarga gratuita

CI-011 v.01 Dossier / 24