g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Autism Spectrum Disorders
Mental Health
Blogs / Social Networking
Kidney Disease
Today in History

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


ActionScript 3 Code for Flash CS3 Preloader

In our last tutorial, we set up the architecture for our example FlashR website. This site has a large bitmap image as the background of the scene. Therefore, we have added a preloader. If you remember, we designated the first frame on the Timeline for the preloader and the second frame to the opening scene of the website. Now we will write the ActionScript code that will run the preloader and then move on to the main movie.

So far, we have placed a stop(); code on both frames of the Timeline. One prevents the main Flash movie from playing until the preloader is done and the other stops the main movie from looping back to Frame 1 and the preloader. Now, we can concentrate on the code for the preloader itself. Our first step is to create two Event Listeners that will run the preloader.

On Frame 1 of the Actions layer, open the Actions panel and type the following code under the stop(); code.

this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onWatch);

This first line of code adds the Event Listener to loaderInfo. The Event Listener keeps an eye on the download of the main movie and runs the onWatch function. This function tells Flash how much of the main movie has downloaded.

this.loaderInfo.addEventListener(Event.COMPLETE, onTotal);

This second line of code adds a second Event Listener which alerts Flash when the download is complete and calls the onTotal function which moves our website on to Frame 2.

function onWatch(event:ProgressEvent):void
var load:Number = event.target.bytesLoaded;
var total:Number = event.target.bytesTotal;
var percent:Number = load/total;
loadAmt.text = (Math.round(percent * 100)) + "%";

This major part of the preloader code creates three numeric variables that gather information about the download. The first variable "load" holds the number of bytes that have been downloaded. Variable "total' holds the total number of bytes to be downloaded. The third variable "percent" has a little math that divides the amount of bytes downloaded so far by the total number of bytes to be downloaded. Finally with the loadAmt.text, we do a little more math to determined the percent of download to display in the text box of our preloader. As you can see, we use the Math.round function to obtain a whole number for our percentage. We also add the "%" text to the numeric percentage.

When all is downloaded, we can move on to the main movie. As mentioned earlier, the onTotal function does just that. Also, we can remove our Event Listeners.

function onTotal(event:Event):void
this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onWatch);
this.loaderInfo.removeEventListener(Event.COMPLETE, onTotal);

Test your movie and you should see the preloader count down the percentage of the main movie as it downloads. When you test your movie on your local machine, the preloader may not be visible because it happens to fast. You can simulate a slower download. With the test movie browser window still open, click View Simulate Download from the Menubar.

Add ActionScript+3+Code++for+Flash+CS3+Preloader to Twitter Add ActionScript+3+Code++for+Flash+CS3+Preloader to Facebook Add ActionScript+3+Code++for+Flash+CS3+Preloader to MySpace Add ActionScript+3+Code++for+Flash+CS3+Preloader to Del.icio.us Digg ActionScript+3+Code++for+Flash+CS3+Preloader Add ActionScript+3+Code++for+Flash+CS3+Preloader to Yahoo My Web Add ActionScript+3+Code++for+Flash+CS3+Preloader to Google Bookmarks Add ActionScript+3+Code++for+Flash+CS3+Preloader to Stumbleupon Add ActionScript+3+Code++for+Flash+CS3+Preloader to Reddit


RSS | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 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.


g features
Image Preparation for Holiday Intro Video

Holiday Season Motion Graphics Storyboard

Understanding Video SEO by Ian Lurie

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor