logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Autism Spectrum Disorders: 4:00 PM

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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
{
nextFrame();
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


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 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


g features
Animating Color of Text in Motion 5

Animating Color of Shapes in Motion 5

Motion Workspace - Checkbox, Dials and More

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


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


BellaOnline Editor