Please support lukamaras.com website:
All my tutorials are free, while hosting costs money.
The most viewed tutorials in April:
After finishing the part of the menu that will server to navigate through your Flash site, you are going to create the menu's mirrored reflection.
26. Select all of the buttons on the stage. Do this with the Selection tool (V). Click somewhere outside the buttons (for example, on the top left of the menu) and drag your mouse to encompass all of them.
27. Copy the buttons (Ctrl+C) and paste them in place (Ctrl+Shift+V).
28. While holding Shift press the down arrow 3 times to move the copies down 30 pixels from the original symbols.
Release the Shift key and press only the down arrow key five times. You have moved your button copies exactly 35 pixels downwards.
If you followed the dimensions I gave you at the outset of this tutorial for creating your buttons, the copies will be now spaced just a few pixels from the originals. This will make for a nice and more realistic mirror reflection effect. Also, you don't want to move your mirrored buttons too far from the real menu, to save space.
29. Keep the copies you just moved down selected. Select Modify > Transform > Flip Vertical.
You have just made a mirror reflection of the menu. Now ain't that easy? Sure it is :) But let's give it a more realistic look.
30. You must have your reflection buttons still selected. In the Properties panel, click on the Filters tab (1 in the image below).
Then click on the little blue plus icon (2) and select the "Adjust color" blending filter. The controls for adjusting the colors of your buttons will appear.
By dragging their respective sliders to the left, set the Brightness to -18 and Saturation to -36. Or just enter these values manually in the appropriate fields. Leave the other two values (Contrast and Hue) at zero.
31. Click on the Properties tab (right next to the Filters tab you clicked in the previous step). Select Alpha from the Color menu and set it to 41%.
32. Lock the current (menu) layer. Create a new layer between the two existing ones and call it blue background.
You will draw a blue gradient here. This will make your navigational header look more realistic and beautiful. Since you already have a sky-like graphic behind your menu, it makes sense to create a reflection of it too.
33. Select the Rectangle tool (R). Block the outline color and select a fill color that is in good contrast with the existing graphical elements. You are doing this only to draw and position your rectangle more easily. You will change its color to a gradient later.
Draw a rectangle that 48 pixels high. The width isn't important - only make it the same size as the scene or wider than that.
It is important to place the rectangle so that its upper edge is between the real buttons and their reflections.
Unselect the rectangle by clicking on an empty part of the scene with the Selection tool (V).
34. Go to the Color Mixer panel, click on the paint bucket icon to adjust the fill color (and not the outline - the pencil icon - just in case it is selected by default). Select Linear as fill type. Make the following choices for your gradient:
The first color (little square on the left) should be set to #B6E2FA and the second to #78B0E9. Leave the alphas for both colors at 100%. Leave the left color on the gradient's left edge and move the right one a little bit inside (just click on the quare and drag it).
This gradient is just a little bit different from the one you made in step 4.
35. Select the Paint bucket tool (K), click on the rectangle's bottom edge and start dragging upwards to make a vertical fill. In this way, the darker color will be at the top.
You don't have to make the exact mirror copy of the sky beneath the menu buttons. What you're making now will look very nice and interesting.
36. Select the rectangle and copy it (Ctrl+C). Lock the current layer (blue background).
37. Make a new layer above all the existing ones and call it overlay.
38. Paste in place (Ctrl+Shift+V) here the rectangle you just copied.
39. Go back to the Color Mixer panel and make the following gradient: you must have four color squares. Add a color square just by clicking anywhere between the two existing ones.
All the squares should have their color set to pure white (#FFFFFF). But their alphas should have the following percentage values (from left to right): 100, 79, 50 and 28.
Drag the squares so that they look like shown on the image below.
Lock this layer.
Now isn't this a nice menu with its mirror reflection below it? Sure it is :)
Before making your menu functional via ActionScript, you must first make place for the different sections of your site, which is exactly what you will do in the next few steps. Onward!
40. Make a new layer on top of the existing layers and name it site content.
41. Right-click on frame 5 of the newly made layer and select Insert Keyframe from the menu.
42. Draw any kind of content here. Paint something with a brush, make a circle, anything at all. This is just temporary dummy content. Don't lose time on making real content now, you will do it later. Follow through to the end of this lesson, it is easy to make changes later.
43. Repeat the previous step 3 more times: right-click on frames 10, 15 and 20, select Insert Keyframe from the menu and insert some kind of dummy content there.
You can draw over the existing content or erase it and make something new. I am telling you this because when you insert a keyframe into a layer, Flash automatically copies the content from the previous one, if there existed something.
44. When finished, go back to the first keyframe of this (site content) layer by clicking on it (standard left mouse click). Create some content here too. Write "home" or draw a house :)
Your timeline should now look like the one shown on the image below.
45. Lock this layer and make a new one above it and name it labels.
46. Click on the first (and only, so far) keyframe of the labels layer to select it. Go to the Properties panel - you'll find the "Frame label" input field on its left side.
Click inside it, type home and hit Enter to confirm.
47. Still in the same layer, right-click on frame 5 and select Insert Keyframe from the menu. Do this again for frames 10, 15 and 20. Your upper two layers should have keyframes in exactly the same places.
48. Click on the frame number 5 to select it. Go again to the Properties panel and give it a name: gallery. Repeat this for the remaining three keyframes (10, 15 and 20): call them music, links and contact, respectively. All these frame labels will be visible on the timeline.
Lock this layer.
49. Right-click on frame 20 of the overlay layer and select "Insert Frame" from the menu (not Insert Keyframe).
This will make this layer's content appear throughout your flash site. If you don't this, these contents will only be visible on the first keyframe, at the beginning.
And of course, all the other menu elements must be visible throughout the timeline. So make this for each of the remaining layers: menu, blue background and sky.
Below you can see the final look of the timeline.
Now that the site's navigation system is in place, you will name your buttons (all of them) so that you can issue them commands programatically later.
50. Unlock the menu layer. Select the Selection tool (V). Click somewhere on stage to unselect anything and everything that might be selected.
51. Click on the first button on the menu from the left to select it (the Home button). Don't click it's reflection.Go to the Properties panel, and enter its Instance name in the appropriate field: call it homeBtn. Hit Enter to confirm.
52. Repeat the procedure from the previous step for each one of the menu buttons: call them galleryBtn, musicBtn, linksBtn and contactBtn, respectively.
The Instance names make possible to control your buttons via ActionScript.
IMPORTANT You must always give unique names to your buttons, keyframe labels and movie clips. You can't have two objects in your Flash movie which have the same name. That's why you had to call the first keyframe home and its corresponding button homeBtn. Also, remember that ActionScript is a case-sensitive programming language. If you called your button galleryBtn and later typed it as gallerybtn in your ActionScript code, your button will not function because those are two different Instance names. So, keep track of your Instance names and always type them in your code exactly as you have when you named your objects.
53. Now, select the first mirror button - the reflection of the home button (the first from left in the second row). Give it an Instance name - call it homeBtn1.
Why give Instance names to these mirror buttons? Well, precisely because their purpose is to serve only as visual elements - mirrored reflections of real menu buttons. If you left them like this, when a user moved his mouse over them, the hand cursor would have appeared. This would create a really inappropriate confusion. You must always be user-friendly! So, you are naming these mirrored buttons to turn them off later via ActionScript. Once you are going to do that, they won't function anymore, and will just be graphical elements, which is what you want to accomplish!
54. Give Instance names to all the other mirrored menu buttons: call them galleryBtn1, musicBtn1, linksBtn1 and contactBtn1.
55. Lock this (menu) layer. Create a new layer above all the others and call it actions.
56. Click on the first (and only) keyframe of the new actions layer to select it.
57. Open up the Actions panel (Window > Actions). Write the following line of code inside:
stop();
This simple command stops your movie from going on and looping endlessly.
Now, I want you to do a little test. Test your movie (Control > Test Movie). Move your mouse accross the buttons and their reflections (mirrored buttons). As you can see, the hand cursor will appear over both the menu and its mirror image. And you don't want that, so now I am going to show you how simply it is to disable these buttons.
58. Write this piece of ActionScript just below the first line you entered in the previous step:
homeBtn1.enabled = false;
galleryBtn1.enabled = false;
musicBtn1.enabled = false;
linksBtn1.enabled = false;
contactBtn1.enabled = false;
Test your movie again (Ctrl+Enter on a PC, Cmd+Enter on a Mac). Move your mouse over the reflection buttons. As you can see, there's only the standard arrow cursor now - the hand cursor doesn't appear anymore. You can even try clicking on them - nothing will happen.
Yep, it is that simple! The enabled property of the button symbol can have two values: true or false. By default, it is set to true. So when you set it to false, the button is visible, but doesn't function any more - it cannot be clicked, even if you tell it to do so via ActionScript. The button stays disabled until its enabled property is set to true again (of course, you'll leave it at false for the reflected buttons).
59. Append your code with the following lines (again, just put it after the existing code):
homeBtn.onRelease = function():Void {
gotoAndStop("home");
}
galleryBtn.onRelease = function():Void {
gotoAndStop("gallery");
}
musicBtn.onRelease = function():Void {
gotoAndStop("music");
}
linksBtn.onRelease = function():Void {
gotoAndStop("links");
}
contactBtn.onRelease = function():Void {
gotoAndStop("contact");
}
Test your movie (Ctrl+Enter). If you did everything exactly as i wrote up to this point, you should be able to navigate your site. Click on the menu buttons and see for yourself! Easy navigation, isn't it?
First, I want to explain you why you named the frames. Using frame labels (like gallery for example) instead of a frame number (5) has one practical benefit:
If you ever change your site contents by moving the keyframes or inserting new ones, all you have to do is move the frames with labels so that thay stay above their corresponding content keyframes. There is no need to go back to your ActionScript code and rewrite or change the numbers.
Now let's see how the code for the buttons works. I will explain the code functionality just for one of the menu buttons, because they are basically all the same - only the button Instance name and the frame label change.
homeBtn.onRelease = function():Void {
gotoAndStop("home");
}
The first line,
homeBtn.onRelease = function():Void {
says that a function is assigned the onRelease event for the homeBtn button. The onRelease event happens when a user clicks and releases his mouse over the button.
If you want you can put the onPress event here instead, that happens immediately when a user has just pressed his mouse over the button. But that event is more likely to be used in games, when something has to happen immediately when the mouse has been pressed - like a spaceship shooting, for example. I like to assign the "standard" (onRelease) click for the buttons, menus and various other kinds of website interfaces.
So, once the onRelease event has happened, a function gets executed. You certainly noticed the :Void keyword after the function() keyword. This means that the function in question does not return a value. In many cases, a function in ActionScript has to return a value. Look at this example:
function mySum():Number {
var a:Number = 3;
var b:Number = 4;
var sum:Number = a+b;
return sum;
}
This function calculates a sum of two variables' values. The last line tells to return the value of sum to whatever object that called the function. So that's why the :Number keyword after the function's name. It states that the value returned by this particular function will be a numerical one and not a text value or any other.
So, in the case of your menu button, the type of value that the function returns is Void. This means nothing, zero - the function does not return any value, it just serves to advance the playhead to a particular frame on the timeline.
And just what is it that gets run when the function is executed? Everything between its curly braces - { and }. Here it's about just one line of code:
gotoAndStop("home");
This line tells Flash to jump to the frame which is labelled home and stay there. That's all there is! Simple! Just one more thing, however: if you wanted to insert a frame number instead of a frame label here, you must do it without the quotation marks. Like this:
gotoAndStop(1);
Fine. Before wrapping this tutorial up, just read some advice below.
You have seen how to make a slick menu. However, always keep in mind your site (or your client's site) users. The user is king. If a site happens to be difficult to navigate and counter-intuitive, the most beautiful and appealing graphics and design won't help.
In fact, what is often overlooked, is that the design inolves thinking and responding to your users' needs. Make a button look like a button - this doesn't mean it has to look ugly or too similar to a real-world button. There many, many examples of beautifully designed navigation interfaces and menus who are also intuitive and easy to use.
You know that the reflection buttons you made in this lesson are real button symbols. The user sees them as a nice graphic element only, which is exactly how it should be.
Usabilty is a science in itself, that applies equally to HTML and Flash websites. HTML is simple, and yet there are many things you have to think about when building such a site. When confronted with all the powerful and rich possibilities that Flash has to offer, this just gets more complicated. When you have a myriad of possibilites for design and developement, don't get overwhelmed and think that you must try and implement every single great gizmo in your Flash website. Be nice to your users and they'll like your site :)
NOTE: You can download the source files for this lesson below. The second link is for downloading the example which has animated clouds running in the menu background!
Download the zipped source FLA file for this lesson.
Download the source for the example with animated clouds behind the menu.
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!
