Thierry’s Technical Tutorials

This is a tutorial showing how to create a very clean and basic preloader for Flash CS3, using Actionscript 3.

to begin with  we must create our file.

1. click on File > New or (Ctrl + N)
2. Select Flash Actionscript3 and click ok
3. No we must give it a name, so Click File > Save As and give it a name, i called mine preloader
4. Once this is done we have the ablity to start editing our file

As usual you can set the file size for the document etc from the properties tab, but you can leave the settings as default if you like.

We now must create a new layer and call it actions, now in frame 1 of the actions tab (if you can not see the Actions tab, press F9) and type the following code:

var l:Loader = new Loader();
l.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loop);
l.contentLoaderInfo.addEventListener(Event.COMPLETE, done);
l.load(new URLRequest("YOURSWFfileNAME.swf"));

function loop(e:ProgressEvent):void
{
	var perc:Number = e.bytesLoaded / e.bytesTotal;
	percent.text = Math.ceil(perc * 100).toString();
}

function done(e:Event):void
{
	removeChildAt(0);
	percent = null;
	addChild(l);
}

Where I have written YOURSWFfileNAME.swf make sure you change that for the full name of you SWF file.
what this does, is calculate the percentage loaded of your file, and displays it on the screen.

before this code will work however we must link the code with a location on the screen that will display the text.

Click on the Text Tool (T) and click and drag an area on your screen, in the properties tab at the bottom make sure you select

1. Dynamic Text from the drop down menu
2. and call it percent – this will link the box we have just drawn with the variable percent in our code

Feel free to edit the text to your taste etc..

And that is all that is needed.

When testing out the movie, you must Simulate a download speed in order to see the preloader in action, so hit 

ctrl + Enter to test the movie clip, make sure you hit ctrl+ Enter AGAIN in order to see the preloader file, then click view > Download Settings
this is where you can choose which download speed you would like to simulate.

Feel free to leave a comment if you need any help.

If you like this post or this Blog, please click here to join the RSS feed!

Be Sociable, Share!

• 
• 

9 Responses to “Creating a Flash Preloader in Actionscript”