Simple Flash Preloader Tutorial

Posted on Friday 17th Jul 2009 by James Bavington 23 Comments

This week, because my colleague Nick is out of the office, I have filmed a tutorial on how to add a simple rotating pre-loader in Flash using Actionscript 2. In this tutorial, we use Adobe Flash CS4, however the tutorial should be backwards compatible with most other versions of Flash.

Watch our video: How to add a Preloader in Flash Tutorial directly on YouTube

All of the supporting files can be found inside the ZIP file which you can download below:

Download The Supporting ZIP File

If you have any questions or recommendations on the subject of preloading in flash, please don’t hesitate to ask a question or leave a comment below:

About James Bavington

Away from computers, James enjoys mountains, military history and has an insatiable appetite for film - particularly 90's classics.

See all of posts.

Add on James Bavington Google+

James Bavington's Tweet's

This entry was posted in Web Design Videos and tagged . Bookmark the permalink.

23 Responses to Simple Flash Preloader Tutorial

  1. Jacob Richards says:
    July 17, 2009 at 5:43 pm

    Pretty Good video blog, I’m after a tutorial however that also has a number percentage of how much has loaded. Any ideas?

  2. Andy Fairweather says:
    July 19, 2009 at 4:15 pm

    I have always wondered how to do that and found that the flash help isn’t that useful in explaining. Really well done on solving the mystery.

  3. kronikmedia says:
    July 27, 2009 at 9:56 pm

    There are also some third party plugins that can be imported into Flash. This then adds an easy short cut to add pre loaders. You can also download pre made library files for adding pre loader animations.

  4. ElemMotDesign says:
    July 31, 2009 at 9:03 pm

    Hey everyone, this is just directed at Jacob Richards. Here are some links to a tutorial one of my teachers made in one of my web design classes, it tells you how to do the percent variable on your preloader.
    Part 1:
    http://www.web.jatc-sandy.org/video%20tutorials/preloader1.html
    Part 2:
    http://www.web.jatc-sandy.org
    /video%20tutorials/preloader2.html

  5. darryl says:
    August 5, 2009 at 5:47 pm

    it might be worth mentioning that the tutorial is for AS2 …. i found out the hard way in an AS3 document

  6. James says:
    August 5, 2009 at 6:07 pm

    Sorry about the confusion Darryl, I have added an annotation to the Youtube Video. Good observation.

  7. Josip says:
    August 21, 2009 at 6:09 pm

    Hello to all!I´m working on my flash site and a problem is that all off my layers have 1 frame and preloader scene have 20 frames.How can I fix this?I must put a preloader beacuse it take some time for load when people go on site.Tnx in advance!Hope that I will get reply!Cheers!

  8. Josip says:
    August 21, 2009 at 6:11 pm

    I forget to mention!Preloader keeps circiling!That is the real problem.

  9. James says:
    August 22, 2009 at 12:48 pm

    Hi Josip, the fact that your main Scene has only 1 frame shouldn’t be a problem. Try changing your Preloader’s Actionscript on frame 19 to this:

    ifFrameLoaded(“Main”, 1) {
    gotoAndPlay(“Main”, 1);
    }

    If you are having further problems, please let me know, and if possible, email us the .fla file

  10. Josip says:
    August 22, 2009 at 1:36 pm

    First, thank you ver much for your reply!I done that before but you now what?When it comes to main scene it only blinks and keep going circiling on and on.How can i fix that?

  11. Josip says:
    August 22, 2009 at 1:43 pm

    I fixed it!! :) The problem was that on main scene i must enter gotoAndStop(1) not gotoAndPlay(1)Thank you very much on this nice tut!Best regards!Josip

  12. Josip says:
    August 22, 2009 at 2:45 pm

    I have one more question if you know that?
    I´m using cute news script for my news.That script is php and can you tell me how can i put it in my flash site on place where i want?

  13. Mariana says:
    August 24, 2009 at 7:11 pm

    Great tutorial!!! Being looking for something like this for a while. It was really helpful and easy, thanks :)

  14. Morgan says:
    October 31, 2009 at 8:45 am

    Hey,
    I am trying to add a preloader to a photo gallery I made in flash, but I can’t get it to work. It is wanting to loop once gallery is loaded. An error in the ActionScript says undefined method of ifFrameLoaded.

  15. James says:
    November 2, 2009 at 9:49 am

    Morgan, are you using ActionScript 2 or 3 ? Please tell us more about the problem.

  16. Heikki says:
    November 27, 2009 at 1:09 pm

    Hey everyone! I have a very simple website which needs a loader. I did the tutorial but when I publish it and open with safari, the front page is there but the loader does not spin and nothing happens. It is stopped in the first frame? Would you know how to help me? I am using CS3, is that a problem, because I could’n open your CREARE flash files. Html and swf works fine, but not the flash file. Thank you so much!

  17. James says:
    November 27, 2009 at 5:26 pm

    Hi Heikki, do you have a link to your file? Or send across your fla and I can take a look for you.

  18. Darren Morton says:
    January 14, 2010 at 3:40 pm

    Great tutorial guys, found you on you tube and have added you to my favourites. Will be checking your site regularly from now on. Thank you for the help.

  19. Leo Madrazo says:
    February 16, 2010 at 10:56 am

    Please HELP! I followed your instructions to the letter.. and it almost works but I realized my file is an actionscript 3.0 file… it gives me a
    1093: Syntax error.

  20. Leo Madrazo says:
    February 16, 2010 at 10:59 am

    frame 19 line 1… error it plays preloader then my file but loops the whole thing..
    Please help…. I can send you the fla if you want… Please help…

  21. John says:
    May 14, 2011 at 7:14 am

    This code works great with AS2 but when i try it in AS3 I get an error on the Preload Scene
    for action on Layer 1
    **Preload, Layer ‘Layer 1′, Frame 19, Line 1 1086: Syntax error: expecting semicolon before leftbrace.

    ifFrameLoaded(“Main”, 300) {
    gotoAndPlay(“Main”, 1);
    }

    Can you guys Help me out here?

  22. david says:
    September 27, 2011 at 2:36 pm

    Great tutorial. I downloaded the zip file, but get an error “unexpected file format” when trying to open either of the unzipped fla files in Flash CS3.

  23. Ute says:
    October 20, 2011 at 8:04 am

    URGENT!!!! Can someone help?

    I am from Australia and I need to supply my multimedia assignment in 12 hours. It’s a 2.5 min flash animation and I have embedded a low quality 15 sec movie. The clip, which I made in CS3 Flash has a file size of 4mb and has very tight editing – certain frames need to sync with the music track. Of course streaming and file size is a problem so I thought I use a preloader to load the clip first. I used several tutorials to create a preloader and this one makes sense but I think it only plays the animation for the preloader and then jumps straight to the clip because when I replay it it’s still out of sync. No error messages come up.I double checked the tutorial, I added a couple of frames to “GotoandPlay” just in case, I have no idea why it doesn’t work.

    I am totally panicked because the clip won’t work if not in sync. I am a photographer and don’t really know about action script 2 (in CS3). Has anyone any ideas what I can do?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>