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

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


Add The Loader and ProgressBar Components To Your Flash Website

Now that you have completed your Portfolio.swf movie, we can add the Loader component that will load the external Portfolio movie into your main movie. Because this Portfolio will take a few seconds to download into the main movie, we will also add a ProgressBar component (also called a preloader) to keep your audience informed of the download process. Open you main movie website into Flash.

Step 1. Add Loader Component. Click on Frame 50 (first frame of the Portfolio webpage section) on the Content layer in the Timeline. Now click outside of the Stage to deselected everything on the Stage. You will find the Loader component in the Components Panel. Drag an instance of the Loader onto the Stage. Place the Loader in the upper left corner under the Menu. In the Property Inspector, set the <Instance Name> of this component to loaderPortfolio.

Step 2. Set Parameters for Loader. Your Portfolio.swf file should be in the same folder as your main movie file. Go to the Component Inspector Panel and set the following values. This will tell Flash where to find the Portfolio.swf file and to scale the Loader component to the dimensions of the Portfolio.swf movie.

contentPath: Portfolio.swf
scaleContent: false

Step 3. Test the Loader. Click on Frame 1 to move the Playhead back to the beginning. Now press the Ctrl and Enter keys on your keyboard to preview your website movie. Your Portfolio.swf movie should load into the main website movie when you click on the Portfolio button in the Menu.

Step 4. Save your changes. You can now save the changes that you have added so far.

Now we are ready to add the ProgressBar component. This component did not ship with Flash MX 2004. You must download the updater file for this version of Flash from the Adobe - Macromedia website.


Step 5. Add the ProgressBar Component. Click on Frame 50 on the Content layer in the Timeline and deselect all. Go to the Components Panel and drag an instance of the ProgressBar component to the center of the Stage. In the Parameter Tab of the Property Inspector set the following values. These values tell Flash to use this ProgressBar to display the download progress of the loaderPortfolio Loader component.

Mode: polled
Source: loaderPortfolio

Step 6. Add actions for ProgressBar. With the ProgressBar still selected, add the following code into the Actions Panel. This code will tell Flash to stop displaying the ProgressBar when Portfolio.swf has loaded completely.

on (complete) { this.visible = false; }

Step 7. Test again. Click on Frame 1 to move the Playhead back to the beginning. Now press the Ctrl and Enter keys on your keyboard to preview your movie. When you click on the Portfolio button in the Menu, you should see the ProgressBar display the progress of the download of your Portfolio.swf file and then disappear. If you can't see the ProgressBar, you might need to simulate a slower download. With the preview still open, click View > Download Settings > 14.4 (1.2 KB/s). Click on your Home button to move back to your homepage and then click on the Portfolio button to test the ProgressBar again.

Step 8. Save the changes. You can now save the new additions to your movie. Click File> Save.

Macromedia Flash MX 2004 Workspace

Add Add+The+Loader+and+ProgressBar+Components+To+Your+Flash+Website to Twitter Add Add+The+Loader+and+ProgressBar+Components+To+Your+Flash+Website to Facebook Add Add+The+Loader+and+ProgressBar+Components+To+Your+Flash+Website to MySpace Add Add+The+Loader+and+ProgressBar+Components+To+Your+Flash+Website to Del.icio.us Digg Add+The+Loader+and+ProgressBar+Components+To+Your+Flash+Website Add Add+The+Loader+and+ProgressBar+Components+To+Your+Flash+Website to Yahoo My Web Add Add+The+Loader+and+ProgressBar+Components+To+Your+Flash+Website to Google Bookmarks Add Add+The+Loader+and+ProgressBar+Components+To+Your+Flash+Website to Stumbleupon Add Add+The+Loader+and+ProgressBar+Components+To+Your+Flash+Website to Reddit


RSS | Related Articles | 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