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.

http://www.macromedia.com/support/flash/downloads.html#updaters

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