This tutorials shows you how to create a cool, hi tech looking floating menu
in Flash. I will teach you here to design it to look awesome, like all those
nice sites look.
Before you begin, please look at the finished hi tech menu to see what you'll be building in this
lesson (the link opens in a new window).
1. Open a new Flash document. Save it immediately so that
you can just press CTRL+S later. Save often, especially in a
tutorial a little bit more complex like this one.
Setting up the stage background and document properties
2. Select Modify > Document to open up
the Document Properties panel. Set the Frame rate to 30 fps. You'll need this
speed to create the fast-blinking effects on your menu.
Set the dimensions of your movie to 718 px (width) and 510 px (height).
Also, set your document's background color to black. Click OK.
3. Call the first layer black background. Draw a
borderless black rectangle on stage (using the Rectangle tool) and make its
dimensions match those of the stage and center it on stage, too, using
the Align panel. Lock this layer.
You are making this because some older versions of Flash player have a small
bug. If the HTML page in which your flash movie is embedded is, say, white, this
white color will show through your flash background even if you have set it to
black. If you put a black rectanglem this is an object and the HTML page color
cannot come through it.
I am using this technique even if this bug may be fixed in newer versions of
Flash player (which I don't know if it is). In that way, you are making your
Flash movie compatible with the older versions of the Flash player and therefore
covering a wider audience.
4. Create a new layer and call it top picture.
You'll put your or your client's logo here. For now, just download the picture
below this paragraph by right-clicking on it and choosing "Save Image as..." and
save it in the same folder where the flash file you are currently working on
is.
The image is in fact 690 by 66 pixels, but I scaled it down with HTML just
for the purpose of this tutorial. It is only 6 KB large! Otherwise, never scale
down your images with HTML properties.
5. In the top picture layer you just created,
import this image. Do this by selecting File > Import > Import to
Stage. Find your picture, select it and click OK.
6. With the newly imported image still selected, make its
width 714 px in the Properties panel. You can do this safely because the stage
is just a little more wider than the image, so the pixels won't be seen.
Center it horizontally on stage and put it on top. Lock this layer.
7. Create a new layer and call it frame. Select the
Rectangle tool (R)and draw a rectangle without a fill color on
stage by blocking the fill color in the Color portion of the Tools panel. Enter
#45678D as Stroke color.
Make the dimensions of the rectangle 714 px by 506 px. Center the rectangle
vertically and horizontally on stage. Now you have left exactly 2 pixels of
space between the edges of the stage and the rectangle on each of the four
sides.
8. Lock this layer. Unlock the top picture layer
and adjust the header image so that it fits the rectangle without overflowing at
the top. See the two images below before and after the adjustement for better
explanation (it is a zoomed in screen of the top left corner of the stage in
flash). Lock this layer.
9. Create a new layer between the top image and
frame layer and call it menu. This is where the floating menu
will be positioned.
Making the draggable floating menu movie clip
You'll need a nice background image for the menu so download the one below
which I made, to your computer.
How did I get the inspiration and the design? See the hi-tech looking
circuitry part on the upper left part of the image (the blue lines outlined with
crimson)? This idea just popped up in my mind when my USB memory stick got
broken. I opened it up completely, took a photo of the circuitry and drew it
manually in photoshop using the photo as a reference. The transparent bluish
weaving lines are just beautiful looking to me and easy to create using the
various blur options and filters. See, it is easy to create awesome designs by
just looking around you!
10. Import the image on the stage (CTRL+R),
it will show up in the menu layer you just made. You can place it
anywhere on the stage, just be sure that its X and Y coordinates are set to
whole, round numbers. Check that in the Properties panel.
11. Press F8 to convert the image to a
movie clip. Call it floating draggable menu, select movie clip as type
and make sure its registration point is in the top left corner and click OK.
12. In the properties panel, give the movie clip the
Instance name coolMenu.
13. Double-click the movie clip on the stage to enter its
timeline. Call the first later background image and lock it. Make a new
layer and call it drag button.
Designing the drag button
14. In the drag button layer, create a borderless
rectangle. Use some color in high contrast with the rest of the document so that
you can more easily create the button. You will change its color later to match
the rest of the movie's design.
15. Unlock the background image layer. Select both
the rectangle you just drew and the background image by holding the
SHIFT key and clicking on them.
Open up the Align panel (Window > Align) and make sure
that the "To stage" button on the left side of the panel is turned off. Click
the "match height" button (the second from the left in the panel's bottom row).
The rectangle's height will now be equal the image's height.
16. Turn on the "To stage" button. Click anywhere outside
the objects once and then select just the rectangle. Align it with the image's
top left corner.
Do this by clicking on the "align left edge" and the "align top edge"
buttons. With the "To stage" button turned on this will in fact align the
rectangle with the movie clip's registration point, which is used as reference
instead of the whole stage because you are now working inside the movie
clip.
Lock the background image layer.
17. In the Color mixer panel, set the rectangle fill color's
alpha to about 30% so that you can see the image behind while you are working.
The clear stripe on the left side of the menu image will be the drag button. So
now you have to match the rectangle's size to that one.
18. Choose the Selection tool (V) and
select the part of the rectangle which is overflowing into the blue area of the
image and press DELETE to erase it. Zoom in if necessary while
working, to better select the area you are erasing. You should obtain something
similar to the image below.
19. Select the rectangle and convert it to a button symbol.
Do this by choosing Modify > Covert to Symbol or pressing
F8. Be sure to choose button as type in the Convert to Symbol
dialog box and name it dragging button. Click OK.
20. In the Properties panel, give the button the instance
name dragButton.
21. Double-click on the button on stage to enter its
timeline. Right-click on the Hit keyframe and select Insert Keyframe.
This is a necessary step because you will further change the shape of the
button, but you want the clickable area of the button to stay unchanged.
22. Select the Up keyframe to define the button's look in
this state. Click once anywhere on stage to unselect the rectangle shape.
Now zoom in on the rectangle to be able to work more precisely.
Select all the areas of the rectangle which are over the circuitry portion of
the image below it and delete them. This is easily done in a few steps, by
selecting three areas and erasing them.
In the end, erase trim away 1 pixel from the upper, left and lower side of
the shape so that the border of the image below it comes through.
23. Select all the parts of the shape and turn its fill
color to a nice blue hue, let's say, the #000066.
24. Right-click on the Over keyframe and select Insert
keyframe.
Select the rectangle shape and turn its color's alpha to 0% in this keyframe
by adjusting it in the Color mixer panel.
Test your movie (Control > Test Movie) and roll over the
button with your mouse. You should have the same effect as in the example flash
movie below. By the way, save your work now if you haven't already.
Creating the slick section buttons
You will now see how easy it is to create slick-looking hi-tech buttons.
Onwards!
25. Go back to your flash document and if you're not inside
the menu movie clip enter it now. Check above your timeline if you're inside it.
If not, just open the library (Window > Library) and
double-click on the floating draggable menu movie clip.
26. Lock the drag button layer. Create a new layer
and call it section buttons.
Draw a borderless 140 x 16 pixel rectangle. Enter #800A0A as fill color, with
alpha set to 54%.
27. Draw a 20 x 5 pixel rectangle, with a different color
(this one will serve you to cut a shape out of the previous rectangle). Note
that the image below is zoomed in.
Select the Line tool (N), hairline as its thickness and
choose a color that contrasts well with the small rectangle and the background.
Draw a 45° line by holding the SHIFT key while clicking and
dragging. Position the line so that it cuts the rectangle beginning from its top
right corner. Do this with the Selection (V) tool.
Click on the corner that is now separated from the rest of the shape and
press DELETE to erase it. Double-click on the line and erase it
too.
28. Select this shape and align its top edge with the
crimson shape's top edge. Its left edge should be about 15 pixels distant from
the crimson shape's left edge. Do this using the Align panel and the arrow keys
on your keyboard (the image below is displayed in its real size).
Click outside the shapesm click on the yellow shape again and press
DELETE. The background for the section buttons is now ready!
:)
29. Move the background shape over the menu image, so that
it is 1 pixel from image's right edge and 2 pixels away from its bottom
edge.
30. Select the shape and press F8 to
convert it to a button symbol. Call the button section 5 button.
Double-click on the button to enter inside it.
Right-click on the Hit frame and choose Insert frame. Call the layer
background and lock it.
If you like, you can insert a keyframe instead of a frame in the button's Hit
state and "patch up" the little cutout so that you can have a full rectangle.
Because now, the hit area of your button equals the shape you just made a couple
of steps ago. It's up to you to decide.
31. Create a new layer and call it text. Click on
its Up frame. Select the Text tool (T) and choose a pixel font.
If you don't own one, visit the very nice pixel fonts orgdot's page and download one. Download
them all! They're completely free! Install the font on your machine. You may
need to restart flash to have the font at your disposal.
Why pixel fonts? You can choose Arial, Helvetica or any other font installed
by default on your machine, but your menu won't be hi tech looking. You'll lose
a lot of coolness. So, get those pixel fonts so that you can make cool sites :)
You can make cool and nice sites with any other font, sure, but in this
particular case you want to achieve a futuristic, hi tech slick look.
In the Properties panel, find the pixel font and set the size to 8 (most,
nearly all the pixel fonts use this size), and select static as text field type.
Type in "5" followed by "contact". Once the text is typed in, be sure to check
if the text field's X and Y coordinates are set to round numbers (left side of
the Properties panel), otherwise your pixel font won't render properly!
Make the word on the right close to the button's right edge. Put as many
spaces between the number and the word as needed.
32. You'll make the nice blinking effect now. Aren't you
excited? ;) Right-click on the text layer's Over frame and choose
Insert Keyframe.
33. Select the text field on this keyframe you just inserted
and convert it to a movie clip symbol. Be sure to select "movie clip" as type in
the dialog that appears, because there is probably "button" still selected from
the previous time. Call the movie clip rollover 5.
Double-click this movie clip to enter it.
34. Right-click in the frame 2 on the movie clip's timeline
and choose Insert Keyframe.
Select the textfield on this frame and delete it. Your timeline will now look
like this.
Test your movie. Place your mouse over the section button. It should
blink!
How is this accomplished? The two-frame animation you made in step 34 makes
the button (the text inside it) blink. It is so because the movie's framerate is
set to 30 fps, which is very fast. As all flash animations loop by default if
there isn't any actionscript telling them to stop or jump to a certain frame,
these two frames loop endlessly, very fast, and there you get the blinking.
This two-framed animation is contained in the rollover 5 movie clip,
which is in turn situated on the section button's Over keyframe. That means the
blinking will be seen only when the mouse is moved over the button. And that's
it :)
35. You will now make the buttons for the remaining
sections. Open the library (Window > Library), right-click
on the section 5 button and choose Duplicate. Name the button
section 4 button.
Double-click this newly created button and change the text inside it to
"about" and the number at the beginning to "4".
Go back to the library and duplicate the rollover 5 movie clip and
call the new copy rollover 4. Change the text here too.
Now, double-click on the section 4 button again. In its
text layer got to the Over keyframe, select the rollover 5
movie clip in it (click on it only once). In the Properties panel, click the
Swap button and select the rollover 4 in the dialog that appears and
clik OK.
Back to the library again, double-click on the floating draggable
menu movie clip. Unlock its section buttons layer if it's locked,
and drag an instance of the section 4 button into it. Place it 4 pixels
above the section 5 button.
Repeat the same steps for the remaining buttons. Yep, get to work - this is
the fastest way to do it! It takes little time to do this - 10 to 15 minutes
maximum. Roll over each button to see if you changed everything. Your result
should be the same as the one in the flash example below.
The design is finished! Isn't it hi tech looking? It is totally cool. Nowm
let's put some actionscript inside so that your users can drag it around.
Making the hi tech menu draggable with ActionScript
36. Go back to the main scene and create a new layer on top
of all other layers and call it actionscript.
37. Select its first keyframe, open up the Actions panel
(Window > Actions) and put in the following code:
Test your movie. Click on the button on the left side. You should be able to
drag the menu around. If it doesn't work, check that you gave your menu movie
clip and the dragging button inside it instance names, as explained in the steps
12 and 20 of this tutorial.
Now, you can drag it around, but it sticks with you even when you release the
mouse button. Put this code after the one you just entered.
Test the movie. Drag the menu around and release it. That's it! Now, let me
explain you the actionscript involved in the functionality of the dragging.
The ActionScript code behind the drag button functionality explained
The following three lines of code make the menu draggable:
The first line associates a function with the onPress event of
the dragButton button which is situated inside the
coolMenu movie clip. So, when the dragButton is
pressed, the code between the curly braces is executed.
This code says to start dragging the menu. It says: start dragging
(startDrag) the parent object of this object
(this._parent). The keyword this refers to the object
it is situated on. It is situated on the main timeline, but it is placed within
the function which is associated with the dragButton's
onPress event, so it belongs to the dragButton.
So, this._parent is the parent object of dragButton
- the coolMenu movie clip.
The following portion of code drops the menu once the mouse button is
released - the dragging is stopped.
It is again a function associated with an event of the
dragButton button. The onRelease event in this case.
There is nothing specified between the parentheses of the
stopDrag(); command because flash can only drag one object at a
time. So when you tell it to stop dragging, it just drops whatever it was
dragging, it doesn't need to be told which object.
and it would work perfectly. But I added the following lines
if (this._parent._x < 2)
{ this._parent._x =
2; } else if (this._parent._x > 630)
{ this._parent._x =
630; } else if (this._parent._y < 20)
{ this._parent._y =
20; } else if (this._parent._y > 460)
{ this._parent._y =
460; }
which do a useful thing. They check the position of the menu on the stage at
the moment it is released. Why write this code at all? It accomplishes this: if
the user releases the menu outside the stage boundaries, it would be difficult,
if not impossible in some cases, to pick it up and drag it again.
So if the menu is released outside the stage it gets put back inside.
The first line says that if the movie clip's x coordinate is
less than 2, it is corrected to be exactly 2. This line covers the cases in
which the menu is dropped of the stage's left edge. The lines that follow do the
same thing for the right, upper and lower edge.
Setting up the site navigation and section buttons' functionality
This tutorial is about designing the hi-tech menu, but I'll quickly show you
here how to set up the site content and navigation so that you can create a
functional flash site in a snap.
This is the idea: you will create a movie clip which will hold all the site's
content. Each section of the site will be placed in a frame of this movie clip.
The movie clip's timeline will be stopped from running with a simple
stop(); actionscript command. When clicked, the section buttons in
the menu will tell that movie clip to jump to the appropriate frame.
38. Create a new layer on the main scene between the top
picture and the menu layers and call it content.
39. Create a new movie clip (Insert > New
Symbol). Call it site content. Inside it, create three layers:
labels, content and actionscript.
40. Select the actionscript layer's first keyframe, open the
Actions panel and insert the following code:
stop();
This will stop the movie clip's timeline from moving. Lock the
actionscript layer.
41. Select the first keyframe of the labels layer
and go to the Properties panel. On its left side, enter section1 as the
name of the frame.
In the timeline, right-click on the frame number 5 of the labels
layer and select Insert Keyframe. In the Properties panel, enter
section2 as the frame name. Do this three more times so that you have
five labeled frames, for five corresponding sections of the site.
Lock this layer.
42. In the content layer, insert keyframes right
above the keyframes in the labels layer.
Place some dummy content inside every keyframe you just made. You will place
real content later. For now, just enter some text like "home", "works", etc or
some random drawings.
Lock this layer and return to the main scene.
43. Open the library and drag an instance of the site
content movie clip you just made into the content layer. Once this
movie clip is placed on the scene, go to the Properties pnale and give it the
instance name siteContent. Check that its coordinates are round numbers
too, so that any content inside it renders properly.
The contents of the section1 frame of this movie clip will be
visible immediately, which is OK, because this is the home section of your
site.
Lock the content layer.
44. Double-click on the floating draggable menu
movie clip in the library. Unlock the section buttons layer inside it. Click
once outside any drawings to unselect anything that might be selected. This is
done so that you don't name a frame mistakenly instead of a button.
Select the first section button and name it secbut1. Name all the
other buttons too: secbut2, secbut3, secbut4,
secbut5.
Go back to the main timeline.
45. Select the keyframe on the actionscript layer,
open the Actions panel and add the following code to the existing one:
This associates a function with each section button's onRelease event. These
functions tell the siteContent movie clip to jump to a certain frame.
This could have been done with a loop to cut down the code and make it more
modularm but I think this is enough for this tutorial! :)
Congratulations, you just made a great looking menu and a foundation for a
cool flash site!
One last thing: since this is a Flash MX and up tutorial, make sure to have
set the Flash player version to 6 and ActionScript to 1 in the movie's publish
settings if you are working in Flash MX 2004 or Flash 8.
Put this together with an external
preloader and you got a working flash site! By the way, when published, the
swf movie you made with this project is only 16 KB in size! The source file for
the menu explained in this lesson is available for download below.
