| Now that you know how to load an image or .swf, it's a good idea to learn how to unload it. But first, you should learn how to determine whether a movie that's loading has completed loading! This will be important if the movie that's loading is large. It's nice to let the user see that a movie is indeed downloading. You might actually want to make the user wait for it to fully load. All these things require you to determine whether a loading movie has downloaded. The best way to determine whether a movie has loaded is to set up a so-called listener that waits for the onLoadComplete event. But that doesn't happen until the .swf or image is fully loaded. You can use the onLoadProgress event to get up-to-the-minute information about how the downloading is progressing. This way, you can display information to the user (such as a progress bar). That's just what we'll do in the next task. Try It Yourself: Use the MovieClipLoader Object to Display Progress In this task you'll use the built-in features of the MovieClipLoader object in order to display the download progress in a standard horizontal graphic: 1. | First, create the submovie that will be loaded. Set the document properties (by pressing Ctrl+J) to 300x300. Then create a linear animation that starts in Frame 2. That is, click Frame 2, select Insert, Timeline, Keyframe (or press F6), and then build the animation that plays through many more frames (maybe out to Frame 60). Using an imported video clip would be ideal because you want something that takes a little while to download. To that end, consider importing a sound and making it start on Frame 2 (again, to make the file big).
| 2. | Select the first frame of this submovie and open the Actions panel. Type using stop(); so that this movie stops on Frame 1 while the rest of the movie downloads.
| 3. | Make a new layer and in the last frame of that layer (Frame 60) click and then insert a keyframe (by pressing F6). With the last frame selected, open the Actions panel and type gotoAndPlay(2); so that the movie will loop but not all the way back to the start (where there's a stop action).
| 4. | In a new folder, save this movie as submovie.fla and then use Test Movie (by pressing Ctrl+Enter) to create a .swf named submovie.swf. When you use Test Movie, the movie just sits on Frame 1; you'll control this issue from the movie into which it loads.
| 5. | Now in a new movie, draw a box that's exactly 300x300, remove the fill, select Modify, Convert to Symbol (or press F8), name the box Holder, and make sure it's behavior is set to Movie Clip and the top-left registration option is selected. Next, in the Properties panel, name the instance now on the Stage my_mc.
| 6. | Next, you'll draw a rectangle (for the progress bar). Select the Rectangle tool, turn off Object Drawing, and then draw a rectangle. Select only the fill, and then select Modify, Convert to Symbol (or press F8). Select the upper-left registration point so that when the rectangle scales, it scales from the left. You can call the symbol Progress and then name the instance progress_mc.
| 7. | Finally, select the first keyframe in the main movie and type the following code (which I'll explain next) :
1 theLoader_mcl = new MovieClipLoader(); 2 myListener = new Object(); 3 myListener.onLoadStart = function(mc) { 4 progress_mc._visible = true; 5 }; 6 myListener.onLoadProgress = function(mc, bytesLoaded, bytesTotal) { 7 progress_mc._xscale= bytesLoaded / bytesTotal*100; 8 }; 9 myListener.onLoadComplete = function(mc) { 10 progress_mc._visible=false; 11 }; 12 theLoader_mcl.addListener(myListener); 13 theLoader_mcl.loadClip("submovie.swf", "my_mc");
The first line creates a new MovieClipLoader instance (theLoader_mcl), and the last line initiates the loading you really only need those two lines. But the object myListener has three events that it's going to listen for: onLoadStart, onLoadProgress, and onLoadComplete (all built-in features of the MovieClipLoader). The key is line 12, where we associate that listener instance (myListener) with the MovieClipLoader instance (theLoader_mcl). Notice that line 4 does the work of setting progress_mc's scale to a percentage based on how much has loaded divided by how much will load. (In the workshop section of this hour, I've included some code for making a custom animation instead of simply stretching a bar.)
| 8. | Test the movie. The movie should work great. If you really want to test it, put it on a web server and try running it from a slow connection. While testing, you can select View, Simulate Download, but that feature doesn't work reliably when using the MovieClipLoader. Note that if you do upload the files, it might appear to download instantly the second time. That's because the loaded movie has already downloaded to your browser's cache. Basically, you either have to clear the cache or delete the .swf files from the folder that contains downloaded files. For example, with Internet Explorer, select Tools, Internet Options to open the Options dialog box, and then click Delete Files on the General tab. Alternatively, you can trick the browser into not using the cache by changing line 13 to read:
theLoader_mcl.loadClip("submovie.swf" + "?ran=" + Math.random(), "my_mc");
Unfortunately, you can only use this code in a file posted on a web server. That is, it won't work when you do a Test Movie.
|
It turns out that you can pull off a similar effect with less code by using components, as the following task demonstrates. Try It Yourself: Use Components to Load a Movie In this task you'll use the Loader and ProgressBar components to reduce code: 1. | Start a new file and save it adjacent to the submovie.swf file from the previous task.
| 2. | Drag a Loader component and a ProgressBar component onto the Stage. Give them instance names myLoader and myProgress, respectively.
| 3. | Select the myLoader instance. On the Parameters tab in the Properties panel, set contentPath to submovie.swf and scaleContent to false.
| 4. | Select the myProgress instance. Change its parameter for source to read myLoader.
| 5. | Select the first keyframe, open the Actions panel, and type this code:
myLoader.addEventListener("complete", removeBar); function removeBar(){ myProgress._visible=false myLoader.contentHolder.play(); }
When the "complete" event triggers, the homemade function removeBar() will hide the progress bar and tell the contentHolder instance to play. Notice that submovie.swf will load into contentHolder, which is inside myLoader.
|
|
