After you add graphics, sound, and content to your Flash movie, the file can become rather large. Even after you optimize your movie, you might find that integral parts of the movie have frames that go above the red line in the Bandwidth Profiler. What happens if a user clicks a button to go to a particular frame, and that frame hasn't been downloaded yet? Flash will not go to frames that haven't been loaded, so you need to make sure that everything that needs to be loaded is loaded before you let Flash perform such actions. A solution to this problem is a preloader. A preloader is an animation that plays while the contents of the Flash movie download.
-
Add a stop action to frame 1 of the Actions layer in guestbook9.fla, main1.fla, visitorinfo2.fla, map10.fla, and feature2.fla. Export a .swf file for each movie to the FlashTFS folder, and save the files as guestbook10.fla, main2.fla, visitorinfo3.fla, map11.fla, and feature3.fla.
Each of the files for this step should be in the FlashTFS folder on your hard drive. If for some reason you can't locate one of the files, you can find a copy in the Lesson12/ Starting folder on the CD-ROM. Be sure to copy the file to the FlashTFS folder before you continue.
Once you've found the files, open each one and add a stop action to frame 1 of the Actions layer. Select frame 1 of the Actions layer in each movie, open the Actions panel, and type stop(); in the Actions list.
After you add the stop action to frame 1 in each movie, export a .swf file for each movie. Choose File > Export Movie. In the Export Movie dialog box, browse to the FlashTFS folder. Type the appropriate name in the Save As text box and click Save. In the Export Flash Movie dialog box, leave the settings at their defaults and click OK.
NOTE
Export the .swf files as guestbook.swf, main.swf, visitorinfo.swf, map.swf, and feature.swf. Since there are already .swf files with these names , you should choose to replace them if prompted.
Once you've exported a movie, you should save it in the FlashTFS folder on your hard drive. Increase the number in the file's name by one when you save it, just in case you need to go back to the previous version.
-
Open zoo37.fla from the FlashTFS folder. Select frame 1 of the Actions layer, and choose Edit > Cut Frames.
You created zoo37.fla in Lesson 11. If you can't find a copy of zoo37.fla in the FlashTFS folder on your hard drive, you can find a copy in the Lesson12/Starting folder on the CD-ROM. Open that file and save it as zoo37.fla in the FlashTFS folder on your hard drive.
NOTE
It's important that you work with zoo37.fla in the FlashTFS folder on your hard drive. If you start this lesson with zoo37.fla from the CD-ROM, you must save the file to the FlashTFS folder on your hard drive.
-
Open top1.fla from the FlashTFS folder. Select frame 2 of the Actions layer, and choose Edit > Paste Frames. Add a stop action to frames 1 and 2 of the Actions layer. Set the Frame label for frame 2 to rf.
When you choose Edit > Paste Frames, the frame you cut from the zoo37.fla movie will be pasted into frame 1 of the top1.fla movie. That means that all of the ActionScript from frame 1 in zoo37.fla, which was the ActionScript that created the drop-down menu, is pasted into the top1.fla movie.
After you paste the contents of frame 1 of the Actions layer from zoo37.fla into frame 2 of the Actions layer in top1.fla, add a stop action at the end of the code. Then add a stop action to frame 1 of the Actions layer. This will keep the movie from displaying anything, since frame 1 of every layer is empty (except for ActionScript).
When you paste frame 1 of the Actions layer in zoo37.fla in frame 2 of the Actions layer in top1.fla, not only is the ActionScript pasted into that frame, but so is the frame's label. Since frame 1 of the Actions layer in zoo37.fla doesn't have a label, pasting that frame into frame 2 of the Actions layer in top1.fla will remove that frame's label. It must be labeled rf for the preloader to work, so make sure you set the Frame label to rf before you continue.
-
Copy the Menu Piece and Min Max Clip symbols from the zoo37.fla library to the top1.fla library. Open the Top Clip movie clip in top1.fla in symbol-editing mode, and add the following ActionScript to frame 12 of the Actions layer:
_level0.gotoAndStop("rf"); _level2.gotoAndStop("rf"); _parent.menuClip._visible = true; You added the ActionScript to create the menu in step 3 when you pasted the contents of frame 1 of the Actions layer in zoo37.fla to frame 2 of the Actions layer in top1.fla. Now you must add the movie clips that are attached by that ActionScript. Make sure both the zoo37.fla and top1.fla libraries are open, and drag the Menu Piece and Min Max Clip symbols from the zoo37.fla library into the top1.fla library. Both movie clips will maintain their Identifier properties when they are moved from one library to the other.
NOTE
You should delete the Menu Piece and Min Max Clip movie clips from the zoo37.fla library. These movie clips are exported for ActionScript in the first frame of the movie, so they would add to the file size of the movie when you export or test zoo37.fla. You can delete an item from the library by selecting it and pressing Delete or Backspace. When the Delete dialog box opens, first verify that you are in fact deleting the correct symbols (from the zoo37.fla library, not the top1.fla library), and then click Delete.
The ActionScript should go before the stop action already in frame 12 of the Actions layer in the Top Clip symbol. You should end up with the following ActionScript in frame 12 of the Actions layer after you have completed this step:
_level0.gotoAndStop("rf"); _level2.gotoAndStop("rf"); _parent.menuClip._visible = true; stop(); 
The first and second lines of code you added tell levels 0 and 2 to go to the frame labeled rf and stop playing. You set frame 2 of the main timeline for every movie in your project to rf in Lesson 11that frame label now comes in handy. You already added ActionScript to stop every loaded movie at frame 1. Later in this exercise you'll add a stop action to frame 1 of the level 0 movie (zoo37.fla).
The third line of code you added sets the _visible property of the menuClip instance on the main timeline of the current movie to true . That means that the menu that's created by the ActionScript in frame 1 of the main movie will become visible when the Top Clip movie clip reaches frame 12.
-
Export top1.fla to the FlashTFS folder as top.swf, and save the .fla file in the FlashTFS folder as top2.fla.
NOTE
You should replace the copy of top.swf that you exported to the FlashTFS folder in Lesson 11.
Make sure you export the .fla file as top.swf in the FlashTFS folder. When you choose File > Export, browse to the FlashTFS folder on your hard drive. Type top.swf in the Save As text box and click Save. When the Export Flash Player dialog box opens, leave the settings at their defaults and click OK. After the movie has exported, save the .fla as top2.fla in the FlashTFS folder.
Keep this file open for now, as you will modify it again later in this exercise.
-
Move frame 1 of the Soundtrack layer in zoo37.fla to frame 2. Set the Frame label for frame 2 of the Actions layer to rf. In frame 1 of the Actions layer, add the following ActionScript:
function preload(movies) { loadInterval = setInterval(checkLoaded, 10, movies); } loadMovieNum("main.swf", 2); loadMovieNum("top.swf", 3); var movies = [["_level0", "_level2", "_level3"],["_level3"]]; preload(movies); stop(); 
Choose Window > zoo37.fla to return to the movieit should still be open from step 2 in this exercise.
You can move frame 1 of the Soundtrack layer to frame 2 by selecting frame 1 of the Soundtrack layer, releasing the mouse, and dragging frame 1 to frame 2. When you do this, frame 1 of the Soundtrack layer should be empty, and the sound that was in frame 1 should now be in frame 2.
After you've moved frame 1 of the Soundtrack layer to frame 2, select frame 1 of the Actions layer and add the ActionScript to the Actions panel. This ActionScript should be the only ActionScript in this frameif there's any other ActionScript in the Actions panel, simply delete it.
The first three lines of code set up the preload function. This function has only one parameter ( movies ), which you'll learn more about later in this step. The ActionScript that's run when the preload function is called is
loadInterval = setInterval(checkLoaded, 10, movies);
This code uses the setInterval action, which has the following syntax:
setInterval(function, interval, arguments);
The setInterval action calls a function at a specified interval as the movie plays. The function called is set in the function parameter, while the interval in milliseconds is set by the interval parameter. You can pass arguments to the function, in case it requires any parameters, using the arguments parameter. In the ActionScript that you added, the function is checkLoaded and the interval is 10 . The only argument that's sent to the checkLoaded function is movies , which is the movies parameter that's expected by the preload function. So when this function is triggered, it's sort of like starting a timer to call the following code every 10 milliseconds:
checkLoaded(movies);
When the value set for the interval parameter is less than the movie frame, the function is called as close to interval as possible. If the function modifies the appearance of the movie, you should use the updateAfterEvent action, which you'll look at in the next exercise, to refresh the screen.
The next two lines of code load a couple of movies. The first movie that's loaded is main.swf, and it's loaded into level 2. Then top.swf is loaded into level 3. This code is pretty straightforward and simply uses the loadMovieNum actionyou looked at that action in detail in Lesson 11.
Next the code creates a new multidimensional array, named movies. The movies array has two elements, each of which is a multidimensional array. The first element has three values: "_level0" , "_level2" , and "_level3" , each of which is a string referring to a level in the movie. The second element of the movies array has only a single value ("_level3" ), though it could have more. You'll learn more about what these values mean in the next step.
The last two lines of code are pretty simple. First the code calls the preload function, passing it the value of the movies array. When you set up the preload function, you wrote it so that it expects a movies parameterthe value of the movies array fills in that parameter, which is then passed to the checkLoaded function as part of the preload function. The last line of code simply tells the movie to stop.
-
Now add the following ActionScript:
function checkLoaded(movies) { var total = 0; var done = 0; var pLoaded = 0; for (var i = 0; i<movies[0].length; i++) { var mc = eval(movies[0][i]); if (mc.getBytesTotal() != undefined) { total += mc.getBytesTotal(); done += mc.getBytesLoaded(); } else { total = 0; break; } pLoaded = Math.ceil(done/total*100); } trace(pLoaded + "% loaded"); } 
Add this code before any other ActionScript in frame 1 of the Actions layer.
This ActionScript does the bulk of the work for the preloader. It expects a single parameter ( movies ), which it receives from the preload function when it calls checkLoaded as part of the setInterval action.
The first three lines of code inside the checkLoaded function initialize three local variables : total , done , and pLoaded . Each of these starts out at . The total variable will hold the total file size that needs to be loaded. The done variable will hold the value of the amount of file size that has been downloaded. The pLoaded variable will hold the value of the percentage downloaded ( done/total*100 ).
Next a for statement runs based on the length of the array that's the first element of the movies array ( movies[0] ). In step 6, you set the first value of the movies array to ["_level0", "_level2", "_level3"] , which makes the length of movies[0] 3, so the for statement will run three times.
The first line inside the for statement sets up a variable that's local to the for statementit exists only inside the for statement. The variable is named mc , and it has a value of the i th element in the movies[0] array, after it has had the eval action applied to it. The eval action lets you access the level set by the value from the movies[0] array as a path to that level.
Next, the ActionScript checks to see if the value of mc.getBytesTotal() is not equal to ( != ) undefined . If this condition is true , the values of the total and done variables are modified based on the values of mc.getBytesTotal () and mc.getBytesLoaded () . getBytesTotal and getBytesLoaded are methods of the built-in MovieClip object. They get the total size and loaded size of a movie clip (or level) in bytes. If the value of mc.getBytesTotal() is undefined , which will happen if that value has not yet been set in Flash, and the condition for the if statement is false , the else statement is run, setting the value of total back to and triggering the break action. The break action tells Flash to stop running the current for statement, so Flash will skip the rest of the for statement and continue on with any code that follows it.
Finally, Flash sets the value of the pLoaded variable to Math.ceil(done/total*100) . This takes the value of the done variable, divided by the value of the total variable, times 100 , and rounds it up to the closest integer. Since the variable gets a value inside the for statement, the pLoaded variable's value won't be set if the break action is triggered. The pLoaded value is then traced, along with the string "% loaded" .
-
Add this ActionScript to the checkLoaded function:
if (done == total && total>0) { for (var i = 0; i<movies[1].length; i++) { var mc = eval(movies[1][i]); mc.gotoAndStop("rf"); } clearInterval(loadInterval); } 
Add this code following the trace action in the code you added in the previous step. Make sure this code is added as part of the checkLoaded function.
This ActionScript checks to see if the value of done is the same as the value of total , and if total is greater than . If both conditions are true, then Flash will first run a for statement based on the length of the second element in the movies array ( movies[1] ).
It will tell each target (level) in that array to go to the frame labeled rf. When you set up the movies array, you set the single value in the movies[1] array to "_level3" , so this code will tell the level 3 movie to go to the rf frame. The movie that's loaded into level 3 is top.swf. You added some code to the Top Clip movie clip in top.swf to tell the level 0 and level 2 movies to go to the frame labeled rf. If you hadn't done that, you could have modified the movies[1] array to list all the levels you wanted to play. As the for statement runs, it will tell the movie in each level listed in the movies[1] array to go to the frame labeled rf. The only problem is that the action of the for loop will cause all the movies to run at oncethat's not the effect you want for this project, and it looks nicer if the level 3 movie (top.swf) plays first.
Finally, if both of the conditions for the if statement are true, the clearInterval action will run. This action has a single parameter: intervalID . The clearInterval action stops the action of the interval that has the name referenced by the intervalID parameter. In this case, the intervalID parameter has a value of loadInterval , which is the variable name you set when you triggered the setInterval action to call checkLoaded . So this line of code simply tells the checkLoaded function to stop running at the specified interval.
-
Add some ActionScript to preload each loaded movie in top2.fla, export the movie as top.swf, and save the file as top3.fla. Return to zoo37.fla and test the movie. Save the file as zoo38.fla in the FlashTFS folder on your hard drive.
The ActionScript you need to add to preload each movie in top2.fla belongs in the onPress event given to every menu piece. It should look like the following when you've added the code:
menuClip["item"+i].onPress = function() { loadMovieNum(this.swf, 2); _level0.preload([["_level2"], ["_level2"]]); }; This code goes in frame 2 of the Actions layer in top2.fla. Add it to the onPress event, which is found in the for statement that adds all of the menu piecesthe line of code you add will end up in line 45 of the ActionScript in frame 2 of the Actions layer. The line you add will call the preload function in the level 0 movie. You then need to preload whatever movie is loaded into level 2 ( this.swf ) and then tell the movie to go to the frame labeled rf.
When you test the movie (Control > Test Movie), the Output window should appear, displaying "100% loaded." The movies should appear as expected, but you won't get to see that the files are truly preloading, because the files are loading from your hard drive rather than over an Internet connection, so everything loads at once. In order to simulate downloading over a dial-up connection, you can choose View > Show Streaming while the Test Movie window is open, which will give you a more accurate assessment of the effectiveness of your preloader. The Output window should display the actual percentage loaded, based on the simulated download settings.
NOTE
You can change the simulated download settings using the Debug menu when the Test Movie window is open. Choose Debug and pick a download speed.
After you have tested the preloader, close the Test Movie window and save the .fla file as zoo38.fla in the FlashTFS folder on your hard drive. Keep the file open, because you're going to continue to work with it in the next exercise. You can close any other .fla files you may have open, as zoo38.fla is the only file you will work with for the rest of this book.
