Hi for all, today i will explane something about the principiles of Actionscript 3: how to load an image inside the Flash. For totaly beginners, it’s so simple do it.

What the difference when load a picture using Actionscript 2 or 3?
Well, on AS2 you can call the file and imediatly when it loaded will appear inside the moviclip or stage. Using AS3 you can choice when and where the loaded file will appear.

AS3 Loader: your first loader inside Flash CS4
You need the Loader object and too create the listeners that will say for you what’s happen, if is loading, was an error or if the file is completely loaded. These listeners will be necessary always when you call a image or a XML file and others. Well, go to the Loader: see the code bellow:

1
2
3
4
5
6
7
8
9
10
11
12

import flash.display.Loader;
import flash.events.Event;
import flash.events.IOErrorEvent;
import flash.events.ProgressEvent;
import flash.net.URLRequest;
 
var request:URLRequest = new URLRequest("image.png");
var loader:Loader = new Loader();
     loader.load(request);
     loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadingImage);
     loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loadingError);
     loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadingComplete);

Here i created some differents listeners for the loader, the first, ProgressEvent.PROGRESS, will call the function loadingImage alway when the image is loading, inside the loadingImage you can create your preloader function using loader, get the bytes loaded and bytes total using the ProgressEvent inside the called function, something like this:

15
16
17
18
19
20
21

var loaditPercent:uint;
 
private function loadingImage(p:ProgressEvent):void
{
	loaditPercent = Math.ceil( ( p.bytesLoaded / p.bytesTotal ) * 100 );
	trace(loaditPercent);
}

The loaditPercent will show us the percent loaded. If you try your code will see that the image is loaded because the trace will show you 100% loaded but the image dont appear, need create the loadingComplete function and inside it we will put the loaded file inside of some movieclip or add it on the stage, you choose:

25
26
27
28
29

function loadingComplete(e:Event):void
{
	// addChild(loader);
	addChild(e.currentTarget);
}

This will add the loader, the picture, on the stage. Change the location using the MovieClip instance befora the addChild function. You can use too the loadingError function for your custom loader error, it’s so easy like others. Try it, for support comment here. Thanks for read.