Bueno, para ir terminando con todo esto del easing vamos a explicar los métodos de la clase easing.
Esta clase define el tipo de movimiento, con sus métodos:
[c&p Macromedia Help]
Back
Extiende la animación cuando se supera el límite de la transición en uno o ambos extremos para producir el efecto de ser empujado hacia atrás desde el límite, es decir se pasa del destino y vuelve a el con el mismo efecto.
Bounce
Añade un efecto de rebote dentro del rango de la transición en uno o ambos extremos. El número de rebotes depende de la duración: cuanto mayor sea la duración, producirá un mayor número de rebotes. El rebote es ni mas ni menos que el de una pelota de goma cuando se la tira al piso sin darle fuerza.
Elastic
Añade un efecto elástico que está fuera del rango de la transición en uno o ambos extremos. La duración no afecta al grado de elasticidad. Mi favorito :D es parecido al efecto muy similar al Bounce solo que este se pasa del limite y bounce rebota sobre el lime (Se entiende? :D )
Regular
Añade un movimiento más lento en uno o ambos extremos. Esta función permite añadir un efecto de aceleración, desaceleración o ambos.
Strong
Añade un movimiento más lento en uno o ambos extremos. Este efecto es similar al suavizado Regular, pero más pronunciado.
None
Añade un movimiento uniforme de principio a fin sin efectos, ralentización ni aceleración. Esta transición también se denomina transición lineal. No hace nada no se para que esta, es el mas feo.
[/c&p Macromedia Help]
Aparte de definir el tipo de movimiento se le puede decir si el efecto se aplica al principio, al final o en ambos lados de la animación:
[c&p Macromedia Help]
easeIn
Proporciona el efecto de suavizado al principio de la transición.
easeOut
Proporciona el efecto de suavizado al final de la transición.
easeInOut
Proporciona el efecto de suavizado al principio y al final de la transición.
easeNone
Indica que no se va a utilizar ningún cálculo de suavizado. Sólo se proporciona en la clase de suavizado None. Igual que None, no hace nada no se para que esta, es el mas feo.
[/c&p Macromedia Help]
En breve lo voy a actualizar con sus respectivas animaciones.
lunes, 16 de abril de 2007
miércoles, 14 de febrero de 2007
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!
martes, 6 de febrero de 2007
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:
Lo que hice en la funcion en las ultimas dos lineas del cuerpo del on(release) fue:
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:
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"
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:
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:
Stop:
Retomar:
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:
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:
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:
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 )
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(){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.
Flaxes.yoyo();
}
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) {Codigo de Start:
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();
}
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 )
viernes, 2 de febrero de 2007
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 :
Bien, en el cuerpo del método on(release){} se encuentra tooooooooooooooooooda la función de easing. Veamos, las primeras 2 lineas
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:
Esta línea es lo que hace el easing. vamos por parte:
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 (); 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:
Es decir las variables que yo definí quedarían:
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.
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;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:
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);
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;Listo, ya esta. Lesejo el ejemplo:
var propiedad:String = "_x";
var desde:Number = 0;
var hasta:Number = 200;
var tiempo:Number= 3;
var segundos:Boolean = true;
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.
viernes, 26 de enero de 2007
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:
martes, 23 de enero de 2007
Bienvenido!
Señoras y señores les doy la bienvenida a mi primer y humilde blog, espero que les parezca interesante y útil. Quiero aclarar antes que nada que no soy un buen escritor, tengo faltas de ortografía, errores de tipeo, mala sintaxis y un sinfín de errores de escritura las cuales voy a intentar corregir a lo largo de esta experiencia.
En este blog voy a tratar de escribir tutoriales de Macromedia Flash fáciles de entender, algunos de nivel bajo y otros de nivel medio (De ahi no paso), mi experiencia en Flash no es gran cosa, pero me gustaría ir armando tutoriales de cosas que, en mi caso en particular, son difícil de entender. Tratare de responder todas las preguntas que hagan y de hacer la lectura lo mas amena posible.
Les doy la bienvenida nuevamente y les agradezco por entrar a mi blog.
En este blog voy a tratar de escribir tutoriales de Macromedia Flash fáciles de entender, algunos de nivel bajo y otros de nivel medio (De ahi no paso), mi experiencia en Flash no es gran cosa, pero me gustaría ir armando tutoriales de cosas que, en mi caso en particular, son difícil de entender. Tratare de responder todas las preguntas que hagan y de hacer la lectura lo mas amena posible.
Les doy la bienvenida nuevamente y les agradezco por entrar a mi blog.
Suscribirse a:
Comentarios (Atom)
