Exportar animaciones como código ActionScript en Flash CS3

Estos dias he estado probando el Adobe Creative Suite CS3 y en particular el Flash CS3, y una de las cosas que de entrada me ha llamado más la atención es la exportación de animaciones a código XML.

Con este sistema podemos hacer animaciones "a mano" por línea de tiempo para luego exportarlas a código y poder reutilizarlas en películas más complejas. Esta animación en formato XML la podremos aplicar a diferentes MovieClips o editar los nodos del XML para modificar los parámetros de la animación. Así que las posibilidades son amplias.

Veamos un ejemplo:

El primer paso será abrir un documento nuevo y crear una animación simple, a través de una interpolación. Utilizaremos la nueva herramienta "Rectangle Primitive" y dibujaremos un rectángulo en el lienzo.



Este rectángulo lo convertiremos a símbolo y crearemos una animación con unos cuantos fotogramas clave que hagan cambiar la escala del símbolo (para ver el ejemplo no vale la pena complicarse mucho).



Esta sería la animación:



Ahora seleccionaremos todos los fotogramas de la interpolación y seleccionaremos con el botón derecho: "Copy Motion as ActionScript 3"



Nos pedirá que añadamos el nombre del MovieClip que estamos utilizando. Podemos poner cualquier cosa, por ejemplo "boton".

Esta acción nos copiará en el portapapeles el siguiente código:

Código :

import fl.motion.Animator;
var boton_xml:XML = <Motion duration="31" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
   <source>
      <Source frameRate="30" x="115" y="45" scaleX="1" scaleY="1" rotation="0" elementType="movie clip" symbolName="caja">
         <dimensions>
            <geom:Rectangle left="0" top="0" width="150" height="50"/>
         </dimensions>
         <transformationPoint>
            <geom:Point x="0.5" y="0.5"/>
         </transformationPoint>
      </Source>
   </source>

   <Keyframe index="0" tweenSnap="true" tweenSync="true">
      <tweens>
         <SimpleEase ease="1"/>
      </tweens>
   </Keyframe>

   <Keyframe index="10" tweenSnap="true" tweenSync="true" y="0.04999999999999716" scaleX="1.453" scaleY="1.453">
      <tweens>
         <SimpleEase ease="-1"/>
      </tweens>
   </Keyframe>

   <Keyframe index="18" tweenSnap="true" tweenSync="true" y="0" scaleX="0.84" scaleY="0.84">
      <tweens>
         <SimpleEase ease="1"/>
      </tweens>
   </Keyframe>

   <Keyframe index="25" tweenSnap="true" tweenSync="true" y="0.04999999999999716" scaleX="1.093" scaleY="1.093">
      <tweens>
         <SimpleEase ease="-1"/>
      </tweens>
   </Keyframe>

   <Keyframe index="30" tweenSync="true" y="0" scaleX="1" scaleY="1"/>
</Motion>;

var boton_animator:Animator = new Animator(boton_xml, boton);
boton_animator.play();

Como podemos ver, nos ha creado un objeto XML que contiene todos los parámetros de la animación realizada.

La clase "Animator" es la que crea la animación pasándole como parámetros el objeto XML y el clip que queremos mover. Iniciaremos la animación con la función play();

Código :

import fl.motion.Animator;
var boton_xml:XML = .................

var boton_animator:Animator = new Animator(boton_xml, boton);
boton_animator.play();

Si colocasemos este código en una película nueva, en un fotograma con un MovieClip que se llamase "boton" veríamos que se reproduciría exactamente la misma animación.

Ahora veamos como reutilizar este código de una manera más útil:

Primero copiaremos el codigo XML dentro de un archivo de texto. Pero SOLO el código XML, eliminando el código ActionScript:

Código :

<Motion duration="31" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
   <source>
      <Source frameRate="30" x="115" y="45" scaleX="1" scaleY="1" rotation="0" elementType="movie clip" symbolName="caja">
         <dimensions>
            <geom:Rectangle left="0" top="0" width="150" height="50"/>
         </dimensions>
         <transformationPoint>
            <geom:Point x="0.5" y="0.5"/>
         </transformationPoint>
      </Source>
   </source>

   <Keyframe index="0" tweenSnap="true" tweenSync="true">
      <tweens>
         <SimpleEase ease="1"/>
      </tweens>
   </Keyframe>

   <Keyframe index="10" tweenSnap="true" tweenSync="true" y="0.04999999999999716" scaleX="1.453" scaleY="1.453">
      <tweens>
         <SimpleEase ease="-1"/>
      </tweens>
   </Keyframe>

   <Keyframe index="18" tweenSnap="true" tweenSync="true" y="0" scaleX="0.84" scaleY="0.84">
      <tweens>
         <SimpleEase ease="1"/>
      </tweens>
   </Keyframe>

   <Keyframe index="25" tweenSnap="true" tweenSync="true" y="0.04999999999999716" scaleX="1.093" scaleY="1.093">
      <tweens>
         <SimpleEase ease="-1"/>
      </tweens>
   </Keyframe>

   <Keyframe index="30" tweenSync="true" y="0" scaleX="1" scaleY="1"/>
</Motion>

Este archivo de texto lo llamaremos "animacion_boton.xml".

Empezaremos a crear nuestra pelicula en Flash. Simplemente haremos una parrilla de botones que tengan todos esta animacion al hacer rollOver.

Crearemos un nuevo archivo de ActionScript, y crearemos nuestra class principal. La llamaremos "Main".

Cómo es la clase principal deberá extender de MovieClip, y además necesitaremos añadir los siguientes paquetes:

• flash.net.* - Para cagar el archivo XML
  
• flash.xml.* - Para poder manejar el XML
  
• flash.events.Event; - Para controlar la carga del fichero

También importaremos la clase "botonSimpleAnimado" que es una clase que escribiremos a continuación y que será la que dibuje el botón y lo anime.

Código :

package 
{
   import flash.display.MovieClip;
   import flash.events.Event;
   import flash.net.URLLoader;
   import flash.net.URLRequest;
   import flash.xml.XMLDocument;
   import flash.xml.XMLNode;
   import botonSimpleAnimado;
   //---------------------------------------
   public class Main extends MovieClip
   {
      //---------------------------------------
      public function Main()
      {
      }
   }
}

En el constructor de la clase cargaremos el archivo XML, y ejecutaremos una acción cuando el archivo esté cargado del todo:

Código :

private var _botones_list:Array = new Array();
private var _animacion_xml:XMLDocument = new XMLDocument;
//---------------------------------------
public function Main()
{
   var url:URLRequest = new URLRequest ("animacion_boton.xml");
   var loadUrl:URLLoader = new URLLoader (url);
   loadUrl.load(url);
   loadUrl.addEventListener(Event.COMPLETE, xnComplete);
   function xnComplete(event : Event):void
   {
      _animacion_xml.ignoreWhite = true;
      _animacion_xml.parseXML(loadUrl.data);
      //
      iniBotonera();
   }
}

La función "iniBotonera" nos colocará los botones en la pelicula. Los botones serán instancias de la clase "botonSimpleAnimado" que escribiremos a continuación. Colocaremos una parrilla de botones de 5 columnas y 4 líneas:

Código :

private var _botones_list:Array = new Array();
private var _numX:int = 5;
private var _numY:int = 4;
private var _animacion_xml:XMLDocument = new XMLDocument;
//---------------------------------------
public function Main()
{
   var url:URLRequest = new URLRequest ("animacion_boton.xml");
   var loadUrl:URLLoader = new URLLoader (url);
   loadUrl.load(url);
   loadUrl.addEventListener(Event.COMPLETE, xnComplete);
   function xnComplete(event : Event):void
   {
      _animacion_xml.ignoreWhite = true;
      _animacion_xml.parseXML(loadUrl.data);
      //
      iniBotonera();
   }
}
//---------------------------------------
private function iniBotonera():void
{
   var X:int = 10;
   var Y:int = 10;
   for (var i:int=1; i<=_numY; i++) {
      for (var ii:int=1; ii<=_numX; ii++) {
         //crea el boton
         var boton:botonSimpleAnimado = new botonSimpleAnimado(this, X, Y, _animacion_xml);
         _botones_list.push(boton);
         //
         X += 110;
      }
      X = 10;
      Y += 40;
   }
}

Esta clase ya está terminada, podemos ver el código completo. La guardaremos en un archivo que se llame "Main.as".

Ahora escribiremos la clase "botonSimpleAnimado".

Esta clase la extenderemos de la clase "botonSimple". Para esta clase utilizaremos una clase creada en otro tip que escribí hace un tiempo:

• La Clase SimpleButton de Actionscript 3

Esta clase lo que hace es colocar un botón simple dentro de nuestra película.

A esta clase ya creada necesitaremos realizarle la siguiente modificación: Dejaremos el constructor vacío y pasaremos el código a una función publica (este paso es necesario para poder extender de ella). Tambié haremos que esta función devuelva como parámetro una referencia de la instáncia de la clase "SimpleButton" creada. La clase quedaría asi:

Código :

package 
{
   import flash.display.Sprite;
   import flash.display.SimpleButton;
   //----------------------------
   public class botonSimple extends Sprite
   {
      private var ruta:Sprite;
      private var boton:SimpleButton = new SimpleButton;
      //----------------------------
      public function botonSimple()
      {
      }
      public function creaBotonSimple(queRuta,queX,queY):SimpleButton
      {
         ruta = queRuta;
         boton.upState = creaSprite(3,0x000000,0xFF9900,100,30);
         boton.overState = creaSprite(3,0x000000,0xFFCC00,100,30);
         boton.downState = creaSprite(3,0x000000,0xFFCC99,100,30);
         boton.hitTestState = boton.upState;
         boton.useHandCursor = true;
         boton.x = queX         ;
         boton.y = queY;
         ruta.addChild(boton);
         return boton
      }
      //----------------------------
      private function creaSprite(lin_grosor, lin_color, relleno_color, ancho, alto):Sprite
      {
         var sprite:Sprite = new Sprite();
         sprite.graphics.lineStyle(lin_grosor, lin_color);
         sprite.graphics.beginFill(relleno_color);
         sprite.graphics.drawRect(0, 0, ancho, alto);
         return sprite;
      }
   }
}

Sigamos con la clase "botonSimpleAnimado".

El constructor de esta clase colocará una instancia de la clase "botonSimple" en la posición X y Y recibida como parámetro desde el bucle generado en la clase "Main".

También recibirá como parámetro de la clase "Main" el código XML que contiene la animación. aquí será entonces donde aplicaremos la animación al botón.

Además añadiremos un detector de eventos para ejecutar la animación cuando hagamos rollOver sobre el botón.

La clase quedaría así:

Código :

package 
{
   import flash.display.MovieClip;
   import flash.display.SimpleButton;
   import flash.events.Event;
   import flash.events.MouseEvent;
   import fl.motion.Animator;
   import flash.xml.XMLDocument;
   import flash.xml.XMLNode;
   import flash.xml.XMLNodeType;
   //----------------------------
   public class botonSimpleAnimado extends botonSimple
   {
      private var _animacion:Animator;
      private var _animacion_xml:XMLDocument = new XMLDocument;
      private var _ruta:MovieClip;
      //----------------------------
      public function botonSimpleAnimado(queRuta,queX,queY,queXML)
      {
         _ruta = queRuta;
         var boton:SimpleButton = creaBotonSimple(queRuta,queX,queY);
         //
         //anima el boton
         _animacion_xml = queXML;
         var animacion_xml:XML = new XML(_animacion_xml.firstChild);
         _animacion = new Animator(animacion_xml, boton);
         //
         //eventos del boton
         boton.addEventListener(MouseEvent.MOUSE_OVER, xnRollOver);
         function xnRollOver(event:Event):void
         {
            _ruta.setChildIndex(boton, _ruta.numChildren - 1);
            _animacion.play();
         }
      }
   }
}

Listo! Una vez acabadas las clases abriremos un nuevo documento de Flash y le asignaremos la clase "Main" cómo clase principal.



Solo queda publicar y ver el resultado:



Ahora podríamos sustituir el XML por otro y cambiar fácilmente el efecto del botón o asignar una animación diferente para cada botón o para los diferentes estados...



Archivos del ejemplo

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.