ActionScript 3 Preloader - Stage and Timeline

In the next few tutorials, the sample website will be a digital scrapbooking site which sells digital scrapbooking supplies. We have a beautiful background image that looks like one of the many kits that are for sale at the site. This background is a large bitmap image which might take a few seconds to download on a slow bandwidth connection. Therefore, we will create a small text preloader animation that will run while our website is loading into the browser. In this tutorial, we will set up the architecture of our website for the preloader and main contents of the site.

Open a new ActionScript 3 project in Flash CS3. Set the Width, Height and Background Color as you like. For our sample site the background image is 600 x 550 pixels. Therefore, we will set the Document Properties to match these dimensions.
Rename Layer 1 to "Background". This layer will hold the background image. But we will import the image into Frame 2 because our preloader will be using Frame 1.
We also need a layer to hold the preloader and an Actions layer. In the Timeline, add a second layer above the Background layer and name this layer "Preloader". Add a third layer at the top and name it "Actions".
We are ready to import the background image. Add a second frame to the Background layer and add a Keyframe to Frame 2. Now, click File – Import to Stage to add our background image.

Click Control – Test Movie to test our movie. You will notice that the movie is blinking. This is because it is looping between the blank screen in Frame 1 and the background image in Frame 2. Let's stop our movie after the background image loads in Frame 2. We can do this with a stop(); code.
Click on Frame 2 of the Actions layer, add a Keyframe and open the Actions panel. Type the stop(); code into the panel.

Test the movie again and the blinking has stopped. But we have the background image showing. We do not want Flash to show the background image until the preloader tells us that the download is complete. We can prevent the image from showing with a second stop(); code. This time we will add it to Frame 1 on the Actions layer. This will stop the movie from progressing to Frame 2 and allow time for the preloader to do its thing.
Click on Frame 1 of the Actions layer and type stop(); into the Actions panel.

Test again and you should see a blank screen. Now we are ready to add the preloader on Frame 1 of the Timeline. Lock the Background layer and then go to the Preloader layer in the Timeline. It should only have one frame.
Click on Frame 1 in the Preloader layer. Then, click on the Text tool. In the Properties Inspector, set the Font, Font Size and Text Fill Color for our preloader. In the sample, I used the Arial font, size 30 and color BC7070. Also set the Text Type to Dynamic Text and set the Instance Name to "loadAmt".
With the Text tool, click and drag to draw a text box in the center of the stage but do not add any text inside the box.

In the next tutorial, we will create the ActionScript code for the preloader. The preloader will use the text box that we just drew on the stage to display the percentage of the total download and we will use ActionScript to calculate that percentage. The preloader will be controlled by Event Listeners. Once the Event Listener tells us that the download is complete, we will use the nextFrame(); code to move to Frame 2 which contains the contents of our website.