Forums → Programming Forum → How to add a pre-loader as3 *windows*

I have seen quite a few different styles of adding a pre-loader to your game, this is one that works for me.

This tut is adding a pre-loader using AS3 download free trial here

Lets start off by creating a new fla file (or you can use an existing one)



save as whatever you want I chose preloader

then go to file>ActionScript Settings



this next step is very important EXPORT CLASSES IN FRAME 2 then click edit class definition you can choose whatever you want as document class name I chose main



If you see this message its fine, its just letting you know that there is no class found and one will automatically be created which is not relevant as we will be creating the class. Just click ok and proceed



click save and make sure you save it with the same name as class name or else it wont work.

All that we have done is created an fla file and class file and linked them together but the class is only loaded in the second frame so lets go to the timeline and insert a new blank keyframe (if you dont see your timeline press Ctrl+Alt+T to show it)



I like to start with the visual first so lets click on the first frame to make sure it is selected then on the stage draw a rectangular box which will represent the download bar



choose any color you want I chose black outline with dark grey fill, now click on the fill and separate it from the outline.



Now what we want to do is convert these to symbols, while it is not necessary I like to do it anyways so lets start with the outline. Use the selection tool and highlight all 4 sides of the outline RIGHT CLICK>Convert to Symbol... Whatever you want as the name and select center registration



now for the relevant part highlight the bar convert to symbol and choose left registration



now select the bar symbol that you just created and in the properties panel set the to loadBar



at this point you will notice that in the library panel the 2 symbols now appear, you can then proceed to put the bar back inside the outline



the loadbar is complete at this point and now we want to add a numerical display of the progress so click on your text tool add a box and set the instance name as loadTxt



now the visual display is done so lets save our fla file and navigate to our class file

if you already tried to test scene you will see the bar flickering and what is happening is the video plays the frame then starts over essentially switching back n forth between frames so lets add a code to make it stay on the first frame

stop();

what we want to do is create a progress event so we need to import it. I like to just import everything by changing this line here

import flash.display.MovieClip;

to this

import flash.display.*;

then importing all events like so

import flash.events.*;

your code should look like this

package
{
import flash.display.*;
import flash.events.*;

public class main extends MovieClip
{
public function main()
{
stop();
}
}
}

nothing is happening here so lets add an event listener one for loading and another for when loading is complete. Add these lines under stop();

loaderInfo.addEventListener(ProgressEvent.PROGRESS, loading);
loaderInfo.addEventListener(Event.COMPLETE, loadComplete);
function loading(progressEvent:ProgressEvent):void
{

}
function loadComplete(event:Event):void
{

}
While it is loading we want to see what is happening so we can find this by setting a trace parameter to display bytes loaded and bytes total

trace( loaderInfo.bytesLoaded, loaderInfo.bytesTotal );

run the code and you will see data in the output panel but it is confusing and we want perfectly rounded numbers to wrap our heads around so lets use the math function and multiply bytes loaded by 100 then divide by the total amount and add a display of what is happening

trace(Math.floor(100*loaderInfo.bytesLoaded/loaderInfo.bytesTotal)+ "% Loaded"

save your class file then run and you will see it is more uniform and the display shows 100% loaded, the file size is so small you probably wont even see the loader but we can emulate a download speed which ill get into in a moment

For now lets add a trace for when the download is complete remove the event listeners as they are no longer needed and create a startup event

trace("DONE!" loaderInfo.removeEventListener(ProgressEvent.PROGRESS, loading);
loaderInfo.removeEventListener(Event.COMPLETE, loadComplete);
addEventListener(Event.ENTER_FRAME, startUp);

make the startup event out of the main constructor, and tell it to go to frame 2 then stopping, dont forget to remove the listener, your code should look like this

package
{
import flash.display.*;
import flash.events.*;

public class main extends MovieClip
{
public function main()
{
stop();
loaderInfo.addEventListener(ProgressEvent.PROGRESS, loading);
loaderInfo.addEventListener(Event.COMPLETE, loadComplete);
function loading(progressEvent:ProgressEvent):void
{
trace(Math.floor(100*loaderInfo.bytesLoaded/loaderInfo.bytesTotal)+ "% Loaded"
}
function loadComplete(event:Event):void
{
trace("DONE!"
loaderInfo.removeEventListener(ProgressEvent.PROGRESS, loading);
loaderInfo.removeEventListener(Event.COMPLETE, loadComplete);
addEventListener(Event.ENTER_FRAME, startUp);
}
}
public function startUp(event:Event):void
{
gotoAndStop(2);
removeEventListener(Event.ENTER_FRAME, startUp);
trace("START GAME"
}
}
}

If you try running it again you will see the bar for a second then blank screen I went ahead and added a picture to mine to show something when complete

now to simulate the download. test your movie then click on view>download settings and select the top one to emulate a download speed from 1980's



once selected press Ctrl+enter to simulate the download. voila you see the bar and parameters in the output panel but it is not doing anything... lets go back to the code constructor and in the progress function tell the bar to scale itself equally to the amount loaded so add this line

loadBar.scaleX = loaderInfo.bytesLoaded/loaderInfo.bytesTotal;

might as well add the numerical display while were here

loadTxt.text = Math.floor(100*loaderInfo.bytesLoaded/loaderInfo.bytesTotal)+ "% Loaded";

save run the simulated download and now you should see it working(*NOTE: if you have nothing there it will simply show as 100% so I have added an img to give it something to load)

If it is blank for a few seconds that is fine it is the time taken to load the loadBar and text which is as minimal as possible then the loader shows the time left for loading the rest of the file

DOWNLOAD EXAMPLE HERE

Altho not needed until the game is large enough, it needs to be added first before anything else is loaded, so if you add the preloader first it will save the time needed to add it in later and reconstruct your code which also isnt very hard but it is nice to be prepared in advance

Good Luck and Happy Game Making