In this tutorial I will show you how to create an external preloader for your flash game along with minor adjustments needed to make it work. Intermediate level knowledge of ActionScript is required to complete this tutorial.

The preloader script

The first thing you want to do is to create the preloader script.

1. Create a new ActionScript file (.AS) using ~Flash CC.
2. Set the frame rate dimensions and color to match your game.
3. In the first frame of the  preloader project, input the code:

    javacript | 
    copy code |
   ?
    
   01
   import flash.display.Loader;
   02
   import flash.net.URLRequest;
   03
   import flash.events.ProgressEvent;
   04
   import flash.events.Event;
   05
   06
   var l:Loader = new Loader();
   07
   08
   l.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loop);
   09
   l.contentLoaderInfo.addEventListener(Event.COMPLETE, done);
   10
   l.load(new URLRequest("game.swf"));
   11
   12
   function loop(e:ProgressEvent):void{
   13
    trace("loop go!...");
   14
    var perc:Number = e.bytesLoaded / e.bytesTotal;
   15
    percent.text = (Math.ceil(perc*100).toString())+"%";
   16
   }
   17
   18
   function done(e:Event):void
   19
   {
   20
    removeChildAt(0);
   21
    percent = null;
   22
    addChild(l);
   23
   }

4. 'Game.swf' should be the name of your game SWF and this file should be in the same directory of the preloader swf.
5. 'Percent' is the name of a text instance that will display the percent loaded of the game swf.

The preloade SWF or the game SWF

When a swf is loaded into a preloader swf, references to the stage in the constructor of the preloaded swf will not function correctly. This is because, the constructor of the preloaded swf gets instantiated before it is placed in the display list and the references to the stage return as null. To remedy this, re put an 'if' statement in the constructor of the preloaded swf along with an 'ADDED_TO_STAGE' event.

 Javascript | 
 copy code |
?
 
01
02
public function eaterMain() {
03
 // constructor code
04
if(stage==null)
05
 {
06
   this.addEventListener(Event.ADDED_TO_STAGE, intStageVars);
07
 } else {
08
 stage.addChildAt(BGround1, 0);//background1 create child
09
 stage.addChildAt(BGround2, 0);//background2 create child
10
 BGround2.x = BGround2.width;
11
 //set focus of keyboard output
12
 stage.focus = stage;
13
 //add start menu
14
 startUpMenu();
15
 stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);//recreate enter fram event
16
 }
17
}
18
 
19
public function intStageVars(e:Event):void
20
 {
21
 stage.addChildAt(BGround1, 0);//background1 create child
22
 stage.addChildAt(BGround2, 0);//background2 create child
23
 BGround2.x = BGround2.width;
24
 //set focus of keyboard output
25
 stage.focus = stage;
26
 //add start menu
27
 startUpMenu();
28
 stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler);//recreate enter fram event
29
 }
30

I hope that makes sense to you. If not please refer to these very useful and short tutorials.

• Loading an SWF whose Code is in a Document Class
• Loading an SWF whose Code is on the Timeline
• Flash swf preloader tutorial