animate an image

Forum|Forum|15 years ago
October 1, 2010
2 replies
1391 views

I have a read a few ways to animate an image in AS3 and not sure what is the most efficient way.

I want to load 4 images(in 4 files) in a class. Each image is a different frame of a walking movement of a character. What I want to do is load all the images in the constructor and assign the sprite the current frame to display.

eg sprite=bitmap1 then after some time swap images so
sprite=bitmap2 then after some time swap images so etc
sprite=bitmap3....

Is this the logic you do in AS3?

The code loads 1 image so I can change this to 4 images to load (4 bitmaps and 1 sprite for the current frame?)

private  var sp:Sprite=new Sprite();
          
          public function ClassImg2(myimg:String,xx:int,yy:int)     {
               
          img1=myimg;
               myx=xx;
               myy=yy;
          var loader:Loader = new Loader;
          loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
          loader.load(new URLRequest(img1));
          
          
          }
          
          private function imageLoaded(event:Event):void
          {
           var image:Bitmap = new Bitmap(event.target.content.bitmapData);
            
             sp.addChild(image);
             sp.x = myx;
             sp.y = myy;
             addChild(sp);

ActionScript

This topic has been closed for replies.

Andrei1-bKoviI

Inspiring

Actually, ImageLoader class should be like that - it dispatches COMPLETE event:

package  
{
     import flash.display.Loader;
     import flash.events.Event;
     import flash.net.URLRequest;

     public class ImageLoader extends Loader
     {
          private var url:String;
          public function ImageLoader(url:String) 
          {
               this.url = url;
          }
          
          public function startLoad():void {
               this.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
               load(new URLRequest(url));
          }
          
          private function onComplete(e:Event):void 
          {
               this.contentLoaderInfo.removeEventListener(Event.COMPLETE, onComplete);
               dispatchEvent(new Event(Event.COMPLETE));
          }
          
     }

}

Also, in the container onComplete should be (removes event listener):

private function onComplete(e:Event):void 
{
     loadCounter++;
     ImageLoader(e.target).removeEventListener(Event.COMPLETE, onComplete);
     if (loadCounter == numImages) startAnimation();
}

jagguy999Author

Known Participant

Hi,

You put a lot effort into this so thankyou for that.

I am animating the images from a call from the main.fla program which runs in a gameLoop so I wont need the timer. The images are loaded and animated in code in the class.

I need a sprite class as I need to do events on the images . For the sake of a test example I dont mind if the images are loaded in the same class that animates them.

Anonymous

how do i swap images on every frame for animation?????

private var images:Array = [];  
           private var urls:Array = ["scave0.png", "scave1.png", "scave2.png", "scave3.png"];     
          
          //constructor
          public function ClassImg3()     {
               
          
               
               for each (var el:String in urls) {
                    var loader:Loader = new Loader;
                    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
                    loader.load(new URLRequest(el));
                    trace (el);
                    
                    }
          
          }
          
          private function imageLoaded(event:Event):void
          {
           var Singleimage:Bitmap = new Bitmap(event.target.content.bitmapData);
            //addChild(image);
            images.push(Singleimage);
          sp.addChild(Singleimage);
            sp.x = 100;
             sp.y = 100;
             addChild(sp);
            
             dispatchEvent(new Event("image_loaded"));

          }

          public function moveleft()
          {
               sp=images(2);
               sp.x-=1;
               
               
          }
          
          public function moveright()
          {
               sp=images(4);
               sp.x+=1;
               
               
          }

Andrei1-bKoviI

Inspiring

I suggest you rethink the architecture. Since you are using classes it makes total sense to delegate image loading to a separate class and handle the animation in another class.

Here is a concept - you will have to work out the quirks:

This class loads images:

package  
{
     import flash.display.Loader;
     import flash.net.URLRequest;

     public class ImageLoader extends Loader
     {
          private var url:String;
          public function ImageLoader(url:String) 
          {
               this.url = url;
          }
          
          public function startLoad():void {
               load(new URLRequest(url));
          }
          
     }

}

This one instnatiates proper number of images and anumates them by displaying them in a sequence:

package  
{
     import flash.display.Sprite;
     import flash.events.Event;
     import flash.events.TimerEvent;
     import flash.utils.Timer;
     public class ImageContainer extends Sprite
     {
          // holds references to images
          private var images:Array = [];
          // images urls
          private var urls:Array = ["img0.jpg", "img1.jpg", "img2.jpg", "img3.jpg"];
          private var loadCounter:int = 0;
          // index of currently visible image
          private var currentImage:int = -1;
          // total number of images
          private var numImages:int = urls.length;
          // animation timer
          private var timer:Timer;
          public function ImageContainer() 
          {
               if (stage) init();
               else addEventListener(Event.ADDED_TO_STAGE, init);
          }
          
          private function init(e:Event = null):void 
          {
               removeEventListener(Event.ADDED_TO_STAGE, init);
               var img:ImageLoader;
               for (var i:int = 0; i < numImages; i++) 
               {
                    img = new ImageLoader(urls);
                    images.push(img);
                    img.addEventListener(Event.COMPLETE, onComplete);
                    img.startLoad();
                    addChild(img);
               }
               // make it invisible for now
               hideImages()
          }
          
          private function onComplete(e:Event):void 
          {
               loadCounter++;
               if (loadCounter == numImages) startAnimation();
          }
          
          private function startAnimation():void
          {
               timer = new Timer(500);
               timer.addEventListener(TimerEvent.TIMER, onTimer);
               timer.start();
          }
          
          private function onTimer(e:TimerEvent):void 
          {
               currentImage = currentImage == numImages ? 0 : currentImage + 1;
               hideImages();
               ImageLoader(images[currentImage]).visible = true;
          }
          
          private function hideImages():void
          {
               for each(var img:ImageLoader in images) img.visible = false;
          }

     }

}

Message was edited by: Andrei1

Powered by Gainsight
Terms & Conditions Accessibility statement

Sign up

Already have an account? Login

To post, reply, or follow discussions, please sign in with your Adobe ID.
Sign in

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.
Sign in

Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.

Enter your e-mail address

Back to overview

Scanning file for viruses.

Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.
OK

This file cannot be downloaded

Sorry, our virus scanner detected that this file isn't safe to download.
OK

Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information AdChoices