Tikier Hosting Offshore, Adult, Warez Linking Hosting Allowed

How to make a complete Flash website navigation system with a built-in preloader for external content

In this thoroughly explained, detailed lesson made for Flash 8, I will show you how to create a really cool, complete Flash website navigation and loading system. The menu that you will make has a built-in animated preloader. You will learn:

• How to design a menu with a built-in preloader (a numerical one),
• How to create a preloader animation behind the menu buttons,
• How to create stylish menu buttons,
• How to make ActionScript code that will enable the preloading of external Flash (SWF) content
• How to make a main preloader for the menu system and much more.

This Flash menu/preloader system works seamlessly in the following browsers on a Windows machine: Firefox 2, Internet Explorer 6 and Opera 9. I have yet to test it on a Mac, but I suppose it will work perfectly there too.

Below is an example of the Flash website system that you are going to create. Try clicking the buttons to see what you’ll learn to make!

Creating the base for the menu

1 Open a new Flash document and hit Ctrl+J on your keyboard (or select Modify > Document) to access the Document Properties panel. Change the width of your document to 480 pixels (see 1 in the screenshot below) and change the Frame rate to 30 fps (see 2 below). Click OK.

The change of speed for your movie (frame rate) is necessary to be able to have a smooth animation for the preloader. As for the width of the document, the change has been made just so that you can more easily follow this tutorial. Of course, once you learn how to create the menu with the preloader as explained here, you will be able to apply it to any document, no matter how big or small.

2 Select the Rectangle tool (R). Go over to the Colors area of the Tools panel and select the Stroke color by clicking on the pencil icon (see 1 below). Then click the No color icon (see 2 below). This will enable you to draw a borderless rectangle.

Click on the color square of the Fill color (see 3 below). Select a dark blue color for the fill. You can type the color code directly in the palette that will show up — I selected #203E7A.

3 In the Options area of the Tools panel, make sure that the Object Drawing and Snap to Objects options are turned off, like in the screenshot below. This will enable you to draw freely.

4 Click and drag your mouse on the stage to draw a 480 by 52 pixel rectangle. As you can see, the width of the rectangle is equal to the width of the stage. It isn’t easy to match these exact dimensions by drawing freely, so I recommend that you select the rectangle with the Selection tool (V) and then go over to the bottom left part of the Property inspector. There, you will find the input fields for the shape’s width and height. Enter the dimensions there manually.

After you have done this, center the rectangle on the stage horizontally and place it on the stage’s top. You can do this manually too, by entering zero as the rectangle’s X and Y coordinates, as is shown in the screenshot above. Your rectangle should look and be positioned like this at the end:

You will now proceed to make a symbol out of this rectangle — a movie clip that will contain all the elements of both the menu and the preloader.

Creating the white stripes menu background

5 Select the rectangle with the Selection tool (V) and choose Modify > Convert to Symbol. In the Convert to Symbol window, enter menu as the Name (see 1 below). select Movie clip as Type (see 2) and choose the upper left little rectangle as the Registration point (see 3). Click OK.

Selecting this particular Registration point is good if any menu positioning will be made via ActionScript later. Although there won’t be such code present in this tutorial, this choice is good for the majority of your Flash projects, so make it a habit.

6 Double-click on the newly created menu movie clip on the stage (do it with the Selection tool) to enter inside it. If you look at the top of your document, above the layers, you can see that Flash always keeps you informed of your current whereabouts. Your inside the menu movie clip symbol now.

7 Call the first layer blue background and lock it. Make a new layer above it and call it stripes.

8 Select the Rectangle tool (R) and change the fill color to any one that is in good contrast with the white document background and the blue rectangle drawn previously. I picked orange. Next, draw a 5 by 48 pixel rectangle anywhere on the stage.

9 Select the Paint Bucket tool (K). Go to the Color Mixer panel — it is usually open by default, if not, simply select Window > Color Mixer to acces it. Select the following options and adjustements (the numbers on the list correspond to those in the screenshot):

1. Click on the paint bucket icon to select the Fill color.
2. Choose Linear as Type.
3. Click and drag the small color rectangle that is on the left side of the gradient strip a little bit towards the center.
4. Make sure that the Alpha property (transparency) for this color is set to 100%.
5. The rectangle’s color should be set to white — the hexadecimal code for it is #FFFFFF.
6. Click on the second rectangle and set its color to white too, but change its alpha property to 0% (completely transparent).

Now you have a nice linear gradient that fades from pure white to complete transparency.

10 Still using the Paint bucket tool, press and hold Shift on your keyboard, click somewhere near the bottom of the rectangle that you made in step 8 and start dragging your mouse upwards. When you reach the rectangle’s upper edge, release your mouse.

Note: I have zoomed in on the rectangle to be able to work more precisely. The screenshot below shows the filling process while the zoom is set to 200%.

You have successfully filled the rectangle with the linear gradient. But it seems that the rectangle has disappeared completely? No sweat, it is still here, but since the gradient fill is essentially white, this can’t be discernible on your document’s white background.

11 Select the Selection tool (V). Click and drag on the stage around the area where your rectangle is supposed to be and you’ll quickly make it visible.

12 Move the small gradient rectangle and place it over the blue rectangle either by dragging it with the Selection tool (V) or by using the arrow keys on your keyboard.

13 Select the Free Transform tool (Q) and turn on the Snap to Objects option in the Tools panel: .

14 The handles for transformation and manipulation should appear on your rectangle if it is still selected. If not, just click on it with the Free Transform tool and they’ll show up. Do the following:

1. Place your cursor near the upper right handle until you see a circular arrow appear — you can see it in the second image in the sequence below.
2. Click and start rotating your mouse clockwise. Your rectangle will begin to snap to precise values — it will do so every 15 degrees. Release your mouse at athe second snap, when the rotation has reached 30 degrees, as seen in the image below.

15 Choose the Selection tool (V) and click on the rotated rectangle to select it. You should place it now near the registration point of the menu movie clip (you’re still working inside the menu movie clip, remember), by entering zero as its X coordinate and 11 as its Y coordinate.

16 Now, while it is still selected, copy the rectangle shape by pressing Ctrl+C. Press Ctrl+Shift+V (or select Edit > Paste in Place) to paste the new copy of the rectangle exactly over the original. Don’t click anywhere or you’ll unselect it and the two shapes will merge. Just follow the next step.

17 Press and hold Shift and click the right arrow key on your keyboard once. This will move the shape by 10 pixels exactly. Release the Shift key. Now press the right arrow key five times. This will move the shape further by 5 pixels. Finally, the copy of the rectangle will be placed at the distance of 15 pixels from the original one.

18 Repeat this process until the white stripes cover the whole of the blue rectangle area. Make sure that there are a few stripes outside the blue area, both on the left and right.

You can make this task easier for yourself by selecting both stripes, then copying, pasting and moving them to the right distance. After that, select the four stripes and so on. This will cut down your copy-paste-move work significantly. Here’s how your final result should look like:

On a sideline note, if you need stripes like these as an image, make sure to check out the great background stripes generator. You may even import the image directly into your Flash file. It will be a little bit heavier, but you will cut down the design time.

Animating the white rectangular stripes

19 Use the Selection tool (V) to select all the stripes. Just click and drag to encompass all of them.

20 Select Modify > Convert to Symbol (shortcut key: F8). The symbol should be a Movie clip and the registration point the same as before. Call this movie clip stripes and click OK.

21 Right-click on frame 23 in the blue background layer and select Insert Frame from the context menu.

Your timeline should now look like this:

Why was this made? Because the blue background layer should last as long as the animation, which you are going to make now.

22 In the stripes layer, right-click on frame 23 and select Insert Keyframe from the context menu.

In the previous step, you have inserted a frame, because you just prolonged the duration of the background — the time span during which it is visible. Here, you are inserting a keyframe because you are going to animate the stripes. So, whenever a change must occur in the timeline, a keyframe is being inserted.

Here’s how your timeline should look like now:

23 You will now move the stripes movie clip in this keyframe. Select the stripes movie clip by clicking on it once with the Selection tool (V).

Move the stripes movie clip 14 pixels to the right either by pressing the right arrow key fourteen times or by holding Shift, clicking the right arrow key once and then releasing Shift and pressing the right arrow key four times.

You can also do this by entering the right coordinates in the Property inspector. The initial horizontal position (its X coordinate) of the stripes movie clip in my case was -60, so the new one is -46. This may differ for you, depending on the width of your stripes movie clip. The important thing is to move it by 14 pixels to the right.

24 Now right-click anywhere between the two keyframes on the stripes layer and select Create Motion Tween from the context menu.

Your timeline should now look like this:

25 Test your movie by selecting Control > Test Movie or pressing Ctrl+Enter. You should have a seamless animation. Below is the example which shows the animated stripes moving properly and also how they look like when the animation isn’t done correctly.

In the example where the animation is flawed, the stripes “jump” just because they were moved only 12 pixels to the right instead of 14. Yes, even a pixel or two make a huge difference when delicate and precise animations in Flash are being created.

So, if you happen to have the same “jump” in the animation as the example shows, just move your stripes movie clip in the 23 frame by 1 pixel either to the left or to the right and then test your movie again. If the animation plays even worse then before, then you must move the movie clip in the opposite direction. Play around with it until you get it right.

Also, remember that the 14 pixels by which the movie clip was moved in this example isn’t an absolute value. This is just fine for this animation. You will create many more animations in your Flash explorations and work, which will all have different settings and parameters that you will need to tinker with to get them right. That’s the beauty of learning and working — everything becomes easier with more practice and each time you learn something new .

Masking the animation

The stripes’ animation that indicates some content is loading is fine in this example — it does not spill over the visible edges of the menu. But what if the menu were smaller than the stage or if you had some colored background for your movie? Then the stripes would protrude from the menu and that would look bad. There is a really simple solution that will ensure that the stripes stay visible only inside the blue background area — a mask.

26 Lock the stripes layer and unlock the blue background layer.

27 Click on the big blue rectangle with the Selection tool (V) to select it. Then press Ctrl+C to copy it.

28 Lock the blue background layer. Make a new layer above the stripes layer and call it mask.

As you can see, a frame has automatically been added to frame 23 of the new layer, to last as long as the ones below it. This is exactly what you need, because the lifespan of the mask in the timeline must be exactly long as the content below it that is going to be masked — the stripes animation in this case.

29 Select Edit > Paste in Place to paste in place the big blue rectangle here.

If you want, you can change the color of the rectangle in the mask layer, just so that you know this is the mask and not the blue background when editing or modifying your Flash document later. You can do this without any worries, because a mask is invisible.

30 Lock the mask layer. Next, right-click on it and select Mask from the context menu.

As you can see on the screenshot below, the stripes layer has automatically become the masked one. The two green icons indicate the mask and the maskee.

You can test your movie if you want now (Ctrl+Enter). You will not see an apparent change. But, as I said, if you had a dark background for your movie, the stripes would not be seen outside the menu, thanks to the mask.

Making the buttons for the menu

31 Make a new layer and call it buttons.

32 Select the Rectangle tool (R). Draw a 88 by 22 pixel borderless rectangle. As you know by now, you can set these dimensions directly in the Property inspector. Use any color you like for the fill, for now.

I have hidden the mask and stripes layers so that I can work more easily, and I recommend that you do the same until you have finished creating this button.

33 Select the Paint bucket tool (K) and go to the Color Mixer panel. You will make a linear gradient now, following the same procedure described in step 9 of this tutorial. Choose the Linear type for the fill, like you did before.

Select a hue of yellow for the color on the left (I used #FFDA39) and an orange hue for the color on the right side of the linear gradient (my choice was #F49302). Both color should have their Alpha properties set to 100% (complete opaqueness). These colors will make an excellent effect when placed against the blue background of the menu.

34 While holding down Shift vertically fill the rectangle with the Paint bucket tool, so that the yellow comes on top.

35 Select the rectangle and press F8 to make a symbol out of it. Pay attention: this time, select Button as type. Call it home and click OK.

36 Double-click on the newly made button symbol on the stage with the Selection tool (V) to enter inside it. As you can clearly see thanks to Flash, you are inside the home button which is itself nested inside the menu movie clip.

37 Select the yellow-orange rectangle inside the button. Press F8 to make a symbol out of it. This time, select Graphic as type, call it button background and click OK. This symbol will be the base for all the buttons that are going to be a part of the menu.

38 Right-click on the Hit frame of the first layer and select Insert Frame from the context menu.

39 Lock this layer and call it background. Make a new layer and call it label.

40 Select the Text tool (T). In the Property inspector, make the following choices:

1. Choose Static text.
2. Pick any font you like. Hint: for this menu, sans-serif fonts look really nice .
3. Choose a big enough size for the font.
4. Select white for the color.
5. In the menu that defines how the text will be rendered, choose Anti-alias for readability. Since the buttons won’t be animated, this is a good choice.
6. Lastly, the Selectable options must stay turned off.

41 Click somewhere over the rectangle and type “HOME”. Hit Esc to exit from the text field and center it over the rectangle either by using the arrow keys or the Selection tool (V).

42 Lock this layer and make a new one above it and call it rollover.

43 Select the Rectangle tool (R) again. Pick a strong red hue for the fill color (I used #D9090E). The Stroke color should stay blocked. Draw a rectangle that is 4 pixels high and slightly wider than the label on the layer below it. Center it below the label.

44 In the rollover layer, click on the keyframe in the Up state and drag it onto the Over state.

45 Right-click on the Hit state’s frame and select Remove Frames from the context menu. Repeat this for the Down state. Your button’s timeline should look like this in the end:

Test your movie (Ctrl+Enter). Roll your mouse over the button and the red rectangle that underlines the label will appear, and disappear once you place your cursor outside the button.

Top of page

Making the remaining menu buttons

46 Open the Library by selecting Window > Library. Inside, all the symbols that you have made so far are stored.

47 Find the home button that you have just completed. Right-click on it and select Duplicate from the context menu.

48 In the Duplicate Symbol window that will show up, type in services as the new symbol’s name, leave the Button type and click OK.

49 Double-click on the services button symbol’s icon in the Library to acces the symbol’s timeline.

50 Once inside, unlock the layer label and select the Text tool (T), then click on the text field and replace the text “home” with “services”.

Press Esc to exit the text field and center it in relation to the background rectangle if necessary.

51 Lock the layer label and unlock the rollover layer. Go to the Over frame and click on the thin red rectangle to select it. In the Property inspector, change the rectangle’s width (the W field found on the left side of the panel) to about 55-60 pixels so that it is a little bit larger than the button’s label. Center it.

52 Repeat the steps 47 through 51 three more times, so that you have five buttons in total. Call the remaining three buttons “products”, “quality” and “about us”, or whatever you deem appropriate for your website.

53 Once you have completed all the buttons, click on the Scene 1 link on the top of your document window, no matter which button you are currently inside in.

Finalizing the menu buttons

54 Use the Selection tool (V) to double-click on the menu movie clip to enter inside it. The buttons layer should be unlocked from before.

55 Drag all the four buttons from the Library into the buttons layer and arrange them properly.

56 Select the first button, home. (Click on it once, not twice, because you don’t need to enter inside it, just select it.)

57 Go to the Property inspector and find the Instance name option on its left side. Type home_btn inside it and hit Enter to confirm that.

58 Repeat the previous step for all remaining buttons: call them services_btn, products_btn, quality_btn and aboutus_btn.

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:

1. Change the type of the field to Dynamic text.
2. 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 !
3. Increase the font size a little bit. The font size I chose for the buttons was 14, and here it is 16.
4. Use the white color for the font, but turn its Alpha to 100%.
5. Select the central alignment.
6. You can keep readability as the Anti-alias option.
7. The Selectable option should stay turned off.
8. 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.

The ActionScript code behind the menu preloader system explained

The first line of ActionScript,

menu_mc.stop();

Stops the menu_mc movie clip from playing. Every timeline animation in Flash plays automatically, so you have to stop it via ActionScript if you don’t wish for it to start moving. The animation inside the menu_mc are the white stripes that you made earlier.

Next, the section variable is defined, which will store the name of the section that must appear once the user has clicked on the appropriate button. This is a text value and text values are called Strings in ActionScript, as in most programming languages. You are just defining the variable here, values will be added later.

var section:String = new String();

Four more variables are defined next:

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;

All these variables are of the MovieClip type. You are not creating new movie clip instances here, you are merely making shorthand names for existing movie clips that you have created earlier. This is just to make your life easier — to reduce the amount of typing that has to be done.

Look at this example: let’s say that you need to reference the menu_mc movie clip from within the homecontent_mc movie clip. In that case, you would have to reference it like this:

this._parent._parent.menu_mc

That is a pretty long reference, although valid and completely correct. You would have to write it like that, because the homecontent_mc is itself inside content_mc, its parent movie clip (_parent), which is in turn on the main timeline (_parent), on which the menu_mc resides. And this reference path changes for every movie clip.

So, instead of having to figure out the path each time (and pay attention that it is the correct one), it is much simpler to store the reference to each movie clip that you need inside a variable, like this:

var startSection:MovieClip = content_mc.homecontent_mc;

And that’s just what the four variables mentioned above serve for: easy referencing of movie clips. Any time that you mention the variable menu, for example, inside your code, Flash will instantly know that you are referring to the movie clip menu_mc which is situated on the main timeline. Cool!

The next line of code,

percentageDisplay._visible = false;

Serves to hide the movie clip with the dynamic text field on a white transparent background inside it. This is reasonable: why should the preloader be visible if there is no loading in progress? And there actually is no loading process at the beginning, until the moment a button is pressed by the user.

The percentageDisplay variable is a reference to the loadinfo_mc movie clip which was defined a few lines of code before. By setting its _visible property to false, you are effectively hiding it from the view.

Using a MovieClipLoader object with a listener to preload external Flash content

The preloading system shown in this lesson uses a MovieClipLoader object for external content preloading (in fact, to be exact, this is an ActionScript class, but I won’t delve into that here, for the sake of brevity and simplicity. I will leave that for another tutorial). This object is very useful, because it has built-in methods and properties for preloading that are great, and it can be used to load external SWF files, as well as JPEG, GIF and PNG type of images. It can even load progressive JPEGs and animated GIFs.

So, the first line of this section of code creates a new MovieClipLoader object and stores it in a variable that I chose to call loader.

var loader:MovieClipLoader = new MovieClipLoader();

Next, a listener object is associated with the loader MovieClipLoader. This is done by first writing the instance name of the MovieClipLoader object, which is loader in this case, followed by a dot (.) and the addListener method. Between the parenthesis of this method is the name of the listener object.

A listener object can be a completely new, custom object, created specifically to be a listener, or any existing movie clip. Since the main timeline (the root timeline) in Flash is also considered to be a movie clip, I chose to use it as the listener. The main timeline is referenced here by the ActionScript keyword this. This keyword points to the timeline or movie clip it is placed upon. Since the ActionScript code in this lesson resides on the main timeline, it refers to it directly.

loader.addListener(this);

Let me explain you now in more detail how the MovieClipLoader works together with a listener:

First, you need to have an empty movie clip into which the external content will be loaded. You already did that, when you created the empty movie clip back in step 78 of this tutorial (you called it placeholder_mc, remember).

Then, an instance of the MovieClipLoader object is created (see above).

Next, a listener object is either created from scratch or an existing object (the main timeline in this example) is used as a listener. The listener will listen to what MovieClipLoader does. You can think of it as a small radar that watches the MovieClipLoader object, which broadcasts events to it (it tells the listener that things are happening).

Once things start happening, for example, the MovieClipLoader begins to load external content, and fetches the amount of it that has been loaded so far, etc, the listener will notice this, since it is listening to it. And when it notices these events, it will react by executing the appropriate functions.

Important: for the listener to be able to react properly, these functions must be defined before you tell the MovieClipLoader object to start loading external files. There are two functions that are being used in this lesson’s preloader: onLoadInit and onLoadProgress. Let me clarify them for you, one at a time:

The onLoadInit function is invoked (called) once the external file has been completely downloaded onto the user’s computer from the Web and is ready to be shown, manipulated, etc.

function onLoadInit(externalSections:MovieClip) {
menu.stop();
percentageDisplay._visible = false;
}

The parameter between the onLoadInit function’s parenthesis is a reference to the movie clip into which the external content is being loaded. This is the empty movie clip that is referenced by the externalSections variable in this example.

In this example, I made the following things happen once the external content has been completely loaded: the stripes inside the menu will stop moving:

menu.stop();

…and the movie clip with the dynamic text that shows the percentage information during the loading process is being made invisible:

percentageDisplay._visible = false;

Basically, all the things that are visible during the loading process are hidden once the download is complete.

Both event handler functions used here that are associated with the listener, onLoadInit and onLoadProgress are not written with the name of the listener preceding them, and they should. Why? Simply because they are placed on the main timeline, which is the listener in this case.

Had that not been the case, for example, if the menu_mc movie clip were the listener, you would have to write them like this:

menu_mc.onLoadInit… etc

menu_mc.onLoadProgress… etc

But, since the root timeline is assigned to be the listener, you just write the keyword function and everything’s just fine. You don’t even have to use the keyword this.

Next, the onLoadProgress function is used to monitor the loading process. Every time a piece of external file has been downloaded to the user’s computer, the loader MovieClipLoader object tells this to the listener, which reacts by calling the onLoadProgress function.

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+"%";
}
}

The onLoadProgress function accepts three parameters:

The first one, externalSections, just like in the previous function, is a reference to the empty movie clip into which the external content gets loaded.

The second one, loaded, is the number of bytes that have been downloaded to the user’s computer so far. This value gets updated each time a new piece of data gets downloaded — that’s why this function is great for monitoring the progress of a download. This happens automatically, meaning that there is no need for you to tell Flash to look it up or explain to it what is the loaded parameter. It knows immediately that the second parameter refers to the amount of bytes loaded so far. Also, you can call it as you like: I picked loaded because it seems nice. You can also call it loadedbytes, downloadeddata or anything else that seems right to you.

The third one, total, looks at the total size of the external file that is being loaded, the value of which is expressed in bytes, just like it was for the previous parameter.

And now, let me show you how this function makes the preloader actually work. Inside the onLoadProgress function there is an if conditional statement. All the code is included inside it. This means that it will get executed only and only if the condition turns out to be true. Let’s see this condition. It says that:

if (section != "home")

Which, translated into English means if the section does NOT equal “home” the condition will be true. This is made with the use of the inequality operator (!=), which compares the two values to see if they do not match.

In this example, this means that only when the value of the variable section does not equal “home”, the code between the conditional statement’s curly braces will be executed. I have made this on purpose, to be able to start the preloader only when a button which triggers the loading of an external SWF file has been clicked. The section variable has been defined at the beginning of the ActionScript code, while its value is set only when a button has been clicked. Remember that the onLoadProgress function has to be defined now, so that Flash can know what to do when ordered to load an external file via the MovieClipLoader object.

So, the preloader won’t start if the Home button has been clicked, because the content for the “home” section is already incorporated in the main movie — it is not stored in an external SWF file, like the other sections are.

And when a button other than “home” has been clicked, the code inside the if statement gets executed:

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+"%";

The first line makes visible the movie clip which holds the externally loaded SWF (externalSections._visible = true;). You have to make it visible here, because it was hidden initially. Next, the “home” section is made invisible: startSection._visible = false. These changes have to be made, so that the initial content (”home”) does not visually interfere with the other sections’ content.

The third line makes the preloader movie clip visible (the one with the text field inside it): percentageDisplay._visible = true.

The fourth one gets the stripes moving, to further add to the loading effect: menu.play();.

And now you have two lines with some simple mathematical calculations that enable you to show the amount of the external SWF loaded so far, expressed as a percentage:

var percent:Number = Math.floor(loaded/total*100);
percentageDisplay.infodisplay_txt.text = "LOADING: "+percent+"%";

The value of the percent variable is calculated by Flash like this: the number of bytes loaded so far are divided by the total number of bytes the file has and then multiplied by 100 (loaded/total*100). The result is then rounded with the Math.floor method, which rounds the resulting number in the parenthesis to the lower whole number. For example, if the number is either, let’s say, 43.1, 43.8 or 43.5, it will always be rounded to 43. This is used to display a neat whole number in the text field, without any trailing digits.

And then you order Flash (see second line of code above) to display that number in the infodisplay_txt text field, along with the word “LOADING” and the percentage sign (%). Simple, isn’t it? No rocket science .

And now you’ll see how this process gets started, once the user has clicked a menu button.

The ActionScript behind the buttons’ functionality

All the buttons in this project are set up so that they react to the onPress event. This event happens when a user clicks on a button — immediately when the mouse button is pressed, without having to be released. And so, each button has its onPress event handler function set up that is executed as soon as the click happens: the code inside the function (the one included between its curly braces) is the one being run.

I will first explain to you how the “Home” button works, since this particular button has a different functionality then all the other menu buttons. The main difference being that the “Home” button doesn’t start the loading of external content.

menu.home_btn.onPress = function() {
menu.stop();
percentageDisplay._visible = false;
section = "home";
startSection._visible = true;
externalSections._visible = false;
};

The first line inside the function stops the menu animation (the white stripes): menu.stop(). This is done so that they stop moving if the “Home” button was pressed when some external content was loading. This means the case in which the user has pressed any other button and the external content started to load, and the preloader/stripes animation kicked in. So you have to stop it once the “Home” button was clicked.

After that, the textual preloader has to be made invisible:

percentageDisplay._visible = false;

And the section variable’s value is set to “home”:

section = "home";

The last two lines of code make visible the movie clip which holds the “home” section’s content and invisible the one which serves as the placeholder for the external content:

startSection._visible = true;
externalSections._visible = false;

All the remaining buttons have the exact same functionality, only with a different parameter that is set up inside them. Let’s have a look at the “services” menu button, for example.

menu.services_btn.onPress = function() {
section = "services.swf";
loader.loadClip(section, externalSections);
};

The first line inside the button’s onPress event handler function defines the value of the section variable:

section = "services.swf";

This value (services.swf in this case) has a dual purpose: it is the name of the external SWF that will be loaded, and it also sees that the loading actually starts, because, if you remember, the loading process will start only if the section does not equal “home”:

if (section != "home")

This was defined in the onLoadProgress function before.

And now, the actual loading is triggered by calling the loadClip method of the loader MovieClipLoader object:

loader.loadClip(section, externalSections);

The loadClip method can be used to load external content, namely these kinds of files: SWF, JPG (both non-progressive and progressive, as of Flash Player 8), GIF (ordinary and animated ones) and PNG.

The first parameter inside the loadClip method’s parenthesis is the name of the external file that has to be loaded. Here, it is a variable: section. Its value was defined a moment ago, in the previous line of ActionScript code. When you are using a variable, you write the variable’s name, without the quotation marks. If you are referring to a file name directly, you must use the quotation marks, for example:

loader.loadClip("mycontent.swf", externalSections);

This can also be a path, for example:

loader.loadClip("myflashfiles/mycontent.swf", externalSections);

I have avoided storing the sections in a separate folder and thus didn’t need to use a path to the sections’ files, just for the sake of simplicity. However, there is an important thing that you should be aware of:

The second parameter is the empty movie clip into which the external content will load, which is externalSections in this example (a reference to the placeholder_mc movie clip).

And as soon as Flash reads this last line of code, the MovieClipLoader object and the listener spring to life, making the preloader work. All the other buttons work exactly the same, the only difference being the value of the section variable.

There remains one thing to be done: create the preloader for the main movie.

Adding a scene for the main preloader

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.

Creating the main Flash website preloader

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!

Conclusion

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.

Related posts:

1. Flash Tutorial – Top Bluish Preloader
2. Design a mirror website flash navigation menu
3. Glowing neon playback control buttons
4. Glowing neon playback control buttons
5. How to make an amazing button in Flash using ActionScript only

 Print This Post