Recurso: Animación de Bitmaps

[daPhyre]

Buen día compañeros del foro.

Anteriormente preguntaba en este mismo tema sobre la creación de animaciones en Flex. Después de encontrar un poco de información al respecto, he logrado crear una clase que se encarga de animar imágenes de bits, simulando algo similar a un MovieClip.

Para empezar, se necesita una imagen de mapa de bits aceptado por Flex, que contenga la animación completa. En mi caso, uso este simple loader como ejemplo:



Después, se importa la clase Animation.as, cuyo código dejo a continuación:

Código PHP:

  package
{
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.events.TimerEvent;
    import flash.geom.Point;
    import flash.geom.Rectangle;
    import flash.utils.Timer;
    
    /**
     *    Animation.as
     *    Author: daPhyre
     *    Version 0.1, Sa/10/Jul/10
     */
    
    public class Animation extends Bitmap
    {
        private var animationTimer:Timer;
        private var bm:Bitmap;
        private var frames:uint;
        private var cFrame:int;
        private var repeatTimes:uint = 0;
        private var loop:Boolean;
    
        public function Animation(bm:Bitmap, width:uint)
        {
            this.bm = bm;
            this.frames = (bm.width - 1) / width;
            this.cFrame = 0;
            this.bitmapData = new BitmapData(width, bm.height);
            this.bitmapData.copyPixels (bm.bitmapData, new Rectangle(0, 0, this.width, this.height), new Point(0, 0));
            animationTimer = new Timer(50);
            animationTimer.addEventListener(TimerEvent.TIMER, animate);
        }
        
        private function animate(evt:TimerEvent):void
        {
            if (loop || repeatTimes > 0)
            {
                if (cFrame + 1 > frames) repeatTimes--;
                nextFrame();
            }
        }
        
        private function update():void
        {
            this.bitmapData.copyPixels (bm.bitmapData, new Rectangle(cFrame*this.width, 0, this.width, this.height), new Point(0, 0));
        }
        
        public function currentFrame():int
        {
            return cFrame;
        }
        
        public function totalFrames():int
        {
            return frames;
        }
        
        public function nextFrame():void
        {
            cFrame++;
            if (cFrame > frames) cFrame = 0;
            update();
        }
        
        public function prevFrame():void
        {
            cFrame--;
            if (cFrame < 0) cFrame = frames;
            update();
        }
        
        public function repeat(times:uint):void
        {
            this.repeatTimes = times;
            this.loop = false;
            animationTimer.start();
        }
        
        public function play():void
        {
            this.loop = true;
            animationTimer.start();
        }
        
        public function stop():void
        {
            animationTimer.stop();
        }
        
        public function gotoAndPlay(frame:uint):Boolean
        {
            if (frame > this.frames)
                return false;
            else
            {
                cFrame = frame;
                update();
                play();
                return true;
            }
        }
        
        public function gotoAndStop(frame:uint):Boolean
        {
            if (frame > this.frames)
                return false;
            else
            {
                cFrame = frame;
                update();
                stop();
                return true;
            }
        }
    }
} 
   

Hay que cargar el bitmap (Yo lo hago a través de un embed con este código:)

Código PHP:

  [ Embed (source="loader.png") ]
private var bmLoader:Class; 
   

Y asignarlo a una nueva variable de la clase animación, que en su constructor enviará la imagen de mapa de bits, y el ancho que tendrá cada uno de los cuadros. El total de cuadros de la animación será calculado dependiendo de cuantas veces quepa el ancho en el mapa de bits:

Código PHP:

  public var aLoader:Animation = new Animation (new bmLoader(), 40);
aLoader.play();
addChild(aLoader); 
   

La forma más fácil de iniciar la animación es con un play(), pero también se puede elegir la cantidad de veces que se reproducirá mediante repeat(#), o animar de forma dinámica mediante condiciones con las funciones nextFrame(), currentFrame(), gotoAndStop(), etc...

La clase y la imagen pueden descargarlos de este enlace: http://source.octabot.net/as3/animation.zip

Espero este recurso sea de ayuda para todos ustedes