Reuse code from 'Loading an External Image' tutorial

[mufflekid]

Sup, guys. I'm designing a portfolio website that will showcase artwork that could potentially take awhile to load, so I'm using the code from that tutorial:

var imageLoader:Loader; 
function loadImage(url:String):void {
    preloader.visible = true;
// Set properties on my Loader object
imageLoader = new Loader();
imageLoader.load(new URLRequest(url));
imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imageLoading);
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
}
loadImage("azuredragon.png");
 
function imageLoaded(e:Event):void {
// Load Image
imagearea.addChild(imageLoader);
preloader.visible = false;
}
 
function imageLoading(e:ProgressEvent):void {
    // Get current download progress
var loaded:Number = e.bytesLoaded / e.bytesTotal;
 
// Send progress info to "preloader" movie clip
preloader.SetProgress(loaded)
// Use it to get current download progress
// Hint: You could tie the values to a preloader :)
}

I'm using one of these, one image, per frame. I'll be adding more and more in the future. I'm still a newbie to as3 and I haven't completely understood the basics yet, so my question is this: how do I reuse the above code for a different frame without having to paste the entire thing with different names? I tried this:

trace(imageLoader);

loadImage("colorfulserpent.png");
 
imageLoaded();
 
imageLoading();

Of course, it didn't work. Help?

[giobongio]

In this case, I would create a class that loads the image and create different instances of it on each frame. Suppose to call your class as "Image". All you need to do is create a file called Image.as and save it in the same folder of your fla file.

Image.as

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


  public class Image extends MovieClip 
  {
     protected var loader:Loader;

     // class constructor
     public function Image (path:String) 
     {
        loader = new Loader();
        loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressListener);
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeListener);
        loader.load(new URLRequest(path));
     }

     // called each time the loading process goes on
     protected function progressListener(event:ProgressEvent):void
     { 
        var loaded:Number = event.bytesLoaded / event.bytesTotal;
        trace(loaded); // you can use this to set-up a TextField text, or anything you like
     }

     // called on loading completion 
     protected function completeListener(event:Event):void 
     {
        addChild(loader);
        trace("image load complete");
     }
  }
}

Then you can call your class from your fla file

yourfile.fla

import Image;
var img:Image = new Image("world.jpg");
img.x = 0;
img.y = 0;
addChild(img);

I don't know if you are already skilled on object-oriented-programming from other languages, I hope this snippet would be sufficient clear to be understood.