{"id":8774,"date":"2014-08-11T03:12:03","date_gmt":"2014-08-11T03:12:03","guid":{"rendered":"http:\/\/2slick.com\/web\/?p=8774"},"modified":"2014-08-11T03:31:22","modified_gmt":"2014-08-11T03:31:22","slug":"external-preloader-as3-flash-cc","status":"publish","type":"post","link":"https:\/\/2slick.com\/web\/external-preloader-as3-flash-cc\/affordablewebsitestips\/tutorials","title":{"rendered":"External preloader AS3 Flash CC"},"content":{"rendered":"

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.<\/p>\n

The preloader script<\/p>\n

The first thing you want to do is to create the preloader script.<\/p>\n

    \n
  1. Create a new ActionScript file (.AS) using ~Flash CC.<\/li>\n
  2. Set the frame rate dimensions and color to match your game.<\/li>\n
  3. In the first frame of the  preloader project, input the code:
     javacript | <\/td><\/td> copy code |<\/td>?<\/td> <\/td><\/tr><\/tbody><\/table>
    01<\/td>
    import flash.display.Loader;\r<\/pre><\/td><\/tr>
    02<\/td>
    import flash.net.URLRequest;\r<\/pre><\/td><\/tr>
    03<\/td>
    import flash.events.ProgressEvent;\r<\/pre><\/td><\/tr>
    04<\/td>
    import flash.events.Event;\r<\/pre><\/td><\/tr>
    05<\/td>
    \r<\/pre><\/td><\/tr>
    06<\/td>
    var l:Loader = new Loader();\r<\/pre><\/td><\/tr>
    07<\/td>
    \r<\/pre><\/td><\/tr>
    08<\/td>
    l.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loop);\r<\/pre><\/td><\/tr>
    09<\/td>
    l.contentLoaderInfo.addEventListener(Event.COMPLETE, done);\r<\/pre><\/td><\/tr>
    10<\/td>
    l.load(new URLRequest(\"game.swf\"));\r<\/pre><\/td><\/tr>
    11<\/td>
    \r<\/pre><\/td><\/tr>
    12<\/td>
    function loop(e:ProgressEvent):void{\r<\/pre><\/td><\/tr>
    13<\/td>
     trace(\"loop go!...\");\r<\/pre><\/td><\/tr>
    14<\/td>
     var perc:Number = e.bytesLoaded \/ e.bytesTotal;\r<\/pre><\/td><\/tr>
    15<\/td>
     percent.text = (Math.ceil(perc*100).toString())+\"%\";\r<\/pre><\/td><\/tr>
    16<\/td>
    }\r<\/pre><\/td><\/tr>
    17<\/td>
    \r<\/pre><\/td><\/tr>
    18<\/td>
    function done(e:Event):void\r<\/pre><\/td><\/tr>
    19<\/td>
    {\r<\/pre><\/td><\/tr>
    20<\/td>
     removeChildAt(0);\r<\/pre><\/td><\/tr>
    21<\/td>
     percent = null;\r<\/pre><\/td><\/tr>
    22<\/td>
     addChild(l);\r<\/pre><\/td><\/tr>
    23<\/td>
    }<\/pre><\/td><\/tr><\/table><\/div><\/pre><\/li>\n
  4. 'Game.swf' should be the name of your game SWF and this file should be in the same directory of the preloader swf.<\/li>\n
  5. 'Percent' is the name of a text instance that will display the percent loaded of the game swf.<\/li>\n<\/ol>\n
    The preloade SWF or the game SWF<\/p>\n
    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.<\/p>\n
     Javascript | <\/td><\/td> copy code |<\/td>?<\/td> <\/td><\/tr><\/tbody><\/table>
    01<\/td>
    <\/pre><\/td><\/tr>
    02<\/td>
    public<\/span> function<\/span> eaterMain(<\/span>)<\/span> {<\/span><\/pre><\/td><\/tr>
    03<\/td>
     \/\/ constructor code<\/span><\/pre><\/td><\/tr>
    04<\/td>
    if<\/span>(<\/span>stage==<\/span>null<\/span>)<\/span><\/pre><\/td><\/tr>
    05<\/td>
     {<\/span><\/pre><\/td><\/tr>
    06<\/td>
       this<\/span>.addEventListener<\/span>(<\/span>Event.ADDED_TO_STAGE<\/span>,<\/span> intStageVars)<\/span>;<\/span><\/pre><\/td><\/tr>
    07<\/td>
     }<\/span> else<\/span> {<\/span><\/pre><\/td><\/tr>
    08<\/td>
     stage.addChildAt<\/span>(<\/span>BGround1,<\/span> 0<\/span>)<\/span>;<\/span>\/\/background1 create child<\/span><\/pre><\/td><\/tr>
    09<\/td>
     stage.addChildAt<\/span>(<\/span>BGround2,<\/span> 0<\/span>)<\/span>;<\/span>\/\/background2 create child<\/span><\/pre><\/td><\/tr>
    10<\/td>
     BGround2.x<\/span> =<\/span> BGround2.width<\/span>;<\/span><\/pre><\/td><\/tr>
    11<\/td>
     \/\/set focus of keyboard output<\/span><\/pre><\/td><\/tr>
    12<\/td>
     stage.focus<\/span> =<\/span> stage;<\/span><\/pre><\/td><\/tr>
    13<\/td>
     \/\/add start menu<\/span><\/pre><\/td><\/tr>
    14<\/td>
     startUpMenu(<\/span>)<\/span>;<\/span><\/pre><\/td><\/tr>
    15<\/td>
     stage.addEventListener<\/span>(<\/span>Event.ENTER_FRAME<\/span>,<\/span> enterFrameHandler)<\/span>;<\/span>\/\/recreate enter fram event<\/span><\/pre><\/td><\/tr>
    16<\/td>
     }<\/span><\/pre><\/td><\/tr>
    17<\/td>
    }<\/span><\/pre><\/td><\/tr>
    18<\/td>
     <\/pre><\/td><\/tr>
    19<\/td>
    public<\/span> function<\/span> intStageVars(<\/span>e:<\/span>Event)<\/span>:<\/span>void<\/span><\/pre><\/td><\/tr>
    20<\/td>
     {<\/span><\/pre><\/td><\/tr>
    21<\/td>
     stage.addChildAt<\/span>(<\/span>BGround1,<\/span> 0<\/span>)<\/span>;<\/span>\/\/background1 create child<\/span><\/pre><\/td><\/tr>
    22<\/td>
     stage.addChildAt<\/span>(<\/span>BGround2,<\/span> 0<\/span>)<\/span>;<\/span>\/\/background2 create child<\/span><\/pre><\/td><\/tr>
    23<\/td>
     BGround2.x<\/span> =<\/span> BGround2.width<\/span>;<\/span><\/pre><\/td><\/tr>
    24<\/td>
     \/\/set focus of keyboard output<\/span><\/pre><\/td><\/tr>
    25<\/td>
     stage.focus<\/span> =<\/span> stage;<\/span><\/pre><\/td><\/tr>
    26<\/td>
     \/\/add start menu<\/span><\/pre><\/td><\/tr>
    27<\/td>
     startUpMenu(<\/span>)<\/span>;<\/span><\/pre><\/td><\/tr>
    28<\/td>
     stage.addEventListener<\/span>(<\/span>Event.ENTER_FRAME<\/span>,<\/span> enterFrameHandler)<\/span>;<\/span>\/\/recreate enter fram event<\/span><\/pre><\/td><\/tr>
    29<\/td>
     }<\/span><\/pre><\/td><\/tr>
    30<\/td>
    <\/pre><\/td><\/tr><\/table><\/div><\/pre><\/p>\n
    I hope that makes sense to you. If not please refer to these very useful and short tutorials.<\/p>\n