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

Full Schedule
g
g Flash and Animation Site

BellaOnline's Flash and Animation Editor

g

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.



Add Add+Graphic+Preloader+Bar+to+Flash+Website to Twitter Add Add+Graphic+Preloader+Bar+to+Flash+Website to Facebook Add Add+Graphic+Preloader+Bar+to+Flash+Website to MySpace Add Add+Graphic+Preloader+Bar+to+Flash+Website to Del.icio.us Digg Add+Graphic+Preloader+Bar+to+Flash+Website Add Add+Graphic+Preloader+Bar+to+Flash+Website to Yahoo My Web Add Add+Graphic+Preloader+Bar+to+Flash+Website to Google Bookmarks Add Add+Graphic+Preloader+Bar+to+Flash+Website to Stumbleupon Add Add+Graphic+Preloader+Bar+to+Flash+Website 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
Particle System - Line Emitter

Animating Color of Text in Motion 5

Animating Color of Shapes in Motion 5

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