Tripod5G >> Recipe 16.4. Determining Load Progress

You want to monitor the load progress for content you are loading with MovieClipLoader, Loader, Window, or ScrollPane.

Solution

Alternatively, for a smaller file size, use the Flash 8 Cookbook ProgressBar component.

If you want a completely programmatic solution, and you have used MovieClipLoader to load the content in the first place, you can use a listener object with MovieClipLoader to monitor the load progress.

Discussion

When you are loading SWF and/or JPEG content into your Flash application, one important consideration is the time it will take to load the content. Most often, you want to make sure the user is notified as to what is going on as content loads. For example, if you are loading a 50KB .swf file and the user is connecting to your application over a dial-up connection, the content will not appear right away. In the interim, you want to make sure that the user at least knows that the content is loading. Otherwise he or she may be led to think that an error has occurred.

Macromedia provides a ProgressBar component that you can use to monitor the load progress and display that progress to the user. To use the Macromedia ProgressBar with a Loader, ScrollPane, or Window component instance, complete the following steps:

Add a ProgressBar instance to the stage by dragging it from the Components panel (you'll find it in the UI Components folder) to the stage at the point where you want it to appear. name (exp 3pod.com) the instance via the Property inspector. As with naming other component instances, this not required for the ProgressBar instance to function, but it will facilitate features such as hiding the ProgressBar when the content has loaded.
With the ProgressBar component instance selected, open either the Component Inspector panel or the Parameters tab within the Property inspector. Either one will allow you to configure the parameters for the component instance.
Assign the instance name (exp 3pod.com) of the component for which you want to monitor the load progress. Assign the value to the ProgressBar instance's source parameter. For example, if you want the ProgressBar to monitor the load progress of a Window component instance to which you have given the instance name (exp 3pod.com) cwImage, you should type the name (exp 3pod.com) cwImage in the field for the ProgressBar instance's source parameter.

If you are using the ProgressBar to monitor content loaded with MovieClipLoader, you can still use the ProgressBar component, but you need to make a few slight adjustments. The components, such as Loader, ScrollPane, and Window, dispatch events notifying any listening objects (such as a ProgressBar) as the content loads. However, content loaded with MovieClipLoader does not work in that way. Instead, the ProgressBar has to continually request the load progress from the movie clip into which the content is loading. In order to use a ProgressBar component in this manner, first complete the first two steps from the previous list, and then complete the following two steps in addition:

Assign the instance name (exp 3pod.com) of the movie clip into which the content is being loaded to the source parameter of the ProgressBar. For example, if you are loading the content into mHolder.mContent, then assign the value of mHolder.mContent to the source parameter via the Component Inspector or Parameters tab in the Property inspector.
Set the mode parameter for the ProgressBar to polled instead of event. The event mode is used for monitoring progress of objects that dispatch events such as the components. The polled mode is used for objects such as movie clips.

One thing that you may notice about the Macromedia v2 ProgressBar is that it alone adds 27KB to the file size of an .swf file. A ProgressBar component that is 27KB is, for many web-based projects, rendered useless. It is likely useful for web-based projects only if the audience has broadband connections and the content being loaded is quite large. Otherwise, the ProgressBar component needs to be smaller in file size to be effective. The Flash 8 Cookbook ProgressBar functions much like the Macromedia v2 ProgressBar, but it is significantly smaller in file size. If that is an issue for your project, you can consider downloading and using the Flash 8 Cookbook ProgressBar instead of the Macromedia version. The Flash 8 Cookbook ProgressBar works in the same way as that outlined in the preceding instructions.

The ProgressBar component has several parameters that are not mentioned in this recipe because they have to do with customizing the way in which the information is displayed within the ProgressBar instance. You can read more about the parameters in the Help panel within Flash.

If you want a completely programmatic solution for monitoring load progress, and if you are using MovieClipLoader to load the content, you can use some ActionScript code instead of a ProgressBar component. It is important to understand that with a completely programmatic solution, you will be responsible for providing any graphical content that you want to display to the user. The ProgressBar displays both a graphical and textual load indicator by default. With a completely programmatic approach, you will need to supply either of these elements.

Before looking at how to coordinate any graphical elements with the programmatic solution, let's first look at the basic way in which you can use ActionScript to monitor the progress of loading content. The code-based solution works by way of a listener object. A listener object is an object that you register with, in this case, the MovieClipLoader instance that is managing the loading. The MovieClipLoader instance then dispatches events to the listener object that tell the listener when certain types of things have occurred. The event we'll look at in this recipe is the progress event. Each time more bytes of data are loaded, the MovieClipLoader dispatches the event and calls the onLoadProgress( ) method on the listener object. You can define the onLoadProgress( ) method such that you can tell Flash to perform certain tasks each time more bytes are loaded. For example, you could tell a graphical load indicator to update to reflect the amount of data that has loaded. If that sounds somewhat complicated, don't worry: it's actually much simpler than it sounds. Let's look at the steps, and examine each of them a little more carefully:

Create the MovieClipLoader object and tell it to start loading the content. You can read more about how to do that in Recipe 16.1.
Create a listener object. A listener object can actually be many different types of objects, and there are many different ways in which you can most effectively use listeners. However, for simplicity and clarity we'll only look at creating a listener object from the Object class. Therefore, in this example you can create a listener object with the following line of code:
```
	var oMlListener:Object = new Object();
```
Add an onLoadProgress( ) method to the listener object. The onLoadProgress( ) method is the method that gets called each time more bytes get loaded. The MovieClipLoader object that calls the method automatically passes it three parametersa reference to the movie clip into which the content is being loaded, the number of bytes loaded, and the number of bytes total. Within the onLoadProgress( ) method is where your custom code will go. We'll get to that in the next step. First, in order to add the method to the listener, use the following code:
```
	oMlListener.onLoadProgress = function(mContent:MovieClip, nBytesLoaded:Number,
	nBytesTotal:Number):Void {
	};
```
Within the onLoadProgress( ) method, specify the code that you want Flash to run each time there is load progress. We'll look at some more details with regard to this step in a moment, but as an example, the onLoadProgress( ) method could be defined as follows, such that the number of loaded bytes is displayed in a text field named tLabel. (The code shown is similar to the preceding code, with the new code shown in boldface.)
```
	oMlListener.onLoadProgress = function(mContent:MovieClip, nBytesLoaded:Number,
	nBytesTotal:Number):Void {
	  tLoadIndicatorLabel.text = nBytesLoaded + " bytes loaded";
	};
```
Now that you've defined the listener object, you need to register it with the MovieClipLoader. In order to do that you should call the addListener( ) method from the MovieClipLoader instance and pass it a reference to the listener. Assuming that you named your MovieClipLoader instance mlLoader and your listener object is named oMlListener, your code would look like the following:
```
	mlLoader.addListener(oMlListener);
```

When you understand the basic way in which programmatic load progress monitoring works, the only other step is to coordinate that with graphical and/or textual elements that update to display the load progress to the user. One of the most common graphical elements is a load indicator bar that fills from left to right, just as with the ProgressBar component. You can achieve that same result by updating the _xscale property of a movie clip with horizontal bar artwork placed within it from within the onLoadProgress( ) method of the listener object. For example, assuming that you have created a movie clip instance named mLoadIndicator on the same timeline from which you have defined oMlListener, the following onLoadProgress( ) method definition will update the scaling of mLoadIndicator so that it coordinates with the load progress:

Tripod >> 3pod Tips & Learning and manuals for educations

Recipe 16.4. Determining Load Progress

Problem

Solution

Discussion

See Also

Tripod >> 3pod Botom Tips & Learning and manuals for educations