01. v1 Components, We Hardly Knew Ye   02. Button Component   03. Alert Component   04. Checkbox Component   05. Radio Buttons   06. The List Box family of Components   07. Date Chooser Component   08. Date Field Component   09. Label Component

10. Loader / Progress Bar Components   11. Numeric Stepper Component   12. Text Area/Input Components   13. Menu / Menu Bar Components   14. Scroll Pane Component   15. Window Component   16. Tree Component   17. Accordion Component   18. Conclusion

go to previous page

- discuss this tutorial -

go to next page

10. Loader and Progress Bar Components

The Loader and Progress Bar compoents are two components that you will probably end up using together quite often. The Loader component, as evident from its name, loads in external images (JPGs) and Flash movies (SWFs). The Progress Bar can either interface automatically with a Loader component or be manually updated to display load progress. In the following example, you will see how to use the Loader and Progress Bar components together to load in an external SWF. The external SWF you will be loading in is called loader_content.swf and is part of your downloaded source materials (make sure you copy it into your working directory for this example to work.)

1. Start a new Flash movie. Use the screenshot below as a guide when laying out the components on Stage in the next few steps.
   
   
   
   
2. Create two new layers. Label the topmost layer Actions, followed by Progress Bar and Loader.
   
   
3. Into the Progress Bar layer, drag a ProgressBar component and set its component parameters using the Property Inspector, as shown below.
   
   
   
   
4. Into the Loader layer, drag a Loader component and set its component parameters using the PI, as shown below. Make sure that the mode is set to event whenever you use the Progress Bar with the Loader component.
   
   
   
   
5. Enter the following code in Frame 1 of the Actions layer:
   

   // create event listener object for the loader
   myLoaderListener = new Object(); 
   // click event handler
   myLoaderListener.complete = function ( eventObject )
   {
       myProgressBar._visible = false;
   }
              
   // register the event listener
   myLoader.addEventListener("complete", myLoaderListener);

6. Test the movie (Ctrl-Enter). You will not see the progress bar in action because loads are instant in the authoring environment. While still in Test Movie mode, press Ctrl-Enter again (or select View -> Simulate Download) to see the Progress Bar in action.

You may notice that in Step 5, you created a listener for the Loader component instead of the Progress Bar, although the latter would have more sense. The reason for this is that there appears to be a bug in Flash MX 2004 where the Progress Bar component does not fire a complete event, although the documentation mentions that it should. The screenshot below shows the external SWF that gets loaded in.

go to previous page

- discuss this tutorial -

go to next page