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


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