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!
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
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);
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!
Tengo Duda??? XD
ResponderEliminar