ActionScript3

Create a Simple Flash Preloader using basic actionscript

Flash preloaders is very useful to show the visitors that the movie is still loading. This should helps them realize that there is something on the page which is loading even though they cannot see it. It also keeps your visitor amused for a short time and stops them closing the page or quickly moving on to the next website.Once you understand the basics of the Flash preloader you can create more advanced preloaders with moviclips and additional actionscripting.

1. Preloader Frames: First step is to create your preloader frames.

  • Make two layers named preloader and actions. Go to the first frame in the preloader layer and place a text displaying “Loading” on it (as shown below).

This preloader uses ifFrameLoaded actionscript

  • Double click the same frame and in the frame actions tab give the following action script:FLASH 5, MX and MX 2004, Flash 8, Flash CS3, Flash CS4


    FLASH 4

    Logic: This actionscript checks if the last frame of your movie (labeled “end”) is loaded and then only starts playing your flash file at the starting frame labeled “start”. Thus this action script decides whether to continue the preloader loop or to break free and start playing the movie.

2. Preloader Loop: Now we need to make a loop that executes till the last frame is loaded. To make use of a very basic animation we will display three dots after the loading text to show that loading is taking place. To do this insert three key frames after the first frame in the actions layer. Now place one dot, two dots and three dots in the three frames respectively (as shown below).

frame 2 (actions layer)

frame 3 (actions layer)

frame 4 (actions layer)

  • Now we need a frame to return to the first frame as the condition is being checked there. For this double click the fifth frame in the actions layer and give the following action script.

    Logic: We just return the control to the first frame to complete a loop.

  • Now click on the sixth frame in the Preloader layer and give it the label start. That’s it your simple preloader is ready. Just make sure that all the stuff that you want to be displayed in your movie starts from the 6th frame and that you label the last frame of your completed movie as “end”. Alternatively for Flash 5 and above you can use the following code instead of the code given in the first frame:

    Here, we have just replace the “end” frame with the inbuilt variable _totalframes which contains the total number of frames in the main movie timeline.
  • We recommend you create an attractive movie clip and place it in frame 1 to make your preloader look more interesting then the plain loading text used here 🙂

Finished Flash Preloader Interface

Check if your preloader timeline matches our figure above.

Test your movie for a 64KB modem by pressing Ctrl+Enter twice. You will be able to see how the preloader progresses and then starts playing at frame “start”.

That’s it, your simple Flash preloader is ready! Now continue with the rest of your animation.

TIP: Keep a new document with your favorite preloader (with nothing else in it) so you can start on your next project with a copy of it (preloader ready).

5 Comments

5 Comments

  1. P2P4U

    September 25, 2011 at 6:55 pm

    I think Create a Simple Flash Preloader using basic actionscript | Designs Tutorial is a solid post and you do a nice job of writing in depth.

  2. Admin

    February 27, 2011 at 12:54 pm

    Thanx.
    and definately, very soon we will provide you actionscript tutorials also.

    • Jimbo

      June 23, 2011 at 10:16 am

      Wow, your post makes mine look febele. More power to you!

  3. akash

    February 25, 2011 at 11:30 am

    It’s a great post. But i would like to know more about the actionscript information.

    • Belle

      June 23, 2011 at 10:02 am

      Thanks guys, I just about lost it lokiong for this.

Leave a Reply

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

To Top

Get More Stuff Like This
IN YOUR INBOX

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

This information will never be shared for third part