First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Programming Art | Website: http://www.programmingart.com

I - Setting up the Flash Movie

1. Begin by making a new movie in Flash, with the size you want your preloader to be [I chose 400 pixels wide and 250 pixels high].

2. Make a new symbol that will be the container for our loader bar. This is what will frame the loader bar as it stretches. If you'd rather have a loader bar with no edges skip this step. Choose Insert > New Symbol and name it something descriptive like LoadBarFrame. Make sure you also make it a movie clip symbol. Now just draw a rectangle with an outline in whatever colors you choose.

LoadBarFrame so far

3. Go back to the root of your movie and insert another symbol [Insert > New Symbol]. This is what we will stretch as your movie loads. Name it something like LoadBarFill, and make sure you also make it a movie clip symbol. Double click LoadBarFrame's icon in the library to edit it, then select the fill of LoadBarFrame and cut it [CTRL + x]. You can select just the fill by clicking it once with the Arrow Tool [V]. Now double click LoadBarFill's icon in the library to edit it, and choose Edit > Paste In Place to paste just the fill of our rectangle into this symbol. You should now have 2 symbols, one with the frame of our loader bar and one with just the fill. You should also move the rectangle of the fill so that the centerpoint lies on the far left edge of the symbol. This will enable us to stretch the bar we will be making next horizontally to the right.


4. Go back to the root of the movie [Scene 1] and make 4 new layers, and name all of your layers as well. I've named mine actions [I like to keep my scripts separated], loaderbar [for the loaderbar symbol instances], loading [to hold our loading graphic], text fields [to hold the text fields that display our percentages and bytes loaded], and continue [for the button to continue to loaded content].

The layer setup.

5. Select the loaderbar layer and drag a LoadBarFrame instance onto the stage wherever you want it. Now do the same with an instance of LoadBarFill. I recommend selecting both and aligning to center with each other so they fit together perfectly before moving them in unison.

6. We will set up the stage before we apply code to the movie so the next thing to do is select the text fields layer and make a few text fields. We will need one for the percentage of movie loaded and one to display the bytes loaded and bytes remaining in our movie. So select the Text Tool [T] and drag out a small rectangle. Now in the Text Options panel make sure to make the field Dynamic Text and Single Line. You should also give it a variable name like loadPercent. Now do the same with another text field and name it something like loadBytes.

Text Field Placement.

7. I also set up a small animation in the loading layer and placed it on the stage just for decoration. Feel free to do whatever or just leave it off. You may also want to consider a background layer at this point.

» Level Advanced

Added: 2001-12-12
Rating: 8 Votes: 467
(10 being the highest)
» Author
Please email at support@programmingart.com with any additions or suggestion! Thanks!
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!


  • There are no comments yet. Be the first to comment!

  • You must have javascript enabled in order to post comments.

Leave a Comment
  • Your email address will not be published. All fields are required.
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.