FELIZ DIA MI AMOR!

Bueno, se que no corresponde en este tipo de blog, pero este entrada se la quiero dedicar a mi mujer Ana:

Mi amor te deso un feliz dia de los enamorados, no me queda mas nada que decir, ya te dije todo!

Easing: Clases Tween y easing (parte 2)

Sigamos... :D . Como lo prometido es deuda las hoy vamos a seguir el tutorial de easing, en particular vamos a explicar la clase Tween.
Esta clase, junto con la clase easing, es la que nos da la posibilidad de crear movimiento solo con ActionScript, y lo mas importante, podemos crear movimiento dinamico, cunado digo "movimiento dinamico" me refiero a que lo que estamos hacienndo no es un moviemiento que se repite una y otra vez, sino que estamos creando un movimiento apartir de otras variables lo contrario al movimiento estatico. Un ejemplo de moviemiento estatico es el del ejemplo de la parte anterior, solo se mueve de un punto A a otro punto B, si volvemos a aprretar el boton se va a mover de ese punto A al punto B nuevamente y asi indefinidamente, pero con un movimiento dinamico podemos decile a flash "movete 20 cm adelante" y en el caso de que un objeto empiece en el punto 0cm cuando apretemos el boton se va a mover hacia el punto 20cm, y cuando lo volvamos a apretar al punto 40cm, y asi aansando de a 20cm. Vamos empezando.
La clase Tween, tiene 9 metodos, 5 propiedades (solo lectura) y 5 controladores de eventos. Los metodos nos proporcionan un mayor control sobre la animacion creada va a ver los metodos uno a uno:

miTween.yoyo(): Lo que hace este metodo es la inversa a la animacion hecha, al menos eso es lo que dice la ayuda de Macromdia, pero no es tan asi, cunado dice inversa se refiere a todas las propiedades exepto al savisado de movimiento (despues lo vamos a explicar). Lo que hace es crear un bucle de movimiento desde un punto o valor hasta otro de ida y vuelta. Ejemplo:

on (release) {
import mx.transitions.Tween;
import mx.transitions.easing.*;
efecto= Strong.easeOut;
propiedad = "_x";
desde = 0;
hasta = 200;
tiempo= 3;
segundos = true;
fotogramas (false);
var Flaxes:Tween = new Tween(cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);
Flaxes.onMotionFinished = function(){
Flaxes.yoyo();
}
}







Lo que hice en la funcion en las ultimas dos lineas del cuerpo del on(release) fue:

Flaxes.onMotionFinished = function(){
Flaxes.yoyo();
}

En idioma humano: Cuando termine la animacion de Flaxes (Flaxes.onMotionFinished ), ejecuta esta funcion ( function(){} ): Flaxes.yoyo() (que en realidad es un metodo). No se confundan, en este ejemplo el cuadrado de mueve indefinidamente porque siempre la funcion la ejecuta cuando termina la animacion.

miTween.fforward() y miTween.rewind: Estos metodos lo que hacen es mover la animacion hasta el final o el principio de la animacion respectivamente, hagamoslo mas grafico reutilizando el codigo del metodo anterior:

on (release) {
import mx.transitions.Tween;
import mx.transitions.easing.*;
efecto = Strong.easeOut;
propiedad = "_x";
desde = 0;
hasta = 200;
tiempo = 3;
segundos = true;
var Flaxes:Tween = new Tween(cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);
Flaxes.fforward();

}




Como veran al parecer no hace nada mas que mover instantanemente el cuadrado de una pocicion a la otra. Per si se fijan en el codigo lo unico que hago es crear Flaxes con var Flaxes:Tween = new Tween() y antes de darle tiempo a que empiece la animacion ejecuto Flaxes.fforward(); que adelanta la animacion hasta el funal, por lo que nunca se ve la animacion, por supuesto hay mejores formas de implementarlo pero eso se lo dejo a ustedes :D.

miTween.nextFrame() y miTween.prevFrame() : Estos son mucho mas simple que los anteriores, lo unico que hace es moverse solo un frame mas adelante o mas atras (respectivamente) en la animacion. Me parece que no hace falta ninguna explicacion cualquier cosa chiflen.

miTween.start(): Este metodo lo que hace es comenzar la animacion desde el principio cambiemos un poco el codigo (no tanto:D ) :

Codigo de "Crear Tween"

on (release) {
import mx.transitions.Tween;
import mx.transitions.easing.*;
efecto = Strong.easeOut;
propiedad = "_x";
desde = 0;
hasta = 200;
tiempo = 3;
segundos = true;
var Flaxes:Tween = new Tween(cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);
Flaxes.stop();
}

Codigo de Start:

on (release) {
Flaxes.start();
}



En el boton Crear Tween, creamos el tween para el cuadrado e inmediatamente lo paramos con Flaxes.stop(); y la animacion recien la comienza cunado apretamos Start que empieza la animacion desde el principio.

miTween.stop(): Este metodo como vimos arriba lo que hace es parar la animacion, mien esto:

Crear Tween:

on (release) {
import mx.transitions.Tween;
import mx.transitions.easing.*;
efecto = Strong.easeOut;
propiedad = "_x";
desde = 0;
hasta = 400;
tiempo = 20;
segundos = true;
var Flaxes:Tween = new Tween(cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);
}

Stop:
on (release) {
Flaxes.stop();
}




el ejemplo es lo suficientemente grafico.


miTween.resume(): Este es facil resume en ingles es retomar, en vez de hacer lo que hace start() lo que hace resume() es volver a donde se paro una animacion, miren:

Crear Tween:

on (release) {
import mx.transitions.Tween;
import mx.transitions.easing.*;
efecto = Strong.easeOut;
propiedad = "_x";
desde = 0;
hasta = 400;
tiempo = 20;
//en segundos
segundos = true;
// esta variable dice si el tiempo esta en segundos (true) o en fotogramas (false)
var Flaxes:Tween = new Tween(cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);
}

Stop:

on (release) {
Flaxes.stop();
}

Retomar:

on (release) {
Flaxes.resume();
}




miTween.toString(): [Copio&Pego de la ayuda de Macromedia]Devuelve el nombre de clase, "[Tween]".

Voy a salter las propiedades porque son demasiado obvias y se entienden pergfectamente desde la ayuda de Macromedia (y tambien porque me da fiaca :D ).

Sigamos con los controladores de eventos. Los controladores de eventos son metodos de la clase Tween que lo que hacen es detectar algun tipo de cambio en el objeto Tween. Lo que hacen algo parecido a los controladores de evento de boton (parecidos en funcionalidad y no en usabilidad), por ejemplo los controladoes de eventos de botones estan siempre esperando a que se realice un press() cuando esto se cumple ejecutamos nuestra funcion. Y los tan utiles controladores de eventos de la clase Tween son:

miTween.onMotionChange: Este controlador detexta cunadola propiedad citada por el tween cambia, si lo detecta ejecuta una funcion. Un Ejemplo:

on (release) {
import mx.transitions.Tween;
import mx.transitions.easing.*;
efecto = Strong.easeOut;
propiedad = "_x";
desde = 0;
hasta = 400;
tiempo = 20;
//en segundos
segundos = true;
// esta variable dice si el tiempo esta en segundos (true) o en fotogramas (false)
var Flaxes:Tween = new Tween(cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);
Flaxes.onMotionChanged = function() {
texto1.text += "a";
}
}



Lo que hace esto es detectar cunado cambia la propiedad (_x en este caso) y cunado lo hace agrega una " a " al campo de texto texto1.

miTween.onMotionChange: Este controlador detectsa cuando termino la animacion. Ejemplo:

on (release) {
import mx.transitions.Tween;
import mx.transitions.easing.*;
efecto = Strong.easeOut;
propiedad = "_x";
desde = 0;
hasta = 400;
tiempo = 3;
//en segundos
segundos = true;
// esta variable dice si el tiempo esta en segundos (true) o en fotogramas (false)
var Flaxes:Tween = new Tween(cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);
Flaxes.onMotionFinished = function() {
texto1.text += "Termino!";
}
}

+



miTween.onMotionResumed, miTween.onMotionStarted y miTween.onMotionStopped: Detectan cunado los metodos resume(), start() y stop() (respectivamente) son detectados. Un ejemplo mas y no jodemos mas:

on (release) {
import mx.transitions.Tween;
import mx.transitions.easing.*;
efecto = Strong.easeOut;
propiedad = "_x";
desde = 0;
hasta = 400;
tiempo = 3;
//en segundos
segundos = true;
// esta variable dice si el tiempo esta en segundos (true) o en fotogramas (false)
var Flaxes:Tween = new Tween(cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);
Flaxes.onMotionStopped = function() {
texto1.text = "Para un poquito eh ! ";
};
Flaxes.onMotionResumed = function() {
texto1.text = "Dale! anda de nuevo!";
};
Flaxes.onMotionStarted = function() {
texto1.text = " Empecemos! ";
};
}



Los primeros 3 botones tieme en el cuerpo del on (release){} las funciones Flaxes.start(); , Flaxes.stop(); y Flaxes.resume(); cunado detectan que se ejecuta cada uno cambie el texto del campo texto1.

Bueno, espero que les sirva, y cualquier cosa chiflen. (Este lo largo con faltas de ortografi y sin ni 1 acento :P )

Easing: Clases Tween y easing.

Buenas ______ (completar las "_ "con la etapa del día) señores y señoras, lo que hoy voy a tratar de explicar es "Como usar las clases Easing y relacionadas" para hacer unos
herrrrrrrmosos efectos y también bien locos. (No se lo que significa pero: )Enjoy :
0.0 : Orientación a Objetos:
No soy un especialista de orientación a objetos pero para que medianamente sigan el tutorial (para los que no tengan ni la mas mísera idea de lo que es) voy a describir las siguientes definiciones para que me sigan:

ACLARO: No pretendo con esto dar una clase de OO, ni mucho menos acercarme a la teoría, puede que algo de esto no sea parte de la OO es solo para no cansar a nadie.

Clases: Las clases son los "padres" de los Objetos, con padres quiero decir que son los que crean los objetos y los que dicen que atributos y métodos van a contener, una manera común de describir una clase es como una plantilla (de cualquier tipo de cosa que se le ocurra, desde una de Word hasta un molde de algo) la plantilla en si no representa (por lo general) nada, la utilidad final son los Objetos con los que crean.

Objetos: Los objetos como dije arriba son el resultado de usar una clase. Los objetos tienen métodos y propiedades previamente definidas por la clase, los atributos son propiedades X como por ejemplo una persona: mide: 1.7 metros, tiene: 25años, nació:25/4/1955, etc. pueden tener valores predefinidos en la clase o tomar el valor correspondiente al objeto, por ejemplo las personas(sin ningun problema físico): tienen: 2 ojos, 2 piernas, 1 cabeza, etc. Los métodos por otra parte son las acciones que el método puede realizar por ejemplo (de vuelta) las personas pueden: correr, saltar, caminar. etc por otro lado, los métodos no solo hacen, pueden también por ejemplo dar información: dar la hora, mandar un mail, informar el clima, EXPRESAR SU ESTADO, etc.

Hasta acá con la "superarchiteoria de OO".

0. 1:Introducción: El Easing, (el nombre que conozco yo para estas clases) fueron desarrolladas por Robert Penner, lo que hizo este señor fue usar formulas de física que definían el movimiento de una partícula y aplicarlas en clases ActionScript para dar "soporte" a este tipo de movimiento. No es el fin de este tutorial explicar las formulas de físicas que aplican estas clases, en su lugar vamos a mantener la capa de abstracción, es decir: LO UNICO QUE TE TIENE QUE IMPORTAR ES QUE HACE LA CLASE, NO COMO FUNCIONA.

1. Lo primero que vamos a hacer es el botón y el objeto a mover yo voy a usar los del tutorial pasado (me da fiaca hacer otros!! XD ):





Seleccionamos el cuadrado y le ponemos desde el panel de propiedades un nombre tan original como "cuadrado" (muy original no?)


Ahora lo que vamos a hacer es abrir el panel de acciones del botón.Seleccionamos el boton y apretamos F9. Y escribimos :

on (release) {
import mx.transitions.Tween;
import mx.transitions.easing.*;
efecto= Elastic.easeOut;
propiedad = "_x";
desde = 0;
hasta = 200;
tiempo= 3; //en segundos
segundos = true; // esta variable dice si el tiempo esta en segundos (true) o en fotogramas (false)
var Flaxes:Tween = new Tween(_root.cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);
}

Bien, en el cuerpo del método on(release){} se encuentra tooooooooooooooooooda la función de easing. Veamos, las primeras 2 lineas

import mx.transitions.Tween;
import mx.transitions.easing.*;

Esto nos va a importar las clases "Tween" y "easing" para que las podamos usar en la películas. Como decía en la introducción, una clase por si misma no sirve para nada (solo en este caso!), solo como plantilla para crear objetos, estos objetos no tienen por que necesariamente se entidades "físicas" (por decirlo de algún modo), pueden ser CUALQUIER cosa, en este caso lo único que vamos a necesitar de los objetos que crean estas clases van a ser sus METODOS, aunque los atributos si nos van a hacer falta, van a ser los objetos y a su ver otros atributos de estos objetos que deseamos modificar. Lo que sigue es:

efecto= Elastic.easeOut;
propiedad = "_x";
desde = 0;
hasta = 200;
tiempo= 3; //en segundos
segundos = true; // esta variable dice si el tiempo esta en segundos (true) o en fotogramas (false)

Pasemos a la parte "difícil". tenemos 6 variables, la primera efecto es un método, la segunda propiedad es tipo String, la tercera , cuarta y quinta (desde, hasta y tiempo respectivamente) son tipo Number y la ultima de las variables es tipo Boolean (para el principiante Boolean es un tipo de dato que solo puede tomar 2 valores, verdadero y falso). Ahora "para que sirven estas variables?" dirán ustedes a lo que yo respondo: "no se." jeje, chiste. pasemos a la otra linea:

var Flaxes:Tween = new Tween(_root.cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);

Esta línea es lo que hace el easing. vamos por parte:

var Flaxes:Tween

dice: créame una varible (var) que se llame Flaxes y que sea del tipo Tween, "que sea del tipo" se simboliza con " : " justo al final del nombre y lo que nos quiere decir en realidad es que usemos la clase Tween para crear el objeto. La otra parte:

new Tween(_root.cuadrado, propiedad, efecto, desde, hasta, tiempo, segundos);

new Tween (); nos dice que cree un nuevo Tween pero con los parametros que tienen entre los " () ", se llama constructor. El constructor de esta clase tiene esta forma:

new Tween(objeto_a_cambiar, prodiedad_EN_STRINGS, que_metodo_de_easing_va_usar, desde_que_empieza, el_valor_donde_termina_el_efecto, tiempo, booleano_fotogramas_o_segundos);

Las variables que expliqeu arriba las aplique en este constructor para que en vez de tener que ir directamente a el para pasarle los parametros a el lo hagamos en las varibles que es mas cómodo. Por último en la práctica para evitar errorres es comun que envez de definir las variables como las definí yo lo hagan así:

var miVariable:Tipo = loQueLeAsigne;

Es decir las variables que yo definí quedarían:

var efecto:Function = Elastic.easeOut;
var propiedad:String = "_x";
var desde:Number = 0;
var hasta:Number = 200;
var tiempo:Number= 3;
var segundos:Boolean = true;

Listo, ya esta. Lesejo el ejemplo:




Bien, para que no se decepciones les voy a decir que existe varias propiedades y métodos que nos son realmente útiles a la hora de hacer presentaciones complejas, pero son
demasiadas y las voy a explicar en la próxima entrada del Blog así que señores me despido.