Un gran complemento a los efectos built-in de Adobe Flex, son las Tweener Animations. Si bien los efectos built-in son robustos, consistentes y funcionan con casi todos los componentes de flex, las Tweener permiten un mayor grado de expresividad en las aplicaciones que hacemos.

Antes de seguir les dejo un ejemplo de lo que se puede hacer con ellas. En esta animacion se muestran 25 circulos de colores en posiciones random, que al recibir un click se animan dentro del movie clip. El size, posiciones x e y y las tansiciones alpha/opacity son controladas por la Tweener library.

Click sobre los circulos para posicionarlos de forma random

La Tweener library no requiere del framework de Flex; sencillamente es una libreria de ActionScript que se puede usar en proyectos Flash y Flex. Existen las versiones oficiales de ActionScript 2 y ActionScript 3, y hasta hay un ports no-oficiales para Java, Javascript, Haxe, etc. En este ejemplo, incluyo un ejemplo de como usar esta libreria desde una aplicación Flex. Aclaro que si bien el ejemplo no usa componentes de flex (Buttons, Containers, Lists, Grids, Charts, etc…), la libreria funciona con ellos.

Para empezar, bajense la libreria desde Tweener home page, y agreguenla en el directorio “lib” de su proyecto.

La clase CircleRenderer es un componente visual que extiende UIComponent. Basicamente dibuja un circulo basado en el valor de size y color, con el centro en el punto (0, 0) de la instancia de UIComponent. Utiliza el metodo standard del lifecycly de Flex updateDisplayList para renderizar el circulo si es que la display list fue invalidada. Cada vez que el size o color cambien, se invalida el display mediante los setters, y el componentes es redibujado.

package
{
  import mx.core.UIComponent;

  public class CircleRenderer extends UIComponent
  {
    private var _color : Number = 0;
    private var _size : Number = 0;

    public function CircleRenderer()
    {
      super();
    }

    public function set color( value : Number ) : void
    {
      _color = value;
      invalidateDisplayList();
    }

    public function get color() : Number
    {
      return _color;
    }

    public function set size( value : Number ) : void
    {
      _size = value;
      invalidateDisplayList();
    }

    public function get size() : Number
    {
      return _size;
    }

    override protected function updateDisplayList(w:Number, h:Number):void
    {
      with (graphics)
      {
        clear();
        beginFill( _color );
        drawCircle( 0,0,_size );
      }
    }
  }
}

Ahora vamos a ver en detalle la clase CircleRenderer class. Noten que la aplicación raiz tiene 2 event listeners — creationComplete y mouseDown. El evento creationComplete dispara la funcion onCreationComplete(), que crea 50 instancias de CircleRenderer, cada una con un color random, y llama a la funcion randomize(). El evento mouseDown dispara la llamada a onMouseDown(), que recorre cada instancia de CircleRenderer y llama a la funcion randomize() para cada iteración.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute"
  creationComplete="onCreationComplete()"
  mouseDown="onMouseDown()"
  horizontalScrollPolicy="off"
  verticalScrollPolicy="off"
  backgroundColor="#FFFFFF"
  viewSourceURL="srcview/index.html">

  <mx:Script>
    <![CDATA[
      import caurina.transitions.Tweener;

      private var circles : Array = [];

      private function onCreationComplete() : void
      {
        //create a bunch of CircleRenderer objects
        for ( var z:int = 0; z < 50; z++)
        {
          var cr : CircleRenderer = new CircleRenderer();
          cr.color = Math.random() * 0xFFFFFF;
          circles.push( cr );
          addChild( cr );
          randomize( cr );
        }
      }

      private function onMouseDown() : void
      {
        for each ( var cr : CircleRenderer in circles )
        {
          randomize( cr );
        }
      }

      private function randomize( cr : CircleRenderer ) : void
      {
        Tweener.addTween( cr,
          {
            size: Math.random() * 300,
            alpha: Math.random(),
            x: Math.random() * width,
            y: Math.random() * height,
            time: 1,
            transition: "easeInOutQuart"
          } );
      }

    ]]>
  </mx:Script>

</mx:Application>

Por último vamos a ver la funcion randomize() — Aca es donde entra en acción Tweener. La funcion randomize hace solo una llamada a la funcion Tweener.addTween, que acepta 2 parametros. El primero es el objeto que va a ver sus propiedades modificadas. En este caso, es la instancia de CircleRenderer que es pasada a la funcion randomize() . El segundo parametro es un objeto generico que especifica las propiedades a modificar y sus valores. De esta forma le decimos que propiedades queremos modificar sobre la instancia pasada como 1er parametro. En nuestro ejemplo, el código le dice a Tweener que modifique las propiedades size, alpha, x, e y de la instancia de CircleRenderer. Tambien van a notar 2 parametros adicionales, — time y transition. El parametro time especifica la duración de la animación en segundos. El valor 1 especifica que la animación va a durar 1 segundo. El parámetro transition es un string que especifica la transicion que se usa en la animación. Pueden ver las demas transiciones posiles en la Tweener online documentation.