Movimientos dinámicos de MovieClips con la Clase Tween

Por: mussra + 02.07.2007

Este es mi primer tip así que como podréis imaginaros, no contiene código actionscript muy complejo pero creo que el resultado es muy interesante. Quiero dar las gracias a Sisco por resolverme una duda que tenía para poder hacer estas pruebas.

El resultado que se busca en este tip es similar al de Windows Vista con sus paneles en 3D, (aunque yo nunca los haya usado en realidad), para ello he usado una clase propia llamada Panel, que tiene principalmente dos atributos:

1. "info" : Contiene el MovieClip que se verá (el panel en si).
   
2. "prof" : Que nos indicará el nivel de profundidad del panel y que nos servirá para calcular su "_alpha" y su posición en el escenario.

Las instancias de los objetos (paneles) que se encuentran en el escenario están recogidas en la matriz "obj".

Lo primero de todo es saber que el movimiento de los paneles lo activaremos mediante un botón con la siguiente función:

Código :

boton.onPress = function(){
    recolocar();
}

La función recolocar tiene el siguiente aspecto:

Código :

function recolocar()
{
   for (var i:Number = 0; i < obj.length; i++) {
      var o:Panel = obj[i];
      o.prof++;
      // Modificamos su profundidad.
      var p:Number = o.prof % 4;
      // así conseguimos el ciclo {0,1,2,3,0}
      //de tal manera que solo hayan 4 niveles diferentes 0, 1, 2 y 3
      //aunque el atributo prof crezca indefinidamente
      // Calculamos las posiciones destino dependiendo de la profudidad.
      var nuevaPosX:Number = posX + p * 20;
      var nuevaPosY:Number = posY + p * 10;
      // Movemos a esas posiciones
      mover(o,nuevaPosX,nuevaPosY,p);
      //Actualizamos la profundidad del clip
      o.info.swapDepths(p % 4);
   }
   // for
}
//recolocar

Este código es muy simple puesto que lo único que hace es actualizar la profundidad de los paneles, calcular las posiciones de los paneles según sus profundidades e invoca a la función mover con estos datos como parámetros y al final coloca cada MovieClip según su profundidad con la línea:

Código :

o.info.swapDepths(p%4); 

En la función mover he usado la clase Tween de tal forma que si según su profundidad, “o” es el primer panel actualmente, lo agrandará y si no lo es, lo devolverá a su tamaño normal, su código es

Código :

function mover(o:Panel, X:Number, Y:Number, p) {
   // En esta función usaremos la clase Tween que nos servirá para crear interpolaciones de 
   //movimiento y de forma desde actionscript fácilmente.
   // modificamos _alpha con la clase Tween para que lo haga poco a poco
   var talpha:Tween = new Tween(o.info, "_alpha", none, o.info._alpha, 100*(p+1)/4, 0.5, true);      
   if (o.prof%4 == 3){
      //Si es el primer panel
      // Crecimiento ondulatorio
      var tTamX:Tween= new Tween(o.info, "_xscale", Elastic.easeOut, 100, 150, 1.5, true);
      var tTamY:Tween = new Tween(o.info, "_yscale", Elastic.easeOut, 100, 150, 1.5, true);
      // Movimiento en el eje x
      var tX:Tween = new Tween(o.info, "_x", easeInOut, o.info._x, X+100, 0.2, true);
      //Movimiento en el eje y
           var tY:Tween = new Tween(o.info, "_y", easeInOut, o.info._y, Y+100, 0.2, true);
   }else{
      //Si no es el primer panel
      // Decrecimiento ondulatorio
      var tTamX:Tween = new Tween(o.info, "_xscale",Elastic.easeOut,o.info._xscale,100,1.5,true);
      var tTamY:Tween = new Tween(o.info, "_yscale",Elastic.easeOut,o.info._yscale,100,1.5,true);
      //o.info._x = X; Movimiento en el eje x
      var tX:Tween = new Tween(o.info, "_x", easeInOut, o.info._x, X, 0.2, true);
      //o.info._y = Y; Movimiento en el eje y
      var tY:Tween = new Tween(o.info, "_y", easeInOut, o.info._y, Y, 0.2, true);      
   }
   //if                
}
//mover

Un ejemplo de este código seria:

NOTA:

Si alguno de vosotros llegara a usar este código o parte de él en una web o algo por el estilo, me gustaría mucho que lo postearais para ver como queda.

actionscript

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario