Advanced preloader ( AS 3.0 and AS 2.0 version).

Today we will build a preloader witch will inform our users how much of our content is loaded. For this tutorial I will show you both as 3.0 and as 2.0 code. Will build the same graphical interface but will write as 3.0 code for those that use Flash CS3 and as 2.0 code for those that use Flash 8.


Ok let’s begin.


1.Go to File – New select Flash file(ActionScript 3.0),if you use Flash CS3 or if you use Flash 8 chose Flash Document and click Ok.It is possible to write actionscript 2.0 in Flash CS3 but I suppose that if you have Flash CS3 you use as 3.0 and as 2.0 if you have Flash 8.

2.Add a new layers (Insert – Timeline – Layer).


3.Select the top layer and name it actions, select the next layer and name it preloader.The naming of the layers is not required but to be well organize I name them.


4.Lock the actions layer, select the preloader layer pick the rectangle tool from the tools panel and draw a rectangle set it’s color to :your choice, set it’s stroke to none ,the width to 300 and height to 15.


5.With the rectangle selected go to Window – Align to open the Align panel. Be sure that the to stage button is pressed and click on the Align horizontal center and Align vertical center.

6.Select the rectangle hit F8 to convert it. Name it bar, set it’s type to MovieClip and the registration point to upper left and hit Ok.


7.With the rectangle selected set it’s instance name to bar.


8. On the preloader layer select frame 2 and hit F7 to insert a blank keyframe. With the frame 2 selected go to File – Import – Import to Stage, browse to your hard drive and select a relatively big picture (I selected a picture with a size of 527kb) and click Ok.


9.Select the picture resize it to cover the stage (if it doesn’t).


10.Select frame 1 in the actions layer hit F9 to open the ActionScript panel.Copy the code from below and paste in the panel


Code:


ActionScript 2.0 code for Flash 8:

stop();
this.onEnterFrame = function() {
var procentLoaded:Number = this.getBytesLoaded()/this.getBytesTotal()*100;
bar._xscale = procentLoaded;
if (procentLoaded == 100) {
this.gotoAndPlay(2);
}
};

ActionScript 3.0 code for Flash CS3:


stop();
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS,checkingProgress);
function checkingProgress(event:ProgressEvent):void{
var procentLoaded:Number = event.bytesLoaded/event.bytesTotal*100;
bar.scaleX = procentLoaded/100;
if(procentLoaded == 100){
this.gotoAndPlay(2);
}
}

In frame 2 in actions layer hit F7 to insert a blank keyframe after hit F9 to open the ActionScript panel and paste the code: stop();

Hit Ctrl + Enter to test the movie.If the preloader is not appearing, on the test window go to View > Download Settings and chose 56k (from here you can test how fast is loading your file on connections with different speed) after go to View > Simulate Download (or Ctrl+Enter).Now you should see the progress of your preloader.

First let’s explain the ActionScript 2.0 code

-first we put a stop() method this will prevent our movie to start automatically

-we check the progress of our loader every frame with the onEnterFrame event. On every frame we get the bytes loaded (getBytesLoaded()) divide this value by the total number of bytes of our document. We multiple the result with 100 to obtain a hole number and assign the value to procentLoaded variable.

-next we scale our by the value of the procentLoaded variable,

-after we verify if our percent is equal to 100 if so go to frame 2.

The ActionScript 3.0 code it’s not much different.The progress of our loading process is handle by the checkingProgress function witch listens for a PROGRESS event. The percent with witch we scale our bar is divided by 100 because in AS 3.0 the scale property goes from 0 to 1.(in AS 2.0 goes from 0 to 100).

That all, we have an advanced preloader for use in our applications.

I hope that I was clear enough.

If you have questions, suggestions, doubts about the tutorial don’t hesitate to comment.I will see you on next tutorial.

You can download the source file :AS 3.0 preloader

54 comentarii:

Post a Comment

  • LuKe-B : February 29, 2008 at 5:26 AM

    Very nice post! i've used it for my own Tutorial and translated it into German.
    Thanks a lot! luke

  • Biochimistu : February 29, 2008 at 6:48 AM

    Hi.
    It is nice that you have translated my tutorial in German. But first you should ask my approval. I didn’t see in your site a link to the original tutorial. So, you add a link in your post to my tutorial and explain that you only translate the tutorial and you are not the author or delete your post.
    What you are doing now is stilling content from others.
    Nobody likes thieves.
    Thanks for your understanding.

  • Bruce Williamson : March 3, 2008 at 3:42 PM

    Hi. I've walked through your tutorial twice and even loaded the pre_up.fla files, tested and exported my movie(s) and can't get either preloader to display. Flash CS3, v 9.0 on a Mac. Any suggestions? Thanks!

  • Biochimistu : March 3, 2008 at 9:51 PM

    Hi Bruce.
    Everything is working Ok, you don’t see the preloader because you are testing you file locally and the file is loading fast. To view the preloader progress open your fla press Ctrl +Enter to test the file and on the test window that appears go to View > Download Settings and chose 56k (from here you can test how fast is loading your file on connections with different speed) after go to View > Simulate Download (or Ctrl+Enter).
    Now you should see the progress of your preloader. Please tell me if my answer helps you.

  • Barry : March 4, 2008 at 8:17 PM

    I'm not seeing it working. I followed your instructions closely, I think. Where do I change it to point to a large .swf of my own for test?

    I also downloaded your sample and while it doesn't give errors, I don't see it working either.

    Thank you much

  • Biochimistu : March 5, 2008 at 12:15 AM

    Hi.
    To see the progress of your preloader read my previous comment and fallow those steps. That should do it. I will try to write a tutorial (maybe I will post it today) on how to preload external content like swf, jpg, png and gif files.

  • Lars : March 11, 2008 at 2:22 AM

    I'm wondering if the 3 uses of
    "procentLoaded" have anything to do with it.

    Though I've changed them to "percentLoaded" and it still doesn't work.

  • Biochimistu : March 11, 2008 at 2:36 AM

    Hi Lars.
    What is not working? You get an error or you are not seeing the preloader progress?
    If you are not seeing the preloader progress read my second comment from this post that should help.

  • Anonymous : March 11, 2008 at 5:50 PM

    How to test your Preloader

    Once you have created your file, follow these simple steps:

    1. Hit Ctrl + Enter to run the flash
    2. Select
    View > Download Settings > 56k
    3. Select
    View > Simulate Download

    and thats it.

    You can always go back to your download settings and change it to a higher bandwidth if you find 56k is to slow for you, but its basically just a test run anyway. Once you upload the file, it will obviously depend on the users bandwidth whether is loads fast or not.

    Adam McCarthy

  • Nicole : March 17, 2008 at 9:43 PM

    Can I just say thankyou!!! I have been looking everywhere for a simple step by step tutorial for preloading with AS 3.0. Yours was the first I understood fully and could get to work.

    :)

  • Anonymous : March 18, 2008 at 11:29 AM

    Hi. Nice tutorial. But to cut a bit of the AS, write: gotoAndStop(2); in line 7, istead of gotoAndPlay(2);. Because then you can just delete the script in frame 2.

  • Anonymous : March 24, 2008 at 12:50 AM

    After testing your code online to see how the preloader works. The screen first blanks out and preloader started showing couple of mins after.
    How can I avoid this or have the preloader showing immediately after the button was pressed?

  • Biochimistu : March 24, 2008 at 8:26 AM

    I don’t know where you have tested the preloader but the preloader works fine and it appears immediately not "after couple of minutes". The size of the first frame is 2kb, how long could take to load 2kb?
    You can make your preloader to appear quickly by making the size of the first frame in your movie small.

  • Ignition Worship : April 5, 2008 at 8:17 PM

    Thanks for the help! I've been trying to figure out the preloader in AS 3.0 for weeks.

  • Cláudio Portugal : April 25, 2008 at 7:46 AM

    All the actionscript and components are by default loaded to the first frame, thats why you have to wait a lot to the preloader apears, you have to change that in the publish settings of flash and in any movieclip you export to actionscripting.

    See you, god tutorial

  • Anonymous : May 8, 2008 at 10:18 AM

    :)

    Just -> Thank you..

    I have impresion, that thanks this solution I will (finally) finish my task...

    Another one:
    http://newmovieclip.wordpress.com/2007/04/30/more-about-preloading-in-flash-cs3/

  • Николай : May 10, 2008 at 4:43 AM

    Hi man, thanks for the really good stuff you share.
    I`ve got some problems with preloader based on your code. I will ask you to take a look and help if you can, I`ll be very thankful, cuz I can`t solve this problem 2 days already...

    Well, I have main .fla file (my site work), and on the main timeline, I have first 11 frames - loading transition of my preloader - the 11th frame is one that contains actionscript and full opaque preloader animation, 12th frame is called begin and there starts my actual site content. The Problem is that when Test movie it stays on the preloader, not on the content but a preloader, when I publish it - preloader stays too, but when I test it with option Simulate Download it works for 1 cicle and then stop on the preloader too. What I have to do?

    stop();
    this.loaderInfo.addEventListener(ProgressEvent.PRO GRESS, checkingProgress);
    function checkingProgress(event:ProgressEvent):void
    { var percentLoaded:uint = Math.round((event.bytesLoaded/event.bytesTotal)*100); if (percentLoaded >= 100)
    {
    this.gotoAndPlay("begin");
    } else
    {
    preloader_mc.loading_fill.gotoAndStop(percentLoade d); // this is my bar filling animation }
    }
    tnx in advance

  • Biochimistu : May 11, 2008 at 1:03 AM

    I don’t know how your .fla file is looking, but about your code.
    What this line is supposed to do?
    "preloader_mc.loading_fill.
    gotoAndStop(percentLoaded);
    // this is my bar filling animation"

    You have a frame that is named "procentLoaded" or is your variable. You must pass to the gotoAndStop() method a number or a name of a frame. Look well at my code.

  • carina : May 20, 2008 at 7:34 PM

    hi!
    thank you very much for sharing this.
    i too have the same problem described in a previous post: when testing, screen blanks out then preloader takes a while to appear - and yes, i have the "simulate download" at DSL setting.

    poster Cláudio Portugal said...

    All the actionscript and components are by default loaded to the first frame, thats why you have to wait a lot to the preloader apears, you have to change that in the publish settings of flash and in any movieclip you export to actionscripting.

    could you please explain how to do this?

    thanks so much

  • Biochimistu : May 21, 2008 at 12:21 AM

    Go to File > Publish Settings click on the Flash button. Click on the Settings button, a new window will appear, find the field where is written "Export classes in frame:" and change 1 to 2 and click Ok. This is all, I hope that this will solve your problem.

  • Phil : May 28, 2008 at 4:57 AM

    i'm including 2 external as classes in frame 2 and publishsettings are set to frame 2, BUT:

    If i simulate the download in the swf the window simply keeps white. without simulating all works fine, but the preloader doesnt appear of course.

  • Biochimistu : May 28, 2008 at 10:43 AM

    I’m not seeing a question but I guess that you want some suggestions
    -try simulating the download with the default settings, see if this works
    -make sure that your preloader is working fine
    -maybe you are not doing something right
    The simulation of download can’t break things is just a way to see how fast you content is loading on different connections.
    Good luck.

  • Nachoman : May 30, 2008 at 1:08 AM

    Hi, i tried putting this into a game i made. The fps was 25 and its a reasonably large file size, but it doesnt seem to be working. Its an actionscript 2.0 file but im using flash CS3. i used the code for flash 8 but im not even seeing the preloader. Can you help?

  • Biochimistu : May 31, 2008 at 2:07 AM

    If when you test your .fla file don’t get any errors the code is fine. To view the preloader read my comments for this tutorial, in one of them you will find what you must do to see your preloader.

  • sKyLeR : June 1, 2008 at 1:11 PM

    hi... everything is working for me, however when i publish my .swf the movie will only work correctly when its in the same folder as my .fla and music file im using. Why is this? how do i get it so i can play just the .swf and have everything work without it being in the location as the fla? please help

  • Biochimistu : June 2, 2008 at 5:32 AM

    You probably load external content (that music file or something else) into your swf. You must place the external content that you load into the library of your .fla file.

  • Anonymous : June 2, 2008 at 8:29 PM

    Problem, when I preview my fla it plays the movie without it even loading (showing the kbs loaded).

    When i simulate download it just stays black, nothing moves.

    AS3.0, Flash CS3, OSX, for website

  • Biochimistu : June 5, 2008 at 2:19 AM

    From your description I can’t give you any solution. Fallow exactly the tutorial and you should have no problem.

  • yourchris : June 12, 2008 at 1:43 PM

    I'm using your preloader for my website, and I have an error with viewing frame three. The movie stops at frame two, and will not continue to frame three and beyond, which has other special effects that are supposed to take place. Any suggestions?

  • Biochimistu : June 13, 2008 at 11:13 AM

    Make sure that you use gotoAndPlay() and not gotoAndStop() .If you are using the right method check your effect maybe something else it’s stopping your movie.

  • DudeHere : July 2, 2008 at 8:04 AM

    I have an existing AS 2.0.fla file that works properly. When I insert & publish this AS 2.0 preloader to frame1, the preloader seems to work okay, but when it reaches 100% and moves on to frame 2 with the 'gotoAndPlay(2)' command, nothing further happens. I'm left with just a blank stage. When I remove the AS code for the preloader and try again, the rest of my original .fla goes back to publishing & working great. Any thoughts?

    Thanks!

  • Biochimistu : July 3, 2008 at 4:12 AM

    I don’t know what to tell you.
    The preloader works fine, you sad that your .fla works fine without the preloader; so you must make a mistake when you add the preloader.
    Check the preloader with other files, see if it works.

  • MattHEW BOZELKA : July 15, 2008 at 9:41 AM

    Thanks,
    the loader works perfect. My only question goes is, is it possible to create a movie clip animation to play in the background to customize the look a bit? I guess not actually have anything to do with the actual preloader, just play. And do you hae an tutorials for as3 for a loader on an externaly loading swf. Thanks

  • Biochimistu : July 16, 2008 at 9:39 AM

    Yes, it’s possible to add a little animation to keep your users busy until your files are loading. Browse thru tutorials you will find a tutorial that shows how to load external swf’s.

  • JulieB : July 27, 2008 at 4:56 PM

    Thank you so much for this preloader. It is so easily explained that I actually get it. LOL! I am such a n00b at this and really don't understand the action of it all. I am trying though. But I am grateful for this tutorial.

    I really don't know how to add something to the preloader except for the Import function to stage...but that's a start.. :)

    this is what I did...


    http://webdesignz.net/flashwork/preloader.swf

    lol... but it is better than all my other attempts that I have tried.

    Thumbs UP!!

  • Biochimistu : July 29, 2008 at 9:41 PM

    Hi Julie,
    I'm glad that you find my tutorial easy to understand. Nice preloader you have there.
    And like you say THUMBS UP!!!.

  • Anonymous : September 6, 2008 at 8:27 AM

    Hi mate could you tell me how to put on dynamic text? I have tried this; LoadText.text= procentLoaded and there is an error. You are very simple could you explain how please? p.s have you seen the other tuturials for this, the script is 10 times longer!

  • Biochimistu : September 7, 2008 at 9:03 AM

    Select the Text tool from the tool bar and click and drag on the stage, after go to the Property Inspector and set the type to Dynamic text.
    You must cast (convert) your procentLoaded variable to String like this:
    LoadText.text = String (procentLoaded)
    Download the source files and see there how it’s done exactly.

  • Anonymous : September 7, 2008 at 4:56 PM

    Hello, I also want to thank you. I am making the switch from AS 2.0 to 3.0 and your Pre-loader is the easiest one I have found so far. Thanks again. I hope you don’t mind but I also wanted to have a dynamic text and this is what I came up with Just wanted to share so others case use it too. Thanks again.

    this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, checkingProgress, false, 0, true);

    function checkingProgress(event:ProgressEvent):void{
    stop();
    var procentLoaded:Number = event.bytesLoaded/event.bytesTotal*100;
    bar.scaleX = procentLoaded/100;
    var number:Number = Math.ceil(procentLoaded);
    total.text = number + " % loaded";
    if(procentLoaded == 100){
    this.gotoAndPlay(2);
    this.removeEventListener(ProgressEvent.PROGRESS, checkingProgress);
    }
    }

  • william : October 17, 2008 at 10:04 AM

    If you can answer this you are a definite hero because no one else in the free internet seems to know!
    How can i change the preloader from loading "this" to loading my external swf "MainSite.swf"

  • Biochimistu : October 18, 2008 at 3:45 AM

    Hi William,
    I suppose that you want to load an external swf. Check this tutorial: Preloading SWF, JPG, PNG or GIF files with AS 3.0. it shows how to preload external files(swf,jpg).

  • George : January 12, 2009 at 11:42 PM

    Hi, i have a problem loading swfs external files with as3, when i test the movie (Ctrl+Enter) on flash, this one works fine!, but when i upload it to the remote server doesnt work properly, i think that is a security issue of as3, i dont know what to do, i need some help Thnxs

  • Biochimistu : January 13, 2009 at 5:39 AM

    Hi George,
    If the main swf and the swfs that you want to load are on the same server you shouldn’t have problems. You can find more about Flash player Security sandboxes here: Security sandboxes.

  • Anonymous : February 3, 2009 at 8:52 AM

    Awesome thx Dude! Looks really cool!

  • Joshua : February 5, 2009 at 2:59 PM

    Thanks for the great tutorial - it works great, except when I posted multiple instances of it in a single scene...

    I should preface all this by saying I'm using Action Script 2.0 and Flash CS4.

    I had to do this because I've got another .swf that's my index.html (we'll call it index.swf for ex.), so when you click on one of 4 links on index.swf, it loads one single .swf (my main content page - we'll call it content.swf for ex.) that has anchor points in it, but I couldn't simply put the preloader on the first frame of each anchor in content.swf, cause then once inside the content.swf when using the gotoAndStop command to navigate from within for ex:

    on (release) {
    gotoAndStop("page2");
    }

    it would flash the preloader for 1 frame.

    So... what I had to do was make 8 anchors 1 for each page inside of content.swf and 1 anchor for each preloader since the file is being called up from different points from index.swf.

    Thus, when deep anchor linked to from index.swf for ex:
    on (release) {
    getURL("http://mywebpage.com/content.html#page2_preloader");
    }


    they all load up just fine (the progress bar grows and when done it stops on the next frame (the second anchor point "page2_content")just like it's supposed to) but the problem is after it's done, when it's sitting there stopped on the next frame "page2_content", the buttons on my navigation bar (on the same frame) don't work like they used to - they used to jump to another anchor point in itself (content.swf) with the following action on a button:

    on (release) {
    gotoAndStop("page3_content");
    }

    simple - it's supposed to just bring the playhead to the page3_content anchor and stop, but instead now it just flashes page3_content for a second and then returns back to the same anchor, unable to move - only flashing other pages when buttons are clicked on.

    I don't understand, cause I haven't changed the action script of any of my buttons, which call on the anchor points, but for some reason they won't actually gotoandstop, but simply gotoand come back...

    I'm thinking it has to be something with the preloader(s) in the content.swf - but I'm a little lost.

    Any help would be greatly appreciated.

    I hope this is enough info - I can send .fla and or .swf if needed.

  • Biochimistu : February 7, 2009 at 9:48 AM

    Hi Joshua,
    I don’t quite understand your problem. But if you say that you have a main swf witch loads other 4 swf’s this preloder isn’t quite feet for your task.
    You should place a preloader on the main swf(this will look at the loading progress of the external swfs) and when the external swf it’s loaded you should set the preloader visibility to false(not instruct the player to go to a particular frame).
    The code for the preloader should be placed inside a function that will be called when you click one link from your main swf.
    I hope that this helps.
    Sorry I can’t look at you files I don’t do as2 anymore.

  • Chris Binet : February 10, 2009 at 11:48 AM

    Hey,

    I just finished a site www.solvespaces.com and I'm having troubles with it loading properly. I have put a pre-loader on the first frame with the action in the action frame:

    ifFrameLoaded (_totalframes) {
    gotoAndStop(2);
    }

  • Biochimistu : February 12, 2009 at 8:52 AM

    Hi Chris,
    I don’t understand what your problem is. Do you have problems with the preloader from this tutorial ?

  • Lawrence : March 6, 2009 at 5:06 AM

    I think there is a bug in your code.
    If you try to refresh your file (Internet Explorer 7) after your file is complete loaded, everything will stuck in first frame.
    Because the procentLoaded==100, already, and don't gotoAndPlay(2) again!!!

    It is better something like this:
    this.loaderInfo.addEventListener(Event.COMPLETE, onComplete);
    //then
    function onComplete(e:Event):void {
    nextFrame();
    }

  • Biochimistu : March 8, 2009 at 5:55 AM

    Hi Lawrence,
    It’s not a bug in the code, there is a problem in the way IE handles the ProgressEvent.
    One solution will be to add the COMPLETE event and instruct the player to go to the next frame when the loading is done or to use an ENTER_FRAME event to keep track of the loading process.

  • dstruct303 : May 18, 2009 at 2:54 PM

    Hi there!
    I've got the same problem like a few post ago...preloader works fine. I've "preloaded" a large foto in frame 2, but when i want to start an animation in frame 2 it won't run...just stops at frame 2 and won't ga to frame 3...what's wrong?

    grts.

    Michiel

  • Biochimistu : May 19, 2009 at 11:49 PM

    Hi Michiel,
    Remove the stop(); method from the second frame on the actions layer and everything will work fine.

  • Obsideo Corpus : October 17, 2009 at 2:04 PM

    Thank you so much for your wonderful post! Keep sharing information!

  • Salman Ali Khan : July 29, 2011 at 10:15 AM

    @dstruct303
    Replace GotoAndPlay(2); to Play();

    Everything will work fine