| The Tech Bookstore is not a massive file because a lot of its content is being loaded into Loader movie clips. However, it would take too long to load on phone modems not to have a progress bar for the entire site itself. Therefore, you will create a special SWF file that loads in the entire Tech Bookstore. This is not the only way to handle this process, but it is probably one of the easiest ways and, more importantly, it shows you how the MovieClipLoader class works to load in external content into a movie clip. You will find the MovieClipLoader class quite useful for this purpose and other sites that you build in the future. The MovieClipLoader class is an ActionScript class that comes with Flash 8 Basic. Its purpose is to initiate, monitor, and complete loading of SWF files as well as JPG, PNG, and GIF images. Because it doesn't have a visual component associated with it, it's well suited for applications in which you plan to create your own progress bar, or something like it, to indicated download progress. In this next exercise, that is precisely what you are going to do. 1. | Create a new FLA file called loader.fla and save it in the TechBookstore folder. This file will load in the Tech Bookstore online and contain a progress bar that you create yourself to load the bookstore using the new MovieClipLoader class.
The MovieClipLoader class can track the successful loading of content into movie clips, such as images and SWF files like the many bookstore.fla files you have created. Because the ProgressBar component adds about 30K in its own right, you will build a very lightweight SWF file so visitors with dial-up connections don't see a blank SWF file while waiting for the ProgressBar component itself to load in.
Note You might want to add a small graphic or small animation to entertain visitors while they wait. Now, you won't want to make the animation too intensive or else the visitor will have to wait for that to load as well! | 2. | Change the fps speed of the new FLA file to 21 fps and the dimensions to 780 (width) by 520 (height). Rename Layer 1 to progress. Add a new layer above it and name it actions.
These dimensions and the frame rate match those of the Tech Bookstore. This means that your SWF file will not slow down after it is loaded into the loader.swf file. Why would it slow down, you ask? Because when you load one SWF file into another, it inherits the parent SWF file's frame rate, like it or not. Sort of like a "When in Rome..." for Flash.
You will place ActionScript in the actions layer to handle file loading; the progress layer will contain graphics that will visually indicate download progress.
 | 3. | Create a rectangle on the Stage in the Merge Drawing model with a fill color of your choice. Resize the rectangle to approximately 150 pixels wide and a height of about 10 pixels.
The rectangle serves as a progress bar like the component you used earlier on. You can make the rectangle a different size, but try to maintain the same ratio and shape.
The fill color will be the actual progress bar that grows in size as the SWF file loads, and the stroke around the edge will contain the progress bar, showing visitors a depiction of how much more data the SWF file has to load in.
Switch to the Rectangle tool in your Tools panel. Choose any stroke and fill color that you like, make sure that you are in the Merge Drawing model, and draw a rectangle of any shape or size on the Stage.
| 4. | Select the fill itself and convert it into a movie clip. Give this clip an instance name of bar_mc. Then select the stroke, convert it to a graphic symbol, and select Modify > Arrange > Bring to Front.
Select the fill on the Stage and press F8 to convert it into a movie clip. Open the Property inspector and type bar_mc into the <Instance Name> field.
When you convert the fill into a movie clip, it overlaps the stroke that surrounds that movie clip. Therefore, you need to select the entire stroke (double-click the stroke to select all the segments) and press F8 to convert it into a graphic symbol. Select the Graphic radio button, name the symbol graphic_gr and click OK. You won't be doing anything with the stroke itself, so it's converted to a graphic symbol simply to conserve file size. Remember, a movie clip adds more weight. Then when the stroke is a symbol and still selected, choose Modify > Arrange > Bring to Front, which changes the location of the symbol so it is visible in front of the bar_mc again.
| 5. | Create a dynamic text field on the Stage and enter the text loading. Set the text to black 12 pt Arial font, and select the Alias text button. Set the justification for the text field to right, and resize the text field so there is leading space. Then position the field near the rectangle and give it an instance name of pctLoaded_txt.
 Type loading into the text field. The text will display the percentage of the loaded SWF file in addition to this text and change as the percentage of loaded content updates because it is set to be a dynamic text field. Change the justification of the field to right so you can align the text to the right of the progress bar if you want. Because the text on the left side changes and the "loading" text remains stationary, the text field looks better when the SWF file loads.
You need to add some leading space so the text that is dynamically entered into the text field has some room to change size because of the dimensions of text as the numbers change in the text field. As you can see in the previous figure, this means making the text field quite large so it can hold all the text you are assigning to the text field. Double-click the text field so you see a white square in the lower-right corner. Click and drag the square to resize the text field.
Then make sure that you add an instance name of pctLoaded_txt using the Property inspector to assign a text value to it using ActionScript.
| 6. | Select the rectangle and the text field and then convert them into a new movie clip by pressing F8. Give it an instance name of loader_mc.
Select both instances by pressing Shift while you click each one. Then press F8 and select the Movie Clip radio button. Enter loader_mc as the symbol name for the new movie clip and click OK. Then select the instance on the Stage and open the Property inspector. Enter loader_mc into the Property inspector as the instance name of the movie clip.
| 7. | Add the ActionScript for the MovieClipLoader class into Frame 1 of the actions layer.
Select Frame 1 of the actions layer, and open the Actions panel. Enter the following code into the Script pane. A description of this ActionScript follows the code listing.
loader_mc.bar_mc._xscale = 0; var myLoader_mcl:MovieClipLoader = new MovieClipLoader(); var mclListener:Object = new Object(); mclListener.onLoadProgress = function(target_mc:MovieClip) { var prog:Object = myLoader_mcl.getProgress(target_mc); var pctLoaded:Number = ¬ Math.round((prog.bytesLoaded/prog.bytesTotal)*100); loader_mc.bar_mc._xscale = pctLoaded; loader_mc.pctLoaded_txt.text = pctLoaded+"% loaded"; }; myLoader_mcl.addListener(mclListener); myLoader_mcl.loadClip("bookstore14.swf", this.createEmptyMovieClip("holder", ¬ 2));
This ActionScript is a little bit different from what you have been working with so far, but not by much. There are a few new things, though. The MovieClipLoader class is used to find out the progress and status of files being loaded into a movie clip. You create a new instance of the MovieClipLoader object and a new listener object to listen for events generated by the MovieClipLoader. You add a new listener for the mclListener object using the addListener method and then load the SWF file using the loadClip method. The loadClip method works as follows:
MovieClipLoader.loadClip("url", clip);
The URL path (either relative or absolute) is to the file you are loading in, and the clip is the movie clip instance (Loader instance, or level) into which you are loading the file. This works the same way as the MovieClip.loadMovie method.
The onLoadProgress listener is invoked when new content is downloaded onto the visitor's computer, so it is used to show the progress of the download (and helps you use the bar_mc to display that progress). The MovieClipLoader class has a getProgress method that takes a parameter that is the target movie clip into which you are loading the SWF file. This returns an object that we are calling prog, which has two properties: bytesLoaded and bytesTotal. Then you are rounding it and multiplying by 100 to get the percentage that the clip has loaded. You are saving the percentage loaded in a variable called pctLoaded.
You are scaling the bar_mc movie clip using the _xscale MovieClip property by the percentage that is loaded using the pctLoaded variable. _xscale refers to the scaling (resizing) of an instance along the x axis, which is horizontal. Then you are setting the value of the dynamic text field to display that percentage as well, and adding (or appending) on a bit of text as well (the % loaded text).
Because your SWF file is loading into level 0, it will "kick out" or discard any existing content there. So as soon as the SWF file has completed loading, the loader SWF file (including the progress bar) disappears. If you are loading content into a movie clip, you can use the following few lines of ActionScript in your FLA file:
mclListener.onLoadComplete = function(evt) { loader_mc._visible = false; };
You can place these lines directly above myLoader_mcl.addListener(mclListener); when the onLoadComplete listener is invoked, the file has completely downloaded. So when this happens, the visibility of the loader_mc (the progress bar) is set to false so it doesn't sit there behind the loaded Tech Bookstore, which would look pretty bad, of course.
 | 8. | Test the FLA file.
When you test the FLA document, you might not be able to see the file loading because it is loading so fast off of your hard drive. You will probably notice quite a difference as soon as you put the files online and test the loader. In the next exercise, you will test all of the files to make sure they work correctly.
| 9. | If everything works as expected, change the final line of ActionScript. Then save the changes you made to the file.
Because you won't be loading bookstore14.fla into the final version of the file, you need to change that final line, in which you are loading in the current version of the Tech Bookstore FLA file. Change the final line of the code on the actions layer to the following:
myLoader_mcl.loadClip("TechBookstore.swf", 0);
You will instead load in TechBookstore.swf, which will be the final version of the Tech Bookstore FLA file. The TechBookstore.swf file overwrites any of the existing contents because it is loading into level 0. If you are using a Linux or Unix server, the file will be case sensitive, so make sure you enter the correct case.
|
|
