Botones en Flash

Ya entrando a la parte de optimización de contenidos web, Flash nos permite crear botones para provocar acciones dentro de nuestros contenidos. Para crearlos se dibuja una forma Shape, se selecciona y le damos f8 para convertirla en símbolo. En lugar de elegir Movie Clip que es el símbolo que hemos estado trabajando seleccionamos Button. Una vez convertido, entramos en el símbolo con doble click en él y se nos aparecerán los 4 estados del botón (Up= Antes de presionarlo, Over= Encima del área activa del botón, Down= siendo presionado y Hit= área de activación del botón) en la línea del tiempo. Si lo deseamos podemos darle diferentes colores o cambios mientras ocurren los 4 estados. Para ejemplificar esto aquí les traigo un botón

Una vez comprendido esto, podemos pasar a los botones que marcan acciones. He aqui el ejemplo de un botón que provoca cambios en una simple figura geométrica.


En este caso, las acciones sólo se detienen hasta el siguiente Stop en la línea de tiempo. Si deseamos añadir reacciones controladas como "detener" o "continuar" debemos recurrir a otro tipo de claves. Aquí les traigo un ejemplo de cómo realizar lo anterior.



Para activar y desactivar el movimiento del círculo dar click en los botones de Play o Stop según sea el caso

Bones! (y no la serie)

En el modo de Action Script 3.0 Flash nos permite realizar animaciones con una herramienta mucho más rápida que la primera técnica para dar movimiento. Se trata de la herramienta Huesos o Bones, la cual nos permite mover las piezas del objeto o figura a través de un sistema de huesos interconectados mientras colocamos nuevos keyframes en la línea de tiempo para cada movimiento. Para usarlo, simplemente seguimos los siguientes pasos:

1)Se dibuja un objeto shape.

2)Se toma la herramienta de huesos y se da click sostenido sobre la figura arrastrando hasta donde queramos que acabe cada hueso. El siguiente hueso se iniciará en el término del anterior y así sucesivamente.

3) Se ponen nuevos keyframes en la línea de tiempo con f6 y se anima la figura moviendo los huesos a lo largo de se estructura o desde sus pivotes. Una vez terminada la animación le damos click derecho sobre la línea de tiempo y seleccionamos Convert to frame by frame animation para convertirlo en shape twin y poder gusrdarlo como símbolo movie clip.

El inicio del sistema de huesos es el pivote y de aquí surgen dos formas de animar:


1)Un Pivote Central: Un solo camino



2) Un pivote central: Varios caminos

Escenarios

Adobe Flash es también una herramienta muy útil cuando de construir ambientes virtuales animados se trata. Para lograr diferentes efectos que simulen el movimiento de un observador o cámara a lo largo del escenario se emplea el truco de mover los objetos que componen la escena para dar la sensación de movimiento. Si se trata de un escenario que se va a recorrer vertical u horizontalmente, se anima moviendo dichos elementos en la dirección opuesta a la del sentido del recorrido siguiendo la lógica antes descrita en el ejercicio del automóvil. Para lograr un acercamiento más realista, los objetos que en un principio se encuentran casi en el centro de la escena se desplazarán paulatinamente hacia los extremos al tiempo que se amplían en sus dimensiones para conferir la sensación de que se encuentran más cerca.

1) Escenario con movimiento vertical

Abeja

Aplicando la cinemática directa antes mencionada estructuramos el cuerpo de algún insecto con alas, cuerpo, cabeza, brazos y piernas. Cada pieza se convierte en Movie Clip y se anima en el interior siguiendo la lógica del movimiento de cada pieza (el movimiento de las alas será más reiterativo y rápido= en menor cantidad de Frames que el de la cabeza, por ejemplo). Para agregar un plus a nuestra animación ingresamos en el Movie Clip "cabeza" y realizamos una animación Shape (creando dos objetos Shape dibujados en diferentes frames de la línea de tiempo, seleccionando los frames entre ambos, dando click derecho y seleccionando Create Shape Tween) para crear la sensación de parpadeo de una forma que cubra el ojo en su totalidad hasta una que sólo lo cubra en una pequeñísima porción. Aquí les muestro el resultado:

F R Á G I L!

Empleando las guías ya repasadas, es posible crear la sensación de caída de un objeto y su posterior ruptura, para ello trazamos la trayectoria del objeto de acuerdo con la lógica de la gravedad y las parábolas que describe, la convertimos en guía y hacemos que caiga a través de una escalera. En el momento en que deseamos que se rompa duplicamos la última capa con f6, seleccionamos el objeto a romper y tecleamos ctrl+b (Break Apart) para quitar al objeto la propiedad de Movie Clip y regresarlo a objeto Shape. A partir de este punto podemos separar cada pedazo resultante de la rotura con la herramienta lazo y agruparlas con ctrl+g para su manejo más cómodo. Como se trata de un objeto Shape, se deberá animar Frame por Frame el movimiento que describirán los trozos en el aire hasta quedar estáticos.




Para agregar más realismo agregamos pequeños golpecitos en sus puntos de contacto con la escalera creando una nueva layer y colocando layers en blanco con f7. Dentro de estos layers en blanco dibujaremos con el lápiz el efecto de golpe sobre la superficie.

Máscaras y Guías

Gracias a la técnica de combinar el uso de las líneas de guía y las máscaras en flash, se puede simular el rastro que deja un objeto durante su movimiento. Aquí se encuentra la imagen:

¿Qué sería de Flash sin su máscara?

Es posible también crear máscaras con el programa que me permiten visualizar una imagen a través de una forma dibujada que a su vez puede sufrir alteraciones. Pero como una imagen vale más que mil palabras aquí les muestro el ejemplo:

Guía de Movimiento

Dentro de la animación en Flash, existe una forma de animar logrando una economía de movimientos y del uso de keyframes. Se trata de la guía de movimiento. Aquí les muestro un ejemplo:

Movimiento de Auto en Flash

Para recrear el movimiento de un automóvil en Flash dejamos el mismo estático dentro de la escena y movemos el resto de los planos (cielo, montañas, piso, etc.) con la interpolación de instancias convencional siguiendo la lógica de velocidad de acuerdo a la distancia (las nubes que son lo más alejado se moverán más lentamente que el piso que se encuentra en primer plano. Para agregar mayor realismo, podemos deformar el pelo o elementos al aire del conductor o hacer que él mismo salte conforme se mueve el auto. Aquí les muestro el ejemplo:

Brazo Mecánico, primer acercamiento a la cinemática directa

Cinemática Directa en FLASH

 Flash es una herramienta muy útil cuando de animar se trata, ya que nos permite jerarquizar las animaciones por piezas de modo que al mover una de ellas se pueda causar una reacción motriz en el resto. Para ello:

1. Se dibuja cada pieza independientemente y se convierte en Símbolo Movie Clip (cada una en una capa diferente).

2. Se corta cada pieza y se inserta dentro de una nueva capa en el interior de la pieza superior en jerarquía (el pie en la pierna, la pierna en la pelvis y así sucesivamente).

3. Se anima cada pieza: Cada capa debe contener una sola pieza para evitar errores de superposición. Entonces dentro de la línea de tiempo damos click hasta donde deseamos que se prolongue la acción y colocamos un "keyframe" o punto crítico. Si deseamos alterar el curso en que la acción se desarrolla únicamente hacemos los ajustes pertinentes en el nuevo "keyframe" (ejemplo: la rotación de una pieza, traslación de un objeto, etc.).