Creating Flash Menu Tutorial

Though website design is a prerogative of professionals, still there is a lot that anyone could do only if he knew how to. Making a menu for a flash website is one of these things. To make one you need to have a tool and to know the procedure. Your tool is Photoshop (mine is CS3 version), and the procedure is described in every detail in the tutorial below. I tried to make it simple, so that even it is your first time using Photoshop, you don’t get startled. Each step has screenshots to make it even more clear. Just keep in mind, that if you have a different Photoshop version, the interface might differ slightly.

If you follow each of the listed steps carefully, as a result you will get a flash menu like this:

Step 1: creating a shape

Open your Photoshop and create a new document (Ctrl+N) with size 600×300 pixels. Set a color for the background: black gives a good contrast, so you can use it unless your menu color is going to be black.
Create a new layer (Ctrl+Shift+N) and select a Rounded Rectangle Tool (U).
In Rounded Rectangle Tool settings activate Shape Layers button and set Radius:8px.
You can set a different radius value according to your taste, just take some time to experiment.
After you are done with Tool settings, draw a rectangle shape of the needed size (mine is 120×45px). Set the color. Mine is color:#25b6b1. To change the color click twice on the layer of your rectangle shape and pick the color you need from palette.

 

Step 2: adding gradient
Select   Layer > Layer Style > Blending Options and set all the values like shown on the screenshot.  Select Gradient Overlay and place a tick in the box next to it.
To change the color click twice on the Gradient palette and you’ll see a color changing tool with four sliders (two on the top and two on the bottom). To set the color for each of the sliders you need to click twice on it. For two sliders on the bottom set Color:#00fff6.
The sliders on the top change Opacity value. Make the right slider active and set Opacity:0.

When you are done with this, press OK and your button will look somewhat like this

Step 3: inner shadow
Go to Layer > Layer Style > Blending Options and select Stroke. Set Size:1px, Position:Outside, Color:#02fbf2.
Then select Inner Shadow and set the Color:#003e39, Opacity:84%, Size:9px.
The result will look like:

Step 4: brush
Create a new layer (Ctrl+Shift+N) and select a Brush Tool (B). Use a standard Airbrush. Set Color:#006965, Diameter:200px.

• Click 2 or 3 times on the top of your button. The more times you click the more intense shadow you will get, so you need to watch for the best result.
• Then do a Ctrl+click on your button layer in the Layers panel at the right side of your screen to highlight this layer.
• After this you need to invert the highlighting by clicking Ctrl+Shift+I. Now press Delete.

Step 5: transparency

Create a new layer (Ctrl+Shift+N). Select a  Rounded Rectangle Tool (U) with the same settings as the previous time. Draw a rectangle object (approximate Size: 115×25px, Color:#79fffa).

Then click Add Layer Mask on your Layers panel.

Step 6: reflection
Select the layers with Shift button and put them into a folder (Ctrl+G)

Then duplicate this Group by clicking with the right button if your mouse on it and selecting Duplicate Group.
Then you need to unite all the layers into one layer. To do this you need to highlight this folder and press Ctrl+E.

To look better the button needs to have a reflection. To make a reflection you need to rotate your duplicate layer (Ctrl+T). Do a right-click on the object and select Rotate 180′ 

Place the layer like shown on the screenshot.
And, like before, Add layer mask and use the Gradient Tool (Color:transparent and black). Make your shadow look somewhat like on the screenshot by playing around with opacity.

To finish your flash menu you need to make copies of your button and place them next to each other. It’s done!

Step 8: cutting parts for Flash animation

Recreating this neat menu in Flash will require 2 elements of the button: the button itself and the shadow. Let’s crop & save them.
In the Layers section hide all button groups and leave only one button. Hide its shadow and its text. Then use the Crop Tool to crop the button. My crop size was about 132*49. And don’t forget to hide the black background layer. Save the resulting button picture using File > Save for Web & Devices > Preset : PNG-24 > Save I have saved it as bg_button2.png

Then you need to perform exactly the same steps for the reflection of the button. So basically you need to have 2 .png files before we move on to Flash animation: bg_button.png and reflection.png
   

Step 9: first steps in Flash (importing files & inserting layers)

Open Adobe Flash CS3 and create a new Flash File (ActionScript 2) document. You will need to import 2 image files to library : bg_button.png and reflection.png. This can be done either by using File > Import > Import to library or you can simply drag’n'drop files into the library window.

Drag-n-drop bg_button.png to the workspace and convert this object to a Movie Clip. This can be done by Rightclick > Convert To Symbol > Movie Clip or you can simply highlight it with Selection Tool (black arrow) and press F8. Let’s name this movie clip “whole button“.

After the movie clip is created doubleclick on the button image to enter it. You will see that in the address bar “whole button” movie clip appeared right after the “Scene 1“. Now we will need to create movie clips for each of the objects of the “whole button”, there are 3 of them: button itself, reflection and text. Each movie clip should have its own layer and we will need to create 2 more layers called “action” and “button area”. Thus I have created 5 total layers with the names: button, reflection, text, action, button area.
 

Please pay attention that “Layer 1″ was renamed to “button” and it still contains the picture of a button. Let’s select this picture and convert it to a movie by pressing F8. I have named it “mc_button_back” and it is under the “button” layer. Now you will need to select “reflection” layer, drag-n-drop reflection.png from library right under the button (you can use arrow keys to move it more precisely). After this is done press F8 and convert it to movie as well. I have named it “mc_reflection“. The next step is to add some text to a button.  Choose the “text” layer, select Text Tool and insert some text on the button. You can easily edit the text style by referring to Properties menu.

  After setting this up convert the text to Movie clip by pressing F8. I have named it “mc_text”. This way we have all our button parts in places and your library should look like this:

Step 11: using Timeline & setting an amplitude


The next step will be to make the button jump and return while hanging a mouse cursor over it. For this purpose we will need to use the Timeline.  Let’s have 10 frames for button to jump up and another 10 frames to go back down. Highlight the first frames of text, reflection and button layers. Press Alt and holding it drag them to the 10th frame of the Timeline and release the mouse button. This will copy the frames. Repeat the procedure and copy those three frames further to the 20th frame.

The next step will be to define the amplitude assigned to button jumping action. Highlight the 10th frame under the “button” layer. Be sure that you are using the Selection Tool, and define the position of a button in its highest point. Then go to “reflection” layer and move the reflection a little down, using the down arrow or moving it with the Selection Tool. And absolutely the same way fit the text to a button that has jumped up. Now we should have a nice button that is flying above the ground and the reflection slightly moved down.
Step 12: defining actions

Highlight the “action” layer. Click on the very first frame and insert a keyframe. This can be done by pressing F6, or rightclick > Insert keyframe, or in the manu above go Insert > Timeline > Keyframe. Then highlight the 10th frame and press F6. Do the same for 20th frame. Then insert keyframes for the 2nd and 11th frames. You will have something like this:

 Now we will have to define some keywords for our action script to refer to. Let’s insert an action to the 1st and 10th keyframe of the “action” layer. This can be done by highlighting a keyframe and pressing F9, or you can use right click and choose action from the dropdown menu. What you need to type in the appeared window is just:  stop();

Don’t forget to do the same for the 10th keyframe! Ok. We are almost done with the “action” layer. Let’s define the frame names of the 2nd and 11th frames. This is done by highlighting a frame and looking down at the Properties menu. Name the 2nd frame “over” and the 11th “out“.

Step 13: creating a button


Now let’s finish with automatization. Highlight the “button area” layer and chose the Rectangle Tool. We will need to create a rectangular which will cover our button. (if it does not let you, ensure that you have at least one frame in the “button” layer) Then convert the rectangular to a Button. I have named it “button action”

Now double click it and you will go inside the button. Under Layer 1 hold the first frame with your mouse left button and drag it till the Hit column.

To get out of the editing this action you can click somewhere outside the grey rectangle or click the “whole button” in the navigation bar.
Step 14: Setting up animation
Now when you can see that your button is blurred. It’s ok. Next we will need to insert some code into this button area to have it working. Press F9 while having our blurred rectangular chosen and insert the next into the action window:
on(rollOver)
{
gotoAndPlay(“over”);
}
on(rollOut)
{
gotoAndPlay(“out”);
}

 Now we wiil need to define the action itself. Highlight some part of the timeframe for 3 of our objects so that 10th frame was in the center of the selection. Go down to Properties and choose the Motion setting for Tween.

Step 15: Setting up the framerate and spreading the button area


The next step will be to set framerate to have or button jump faster. This is done by double clicking the current frame number.  Use 31 frames per second.

And the last thing that needs to be done for button to work – we must spread the “button area” layer from 1st to 20th frame. You can just click on 20th frame and press F5 for it to be done.

Our “whole button” is ready now! Congrats!  You can get out of the button by double clicking outside of it, or pressing Scene 1. You can press Ctrl + Enter to see how well it jumps!

Step 16: Some more tips
Still there are some tricks we can do about it. I’ll show you some of them:
When highlighting the frames area for 3 objects you can set the Ease parameter for the button to go smoother. Set it to 100 and see the result!

And to have our button animation even more sophisticated we can make the text change its color. For this purpose you will need to refer to the 10th frame of the “text” layer. Select the text with the Selection Tool and go down to the Properties section. In the Color drop-down box choose Tint and assign black color to the text.

Step 17: compiling the whole flash menu
At last we have our button ready! Now we need to clone it and compile the whole menu! Let’s duplicate our home button movie clip to make a separate movie clip for each button.

Then ensure that your current place is Scene 1, not the “whole button” and drag-n-drop newly created buttons to have the full flash menu. After this we will need to have a separate text movie for each button. You already know how to do this. Just delete the original one from each button, and create its own movie clip for each button.
Your Flash Menu is now complete. Now you can add another layer at Scene 1 and draw a big black rectangle for background and our menu is done!

 

Download fla