Ir al contenido principal

Animación en Actionscript 3.0

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

Flash es un software que fue creado con el propósito de hacer animaciones (banners) para internet, sin saberlo ese fue el principio del desarrollo de esta herramienta que actualmente nos permite generar una interacción mucho mayor con el usuario.



En esta publicación se mostrará una forma básica de hacer animaciones utilizando el lenguaje de Flash: Actionscript, en su versión 3.0 (AS3). Debemos comprender que el AS3 es un lenguaje orientado a objetos (Object Oriented Programming...OOP ó POO en español), por lo que los elementos tienen características de objetos "reales"; es decir propiedades como su posición en X, Y, rotación, transparencia, tamaño, etc.


Bueno pues comencemos:

1.- Necesitamos un Objeto!!!!

Debemos crear un objeto que sea posible de animar, en este caso crearemos un MovieClip que llamaremos "objeto", donde dibujaremos un cuadrado, preferentemente centrado (si ya tienes experiencia en la creación de MovieClips puedes saltar al siguiente paso). Y después lo agregamos al escenario.





2.- ¿Cómo animaré a mi objeto?
Para que un objeto tenga interacción es necesario "señalarlo" y podemos hacerlo dándole un NOMBRE DE INSTANCIA, eso lo podemos hacer seleccionando en el panel de PROPIEDADES en el cuadro de texto superior donde dice "Instance Name". En este ejemplo se usará el nombre de "cuadro".



Como se comentó, algunos objetos tienen características que nos permitirán animarlos, en este caso usamos el MovieClip al cual podemos animar sus características de posición (x,y), tamaño (scaleX, scaleY), tranparencia (alpha) y rotación (rotation,rotationX,rotationY,rotationZ) por mencionar algunas.

En este ejemplo animaremos su posición en el eje horizontal X, para eso seleccionamos el "cuadro" y en panel de propiedades cambiamos su X y su Y por el valor de 100



3.- Importar las herramientas necesarias!!!

Para hacer esta animación se usará la "herramienta" (se llama Clase pero ese será otro tema) Tween, y para usarla debemos "avisar a Flash", es decir debemos solicitar esta herramienta ya que no está como predeterminada.

Debemos crear una nueva capa (layer) donde colocaremos todo el código AS3 (recordemos que AS3 solo permite colocar código en frames ó "fotogramas"), en el primer frame dar click derecho y seleccionas "Actions" para abrir el panel de acciones y ahí "importaremos" las librerías con el siguiente código:


import fl.transitions.Tween;
import fl.transitions.easing.*;







4.- Animar el objeto!!!!

Una vez que ya tenemos incluidas las herramientas podemos usarlas para hacer nuestra animación.

Debemos crear un elemento de animación Tween y después configurarlo:

Para crear el elemento usaremos el código:

var animacion:Tween

Donde el elemento se llama "animacion".

Hasta este momento solo se ha creado el elemento, ahora se debe configurar, es decir debemos darle varios PARÁMETROS ( 7 parámetros en este caso, siempre separados por comas) para su funcionamiento y entonces el código cambia quedando de la siguiente manera:

var animacion:Tween = new Tween(cuadro,"x",None.easeIn,100,300,2,true);





LISTO!!!
Solo corre la película para ver la animación.



Intenta con diferentes parámetros para obtener diferentes resultados.


Aquí explicaremos esos PARÁMETROS:

var animacion:Tween    //---------------> En este punto hemos creado un elemento llamado animación de tipo Tween

var animacion:Tween = new Tween(   //---------> En este punto hemos creado el elemento y le indicamos que es una nueva animación ( new Tween ) y comenzamos a darle los parámetros necesarios:

cuadros    //----------> es la referencia al objeto que deseamos animar.

"x"   //-------> es la propiedad o característica que deseamos animar del objeto. DEBE ESTAR "ENTRE COMILLAS SIMPRE".

None.easeIn   //-------> es el tipo de animación que se usará, y pueden ser Back, Bounce, Elastic, Regular, None y Strong, además cada uno se le agrega el "ease" que puede ser 3 opciones easeIn, easeInOut, easeOut y en el caso de usar None existe también la opción de easeNone.  

100   //----------------> El primer valor numérico se refiere al valor con que la animación empezará, en este caso es la posición X que le asignamos al objeto. OJO: Con este valor comenzará la animación, por lo que si en este caso la posición inicial del objeto fuero diferente, al realizar la animación se verá un cambio muy drástico.

300 //---------> El segundo valor numérico se refiere al valor final que tendrá la propiedad del objeta en la animación, en este caso "x".

2 //-------> El tercer valor numérico se refiere a la duración de la animación, que puede ser en frames o segundos.

true //-------> El último valor se refiere a las unidades de tiempo que se usarán para la animación, si es true serán segundos, y false para frames. Como valor predeterminado es false.


Aquí encontrarás los archivos del ejemplo

Espero sea de su agrado.
Hasta luego y felices líneas de código!

Comentarios

Publicar un comentario

Entradas populares de este blog

Uso de XML con Flash y Actionscript 3.0 / Using XML with Flash and Actionscript 3.0

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

En el manejo de tecnologías web, existe una muy importante que nos permite organizar y visualizar información, esta tecnología es el XML que significa algo así como Lenguaje de Marcas (ó etiquetas mas bien) Extensible, si quieren conocer un poco más del tema aquí hay un link (español) y aquí otro (inglés).

Una ventaja de usa esta tecnología es que la información que coloquemos es este tipo de archivos se puede usar para visualizarse en diferentes interfaces con diferente tecnología, por ejemplo: un mismo archivo XML nos puede servir para almacenar el inventario de una tienda y que sea visualizado en una página web usando HTML, al mismo tiempo en una aplicación de escritorio usando AIR ( proximamente un post al respecto ) y hasta un archivo swf local, todas estas aplicaciones utilizando el mismo XML de manera qu…

Usando Componentes de Flash: Paleta de Colores / Using the Flash Components: Color PIcker

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

Al desarrollar en Flash Professional encontraremos un sinfin de ventajas, una de ellas son las prestaciones visuales, es decir la calidad visual de los elementos que se pueden integrar y también la interactividad y diversidad de ellos.

Cuando es necesario podemos crear nosotros mismos los elementos que necesitemos dependiendo de las características, comportamientos, vista, etc. Para nuestra fortuna existen ya varios elementos de antemano fabricados y diseñados para su correcto funcionamiento e implementación, dichos elementos se llaman "Componentes" y los podemos encontrar en el panel del mismo nombre.

Este es el primer post de una serie donde se platicará de manera práctica acerca de lo sdiferentes componentes que ya incluye Flash. En esta ocasión hablaremos del Color Picker o "Seleccionador de Co…

Efecto "Colorear" en Flash

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

Hace un par de meses tuve que generar para un banner el efecto de una imagen en tonos de grises que al pasar el mouse encima se vaya "coloreando", este ejercicio me pareció divertido e interesante y por esta razón decidí colocarlo en este blog.

Puedes comenzar a iluminar la imagen de la tortuga en cuanto aparezca.

Para generar este sencillo efecto utilizaremos elementos de: máscaras dinámicas, Sprite, UILoader, además claro de MovieClips y Listeners.

Bueno, pues definamos y acotemos el problema:


Permitir que el usuario pueda "colorear" una imagen con el mouse.Se debe mostrar una imagen inicial y una final ( mo importa si son iguales o no ).Las imágenes deben de ser externas al flash para optimizar su tamaño.Cuando el usuario presione el mouse y luego lo mueva sobre la imagen inicial deberá ir …