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.
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:
coolMenu.dragButton.onPress = function() {
startDrag(this._parent);
};
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.
coolMenu.dragButton.onRelease = function() {
stopDrag();
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;
}
};
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:
coolMenu.dragButton.onPress = function() {
startDrag(this._parent);
};
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.
coolMenu.dragButton.onRelease = function() {
stopDrag();
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;
}
};
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.
I could have just written the function this way:
coolMenu.dragButton.onRelease = function() {
stopDrag();
}
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:
coolMenu.secbut1.onRelease = function() {
this._parent._parent.siteContent.gotoAndStop("section1");
}
coolMenu.secbut2.onRelease = function() {
this._parent._parent.siteContent.gotoAndStop("section2");
}
coolMenu.secbut3.onRelease = function() {
this._parent._parent.siteContent.gotoAndStop("section3");
}
coolMenu.secbut4.onRelease = function() {
this._parent._parent.siteContent.gotoAndStop("section4");
}
coolMenu.secbut5.onRelease = function() {
this._parent._parent.siteContent.gotoAndStop("section5");
}
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!
Download the zipped source FLA file for this tutorial.
The ‘finished hi tech menu’ page does not seem to function… Just thought you would want to know! Thanks for all the great tutorials!
WOW awesome design and functionality, I’m writing this down.
[…] an “Authority on Performance Cars” shop located in a random alley containing Yugos. Flash Tutorials was more interesting. It had step by step process for using Flash. The site builders designed […]
[…] http://flashexplained.com//design/creating-a-cool-hi-tech-draggable-floating-menu/ […]