If you spend any time at all searching the online Flash forums, you've most likely seen post after post about how to make a pre-loader. In Flash MX and earlier versions, you had to create a bar with a fill color that moved across the page based on a percentage you calculated using getBytesLoaded and getBytesTotal in some ActionScript code. This method (or using the new MovieClipLoader class) is still preferred by those wanting to create a custom look for their loader. There are many tutorials on the Internet to help you create that custom look you desire. However, if you simply want a quick and easy pre-loader so that visitors to your site can see that content is loading, check this out!

The ProgressBar Component included with the Professional version of Flash MX 2004 makes it easier than ever to produce a high-quality pre-loader for your projects. It automatically retrieves the progress of loading content so you no longer have to worry about calculating it yourself. In the Professional version there are two items that you can point the ProgressBar to that will make it work the way it is intended: a screen and the Loader component. Without getting into all of the gory details of how it works, we'll step through making a pre-loader with the ProgressBar component utilizing both of these scenarios. Within a few minutes you'll have a progress bar zipping its way across the screen so you can get back to the meat and potatoes of your site: its content. Let's get started!

Let's assume for these exercises that you have a wonderful SWF file that you have spent hours (maybe days or weeks) on, preparing it for publishing. We'll call that file main.swf. In both tutorials, it will be the content that we are loading and measuring the progress of. As you follow these steps, replace main.swf with the name of your SWF file.

Note that these tutorials assume you have some familiarity with creating new documents in Flash MX Professional 2004, the layout and workings of the Flash IDE, and the use of components.

Tutorial One: Using the ProgressBar Component with a Screen

1. Create a new Slide Presentation or Form Application document. For this example, we'll use the presentation document. By default, Flash creates two slides for you automatically: the "root" or main slide called presentation, and one child slide called slide1. You can rename these if you like, but it isn't necessary.
2. Select slide1 and make sure the Property inspector is open. slide1 is going to be our "loader", so to speak. In the Parameters tab of the Property inspector you will see a parameter called contentPath (see below). Enter main.swf in the parameter field. Note that we will save this new document in the same folder that our main.swf file is located in.



3. With slide1 still selected, drag a ProgressBar component onto the center of the Stage and give it an instance name of myPB.
4. With the component selected on the Stage, we are going to edit the parameters in the Property inspector.
   • Change the mode parameter from event to polled. This tells the ProgressBar to monitor the loading progress of what we put in the source parameter.
   • In the source parameter, enter presentation.slide1.content. This tells the ProgressBar to monitor the loading of slide1's content.



5. The only thing left to do is make the ProgressBar disappear when it has completed its task! To do this, make sure the ProgressBar on the Stage is selected, open the Actions panel and enter this ActionScript code:

   on (complete) {
       this.setVisible(false);
   }
   

   This code sets the visible property of the progress bar to false as soon as it is completed. Note that the word this in the code refers to the ProgressBar component instance itself. If you prefer not to place your ActionScript code in the Actions panel of the component instance itself, you can create an event listener and place the code elsewhere. See the Flash documentation for further details on how to write an event listener with ActionScript.
6. Viola! Instant pre-loader! Test the movie. You may or may not see your ProgressBar in action prior to your main SWF file loading. If you didn't, go to the View drop-down menu and select Simulate Download.

Tutorial Two: Using the Progress Bar Component with the Loader Component

1. Create a new Form Application FLA file. Flash creates two screens for you named application and form1.
2. With form1 selected, drag a Loader component onto the Stage and give it an instance name like myLoader. If you want your main.swf to reside inside the boundaries of the Loader component itself, make sure you size it using the freeform tool to the size you want it to display. Normally if you are loading another SWF, this is not necessary, since you most likely will want the loaded SWF to dictate its own size.
3. With myLoader selected on the Stage, open the Parameters tab of the Property inspector. If you want the SWF you are loading to scale inside the Loader component, leave the scaleContent parameter set to true. In the contentPath parameter, enter the name of your SWF file that you want to load. Note that in this example, this new file will reside in the same folder as the SWF file that we are loading (main.swf).



4. Open the Library panel of your document (Ctrl+L / Cmd+L) and right-click on the Loader component that is shown there. From the menu that appears, select "Linkage…". In the Linkage Properties dialog box, uncheck the "export in first frame" checkbox and click OK.



5. With form1 selected, drag a ProgressBar component onto the Stage and give it an instance name of something like myPB.
6. With your ProgressBar instance selected on the Stage, go to the Parameters tab of the Property inspector and make the following changes:
   • Change the mode parameter to polled.
   • In the source Parameter field, enter this._parent.myLoader. In this entry, this means the ProgressBar instance, _parent refers to form1, and myLoader is the name of your Loader component instance.



7. To make the ProgressBar disappear when the content of the Loader component instance (myLoader) has completely loaded, select your Loader component on the Stage, open the Actions panel and add the code shown in the diagram below. This sets the visible property of the ProgressBar component instance (myPB) to false as soon as the content of the Loader component has loaded. Note that this refers to the Loader component instance, _parent refers to form1, and myPB refers to the ProgressBar component instance.



8. You can now test your movie (Ctrl+enter). If your content loads too fast for you to see your progress bar in action, go to the View > Simulate Download in the main menu and you'll see it work to perfection!

Potential Problems

If you experience a problem with any components in your "main.swf" suddenly not working after implementing one of these examples, the following steps should correct the problem. Repeat for each component that stops working correctly:

1. Open the new FLA that you created in the steps above that loads your main.swf. Select the first screen (known as the 'root' screen) in the screen selection pane.
2. Drag the component onto the screen, then delete it. This places the component in the document's library and should fix any problems you experienced in your main.swf with that component. This is a known issue with the ComboBox component.

Another potential problem you may encounter when loading one SWF into another is that any references you have to something from the _root level may suddenly not be available. Basically what has happened is now that you have two documents, Flash is not sure which "root" to use. To help Flash figure it out, do the following:

1. Open your "main" FLA file and select the first, or 'root', screen.
2. Open the Actions panel and add this code:

          on (load) {
              this._lockroot = true;
          }
   

This code tells Flash that any references to _root in your code should be considered solely from this particular file, and not the _root of the loading SWF. For more information on _lockroot, you can also refer to this tutorial.

Conclusion

Flash MX Professional 2004 makes it easier than ever to create a pre-loader for your Flash content. Of course, in both examples above you can use the same process to load image files. Simply change the contentPath parameter of your screen or Loader component to the image file you want to load! Now that you have a quick and easy pre-loader, you can focus your time and attention on more important things!

Larry Pierce is an Application Services Provider who writes web applications for government agencies and small businesses. His focus is more on the business processes for the employees rather than the eye-candy for the customers. He recently started using Flash for the front-end of his applications when MacroMedia released the Professional verson of Flash MX 2004. "I looked at Flash when the MX version was released, but was quickly discouraged about the learning curve in regards to the Timeline layers and frames, and that mysterious process known as 'tweening'. Project completion dates were staring me in the face, so I decided to stick with ColdFusion and HTML. I looked again in September of 2003 when I received an email from MacroMedia touting the new 'form application' layout with data components. The more I read about it the more excited I became. It was as if they had written it especially for me!" Since then, Larry has jumped on the Flash bandwagon and hasn't looked back. Using only the Flash Help and some online tutorials and webinars (web seminars) he was able to get up to speed in a few short weeks and began churning out Rich Internet Applications(RIA) to the delight of his clients. Larry regularly posts in the forums at www.flashmx2004.com as "LarryP" and can be contacted from there.

Talk about Components in Flash MX 2004 Pro ON THE FLASH MX 2004 FORUMS.

Talk about new procedures and practices in Flash MX 2004 Pro ON THE FLASH MX 2004 FORUMS.