UNIDAD II: ANIMACIONES CON FLASH

TEMA 4: Aplicar animaciones

4.1. Interpolacin de Movimiento:
En un documento nuevo vamos a abrir la biblioteca (en las herramientas del programa) y vamos a elegir el ratoncito que nos da por defecto en grficos. Nos vamos a posicionar en el frame uno, del layer que tenemos (nico por ahora) y colocamos el ratoncito en el stage.

Ahora colocamos el mouse en el fotograma 25 y con el botn derecho del mouse hacemos click en insertar fotogramas, y vamos a ver cmo el layer ya tiene 25 frames o fotogramas, para poder realizar su recorrido. Nos posicionamos en el frame uno y damos click en el botn derecho del mouse, y luego hacemos click en "crear interpolacin de movimiento". Luego nos posicionamos en el 25, y con la herramienta flecha, movemos al ratoncito hacia otro lado del stage. Presionamos, enter y veremos nuestro primer movimiento en flash!

<>

4.2. Interpolacin de Tamao:

Excelente, ahora lo que podemos realizar es colocar en cualquier parte de la lnea de tiempo y colocar un fotograma clave, vamos con el mouse a posicionarnos en el frame 15 por ejemplo y, botn derecho, insertar fotograma clave, y ah, con la flecha, tomamos al ratoncito y

lo escalamos, lo cambiamos de tamao, ms grande o ms chico, eso no importa, es decisin de ustedes. Cuando lo cambiaron, presionen enter y vean cmo realiza el movimiento. Tambin en ese lugar al ratoncito hacemos click con el botn derecho y vamos a paneles y en efectos, tenemos que entender que vamos a las propiedades propias del objeto, nada que ver con las propiedades del frame, (esto es algo que siempre tienen que tener en claro). En efectos se nos va a abrir la ventana de efectos y seleccionando siempre al ratoncito, le , podemos dar, alfa (grado de transparencia), brillo, tinte (color), avanzado, que consiste en una mezcla de todo, y uno lo realiza de modo manual. Es decir: se pueden combinar todos los efectos a la vez.

Presionamos enter y vemos cmo cambia el ratoncito segn en el tiempo en el que se encuentre. Podemos ir a control, a Prueba Pelcula o Test Movie, y nos va a mostrar nuestro movimiento.

4.3. Ejemplo de animacin:

Lo que vamos a realizar es colocar varios layers o capas para practicar mucho, acurdense que estos son movimientos bsicos para luego poder trabajar tranquilamente en flash. Como me imagino han practicado tanto que puedo seguir con las avanzadas del movimiento =), entonces vamos a un nuevo documento y colocamos de nuevo el ratoncito en la capa uno, y obviamente, vamos a hacer doble click en el layer o capa para cambiar de nombre y colocaremos.... ratoncito. A ese layer de ratoncito vamos a hacerle una simple interpolacin de movimiento para que el ratoncito vaya de un lado a otro como en el ejercicio anterior (motion tween). Fijense que al lado del cono donde tenemos para agregar capas o layer, existe uno parecido pero de color violeta claro, ese significa que nos va a agregar una Capa Gua de la Capa que tengamos seleccionada. Entonces hacemos click en ese cono y vamos a ver que automaticamente me dice, Gua de Ratoncito, y nos da un layer o capa con la misma cantidad de frames que el que tiene "ratoncito". En esa capa gua vamos a dibujar, como ve mos en el grfico, cualquier ruta, es decir, el ratoncito va a hacer el recorrido que dibujemos. En el stage o escenario se ve, pero luego con F12 (browser) o testeando la pelcula, van a ver que no se ve. ok?.

Vamos a notar que en forma automtica el ratn se coloca ya en la guia, as que slo nos queda colocar, con la herramienta flecha, el ratn en el principio y en el fin del movie, en el lugar correspondiente. Vean con detalle el grfico que muestro:

Tengan en cuenta que, como hicimos en el ejercicio anterior, tambin se pueden insertar fotogramas claves en cualquier parte y colocarle efectos al ratoncito. Puede haber varios layers o capas guiadas pero no una gua de gua.

4.4. Formas:
Abramos un nuevo documento y vamos a colocar en el layer el nombre DOS FORMAS, en el frame (fotograma) uno dibujaremos una bola como vemos a continuacin:

En el frame 35, vamos a colocar un fotograma clave o keyframe, y ah vamos a dibujar un cuadrado. Luego borraremos el circulo que tenemos SOLO en el frame 35.

Nos posicionamos en el frame uno y vamos al botn derecho del mouse, y en el panel propiedades pedimos la opcin fotograma, frame, y vamos a ver las opciones. Una nos tiene que parecer conocida: es la "motion" o la de movimiento, y ahora vamos a colocar FORMA, o SHAPE y damos enter. Ja!!! vieron!! es muy lindo realizar metomorfosis entre dos o ms objetos. Qu significa esto?, que colocamos un fotograma clave o keyframe, borramos el objeto que tenemos en ese lugar y colocamos un tringulo, entonces vemos como lo hacemos entre los tres objetos, y asi, sucesivamente.

4.4.1 Consejos de formas

A veces nos puede suceder que no nos guste como queda la transformacin entre los objetos, entonces uno puede hacer, gracias al flash, una transformacin ms guiada entre los objetos. Entonces nos posicionamos en el frame uno (donde esta el primer objeto de la transformacin), hacemos click en ver o view y damos tilde a mostrar puntos de forma, show shape hints (control + alt + H). Ahora hacemos click en transformar, transform y add shape hints (control + shift+ H) y vamos a ver que nos aparece un punto a rojo, entonces, vamos a llevarlo con la herramienta flecha hacia unos de los bordes de la bola, NO HACE NINGUN EFECTO SI UNO LO DEJA POR ALG UNA PARTE DEL RELLENO, SIEMPRE ACTA EN LOS CONTORNOS DEL RELLENO, NO NECESARIAMENTE TIENE QUE TENER LINEA, lo muestro aqu debajo:

Luego de colocar el puntito rojo con la letra a en una parte del contorno de la bola, nos posicionamos en el 35 donde est el rectngulo y vamos a encontrar otro crculo a de color rojo entonces lo colocamos tambin en el borde del rectangulo como lo muestro a continuacin:

Presionamos enter y veremos cmo hace la transformacin segun los puntos que colocamos y que al programa le indican POR DONDE UNIR a con a, y si seguimos agregando puntos (SIEMPRE EN EL FRAME UNO) y as con encontramos con b, c, d, e, etc....haremos as continuamente para poder seguir guiando manualmente al programa. Lo descrito entre comillas est tomado del manual oficial de Flash 5: "Para controlar cambios de forma ms complejos o improbables utilice los consejos de forma. Los consejos de forma identifican puntos que deben corresponder en las formas inicial y final. Por ejemplo, si est interpolando el dibujo de una cara mientras cambia de expresin, puede marcar cada ojo con un consejo de forma. A continuacin, en lugar de convertir la cara en una figura amorfa durante el cambio, los ojos siguen siendo reconocibles y cambian de manera independiente durante el proceso." [...] "Los consejos de forma tienen letras (de la a a la z) para identificar los puntos que se corresponden en las figuras inicial y final. Puede utilizar hasta 26. Su color es amarillo en el fotograma inicial y verde en el final. Cuando no estn en una curva, son de color rojo."

TEMA 5: Crear Botones

Lleg el momento, vamos a realizar botones. Abrimos un documento nuevo, vamos a indicarle que sea de 800 x 450 y de fondo blanco, vamos a insert, y pedimos new symbol o nuevo smbolo; tildamos en botn, y en el recuadro blanco que nos permite escribir, colocamos el nombre Rojo y damos aceptar. Se nos presentar la siguiente pantalla:

y y y y

UP: El momento del botn cuando nada pasa por l, lo que vemos a simple vista. OVER: Cuando pasamos el mouse por arriba del botn SIN HACER CLICK. DOWN: Cuando tenemos presionado el botn del mouse encima del botn en la pelcula. SIN DEJAR DE PRESIONAR EL BOTON DEL MOUSE. HIT: rea sensible del botn, es invisible pero por medio de ste le indicamos al programa por dnde tiene que transformarse el cursor en mano y actuar como botn.

En el UP, vamos a dibujar un rectngulo con la palabra rojo, en el OVER vamos a colocar un fotograma clave y vamos a cambiar el rectngulo de color, pongmoslo de color gris, en el DOWN, borramos la palabra y dejamos slo el rectngulo de color blanco y en el hit slo dejamos lo que nos qued del DOWN. Quedara as:

5.1. Up:

5.2. Over:

5.3. Down:

5.4 Hit:

Una vez que terminamos todos los eventos del botn, cerramos con la X del programa pero la de abajo, no la del programa en s, y volvemos al stage o escenario que est totalmente en blanco, y vamos a ver en nuestra librera el botn llamado rojo, lo dragueamos al escenario:

Entonces ahora practiquemos y hagamos los siguientes: uno que diga verde, azul, otro de cualquier color que diga email y el ltimo que diga Home.

5.5. Acciones:
Ahora nos vamos a dedicar a darle las acciones correspondientes a los botones, en la ventana de acciones y por ahora utilizaremos las bsicas y otras ms, ms adelante. Vayamos al botn rojo y lo seleccionamos, en la ventana de acciones, hacemos click en gotoAndPlay, en escena colocamos entre <> el nombre de la escena al cual queremos que vaya, cul es?, la roja, y le damos tilde en go to and Play para que si hay animacin en esa escena, la ejecute.

Si presionamos en la lnea on, nos va a mostrar los eventos del mouse, entonces ah elegimos release (significa que la persona hizo click y solt), entonces ah asegura que s quiere ir a ese lugar donde lo va a llevar el botn.

Observemos entonces qu sucede cuando probamos la pelcula: presionen el botn rojo y vern que van a la escena roja. Lo lograron Felicitaciones!, entonces lo que van a realizar es ahora que todos los botones dirijan a las escenas correspondientes.

Ahora nos toca pensar qu hacemos con el Home. Espero que se hayan dado cuenta qu es lo que hay que hacer, para que desde las escenas vayamos a la escena home. Email: buscamos en las acciones bsicas, Get Url, y como demuestra la imgen de abajo, escribiremos slo lo siguiente: mailto:tunombre@com.ar (obviamente este es un ejemplo) es decir, el email original al cual va dirigido el email.

De esta manera ya podemos comenzar a pensar un site y ahora nos dedicaremos a agregar ingredientes a esta receta.