Comunidad de diseño web y desarrollo en internet online

Un problema animando varias instancias de movieclip con Twen

Citar            
MensajeEscrito el 27 Abr 2010 04:17 pm
Hola, son relativamente nuevo con ASC3 y para ser honesto no soy el programador más brillante.

Tengo esta situación. He creado varias instancias de un movie clip las cuales se animan en direcciones random. Para la animación estoy utilizando los métodos de la clase Tween de ASc3. Para dar continuidad a la animación he agregado un Listener a mi objeto Tween que escucha por el evento MOTION_FINISH. entonces utilizo el método continueTo(). Es aquí donde la mágina no sucede. Pasa que únicamente responde al evento, la última instancia.

¿Hay alguna manera de trabajar alrededor de esta situación? ¿Realmente puedo hacerlo así, o debo considerar una solución diferente?

Mi código es el siguiente:

Código ActionScript :

//IMPORTACIONES
import fl.transitions.easing.*;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import flash.events.TimerEvent;
import flash.utils.Timer;

//FUNCION QUE GENERA NUMEROS RANDOM
function Random(_min:Number, _max:Number):Number 
{
   var num:Number = Math.floor(Math.random() * (_max - _min + 1)) + _min;
   return num;

}

//CREO COPIAS DEL CLIP
for (var i:Number = 0; i <= 10; i ++)
{
   var cora:c3 = new c3();
   holder.addChild(cora);
   cora.name = "corazonAzul" + i;
   //COLOCO LAS COPIAS DEL CLIP EN UNA POSICIÓN RANDOM INICIAL
   holder.getChildByName("corazonAzul" + i).x = Random(-380, 380);
   holder.getChildByName("corazonAzul" + i).y = Random(-220, 220);
   //ANIMO LAS INSTANCIAS DEL CLIP CON LA CLASE TWEEN
   //anima posición X
   var anipx:Tween = new Tween(holder.getChildByName("corazonAzul" + i),"x",None.easeNone,holder.getChildByName("corazonAzul" + i).x,Random(-380,380),100,false);
   //anima posición Y
   var anipy:Tween = new Tween(holder.getChildByName("corazonAzul" + i),"y",None.easeNone,holder.getChildByName("corazonAzul" + i).y,Random(-220, 220),100,false);
   //anima rotación
   var aniR:Tween = new Tween(holder.getChildByName("corazonAzul" + i),"rotation",None.easeNone,holder.getChildByName("corazonAzul" + i).rotation,Random(-360,360),100,false);
   
}

//FUNCIONES QUE MANEJAN LOS EVENTOS DEL OBJETO TWEEN
   function anipxFUN(event:TweenEvent):void
   {
      anipx.continueTo(Random(-380,380),100);
   }
   function anipyFUN(event:TweenEvent):void
   {
      anipy.continueTo(Random(-220,220),100);
   }
   function anirFUN(event:TweenEvent):void
   {
      aniR.continueTo(Random(-360,360),100);
   }
   //asigno el listener a los objetos tween
   anipx.addEventListener(TweenEvent.MOTION_FINISH, anipxFUN);
   anipy.addEventListener(TweenEvent.MOTION_FINISH, anipyFUN);
   aniR.addEventListener(TweenEvent.MOTION_FINISH, anirFUN);

//FIN DEL CODIGO

Gracias por cualquier ayuda que me puedan dar.

Por arteiyo

1 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Abr 2010 05:03 pm
Primero el porqué falla.
Ya que creas un Tween (realmente tres) para cada objeto en el bucle for, Los addEventListener deberían estar también DENTRO del bucle FOR (un addEventListener por CADA tween)
[as]
for (var i:Number = 0; i <= 10; i ++)
{
var cora:c3 = new c3();
....
var anipx:Tween = new Tween(holder.getChildByName("corazonAzul" + i),"x",None.easeNone,holder.getChildByName("corazonAzul" + i).x,Random(-380,380),100,false);
//<---aquí le añado el listener--->
anipx.addEventListener(TweenEvent.MOTION_FINISH, anipxFUN);
....
//idem con anipy e anipr
....
}
Claro, que, deberíamos cambiar un poco las funciones anipxFUN, anipyFUN y anirFUN para que hicieran referencia a la animación de que se trata. Vamos, usar la "propiedad" target del argumento "event"
[as]
function anipxFUN(event:TweenEvent):void
{
var ani:Tween=event.target as Tween //<--creo una variable de tipo Tween que
//hace referencia a event.target
//y le hago una "conversión de cast"
ani.continueTo(Random(-380,380),100);
}
[/as]
Segundo un consejo con los Tweens. Sé que es muy cómodo crear múltiples Tweens, pero es poco "práctico" y generalmente crea problemas de rendimiento. Lo suyo es hacer un único Tween. Ese Tween se puede hacer con un objeto cualquiera y un valor que vaya de 0 a 1, p.e. Si añadimos un listener al tween del tipo MOTION_CHANGE, podremos, en base a esa propiedad, mover TODOS los MCs
[as]
var controlObj:Object={prop:Number=0}
var ani:Tween=new Tween(controlObj,"prop",None.easeNone,0,1,100,false)
ani.addEventListener(TweenEvent.MOTION_CHANGE, motionChange)
function motionChange(event:TweenEvent){
trace(event.position)
}
[/as]
y en función de position mover los MCs

Por Eliseo2

710 de clabLevel



 

firefox
Citar            
MensajeEscrito el 27 Abr 2010 05:13 pm
Estás sobreescribiendo el Tween en el loop y se queda sobre el último. Sugerencia: mete toda la asignación de los Tweens en una función, y en el onMotionFinish (de uno solo de los Tweens) vuelve a llamar a la función, hará lo mismo pero sin el continueTo. Ejemplo:

Código ActionScript :

for (var i:Number = 0; i <= 10; i ++) {
   var cora:c3 = new c3();
   holder.addChild(cora);
   cora.name = "corazonAzul" + i;
   //COLOCO LAS COPIAS DEL CLIP EN UNA POSICIÓN RANDOM INICIAL 
   holder.getChildByName("corazonAzul" + i).x = Random(-380, 380);
   holder.getChildByName("corazonAzul" + i).y = Random(-220, 220);
}

function anima() {
   for (var i:Number = 0; i <= 10; i ++) {
      //ANIMO LAS INSTANCIAS DEL CLIP CON LA CLASE TWEEN 
      //anima posición X 
      var pic:MovieClip = holder.getChildByName("corazonAzul" + i)
      var anipx:Tween = new Tween(pic,"x",None.easeNone,pic.x,Random(-380,380),100,false);
      //anima posición Y 
      var anipy:Tween = new Tween(pic,"y",None.easeNone,pic.y,Random(-220, 220),100,false);
      //anima rotación 
      var aniR:Tween = new Tween(pic,"rotation",None.easeNone,pic.rotation,Random(-360,360),100,false);
   }
}
anima();
aniR.addEventListener(TweenEvent.MOTION_FINISH, anirFUN);
function anirFUN(event:TweenEvent):void {
   anima();
}


Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 27 Abr 2010 05:18 pm
Bueno, viendo que había contestado Eliseo ganándome de mano, mírate la biblioteca TweenMax que permite hacer Tween sobre un array de targets, es decir muchos clips al mismo tiempo (le pasas un array) http://www.greensock.com/tweenmax/

Jorge

Por solisarg

BOFH

13669 de clabLevel

4 tutoriales
5 articulos

Genero:Masculino   Bastard Operators From Hell Premio_Secretos

Argentina

firefox
Citar            
MensajeEscrito el 27 Abr 2010 08:45 pm
Gracias a cada uno por su pronta ayuda. Tan pronto como haya aplicado los cambios les comento de vuelta cómo me fué.

Nuevamente gracias.

Por arteiyo

1 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.