Tarifas
Contacto

Cursos Y Tutoriales

Indice del Curso

1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 / 11 / 12

FLASH

Ejemplo de animación

Lo que vamos a realizar es colocar varios layers o capas para practicar mucho, acuérdense que estos son movimientos básicos 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 interpolación 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 Guía de la Capa que tengamos seleccionada. Entonces hacemos click en ese ícono y vamos a ver que automaticamente me dice, Guía de Ratoncito, y nos da un layer o capa con la misma cantidad de frames que el que tiene "ratoncito". En esa capa guía vamos a dibujar, como vemos en el gráfico, 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 película, van a ver que no se ve. ¿ok?.

Vamos a notar que en forma automática el ratón se coloca ya en la guia, así que sólo nos queda colocar, con la herramienta flecha, el ratón en el principio y en el fin del movie, en el lugar correspondiente. Vean con detalle el gráfico que muestro:

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


Interpolación de 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 continuación:

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 botón derecho del mouse, y en panels pedimos la opción 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 más objetos. Qué significa esto?, que colocamos un fotograma clave o keyframe, borramos el objeto que tenemos en ese lugar y colocamos un triángulo, entonces vemos como lo hacemos entre los tres objetos, y asi, sucesivamente.


Consejos de formas

A veces nos puede suceder que no nos guste como queda la transformación entre los objetos, entonces uno puede hacer, gracias al flash, una transformación más guiada entre los objetos. Entonces nos posicionamos en el frame uno (donde esta el primer objeto de la transformación), 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 ALGUNA PARTE DEL RELLENO, SIEMPRE ACTÚA 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 rectángulo y vamos a encontrar otro círculo a de color rojo entonces lo colocamos también en el borde del rectangulo como lo muestro a continuación:

Presionamos enter y veremos cómo hace la transformación 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 descripto entre comillas está tomado del manual oficial de Flash 5:

"Para controlar cambios de forma más 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 expresión, puede marcar cada ojo con un consejo de forma. A continuación, 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 están en una curva, son de color rojo."

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 símbolo; tildamos en botón, y en el recuadro blanco que nos permite escribir, colocamos el nombre Rojo y damos aceptar. Se nos presentará la siguiente pantalla:
  • UP: El momento del boton cuando nada pasa por él, lo que vemos a simple vista.
  • OVER: Cuando pasamos el mouse por arriba del boton SIN HACER CLICK.
  • DOWN: Cuando tenemos presionado el botón del mouse encima del botón en la película. SIN DEJAR DE PRESIONAR EL BOTON DEL MOUSE.
  • HIT: Área sensible del boton, es invisible pero por medio de éste le indicamos al programa por dónde tiene que transformarse el cursor en mano y actuar como botón.

En el UP, vamos a dibujar un rectángulo con la palabra rojo, en el OVER vamos a colocar un fotograma clave y vamos a cambiar el rectangulo de color, pongámoslo de color gris, en el DOWN, borramos la palabra y dejamos sólo el rectángulo de color blanco y en el hit sólo dejamos lo que nos quedó del DOWN. Quedaría así:

UP

OVER

DOWN

HIT

Botones II

Una vez que terminamos todos los eventos del botón, 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 librería el botón llamado rojo, lo dragueamos al escenario:



Veámoslo en la práctica:

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


1 / 2 / 3 / 4 / 5 / 6 / 7 / 8 / 9 / 10 / 11 / 12

    Copyright © 1998-2012- DS Tecnologia® manager@dstecnologia.com.ar - Politica de Privacidad