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.

Botón "Mantener Apretado"

Señores y señoras, eh aquí mi primer tutorial, es muy básico, vamos a explicar como hacer el famoso "mantener apretado" en Flash, no es algo muy complicado peeeeeeeeeeeero a alguien le va a servir. Algunos dirán "pero me c@#$ria, para que quiero hacer esto si existen controles prediseñados?" y la repuesta esta en la pregunta: "... prediseñados.." no pueden cambiar su apariencia ni su comportamiento, al menos no fácilmente, y conociendo el comportamiento se va a hacer mucho mas fácil adaptarlos a gusto.

Empecemos, voy a intentar explicar todo como para que lo entienda alguien que nunca en su vida uso Flash (perdón a los experimentado, se les va a hacer algo tedioso):
e
0 . Creamos un botón, para eso vamos a tener que mostrar la biblioteca, vamos a Ventana en el menú superior (donde esta Archivo... Editar... Ver.. etc) y tildamos la opción Biblioteca, sino, si les da fiaca, pueden apretar Ctrl+L y listo, aparece. Una vez que vemos la biblioteca, apretamos en donde tiene el icono del Nuevo símbolo.... en la esquina inferior izquierda y va a aparecer una ventanita con los campos Nombre y Tipo a los que nombramos Mantener1 y seleccionamos el tipo Botón como en la imagen:


hacemos click en aceptar y no va a abrir la el editor de MovieClip para botones. en el que tenemos 4 fotogramas: Reposo, Sobre, Presionado y Zona Activa:



Ok, a partir de acá vamos a ir mas rápido. Seleccionamos el primer fotograma y dibujamos un triángulo como este:


No importa que sea igual, lo único que importa es que tenga esa forma y que apúnte a la derecha.
Ahora una vez que quedo lindo, agregamos otro fotograma clave apretando F6 nos va a crear un fotograma exactamente igual al primero pero sin acciones (en este caso no tiene acciones, pero las tuviera tampoco las copiaría al nuevo fotograma)y le cambiamos un color como mas les guste.
para hacer el tercer fotograma repitan lo del párrafo anterior.

Los botones que yo hice fueron:


El ultimo fotograma no importa.

Ahora nos vamos a la escena haciendo click en ... si adivinaron, en Escena:


Bien ya tenemos el Botón ! pero por desgracia es solo el comienzo.

1. Ahora si empecemos. Una vez en la escena arrastramos el botón desde la biblioteca hasta cualquier parte del escenario. Lo seleccionamos y apretamos F9 y walla! apareció el Panel de Acciones:


Empezamos con el código, vamos a intentar explicar lo que vamos escribiendo.
Lo primero que vamos a escribir es:

on (press){
derecha = function {
//Lo que ustedes quieran hacer
}
}

Para los super principiantes esto dice cunado (on) apretemos el botón (press)"declara" la función derecha, en donde dice "//Lo que ustedes quieran hacer" no va a ser tomado por Flash, en su lugar va el cuerpo de la función, es decir "lo que va a hacer" la función.

Bien, ahora agregamos lo siguiente:

on (release){
}

Esto es "cuando suelto el click del botón" hace tal cosa.Y por casi-ultimo agregamos esto:

on (dragOut) {
}

Que es "cunado intentemos arrastrar el botón" (puse "intentemos" porque no se va a mover de ahí)hasta acá me imagino que todo bien, pero nuestro botón todavía no hace nada. Cerremos la ventana de acciones por un momento y vamos a hacer un nuevo Clip de Película. Lo hacemos de la misma manera que creamos el botón pero en Tipo: seleccionamos Clip de Película un poco obvio no ? y ahí hacemos un cuadrado o un rectángulo y una vez hecho vamos al escenario y lo insertamos en el de manera que no se superponga con el botón.
Ahora vamos a ponerle el nombre al rectángulo, lo seleccionamos y en el panel de propiedades le ponemos un nombre bien original: cuadrado :D :



Seleccionemos el Botón y Volvamos al Panel de Acciones deberíamos tener algo como esto:

on (press) {
derecha = function () {
//Lo que ustedes quieran hacer
}
}
on (release) {
}
on (dragOut) {
}

Borramos //Lo que ustedes quieran hacer y en su lugar ponemos lo siguiente :

cuadrado._x +=5;

esto dice en idioma mortal: "cunado se presione sobre el botón mueve el cuadrado 5 pixels a la derecha"
Ya tenemos el botón con una acción pero todavía no hace nada, esto es porque el botón solo "declara" la función, no la ejecuta. para eso agregamos fuera del bloque de la función derecha pero dentro del bloque del on (press)(para los que no sepan nada un bloque es el espacio que comprende, en este caso, el cuerpo de la función es decir los {}) :

derecha();

La función debería haber quedado así:

on (press) {
derecha = function () {
cuadrado._x +=5;
};
derecha();
}
on (release) {

}
on (dragOut) {

}

A estas alturas aya deben querer que su Flash haga algo, bien ya lo hace para probar la película aprieta Ctrl+Enter y van a ver que cuando aprenten el botón la caja se va a mover a la derecha

A estas alturas deben decir: "este P@#$% me mintió, no anda el mantener apretado" a lo que yo digo: Paciencia por favor! ya llegamos.

Ahora si, vamos al esqueleto de "mantener apretado":

Borramos derecha(); dentro que del on (press) y en su lugar ponemos:

derechaID = setInterval(derecha, 50);

"Que carajo es esto?" bien, esto lo que hace es crear un intervalo de tiempo a para una función es decir, decirle que una función se ejecute cada X tiempo, esto se declara de la así:

nombreDelInterbalo = setInterbal ( funcionAEjecutar, tiempoEnMilisegundos);

Para los que se preguntan "porque darle un nombre a un intervalo de tiempo" les respondo: Prueben la película... como ven, esto se mueve indefinidamente hacia la derecha, esto no es un mantener apretado. Para hacer el mantener apretado agregamos en los bloques de función de on (release) y on (dragOut):

clearInterval(derechaID);

y esa es la respuesta a "porque darle un nombre a un intervalo de tiempo" lo que hace esta función esa decir: "deja de ejecutar el intervalo derechaID" o mas detelladamente "deja de ejecutar casa 50 milisegundos la función derecha();"

Por ultimo, algunos se preguntaran porque puse el on (dragOut), lo puse porque el on(relese)
se ejecuta siempre que estemos sobre el botón pero si nosotros soltamos el click fuera del botón el cuadrado se sigue moviendo, entonces el on(draOut) le dice que cuando el mouse este apretado y salga fuera de la zona activa del botón borre el intervalo. Les dejo el código terminado:

on (press) {
derecha = function () {
cuadrado._x += 5;
};
derechaID = setInterval(derecha, 50);
}
on (release) {
clearInterval(derechaID);
}
on (dragOut) {
clearInterval(derechaID);
}

Y como terminamos les dejo el ejemplo: