Add Graphic Preloader Bar to Flash Website

In this tutorial, we will continue to work on our website and preloader by adding a graphic animation that will give the viewer a visual representation of the download progress. We will first create the graphic that will become our movie clip animation and then add the ActionScript code that will control the animation.

Note: If you have been following along with the tutorials so far, you should have built the architecture for your sample website and preloader. You should also have written the code to run the preloader and download the main content for the website.

Our first step is to draw a simple shape that will be the graphic for our preloader animation. This animation can be anything that you like. However, we will be controlling the animation by changing the scaleX or scaleY property for the movie clip. Let's make our movie clip a simple shape such as a rectangle that will grow in size, either horizontally or vertically, as the main movie downloads. It could be a horizontal rectangle that will grow longer along the X axis (left to right) or a vertical rectangle that will grow taller along the Y axis. As the rectangle gets larger, it will indicate the percentage of download for the main website content. Open your project into Flash and let's get started.

On Frame 1 of the Preloader layer, use the Rectangle tool to draw a long horizontal rectangle just above and centered over the text box. Set the Fill color to any color of your choice and the Stroke to null. With the Selection tool, right click on the rectangle and convert it to a movie clip (Convert to Symbol). In the Convert to Symbol dialog box, name the movie clip "load_Ani" and set the Registration to the left.

With the movie clip still selected, set the Instance Name to "load_Ani" in the Properties Inspector.

Now we are ready to write the ActionScript. Here is the code that we have so far. We will add a line of code that will set the value of the percent variable to the scaleX property of the load_Ani movie clip.

On Frame 1 of the Actions layer, open the Actions panel and add this code at the end of the onWatch function.

load_Ani.scaleX = percent;

Test your movie using View – Simulate Download if necessary.