rollOver y rollOut no funcionan bien con clase Tween

Hola,

quiero hacer un efecto sencillo: que cuando pase el ratón por encima de un clip, un recuadro aumente su ancho, y cuando se haga rollOut, vuelva a su tamaño original:

Código :

on (rollOver) {
   import mx.transitions.Tween;
   var mov1:Tween = new Tween(this.rec, "_width", null, this.rec._width, 323, 1, true);
   var mov2:Tween = new Tween(this.rec_mask, "_width", null, this.rec._width, 323, 1, true);
}

on (rollOut) {
   var mov3:Tween = new Tween(this.rec, "_width", null, this.rec._width, 44.8, 0.5, true);
   var mov4:Tween = new Tween(this.rec_mask, "_width", null, this.rec._width, 44.8, 0.5, true);
}

Pero cuando paso y quito el ratón rápido, el movimiento se queda pillado, y se queda parado en la posición final. ¿A qué se puede deber?

Aquí os dejo el .fla

Un saludo y gracias de antemano.

En la línea de tiempo principal puse:

Código :

var mov1:Tween;
var mov2:Tween;

y en tu code:

Código :

on (rollOver) {
   import mx.transitions.Tween;
   mov1.stop();
   mov2.stop();
   mov1 = new Tween(this.rec, "_width", null, this.rec._width, 323, 1, true);
   mov2 = new Tween(this.rec_mask, "_width", null, this.rec_mask._width, 323, 1, true);
}

on (rollOut) {
   mov1.stop();
   mov2.stop();
   mov1 = new Tween(this.rec, "_width", null, this.rec._width, 44.8, 0.5, true);
   mov2 = new Tween(this.rec_mask, "_width", null, this.rec_mask._width, 44.8, 0.5, true);
}

por otro lado, saqué el código y lo puse en la línea de tiempo

Código :

import mx.transitions.Tween;

var mov1:Tween;
var mov2:Tween;

preambulo.onRollOver = function() {
   animar(323,1);
};

preambulo.onRollOut = function() {
   animar(44.8,0.5);
};

function animar(w:Number, t:Number) {
   mov1.stop();
   mov2.stop();
   mov1 = new Tween(preambulo.rec, "_width", null, preambulo.rec._width, w, t, true);
   mov2 = new Tween(preambulo.rec_mask, "_width", null, preambulo.rec_mask._width, w, t, true);
}

Hola,

También podes probar con prototypes, así:

Código :

MovieClip.prototype.fxIn = function(){
   //this._visible = true;
   easeType = mx.transitions.easing.Bounce.easeOut;
   new mx.transitions.Tween(this, "_width", easeType, 44,330, .5, true);
   new mx.transitions.Tween(this, "_height", easeType, 44,330, .5, true);

}

MovieClip.prototype.fxOut = function(){

   easeType = mx.transitions.easing.Bounce.easeOut;
   t1 = new mx.transitions.Tween(this, "_width", easeType, this._width,44, .5, true);
   t2 = new mx.transitions.Tween(this, "_height", easeType, this._height,44, .5, true);
   t2.onMotionFinished = function()
   {
      this._parent._visible = false;
   }
}

Luego se aplica el efecto así:

Código :

preambulo.onRollOver = function() {
   this.fxIn();
};

preambulo.onRollOut = function() {
   this.fxOut();
};

Muchas gracias eldervaz y miliciano por vuestras respuestas. He solucionado el problema gracias a ellas.
Como la idea es aplicar el movimiento a varios clips, he adaptado la función de eldervaz:

Código :

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

function animar(mc:MovieClip, easing, w:Number, t:Number) {
   mc.mov1 = new Tween(mc.rec, "_width", easing, mc.rec._width, w, t, true);
   mc.mov2 = new Tween(mc.rec_mask, "_width", easing, mc.rec_mask._width, w, t, true);
}

preambulo.onRollOver = function() {
   animar(this,Strong.easeOut,323,0.5);
};

Gracias de nuevo por agrandar mi perspectiva en AS.

Y me ha surgido otra duda, ¿qué tipo de elemento es la transición de easing?, pensé que sería String, pero me da error.

Código :

function animar(mc:MovieClip, easing, w:Number, t:Number)

Saludos

Y otra duda más: ¿es correcto este acceso a variables? :

Código :

mc.mov1 = new Tween(mc.rec ...

si la variable estña dentro de mc está correcto si está en la raiz sobra mc

hola a tod@s

estoy tambien utilizando la solucion de eldervaz y los rollover y rollout van a la perfeccion excepto cuando hago un movimiento rapido de ponerme encima y quitarme del boton, esto rapidamente. en ese momento el boton empieza a hacerse grande y pequeño sin respetar nada y puede llegar a hacerse mucho mas grande o mucho mas pequeño.

¿hay alguna manera de corregir esto?

milchisimas gracias

hay una diferencia en el codigo y es la siguiente

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

Código ActionScript :

function animar(mc:MovieClip, easing, w:Number, t:Number) {
   mc.mov1 = new Tween(mc.rec, "_width", easing, mc.rec._width, w, t, true);
   mc.mov2 = new Tween(mc.rec_mask, "_width", easing, mc.rec_mask._width, w, t, true);
}

preambulo.onRollOver = function() {
   ancho = this._width * 1.2;
   animar(this,Strong.easeOut,ancho,0.5);
};

supongo que el multiplicador en el rollover y el divisor en rollout son los que hacen esto. pero como dependo de que this._width tambien es una variable (segun el ancho de un texto) no puedo saber su valor, entonces he de darle el tamaño de ampliacion de esa manera (multiplicandolo o dividiendolo, segun quiera ampliarlo o que vuelva a su sitio).

¿alguna pista de como abordar esto?

milchisimas gracias

me respondo yo misma...

antes de llamar a la funcion he de dirigir el tween a su posicion final

Código ActionScript :

preambulo.onRollOver = function() { 
   mov1.fforward();
   mov2.fforward();
   ancho = this._width * 1.2; 
   animar(this,Strong.easeOut,ancho,0.5); 
};