Tween Class en ActionScript
- 03/06/2006
- 3:18 pm
En muchas ocasiones hay la necesidad de hacer pequeñas animaciones y generalmente esta se hace usando keyFrames. Pero existe una alternativa para hacer animaciones con código ActionScript y esta es la clase: Tween.
La clase Tween nos permitirá manipular las propiedades del movieClip como la posición, altura, etc. Se puede especificar si la animación será por tiempo o por frames por segundo (fps). Además de ello brinda distintos tipos de aceleración para lograr un efecto más real.
Para hacer uso de la clase Tween, hay que incluirla en nuestro fla antes de usarlo y esto se hace de la siguiente manera:
-
import mx.transitions.Tween;
Luego podemos hacer uso de la clase haciendo uso de los siguientes parámetros:
-
Tween(objeto, "prop", func, ini, fin, duracion, tipo);
Donde se tiene:
- objeto: El movieClip al que se modificarán las propiedades.
- prop: Una cadena con la propiedad del movieClip a se animada.
- func: Es el método de transición usado en la animación.
- ini: un número que indica el valor inicial de prop.
- fin: un número que indica el valor final de prop.
- duracion: Un número que indica la duración de la animación.
- tipo: indica si se usaran segundos o frames para la animación.
Veamos un pequeño ejemplo del uso de la clase Tween. Primero crearemos un archivo nuevo llamado tween1.fla. Dentro de este archivo creamos 2 movieClip, un circulo llamado movie y un botón llamado botón. El botón lo usaremos para iniciar la animación.
-
import mx.transitions.Tween;
-
// -----------------------
-
var func = mx.transitions.easing.Regular.easeIn;
-
boton.onPress = function() {
-
var mTw = new Tween(movie, "_x", func, 65, 380, .5, true);
-
}
-
stop();
Pra este ejemplo hemos usado el método de transición Regular pero se tienen otros tipos de métodos de transición. Entre ellos se tiene:
- Back: Extiende la animación con un efecto de rebote en la misma ventana.
- Bounce: Agrega un efecto de retardo en el rango de transición.
- Elastic: Añade un efecto elástico al final de la animación.
- Regular: Agregar movimiento lento del inicio al fin.
- Strong: Agrega aceleración al inicio y final.
- None: Agrega igual movimiento desde el inicio al fin.
Cada uno de estos tipos de transición tiene los siguientes métodos que controlarán su comportamiento.
- easeIn: Brinda el efecto de aceleración al inicio de la transición.
- easeOut: Brinda el efecto de aceleración al final de la transición.
- easeInOut: Agregara el efecto de aceleración al inicio y final de la aceleración.
- easeNone: Ningún efecto de aceleración se agrega.
Veamos ahora algunos ejemplos:
-
import mx.transitions.Tween;
-
// -----------------------
-
var func = mx.transitions.easing.Bounce.easeOut;
-
boton.onPress = function() {
-
var mTw = new Tween(movie, "_x", func, 65, 380, .5, true);
-
}
-
stop();
Ahora, además de las características antes vistas, esta clase provee funciones para detectar diferentes eventos. Por ejemplo el método onMotionFinished el cual detecta el final de la animación. Veamos un ejemplo.
-
import mx.transitions.Tween;
-
-
var func = mx.transitions.easing.Regular.easeIn;
-
boton.onPress = function() {
-
var myTw = new Tween(movie, "_x", func, 65, 380, .5, true);
-
myTw.onMotionFinished = function() {
-
new Tween(movie, "_x", func, 380, 65, .5, true);
-
}
-
}
-
stop();
Finalmente veamos un ejemplo con el cambio de tamaño de un botón.
-
import mx.transitions.Tween;
-
// -----------------------
-
var func = mx.transitions.easing.Regular.easeOut;
-
var myFormat:TextFormat = new TextFormat();
-
myFormat.align = "center";
-
texto.text = "OPEN MENU";
-
texto.setTextFormat(myFormat);
-
-
menu.sopen = false;
-
menu.onPress = function() {
-
if (!this.sopen) {
-
new Tween(menu, "_width", func, 108, 388, .5, true);
-
this.sopen = true;
-
texto.text = "CLOSE MENU";
-
texto.setTextFormat(myFormat);
-
} else {
-
new Tween(menu, "_width", func, 388, 108, .5, true);
-
this.sopen = false;
-
texto.text = "OPEN MENU";
-
texto.setTextFormat(myFormat);
-
}
-
}
Finalemente les dejamos para descargar todos los archivos de este post.
Posts Relacionados
- PDFs con fondo utilizando PHP
- Detectores de eventos en AS3
- Acelerar carga web con PHP
- SWFAddress 2.0
- Crear PDF con Imagenes en PHP
Total de Comentarios: 10
Muy bueno… =)
No se puede descargar los archivos de este artículo (Tween Class en ActionScript).
Sería posible reparar este enlace?.
Gracias.
no entiendo nada… donde pego cada cosa?¿, por favor explicar. soy muy novato
pol
Existe alguna manera de controlar de mejor manera las animaciones hechas con Tween, ya que estoy haciedo un menú, con animaciones en Tween, pero derepente se quedan congeladas las imagenes hasta posicionar el ratón en otro botón
Seguramente es por que estas consumiendo muchos recursos de tu PC, optimiza un poco tu código y no coloques muchos Tweens a la vez, con eso funcionará correctamente.
unijimpe, te felicito por la información publicada. Cada vez que indago mas y mas en el código ActionScript, me impresiona lo tan robusto y versatil que es.
Saludos
Muy buenos ejemplos!!!
una consulta:
si le quiero aplicar “alpha” para q al dar click en el “boton” aparezca de 0 a 100, como lo hago?
gracia y cheve el blog!!!
Muy buenos ejemplos, pero hay alguna manera de hacerlo sin usar un botón, y que la animación aparezca cuando se carga el swf.??
Muy bueno, mis felicitaciones por el blog :D
Una unica sugerencia. En el ultimo ejemplo que pusistes recomiendo poner:
new Tween(menu, “_width”, func, _WITH, 388, .5, true);
En las dos partes que aparece el Tween, ya que si yo apreto en el boton cuando se esta abriendo el efecto aparece desde el punto exacto en el que el boton fue apretado, de otra forma iria a donde se le dijo.
Para responder a Daniel Medi, Usar dentro de un moviclip en el primer frame on(EnterFrame) u on(load)
Saludos :D
