Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
91. Back to your Flash document, select Window > Other Panels > Scene.
92. The panel for managing the scenes in your document will appear. Double-click on the Scene 1 name and change it to main. Hit Enter to confirm that.
93. Click the Add scene button (the plus icon) at the bottom of the Scene panel.
94. Call the new scene preloader. Next, click on it and drag it above the main scene.
This is done so that the scene with the main preloader will appear first. Different scenes in Flash are all part of the same timeline, which plays out sequentially, with the scene that is on top of all the other ones in the Scene panel appearing first.
95. Create the same big blue rectangle which you have drawn at the beginning of this tutorial. Its dimensions are 480 by 52 pixels. You can copy the one from the main scene if you want and place it here, in the preloader scene.
96. Go to the Library (Window > Library). Find the loading info display movie clip. Click on it and drag out an instance of it onto the scene. You can place it right over the blue rectangle — they won't interfere with one another, since the rectangle is a simple drawn shape and the other one a movie clip symbol.
97. Select the loading info display movie clip and go to the Property inspector. Assign it the Instance name mainpreloader_mc.
You can leave the instance name of the dynamic text field inside it as it already is, infodisplay_txt.
98. Lock the current layer and call it preloader. Make a new layer above it and call it actions. You can lock this one too, since you can insert ActionScript code inside it, without it having to be unlocked. Select the first keyframe of the actions layer.
99. Open the Actions panel by selecting Window > Actions. Insert the following code here:
var loadedData:Number = this.getBytesLoaded();
var allData:Number = this.getBytesTotal();
var percentageLoaded:Number = Math.floor(loadedData/allData*100);
mainpreloader_mc.infodisplay_txt.text = "LOADING: " + percentageLoaded + "%";
if (percentageLoaded >= 100) {
gotoAndStop("main", 1);
}
This is an old-school preloader compared to the one you made for loading external content. It fetches the loaded number of bytes via the getBytesLoaded() method and stores it in the loadedData variable. The total number of bytes your main Flash movie has is retrieved via the getBytesTotal() method and is stored in the allData variable. The ActionScript keyword this is used to point to the main Flash movie itself, since it resides on the main timeline.
Then, the percentage calculation is done like it was done previously, using some simple maths. The next line after that writes out the information in the dynamic text field, which is inside the mainpreloader_mc movie clip. The conditional if statement tells the movie to jump to the main scene (where the site content lies) and stop there once all of the Flash document has been loaded.
But, for this code to work — to be able to actually use the preloader as the loading goes, you must create a small looping animation on this scene.
100. Right-click on frame 2 of the preloader layer and select Insert Frame from the context menu.
101. Now right-click on frame 2 of the actions layer and select Insert Keyframe from the context menu.
You need a keyframe in the actions layer because you are going to insert additional ActionScript code here. The preloader layer needs only a frame, because no changes will be made inside it, it just needs to span the two frames.
102. With the second keyframe in the actions layer selected, open the Actions panel (shortcut key: F9). Insert the following code inside:
gotoAndPlay(1);
This will send the playhead back to to frame 1 of this scene. This will go on (the looping animation), until your Flash movie has been fully loaded. Then the if conditional statement on frame 1 will turn out as true and will send the playhead to the main scene and stop it there.
And that's it! You have just finished making a fully working Flash website navigation and loading system! Congratulations!
The menu/loading system that you learned to create with this lesson is just one of many possible solutions for creating an effective Flash navigation system. You can create many variants based on this example, expand on it and build further solutions that are even more modular and extendable.
I hope that what you've learned will inspire you to create your own cool Flash menus and preloading systems. You can consult my menus & interfaces tutorials section to see more ways of making website menus in Flash as well as explanations on how to design cool-looking interface parts. Keep on learning! :-)
Download the source file for this lesson
If you have found this tutorial useful, please consider donating to support lukamaras.com.
Got any comments or questions? Want to add something but don't know how? Discuss it in the forum!
