Printer Friendly Version

BellaOnline's Flash and Animation Editor

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.

Flash and Animation Site @ BellaOnline
View This Article in Regular Layout

Content copyright © 2013 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor