Journal

Creating an animated main preloader in Flash CS3

Download
Download the source files


Most of the preloader solutions I’ve found on the web display the loading progress by drawing a line, sizing a block or updating a text field, based upon a percent loaded calculation. Now these solutions work just fine but I think they miss a trick. Flash has it’s roots in animation so why not add some visual flair by letting Flash do what it does best.

Customising the look of your animated preloader
One simple change will give you complete freedom over the look of your preloader. Create 100 frames inside your preloader graphic and draw anything you like in those frames. If we take that same percent loaded value we can now use it to jump to any of our frames within the preloader. The example above uses MainPreloaderCentred.as, a customised version of the MainPreloader.as class I posted yesterday. This one keeps the preloader graphic centred on the screen at all times, adds some textual output and most importantly uses the animation method outlined above.

The ZIP file contains both versions of the preloader class and the FLA contains two preloader graphics to play with: A standard bar and the circle version shown in the demo above. You can use any graphic you like so long as it’s 100 frames long and you remember to name it ‘preloader‘.

Standard

29 thoughts on “Creating an animated main preloader in Flash CS3

  1. I have tried dozens of preloaders and non of them works. in my trial flash cs3, no prloaders works. they all stop at the main frame which I set them according to tutorials.

  2. Try downloading the source and compiling it then let me know how you get on. Let me know if you get any errors. It works great for me 🙂

  3. Stalkio says:

    Not sure if its just my machine, but when i first visit the site the preloader works awesome, then i refresh your page or my page (with your edited preloader) and i just get the animation looping with the dynamic text just showing xxx ? any advice on how to stop the looping animation.

  4. Hi Stalkio. Good catch! It sounds like the SWF is loading in before any loaderInfo events get fired. This could happen with a fast connection and a very light SWF.

    I’ll add a check for this condition in the init() function and upload a new version later on today. Will post back here when it’s up. cheers, jd.

  5. Hi Stakio. If you pull down the source again it should work for you. I’ve added a ‘load complete’ check to the init() function that should do the trick. Thanks for posting about it. I run Firefox with the cache disabled so I never saw it!

  6. Stalkio says:

    Hey,
    I am trying to make your preloader play after loading 50% of the main content (Movie in my case) and was having some problems. went into the mainpreloader.as and located the:
    function onMainLoadProgress (which appears to be the checking load validation) and changed the:
    if (e.bytesLoaded == (e.bytesTotal)/2 ). Should this work or am i being moron?any help as still fairly new to this would be awesome!

  7. Hi Stalkio – I think you are most of the way there, but I’d be inclined to change your condition to >= rather than == as you’d have to be pretty lucky to by going through the loop and be exactly half way through the load. Something like this…

    if (e.bytesLoaded >= (e.bytesTotal)/2 )
    {
    // over halfway.
    }

    Just keep in mind that that unless you cancel your load listeners then the code inside that condition is going to keep firing until your SWF has loaded!

  8. Stalkio says:

    “unless you cancel your load listeners then the code inside that condition is going to keep firing until your SWF has loaded!” Wise words!! been trying to cancel the load listeners with no joy! how do i go about canceling them? tried calling the destroy function after the:
    if (e.bytesLoaded >= (e.bytesTotal)/2 )
    {
    destroy();
    onMainLoaded();
    }

    and a whole bunch of other stuff.

    ?????

  9. Hi Stalkio. This thread is getting a little long! Maybe you could mail me your code and I’ll take a look for you: john @ this domain should get to me. Cheers, jd.

  10. Dave says:

    It works ok, except when I hit refresh and that the swf is already loaded… In that case it stays on the circle displaying xxx as percent loaded ! Why ?

  11. Does the preloader demo on this page work for you? If it does then there’s a few things you should check in your FLA:

    1. Make sure you have the latest source. I added a line a few months back that checked for the very issue you’re describing.

    2. Make sure that ‘Automatically declare stage instances’ is checked in your publish settings, or you’ll get an error. I have another version of the class that works with this unchecked which I should get round to posting at some point.

    Let me know how you get on! jd.

  12. Phill says:

    Hi there, thanks for this tutorial, howver when I try it the loader starts on 100% and at the end of the movieclip animation, any idea why this might be?

    Thanks

  13. Hiya Phill, could be a couple of things.

    If you are compiling in the Flash IDE then you’ll need to use the Bandwidth Profiler to simulate loading in order to see the animation.

    If you are testing in a browser and you have a fast connection (or the SWF is cached) then you may not see the loader either.

    Email me if you’re still having issues and I’ll try and help. Cheers, jd

  14. ReferenceError: Error #1065: No se ha definido la variable progressCircle_1.

    it says that the variable hasnt been define this its normal? i was testting it and it displays that out error or is not an error?

    • Are you using the sample from the repo? If so the missing variables are likely to be one of two things. Check your Publish Settings in the FLA and make sure you switch off “Automatically declare stage instances”. Also check that the MovieClip you want to use has the correct linkage ID in the library. Should do the trick!

  15. Pingback: 30 Best Flash Preloader Tutorials for Beginners and Professionals – 风调雨顺|信息美图

  16. Pingback: Flash, Howto, Preloader, Tutorial | Hello Tea

  17. Pingback: Tutorials » Blog Archive » Step by Step Flash Preloader Tutorials

  18. Pingback: 30 Best Flash Preloader Tutorials for Beginners and Professionals - Flash24h.com | Thế giới Flash của bạn!

    • You could try including the preloader in your external SWF. Or if you’re loading lots of assets then maybe consider a library like LoaderMax.

  19. Hi. it’s me again. I just want to ask one more question. It seems like this preloader doesn’t allow scenes, it always goes to the frame where it has the code stop(). What solution can I do for that to play the other scenes because it always jumps to the last frame where I put the stop()

    Thank you.

  20. Mike says:

    Thanks a lot for this!

    I’m using it to preload a short logo video on my landing page and the only issue I have is that every time someone refreshes the page or navigates back to the home page, the video loads again.

    I would really like the video to load and play once, then freeze on the last frame and remain there even if someone leaves the home page and then returns.

    Any thoughts? From what I’ve been reading, Shared Objects might be the way to go, but I’m new to flash and can’t figure out how to implement them.

    Thanks!

  21. Pingback: Preloading | audiowerks

Leave a Reply