Flash: Animación gráfica

(Constanza Villanueva): Las presentaciones en PowerPoint aburren, eso se sabe. En la actualidad el interés va por lo interactivo, lo vistoso, lo animado. Los botones tienen que iluminarse (al menos) y las transiciones tienen que ser suaves. En NeoTeo vamos a ofrecerte unas nociones básicas para manejar el Adobe Flash sin errores y para que puedas seguir los tutoriales que haremos más adelante.

Cuando hablamos de Flash, tenemos que pensar en 5 cosas principales: Línea de Tiempo, keyframes (fotogramas clave), símbolos, capas y acciones. Hay mucho más para hacer en la herramienta, pero el conocimiento y manejo de estos cinco elementos te permitirá manejar todo lo demás con comodidad.

Línea de Tiempo y Keyframes
Para realizar una transición, necesitas un transcurso de tiempo. Para que algo cambie, necesitas una hoja/pantalla/instancia/fichero adicional. En Flash, la Línea de Tiempo será la que contenga todo esto, permitiéndote saltar entre fotogramas o escenas. Los Keyframes o Fotogramas Clave serán los que marcarán cada instancia. El Keyframe marca el inicio y fin de una transición, marca el cambio en la pantalla o la inserción de un elemento o acción.


La Línea de Tiempo puede contener distintas capas para manejar diferentes componentes en forma individual. Los Keyframes puede estar vacíos (para marcar una acción) o contener un símbolo/imagen/vídeo.

Símbolos
Existen tres símbolos en Flash: Gráfico, Botón o Clip de Película. Cada uno de ellos tiene un comportamiento particular. Para trabajar sin contratiempos (ni errores) en Flash, todo aquello que vaya a tener un cambio, transición o acción tiene que ser convertido a uno de estos tres símbolos. Todos los símbolos y elementos que utilicemos en Flash se visualizarán en la Biblioteca.

Acciones
Las acciones serán los comandos de nuestro documento Flash. Indicarán cuando debe detenerse o iniciar la reproducción, cuando tiene que saltar a otro fotograma o escena, cuando debe establecerse un enlace, iniciar un clip de película, establecer una propiedad, entre tantas otras opciones. Todo esto se controla desde el panel de Acciones.

Nota: Si estás usando la versión CS3 de Flash, asegúrate de crear el nuevo documento con ActionScript 2.0 (o ve a Opciones de Publicación y selecciona AS2) para tener las mismas opciones con las que trabajaremos en el tutorial

Ahora que ya hablamos un poco de la teoría, vamos a poner todo esto en práctica y ver cómo funciona.

1. Abre el programa
2. Pincha en “Documento de Flash” (o ve a Archivo > Nuevo > Documento de Flash)

En el centro verás la Línea de Tiempo con una capa y un Keyframe vacío, abajo, el cuadro blanco del escenario y al pie, el panel de Propiedades. A la izquierda está la barra de herramientas y a la derecha las ventanas de paneles. Si, por defecto, no ves el panel de Biblioteca a la derecha, presiona F11 (o pincha Ventana en el menú superior y tilda Biblioteca)

Símbolos: Gráfico

1. Presiona las teclas Ctrl+2 para que el documento se ajuste al espacio entre la Línea de Tiempo y el panel de Propiedades
2. Pincha el primer icono en la parte inferior izquierda del panel de Biblioteca (Nuevo Símbolo)
3. En la ventana emergente, selecciona la opción “Gráfico” y ponle un nombre

Verás que el nuevo símbolo aparecerá en tu Biblioteca y que la pantalla cambiará a una extensión blanca con una cruz pequeña en el centro. Si te fijas en la parte superior de la línea de tiempo, verás que al lado de “Escena” aparece tu símbolo. Esto implica que no estás en el documento principal, sino dentro del gráfico. Un gráfico puede contener cuantas cosas quieras. Por el momento haremos algo simple.

1. Pincha el icono de óvalo en la barra de herramientas y elige el color que desees
2. Pincha y arrastra con el ratón por donde está la cruz negra para trazar un círculo
3. Pincha en “Escena 1” en la parte superior de la línea de tiempo. Esto te devolverá al escenario.

Vamos a realizar un par de transiciones simples con el gráfico. Primero queremos hacer que el gráfico “aparezca” lentamente. Necesitaremos una fracción de tiempo (varios fotogramas) y dos instancias: una invisible y otra visible. Por ende, vamos a necesitar dos Keyframes.

1. Arrastra el gráfico desde la Biblioteca hasta el documento. Verás que el keyframe del primer fotograma se ha puesto negro y que el panel de propiedades ha cambiado para mostrar las del gráfico.
2. Pincha sobre el fotograma número 20
3. Presiona la tecla F6 para insertar un keyframe (Insertar > Línea de Tiempo > Fotograma Clave). Verás que todos los fotogramas entre 1 y 20 se encuentran grisados (todos contienen al gráfico)
4. Pincha sobre el fotograma 1 (que tiene el primer keyframe) y luego pincha sobre el gráfico.
5. En el panel de Propiedades, a la derecha, abre el menú desplegable de “Color:” y selecciona “Alfa”
6. En el nuevo menú desplegable que aparece, pincha sobre la flecha y desplaza el indicador en la barra hasta abajo (0%). Verás que el gráfico se ha vuelto invisible. Si te desplazas por la línea de tiempo, verás que esta propiedad se mantiene hasta el fotograma 20, en que un keyframe determina un nuevo estado.
7. Pincha sobre cualquiera de los fotogramas grisados que no tenga keyframe. Haz clic derecho con el ratón y elige la opción “Crear interpolación de movimiento” en la ventana que se despliega. Verás que los fotogramas se ponen violetas y tienen una flecha del primer keyframe al último. Esto indica que hay una animación de algún tipo. Si te paras sobre el primer fotograma y presionas la tecla Enter, verás la animación.

Siguiendo los pasos anteriores (de 1 a 7) puedes hacer distintos tipos de transiciones, sólo tienes que cambiar la operación del paso 5 y 6. Por ejemplo, en el paso 5, en vez de cambiar las propiedades del gráfico, puedes moverlo a una posición diferente del documento e ignorar el paso 6. Así harás que el gráfico se mueva por la pantalla. Hay muchas otras cosas para hacer con los gráficos y las interpolaciones, pero eso lo veremos en futuros tutoriales.

Nota: Dentro del los Gráficos puedes dibujar lo que quieras con las herramientas de Flash o puedes insertar un fichero de imagen externo. Para hacerlo, tienes que presionar las teclas Ctrl+R (o Archivo > Importar > Importar a escenario) estando dentro de la ventana de edición del gráfico. La imagen se insertará dentro del gráfico y en tu Biblioteca verás, además el fichero de imagen como tipo “Mapa de Bits”. Asegúrate de arrastrar el símbolo (gráfico con la imagen insertada) a la escena, ya que si arrastras el jpg no tendrás la opción de modificar la transparencia y si haces una interpolación de movimiento (con el jpg en vez del símbolo), el Flash te generará 2 símbolos adicionales (esto no sólo es innecesario y ocupa espacio, sino que te complicará la administración del documento cuando tengas muchos más elementos para trabajar)