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

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Clairvoyance: 08:00 PM

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


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.

  1. 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.

  2. 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.

  3. 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".

  4. 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.

  5. 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.

  6. 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.

  7. 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".

  8. 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.

Add ActionScript+3+Preloader+%2D+Stage+and+Timeline to Twitter Add ActionScript+3+Preloader+%2D+Stage+and+Timeline to Facebook Add ActionScript+3+Preloader+%2D+Stage+and+Timeline to MySpace Add ActionScript+3+Preloader+%2D+Stage+and+Timeline to Del.icio.us Digg ActionScript+3+Preloader+%2D+Stage+and+Timeline Add ActionScript+3+Preloader+%2D+Stage+and+Timeline to Yahoo My Web Add ActionScript+3+Preloader+%2D+Stage+and+Timeline to Google Bookmarks Add ActionScript+3+Preloader+%2D+Stage+and+Timeline to Stumbleupon Add ActionScript+3+Preloader+%2D+Stage+and+Timeline 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
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

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

BellaOnline Editor