You will learn to create one of the most widely used web site navigation
interfaces in this lesson: the tab menu.
Before starting to design, click on the menu tabs of the two examples below
to see what you'll be working towards.
Drawing the basic tab shape
1. Open a new flash document (hope this sounds familiar to
you by now :). If you are working in Flash MX 2004 or Flash 8, go to
File > Publish Settings. Click on the Flash tab, and select
Flash Player 6 in the version menu, then select ActionScript 1.0 in the
ActionScript version menu. Click OK.
2. Select the Rectangle tool (R). Block the
Stroke color in the Color part of the Tool panel by clicking the little middle
icon on the bottom.
3. Click and start dragging on stage. While holding the
mouse button down, press the Down arrow key, to start making
the corners of the rectangle round.
Make the rectangle about 100 pixels wide and 30 pixels high (select it and
enter the dimensions in the left side of the Properties panel, below the
stage).
4. Now, draw a second rectangle on stage, but hold the
Up arrow key while dragging, until the corners are completely
sharp. Make this rectangle less wide but higher than the previous one.
5. Place this rectangle below and to the right of the first
one. Select both rectangles. Open the Align panel (Ctrl+K).
Make sure that the Align to stage button is turned off (1 on the image below).
Click Match width (2). Click Align left edge (3).
Your result should be looking like the one below.
6. Select the lower rectangle and move it up with the
Up arrow key, holding Shift to move it faster.
Place it so that its upper edge is placed somewhere in the middle of the upper
rectangle, where there is no curvature of the rounded corners.
7. Click anywhere on stage to unselect the rectangle. The
two rectangles will now be merged into one shape.
8. Select a lower part of the shape and hit
Delete to erase it. You have just created the basic shape of
the tab!
Making the tab movie clip
9. Select the tab shape an convert it to a movie clip symbol
(F8). Call it tab 1.
10. Double-click on the movie clip you just created on the
stage to enter inside it.
11. Call the first layer base gradient. Click
anywhere on stage to unselect the tab shape. You will now proceed to make a nice
gradient, shiny tab. If you want, you can make it with a plain color and with no
shine. The important thing is to base your choices upon the overall design of
your web site, and how the tab menu will fit into it.
But, on the other side, why not seize on the possibilities of Flash and
create something colorful and beautiful? Sure you want to, so continue with the
next step :)
12. Go to the Color mixer panel. Select Linear as type of
gradient. Double-click on the left small square situated between the thin and
large gradient stripes in the lower part of panel. Enter #003366 as color code
and hit Enter to confirm. Double-click on the right square and
write #62B0FF as color code and again hit Enter to confirm your
choice. You will now have a nice bluish gradient available.
13. Select the Paint bucket tool (K) and
fill the tab shape with a vertical gradient. To obtain a perfectly vertical
fill, hold Shift while clicking and dragging. It is important
that you don't start and end your gradient at the edges, because of the reasons
I will explain you later. So, click below the top of the tab and finish before
its bottom end.
Your result should be as follows:
14. Select the whole tab shape. Copy it
(Ctrl+C) and lock this layer. Create a new layer and call it
shine. In this layer, paste in place the shape you just copied by
selecting Edit > Paste in Place.
15. After you've done this, the shape will still be
selected, which is ok. Without clicking anywhere, go back to the Color mixer
panel. Click between two small squares to add a third one.
16. Now, place them (by clicking once and dragging each one
of them) similarly to what is shown in the image below.
17. You will now adjust the colors for the shine. Select
white as each square's color. Next, set their respective alphas as follows, from
left to right: 90%, 14% and 0%. When you double-click on a square, there is the
alpha option situated on the upper portion of the box. Or, you can click once on
each small square and adjust the alpha in the field situated just above the
colored stripe.
18. Select the Free Transform tool (Q) and
turn off the Snap to Objects option at the bottom of the Tool panel.
Select the whole shiny gradient shape. Click on a corner handle and hold
Alt while dragging inwards. Make this shape a little bit
smaller than the basic gradient on the layer below it. Zoom in to work more
easily.
19. Select the Gradient Transform tool (F)
and click on the gradient. Click on the white circle in the middle and move the
gradient center up. You should have a cool looking gradient shiny tab now.
20. Create a new layer and call it text. You can
put this layer above the current ones, or between them. If you place the
text layer between the existing layers, the shine will go over the tab
text. Again, what you will decide to make is related to the final look you want
to achieve for your tab menu.
21. Select the Text tool (T) and choose
Static text in the left part of the Properties panel. Choose white as color and
any font you like. Click and write "Home" or any other website section name that
will be a part of your tab menu in the end.
Also, be sure to have turned the Selectable option
off in the Properties panel (see 1 in image below).
Because if you leave it turned on, when a user places the mouse over the text of
the tab, the text selection cursor will appear, which in addition to it looking
lame, will think that the tab maybe isn't clickable.
Place the text in the middle of the tab by using the arrow keys. It is
important that the coordinates of your static text field are round numbers.
Check if they are in the Properties panel (X and Y). If they are not, just erase
any number after the decimal point and enter zero. You have to do this in order
to make sure that your text will render crispily. This is especially true for pixel and bitmap
fonts.
Lock this layer.
22. Unlock the base gradient layer, select the
whole shape and copy it (Ctrl+C). Lock this layer.
23. Create a new layer above all the others and call it
lines. Paste in place the shape into this layer
(Ctrl+Shift+V). With the shape still selected, choose a fill
colour (in the Colors portion of the Tool panel) that is in good contrast with
the blue hues used so far. This is only to make working easier, since you'll
delete this shape once it has fulfilled its purpose.
24. Unselect the shape. Select the Ink bottle tool
(S). In the Properties panel, select hairline as line type and
#000033 as line color. Click on the shape to give it an outline.
25. Select the two rounded corner lines and the upper line
by holding Shift while clicking. Hit Delete to
erase them.
26. Select the fill shape and erease it. I've hidden the
other layers to work more easily.
27. Select the horizontal line and cut it
(Ctrl+X).
28. Lock this layer. Make a new layer above the existent
ones and call it underline. Paste in place the line you just cut by
selecting Edit > Paste in Place.
29. Convert the line to a movie clip by selecting
Modify > Convert to Symbol. Call the movie clip
underline.
30. With the newly created movie clip selected, go to the
left side of the Properties panel and give it an instance name. Call it
bottomLine.
You will control the appearance of the menu with this movie clip later, by
showing which tab is selected.
Go back to the main scene by clicking on the Scene 1 link above the
layers.
Click once on the tab movie clip you just created.
Go to the left bottom part of the Properties panel and check that the
coordinates for the movie clip are set to round numbers. If they are not, make
them so by entering the zeros manually.
You must do this when working with detailed designs involving lines and such,
so that everything looks sharp. This is important, because the visitors to your
(or your client's) website should exactly see on what section of the site they
are. Remember, always think about usability!
31. Test your movie (Control > Test
Movie) and see if everything looks sharp and not blurred. If that is
not the case, double-click the tab movie clip and go to the lines layer
an adjust the lines a little bit by using the arrow keys and/or coordinates to
place everything so that it looks nice.
If you entered the movie clip to make adjustements, go back to the main scene
to continue building the menu.
Placing and creating the other menu tabs
32. Click once on the tab movie clip. Copy it
(Ctrl+C) and paste it in place (Ctrl+Shift+V
on a PC, Command+Shift+V on a Mac).
Now, don't click anywhere. Just hold Shift and press the
Right arrow key about 11 times to move the copy of the movie
clip to the right. Then use the Left arrow key (without
Shift) to return the tab a little to the left. Your tabs should
be placed as on the image below.
Repeat this twice, so that you have 4 tabs. Of course, you can have as many
as you want, depending on your web site structure. You can make them smaller and
less wide if you need a bigger number of sections on your site.
33. You will make the labels for each tab. To do this, you
will need to duplicate the tab 1 movie clip. So, open the Library
(Window > Library).
34. Right-click on the tab 1 movie clip symbol
inside the Library and select Duplicate. Call the new symbol tab 2 and
click OK.
35. Double-click on this newly created movie clip in the
Library to enter inside it.
36. Select the Text tool (T) and unlock the
text layer. Click on the text field to edit it. Write anything you want
- the label for a section of your site.
Hit Esc to exit the text field editing mode. Center the text
field in relation to the tab by using the Left and
Right arrow keys.
37. Repeat the steps 34 through 36 to create two more tab
movie clips, with their respective labels. When finished, you should have 4
different tabs in your Library.
38. Go back to the main scene by clicking on the link above
the layers (same as in step 30).
39. Select the second tab from the left by clicking on it ,
again, once. Go to the Properties panel and click the Swap button. The Swap
Symbol window will appear.
Select the tab 2 symbol and click OK. The tab on the stage will be
replaced with the appropriate one. Do this two more times for the third and the
fourth tab by replacing them with the tab 3 and tab 4 movie
clips.
Say, ain't this cool? Flash makes everything so easy! :)
40. Click once on the first tab from the left. In the
Properties panel, give it the instance name tab1.
Do this for the remaining three tabs. Give them the instance names
tab2, tab3 and tab4. Press Enter
each time to confirm.
Completing the menu design
Ok, you have just completed the tab menu design. You will now make some
additional graphics to make clear which tab is selected when a user clicks on
it, and some background to make the site look more compact.
41. Lock this layer (the only one on the main scene for now)
and call it tabs.
42. Create a new layer and name it color strip.
Click and drag this layer to place it beneath the tabs layer.
43. Select the Rectangle tool (R), block
the stroke color and choose #62B0FF as fill color. This is important, because it
is precisely this color that is at the bottom of the tabs, as the ending color
for the linear gradient. So, in this way, you will have visual continuity from
the tab to the rest of the site.
44. Draw a wide rectangle.
45. Click on the rectangle and check in the Properties panel
that its coordinates are set to round numbers. If they are not, make them
so.
46. By using the arrow keys, move the
rectangle up so that its top edge is just below the bottom dark blue lines of
the tabs. Look at the image below to see what I mean (you can see the detail,
zoomed in, on the right side).
47. Lock this layer. Create a new layer, on top of the two
existing ones and call it connecting lines.
48. Select the Line tool (N) and choose
hireline for thickness, and #000033 as color.
49. Draw a small line between each tab, so that it connects
each of the bottom lines.
50. Also, draw lines from the beginning of the first tab and
ending of the last tab.
Why is this done, you ask? Well, to achieve the effect of a selected tab. You
will do this in a moment, just look at the result you will obtain via
ActionScript, in the image below.
Designing the basis for the web site content
51. Make a new layer and call it content. Select
the Text tool (T). Write anything, some dummy content. You will
place real content here later.
52. Convert this text (and any additional drawings you may
have made) to a movie clip symbol by selecting Modify > Convert to
Symbol. Call this symbol site contents. Click OK.
53. Double-click on this new movie clip on stage to enter
its timeline.
54. Right-click on the frame 2 and select Insert Keyframe.
Write something different or add a drawing. Make this only to see how the menu
will function once you complete this tutorial.
Do this two more times. Right-click on frames 3 and 4 inside the movie clip
and add some content.
55. Go back to main stage. In the Properties panel, enter
the Instance name for this movie clip: contents. Be sure to enter this
name correctly: contens, not content! You may put any other name, but
be sure to continue using this name throughout your ActionScript code. Lock this
layer.
Making the menu work with ActionScript
56. Create a new layer and call it Actions. Click
on the first frame of this layer to select it and hit F9 to
open the Actions panel.
Enter the following ActionScript code inside the Actions panel:
Test your movie (Ctrl+Enter) and click on the tabs! They
will jump to foreground as you click on them and different site content will
show up!
ActionScript code behind the menu explained
Now, let me explain you how this cool tab menu actually works!
The first line stops the movie clip with the site content from playing.
contents.stop();
Then you have a variable called numberOfTabs which holds the
information about the number of tabs in your menu. This information will be used
in a moment.
numberOfTabs = 4;
Now comes the main for loop. This loop repeats as many times as
there are tabs. This is done in order to assign actions to each tab it must
perform.
The piece of code i<=numberOfTabs means that the loop will
continue to repeat as long as i, which starts with the value of 1,
is less or equal to the number of tabs. So, when i reaches 4 (it is
4 in this example, keep in mind that this value can be any number you assign it
- depending on the number of tabs you have in your menu), it is equal to
numberOfTabs value and the loop stops from repeating. The
i++ is a way to increment (increase in programming jargon)
i by 1 for each iteration (repetition).
for (i=1; i<=numberOfTabs; i++) {
OK, what is inside this loop? The first line of code is put in here to
facilitate some things. It stores a value in the line variable.
This value is the instance name of each tab movie clip of your menu.
line = eval("tab"+i);
So, when, say, the loop repeats the second time, the result of the little
operation between the parentheses ("tab"+i) is tab2.
The eval function is there to make sure that Flash knows that you
are referring to a movie clip instance name and not a simple piece of text.
Therefore, from now on, the line variable is a reference to the
tab movie clip for the current iteration of the main for loop.
So, the following line,
line.onRelease = function() {
will be read by Flash as tab3.onRelease... etc. This is the case
when i reaches 3. It will be tab4.onRelease... when
i equals 4, of course.
The statement line.onRelease = function() means that the
function which follows between the curly braces {} is assigned to
the tab's onRelease event. That means that whatever is found
between the curly braces will be executed when the mouse is pressed
and released over the tab (this is a standard mouse
click).
If you want the tab to react immediately, you should put onPress
in place of onRelease. However, this isn't really necessary. Users
click normally on tabs. They won't drag their mouses out or do some strange
interaction with the tabs. This split-second difference between
onRelease and onPress doesn't mean much, except in
Flash games.
So, between the curly braces is what happens when a menu tab is clicked on.
And here comes a second for loop. It is exactly as the first one.
It is here to make sure that it passes through all tabs.
for (i=1; i<=numberOfTabs; i++) {
Again, you have a variable (otherTabs) in which is stored, for
each iteration of the loop, the instance name of each respective tab.
otherTabs = eval("this._parent.tab"+i);
This time, however, there is a difference. The instance name resulting from
the operation within the parentheses has a different path. Say, for example,
that the loop is passing for the first time. So, you will get this._parent.tab1 as a result.
Why is this necessary? Since this loop is part of the tab's
onRelease event, this means that this code belongs to the tab. So,
by saying this._parent.tab1 you actually say to Flash that this
movie clip's (this) parent movie clip (_parent, which
is the main or root timeline in this case), has a movie clip called
tab1 situated on it. So, from now on, the otherTabs
variable points to each tab as the loop repeats itself.
Then, you say that the bottomLine movie clip (remember the
horizontal line you converted to a movie clip symbol in step 29) should be made
visible. This is done by making the _visible property's value of
the bottomLine movie clip equal true.
otherTabs.bottomLine._visible = true;
What this in reality does, is that the line on the bottom of each tab is made
visible. Why? Because when the user presses a tab, it is selected, so the other
tabs' lines must become visible, visually "sending" the tabs to the
background.
Now, the line of the tab that was just clicked is made invisible.This is done
so that this tab jumps to the foreground, by becoming connected to the colored
rectangle below the menu.
this.bottomLine._visible = false;
Now comes the part that makes appear the section of the site which is
associated to the clicked tab (home, links, about, etc). It is again stored in a
variable (contentFrame), for ease of use in code that follows.
contentFrame = Number(this._name.substr(3, 1));
But, what is this ActionScript after the equation sign? It is a scary little
monster :) No, it's actually quite simple.
The part between the parentheses extracts the number from the instance name
of the current tab movie clip. The piece of code this._name means:
the instance name of this, this being the movie clip
to which this code is assigned (the current tab for each loop repetition). So if
the loop is, for example, in its fourth iteration, this._name would
mean tab4.
After the name comes the substr command. This command serves to
extract a part of a piece of text. The first number between the parentheses is
the position in the text where the extraction should start. The second one is
the number of characters (letters, numbers, etc) the command should extract.
So, it goes like this: let's say the name is tab4. The
substr command begins its count with 0. So the third character in
the name tab4 is the last one - 4. It is this character that you need, so the
number 1 says that only one character will be extracted. Anyway, there aren't
any other characters that follow behind it, but it is nice to know how this
ActionScript command functions, isn't it? :)
Next, the result (1, 2, 3 or 4, depending on the iteration of the loop) is
transformed into a number with the Number command.
Number(this._name.substr(3, 1));
Why do you have to make it a number? Isn't it already a number? Nope, it is
not. The substr command extracts text. So by using the
Number command you convert it to a mathematical value.
And this number is needed in the next line, where you tell the
contents movie to jump to that particular frame of its timeline.
Remember the dummy content you created earlier? It is here that you make your
web site functional.
The this._parent.contents path points to the
contents movie clip, which is found on the main timeline, which is
the parent movie clip of each tab (this._parent).
this._parent.contents.gotoAndStop(contentFrame);
Finally, the last line makes the bottom line of the first tab disappear, to
push it into the foreground, while all the other tabs stay in the background.
This makes sense, because when a user visits your site, it should be logical
that the first section (home, start or whatever) is displayed at the
beginning.
tab1.bottomLine._visible = false;
In addition to making an effective interface for your website, you also
learned quite a lot of ActionScript!
Why is the tabbed menu so effective as an interface?
Tabs are great as website navigation systems. Because, first, they emulate
the real-world tabs. So, they are recognizable by their shape.
Second, this shape is easy to spot if compared to links that are text-only or
framed by a simple square.
Third, they emulate depth, by placing the selected tab in the foreground and
the remaining tabs in the background, thus making it even more easy for the user
to see which section she is currently on.
And last, they can be color-coded. I haven't included this option in the
tutorial, because it would be huge. I'll leave it for another lesson. If you are
just curious how this works, go to the british amazon site and click on the tabs for various
products. Hint: amazon's navigation system is one of the most effective there is
around. I am sorry to see that the original amazon.com changed that. They still
have tabs, but they are very different from those found on the british amazon,
both in number and functionality. But, I suppose they know what they're doing
:)
So, if you make a tab menu interface for your (or your client's) flash web
site, drop me a mail. I'll be really glad to see it!
And you know what's even cooler? This menu (the tabs, without the site's
content) is only 1.4 KB in size!
Below, you have both examples of the tab menu available for download. The one
you worked on and the other with the rollover effect shown at the beginning of
this page.
Download the zipped
source FLA file for the menu shown in this tutorial.
