How to create Preloader in AS3

Question

My flash applications is little bit big, so i want to embed a preloader in my application, So can anyone please tell me how to create a preloader in new 'Scene' and load another scene in after preloading completed?

Thanks in Advance!

package · Accepted Answer · 2011-12-08T07:05:37.040

Update:

Option 1. Flash IDE, one swf file

To have an embedded preloader when compiling with Flash IDE, you should move your Document Class code to 2nd frame of your FLA file (without package and class constructor, of course), and remove Document Class .as file from project properties. In the first frame you should place such code:

stop(); // stops the timeline at preloader frame
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
function onProgress(e:ProgressEvent):void {
    var percent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100);
    //additional code to update preloader graphics
    //..
    if (percent == 100) onLoaded();
}
function onLoaded() {
   this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
   nextFrame();
}

Once swf is loaded, it advances to the next frame and the original application initialization code should be executed. This works well if you organized your project in a way that the most of the assets (images, etc) are in the Flash IDE Library and are not loaded on the first frame (you can check that in each library item's properties).

Option 2. Flash IDE, two swf files

Another option, as already recommended by another commenter, is to keep your application swf as it is, and create another lightweight swf that would load the first one. The code of preloader.swf in first frame:

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
loader.load(new URLRequest("path/to/application.swf"));

function onProgress(e:ProgressEvent):void
{
   var percent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100);
   //additional code to update preloader graphics
   //..
   if (percent == 100) onLoaded();
}
function onLoaded():void
{
   loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
   var application:DisplayObject = loader.content;
   addChild(application);
}

Sometimes there are additional issues with this approach, when you try to access stage from your Document Class constructor etc, but for most cases this should do the job.

Option 3. Different IDE, my recommendation: FlashDevelop

If you tried to compile my originally posted code with FlashDevelop, Flash Builder or any other IDE, it should work.

Original post:

Here's a basic setup for an embedded preloader. Your Document Class should look like this:

package {

  import flash.display.Sprite;

  [Frame(factoryClass='Preloader')] //class name of your preloader

  public class Main extends Sprite {

     public function Main() {
        //init
     }
  }
}

Preloader Class:

package {

   import flash.display.DisplayObject;
   import flash.display.MovieClip;
   import flash.events.ProgressEvent;
   import flash.utils.getDefinitionByName;

  public class Preloader extends MovieClip {

     public function Preloader()
     {
        //add preloader graphics 

        //check loading progress
        this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
     }
     private function onProgress(e:ProgressEvent):void 
     {
        var percent:Number = Math.round(e.bytesLoaded / e.bytesTotal * 100);
        if (percent == 100)
        {
          this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
          onLoaded();
        }
     }
     private function onLoaded():void
     {
       nextFrame(); //go to next frame
       var App:Class = getDefinitionByName("Main") as Class; //class of your app
       addChild(new App() as DisplayObject);
     }
  }
}

Do you get any errors? Can you show your code regarding preloading and initialization of your `Document Class`? — package, Dec 07 '11 at 09:34
no i dont get any error message and my document class is exactly same as whatever u told. — Swati Singh, Dec 07 '11 at 12:21
Add a trace statement to `Preloader` constructor, to check if the preloader is initialized properly: `trace("begin preloading");` If you don't get this message, then there's something wrong with `Document` class. — package, Dec 07 '11 at 12:43
Does your `Document` class have `[Frame]` metatag? What IDE are you using to compile your project? — package, Dec 07 '11 at 13:13
i am using flash cs5 IDE and no there is no frame meta tag.please tell me where should i defined this meta tag? — Swati Singh, Dec 08 '11 at 03:41
That's completely different story then. Flash IDE won't recognize `[Fame]` metatag and you cannot simply embed a preloader if you're coding in .as files and not directly on the `Timeline`. — package, Dec 08 '11 at 05:31
@package : With the FlashDevelop solution, how do you tell the preloader to load the graphics required for the "Main" class. It seems that the preloader loads it's own graphics and then when I get to my main class, I have a laggy load period at the beginning. — Kyle Uithoven, Jun 03 '12 at 20:26
In `Preloader` class, once swf is loaded, you can load additional resources and then pass them to the `Main` class either as constructor parameters (e.g. `function Main(resources:Array)`), or use some other function, like `Main.setResources(resources:Array)` — package, Jun 04 '12 at 08:45

score 1 · Answer 2 · answered Dec 07 '11 at 06:36

I recommend going the "lightweight swf loads a heavy swf" route, since it is the most efficient that I've seen. There are plently of bloated tutorials out there, but for me I like this one http://doogog.com/actionscript-3-external-preloader.html It is straight to the point.

score 0 · Answer 3 · edited May 23 '17 at 11:59

[Frame(factoryClass='Preloader')] no longer works in the new ASC 2.0 compiler. Instead, the preloader becomes your document class, and you need to add an Additional Compiler Argument to tell flash to include your main class on the second frame (do not reference it in the preloader):

-frame=NameDoesntMatter,Main

Does ASC 2.0 recognize [Frame] metadata tags (ex: for Preloader factoryClass)?

ASC2.0 and Frame metatag

score 0 · Answer 4 · answered Dec 07 '11 at 06:44

0

Here is article how to create embeded as3 preloader http://www.kirupa.com/forum/showthread.php?351689-actionscript-preloader-in-flash-develop

answered Dec 07 '11 at 06:44

zaynyatyi

1,116
6
18

score 0 · Answer 5 · answered Dec 07 '11 at 07:16

You can also use 3rd party library like Greensock for preloading both before the application start and while the application files are loading.

I personally use Greensock and recommend it. It resolves some bugs with loaderInfo class.

http://www.greensock.com/loadermax/

How to create Preloader in AS3

5 Answers5

Linked