Actionscript 3 animation using png's, reload or hide?

Question

Hi, using flash and actionscript 3 I want to use a lot of png's as animation. I currently use a Loader object to load these images. But now I am wondering what the best way would be to show these animations:

1.

Every time a have to show a new png, I could use the loader to load it, just having one loader:

var image:Loader = new Loader();

And using this function everytime a new image is used as part of the animation:

image.load(new URLRequest(location));

2.

I could also create dozens of loaders, one for every image, and hide every loader except the one that I want shown. When I want to animation to continue, I hide the current one and show the next one. This would mean creating A LOT of Loader objects.

Which way would be the best? Or is there a third even better way to do this?

Answer 1

The Flash IDE's main purpose is precisely this... I know many people hate it to develop, and with good reasons, but I really think that the ideal tool for animating in Flash is the Flash IDE.

Answer 2

Do the below:

public class ImageLoader {  // Singleton class for explanation

    private static var imageLoader:Loader = new Loader();  // 1 loader only
    private static var currentImage:Bitmap = null;         // currently attached image

    public static function Initialize():void {
        imageLoader.contentLoaderInfo.addEventListener( Event.COMPLETE,  Rsc_Loaded );
    }
    public static function RenderImage( url:String ):void {
        imageLoader.load( new URLRequest( url ) );
    }
    private static function Rsc_Loaded( eEvent:Event ):void {
        if ( null != currentImage ) { // if previous bitmap was attached to stage
              currentImage.parent.removeChild( currentImage ); // remove it
        }
        currentImage = eEvent.target.content; // Bitmap is loaded

        // attach the content to stage for rendering
        GetMainApp().stage.addChild( currentImage );
    }
}    

    // then inside your main app. do below

    // load image 1 and add it to stage
    imageLoader.load("img1.png");
    // time to animate to img2.png
    imageLoader.load("img2.png");

this is not the most efficient method, but you can add a cache to pre-cache all the images and just attach them to stage. Or if you are hardcore, can readup about the BitmapData class and perform your own pixel manipulation.