Making a Flash website menu with a preloader for external sections – part 3 of 4
This is the third part of the lesson on creating a Flash menu with preloader for external sections.
Creating the movie clip for loading information display
59 Lock the buttons layer, then create a new one above it and call it preloader.
60 Using the Rectangle tool (R) draw a 120 by 17 pixel rectangle and place it above the buttons, centered horizontally inside the menu. Fill it with white color, with Alpha set to about 34%.
61 Select the rectangle and press F8 to convert it to a symbol. Choose Movie clip as type, call it loading info display and click OK.
62 With the newly made symbol selected, go to the Property inspector and give the Instance name loadinfo_mc.
63 Double-click the loadinfo_mc movie clip to enter inside it. Call the first layer background and lock it. Create a new layer inside the movie clip and call it text.
64 Select the Text tool (T). Make the following changes and selections in the Property inspector:
- Change the type of the field to Dynamic text.
- You can keep the same font as before, so that the menu looks more coherent. If you find a different font that will look even better, go for it :-)!
- Increase the font size a little bit. The font size I chose for the buttons was 14, and here it is 16.
- Use the white color for the font, but turn its Alpha to 100%.
- Select the central alignment.
- You can keep readability as the Anti-alias option.
- The Selectable option should stay turned off.
- Single line, and not multiline should be selected.
65 Click and drag your mouse to create a text field. Press Esc to exit the text field.
66 While the dynamic text field is still selected, go back to the Property inspector and click the Embed buttton.
In the Character Embedding window, select the Numerals option (see 1 below). Then, enter the characters “LOADING“, a blank space (that’s right, press the space bar too) and the percentage sign: % (see 2) . Click OK.
These are all the characters you need for the loading information that is going to be displayed. You must embed them if you want all the users who will visit your Flash website to see the same font. Because it is highly improbable that every, if not any, user has that nice exotic font you like installed on her machine :-).
Also, the blank space is needed if you want everything to be displayed properly. The information on the rendering of a non-breaking space character is included in every font too. If you don’t embed it, Flash will improvise and that won’t look as good as it can when it is embedded within the text field.
You can type in lowercase letters if you prefer them for your design. Just be sure to update your ActionScript code later accordingly.
67 Now go to the left side of the Property inspector and assign an Instance name to your dynamic text field, to be able to manipulate it via ActionScript later. Call it infodisplay_txt.
68 Click the appropriate link above the layer to return to the main scene.
69 The menu movie clip should be selected. Go to the Property inspector and assign it the Instance name menu_mc.
Excellent! You have just completed the menu and all the elements of the preloader! Continue to see where to place the content for your Flash website.
Making the initial Flash website content and creating a placeholder for the external content
70 Lock the layer with the menu and call it menu (duh!). Make a new layer above it and call it content.
71 Create some graphics here that will represent the home (first) section of your Flash website. I have inserted a cool image. If you haven’t got any idea yet, just insert any image here for the purpose of this lesson.
Pay attention to one thing: place the graphics a few pixels below the menu and align them with the stage’s left edge, so that it looks nice and neat.
72 Select the image/content you have placed here and press F8 to make the conversion to a symbol. Select Movie clip as type and call it site contents. Click OK.
73 Give an Instance name to this movie clip: call it content_mc.
74 Enter inside the movie clip by double-clicking on it.
75 Inside the movie clip, select the image/graphics again and press F8 again to make a new movie clip out of it. Call this one home content and click OK.
76 Give an Instance name to this movie clip too: call it homecontent_mc.
77 Lock this layer and call it home content. Make a new one above it and call it external content.
78 Select Insert > New Symbol. In the window for symbol creation that appears, select Movie clip as type, call it empty movie clip and click OK. You will be presented with a blank workspace. You can create new contents here, but you don’t need it, because this movie clip must stay empty. So just click on the Scene 1 link.
79 Flash will return you to the main scene. Double-click on the menu_mc movie clip to go back inside it. The external content layer should still be unlocked, and here’s where you’ll place the empty movie clip. You can hide the home content layer to better see what you’ll do next.
80 Go to the Library (Window > Library). You will find the empty movie clip symbol there. Click it and drag it out onto the stage. It will land into the external content layer. As you can see, the empty movie clip is represented only by its registration point:
81 Place the empty movie clip so that it is perfectly aligned with the stage’s left edge — meaning that it’s X coordinate should be zero (0). As for the vertical position, place it a few pixels below the menu, like you did with the graphics a little bit earlier.
82 Give it an Instance name: placeholder_mc, for example.
This movie clip is very important: in it, the external contents will be loaded (other website sections in external SWF files).
83 Go back to the main scene by clicking the Scene 1 link above the layers.
Yes! You have just finished creating all the visual elements of this menu system. Now comes the ActionScript code and a few more things that you must make to be sure that everything will work properly.
Inserting the ActionScript code that powers the menu and the preloader
84 Lock the content layer and make a new layer on top of it and name it actions.
85 Select the first keyframe of the actions layer.
86 Select Window > Actions (shortcut: F9) to open the Actions panel and insert the following code inside it:
menu_mc.stop();
var section:String = new String();
var menu:MovieClip = menu_mc;
var startSection:MovieClip = content_mc.homecontent_mc;
var externalSections:MovieClip = content_mc.placeholder_mc;
var percentageDisplay:MovieClip = menu_mc.loadinfo_mc;
percentageDisplay._visible = false;
var loader:MovieClipLoader = new MovieClipLoader();
loader.addListener(this);
function onLoadInit(externalSections:MovieClip) {
menu.stop();
percentageDisplay._visible = false;
}
function onLoadProgress(externalSections:MovieClip, loaded:Number, total:Number) {
if (section != "home") {
externalSections._visible = true;
startSection._visible = false;
percentageDisplay._visible = true;
menu.play();
var percent:Number = Math.floor(loaded/total*100);
percentageDisplay.infodisplay_txt.text = "LOADING: "+percent+"%";
}
}
menu.home_btn.onPress = function() {
menu.stop();
percentageDisplay._visible = false;
section = "home";
startSection._visible = true;
externalSections._visible = false;
};
menu.services_btn.onPress = function() {
section = "services.swf";
loader.loadClip(section, externalSections);
};
menu.products_btn.onPress = function() {
section = "products.swf";
loader.loadClip(section, externalSections);
};
menu.quality_btn.onPress = function() {
section = "quality.swf";
loader.loadClip(section, externalSections);
};
menu.aboutus_btn.onPress = function() {
section = "aboutus.swf";
loader.loadClip(section, externalSections);
};
Before explaining how this code actually works, it will be a good idea to test your movie first.
Testing your movie and seeing the preloader at work
87 Now, find four different SWF files (you probably have a lot of these on your hard drive, since you’re learning Flash :-)) and place them in the same folder where your FLA (the one you are currently working on) is. Whatever these files’ current names may be, rename them to services.swf, products.swf, quality.swf and aboutus.swf. For testing purposes in this lesson, try finding SWF files that are between 60 and 120 KB in size. Of course, when you’ll be building your Flash website, these files can have any size that will suit your needs.
If you don’t happen to have any SWFs at hand now, you can easily create them for testing purposes. Do it like this: open a new Flash document and save it in the same folder where your menu with preloader FLA file is. Insert an image (JPG, GIF, PNG) into it by choosing File > Import > Import to Stage. Find an image that has a file size of anywhere between 60 and 120 KB, select it and click the Open button in the Import window. Then press Ctrl+Enter (or choose Control > Test Movie). Once you do this, the SWF will automatically be created, and in the same folder as your main file with the menu. Of course, don’t forget to rename the new SWF file.
88 Go back to your menu with preloader. Select Control > Test Movie. The Flash movie will load instantly, which is normal, because you’re testing it locally and not loading it from the Web. Click the menu buttons to see the content change appropriately. Everything should work fine if you followed the steps up to this point exactly as I laid them out. But now, you must see if the preloader works.
89 While still in the Flash movie test window, select View > Download Settings > 56K. This speed simulates a classic 56K modem. It is ok to simulate the download at this speed, since you can’t suppose that all of your website users have access to a broadband Internet connection. Unless you are specifically making a website for broadband speeds, that is.
90 Now select View > Simulate Download. The SWF will be reloaded and restarted, as if it were viewed over the Web with a 56K modem. And that’s why you will see a blank screen for about 10 seconds. Since there is no main preloader for the menu and the home (start) content, this is normal. It takes some time for it to load on this simulated speed. Don’t worry, you will see how to do this too later.
Once the interface loads, click any of the menu buttons. The preloader should kick in, showing the percentage of the size of the external SWF that has been loaded so far, while the stripes beneath it should move.
Everything should work fine. If there seems to be a problem, check out if your SWF files have the same names as they appear in the code (the names are mentioned in step 87). Also, make sure that the instance name of every movie clip and button is the same as the one in the ActionScript code.
Go to the fourth and last page of this lesson to see and understand how the ActionScript that powers the preloader menu system works.