Creating an Advanced Preloader in Flash - Page 2

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.


LoadBarFill

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.