Adding the ProgressBar Component

Progress bars are an important part of many larger Flash documents, particularly ones using video, audio, or complete sites built using Flash. In this case, you're dealing with all of the above! When you load in content, it is important to display indication onscreen that loading is taking place. You might have visitors using dial-up phone modems to view the website, or you might have a large video file that even visitors on the fastest broadband connections have to wait to start viewing. In these cases, a progress bar tells the visitor that content is in progress of loading. If you do not use a progress bar or preload content, your users might think something is wrong with the site because they do not see anything happening. A visual indication is quite important to let them know to hold on a second while the SWF file loads.

Earlier in this lesson, you used a dynamic text field to indicate the load progress of a SWF file being loaded into a Loader component. In the next two exercises, you will use a progress bar to do much the same thing, only without adding a text field of your own because the ProgressBar component handles it for you. Pretty nice of it, huh? You will still be using bookstore14.fla.


Open bookstore14.fla from the TechBookstore folder on your hard drive if it is not already open.

You are still working with the same FLA file you used for the previous exercise.


Select Frame 1 of the home layer. Expand the Components panel and drag an instance of the ProgressBar component onto the Stage.

Position the progress bar over the middle of the Loader component and give it an instance name of pbHome.

In the Property inspector's Parameters tab, set the mode to polled and set the source to the instance name of the Loader component: home_ldr. The polled mode lets you use the progress bar with anything that can use two ActionScript methods called getBytesLoaded() and getBytesTotal(), which are used to monitor progress. Previously in the lesson, you indicated progress with the progress eventnot getBytesLoaded() and getBytesTotal()and placed that information in a text field. Movie clips don't have a progress event, so if you want to reuse this Loader instance with a movie clip, you're out of luck if it is in event mode (which works with only progress and complete events). Because you're working with a Loader component, either event or polled mode works just fine.


Add the event listener Object ActionScript. Add this code on Frame 1 of the actions layer.

When the content displays in the Loader component, the ProgressBar remains visible and stays at 100%. You need to create an event listener that waits for content to finish loading and then hides the ProgressBar component.

Select Frame 1 on the actions layer and add the following ActionScript below the existing code in the Actions panel:

var pbListener:Object = new Object(); pbListener.progress = function(evt) { = true; }; pbListener.complete = function(evt) { = false; };

You've seen this ActionScript before: you're creating an object that will listen for progress and complete events; this time, however, these events will be relayed by the ProgressBar. The ProgressBar in this situation is sort of acting as an intermediary. It's watching the Loader's progress and complete events and matching it with its own progress and complete events. The progress indication happens without any ActionScript having to be written by you as a result. Your ActionScript is making sure that the ProgressBar is visible only when a file is loading and making it invisible when the file is finished. That's what the evt is all about. The evt option is the broadcaster, or the component talking to the listener object, which in this case, is the ProgressBar component.

You use the progress and complete events to toggle the visibility of the ProgressBar component. When the external SWF file is actively being loaded into the Loader component, the ProgressBar is visible on the Stage. It displays what percentage of the file has been loaded. When the complete event is caught, the content is fully loaded, and the ProgressBar component can be hidden on the Stage because the Loader instance already displays the loaded content.


Create an event listener for the pbHome ProgressBar component to hide the ProgressBar instance.

To hide the pbHome progress bar on the Stage when the content in the Loader component has finished loading, you need to add the following ActionScript code to the bottom of the actions layer. Add this code below the ActionScript you entered in Step 3:

pbHome.addEventListener("progress", pbListener; pbHome.addEventListener("complete", pbListener);

This ActionScript adds two event listeners to the pbHome instance on the Stage. Now when the pbHome ProgressBar receives the progress event, it lets pbListener know; then pbListener executes the instructions in its progress event handler.

When the complete event is triggered by Flash, the pbListener event handler sets the visibility of the target component (the component that generates the eventwhich in this case is pbHome) to false. The event hides the symbol on the Stage. You can substitute with pbHome in the code in Step 3, and the code would work the same way. One drawback to hard coding (setting a definite single value instead of a variable that could change the value) pbHome into the function is that the function works only with that one component instance. By keeping the function dynamic and using the, you can reuse that same ProgressBar listener object on each of the ProgressBars instances throughout the entire FLA.


Add new ProgressBar instances for the remaining SWF files that need to be dynamically loaded into the site. Give each new instance a new instance name.

Repeat the process of adding ProgressBar components onto the Stage for the Loader component instances that load in the Reviews, News, Catalog, Tour, and Map sections. Give each new ProgressBar component instance a unique instance name. Make sure that you also change the source parameter for each new instance of the ProgressBar component to the Loader component instance it will be monitoring (news_ldr, map_ldr, etc).


Make sure that you add each ProgressBar to the layer for each page these Loader instances are on (map, news, reviews). If you choose a layer that spans multiple pages, your ProgressBar instance is visible on pages where it doesn't belong.


Add an event listener to every page containing a ProgressBar component. Add the code onto the actions layer. Change the instance name in the code to match the instance name of the ProgressBar instance on that particular page.

You'll also need to add the two lines of event listener code from Step 5 to each frame in the actions layer with the ProgressBar components. Each listener can reuse the same pbListener event handler object defined on Frame 1 of the FLA file, but the listeners must be added to the same frame as the component instances because they won't "exist" until the playhead encounters them. For example, in the code on the frame labeled news (Frame 40), you would need to add the following code on the actions layer, assuming that your ProgressBar component had an instance name of pbNews:

pbNews.addEventListener("progress", pbListener); pbNews.addEventListener("complete", pbListener);

As mentioned, ActionScript needs to be added to each frame that has a ProgressBar. There are already keyframes with the stop action on each page. You want to add this code following each stop action, and remember to modify the instance name in the code with the instance name of the particular ProgressBar component on that particular page.


Save and test your file.

Make sure your ProgressBar components are doing what they're supposed to do. Choose Control > Test movie. As you navigate through each one of your pages, the ProgressBar component should become visible for a fraction of a second and then disappear from the page, telling you that the complete event is in fact doing what it shouldmaking the component invisible after all the information has loaded into the Loader component instance on each page.

To see the ProgressBar component indicating progress, select View > Simulate Download and navigate through your site. You can change the download speeds in View > Download Settings.


If your ProgressBar components are not working, check the instances names of all your Loader components, the ProgressBar components, and their appropriate references in the ActionScript. You want to make sure your casing is correct and that each reference to a component is consistent.

Macromedia Flash 8. Training from the Source
Macromedia Flash 8: Training from the Source
ISBN: 0321336291
EAN: 2147483647
Year: 2004
Pages: 230
Authors: James English © 2008-2017.
If you may any questions please contact us: