Create a new Flash Document 550 x 400 pixels in size then pull out the Rectangle tool set it's rounded corners to 5, set the foreground color to #CCCCCC and the stroke to nothing . with these settings draw out a shape like below at the very top of the screen.

Now right click on the rounded rectangle shape and select Convert to Symbol, and convert it to a movie clip (doesn't really matter what it's named. Once the shape has been converted to a movie clip we can add filters to it. Down where the properties of the shape are click on the Filters tab, click on the small plus sign and select dropshadow, use the following settings for the dropshadow.

That should produce:

Now we need to make the highlight for this rectangle, lock the current layer and create a new layer and pull out the rectangle tool again, I set it's rounded corners back to 0 but it doesn't really matter set this rectangles foreground color to a black to white gradient now in the right hand side of flash you need to change the color scheme to white to transparent, to do this look below:

Now draw out a shape like below, in order to get the gradient oriented right you need to rotate and alter the shape with the transform tool , orient and shape it like below.

Now back to the layer with the gray rectangle, if it's locked unlock it, right click on it and choose copy (ctrl+c) then create a new layer above both the highlight layer and the gray rectangle, right click and choose paste in place, then with the new layer selected, right click and choose mask, this will mask the highlight layer to the flash header, making it more smooth looking. You should have the following so far:

Alright now use the text tool to add in a logo, you can also press ctrl+r to import your own image logo. I just typed in 'Company Name'

Now create another new layer and pull out the pencil tool set your foreground color to black, and draw a line like below, also set the foreground color to white and you can draw a white line just left of the black line. (it helps to be zoomed in).

Click on the black line, press shift and then click on the white line, this will let you select both of them, right click and choose convert to symbol, convert them to a graphic. Set the alpha value of the new grapic to about 30-40% like below:

Now you can copy and paste the graphic and use your arrow keys to position them in the flash banner like below:

Now using the text tool add in the text you want in your menu, I added in 'home, downloads, and portfolio':

Now we need to make an animation for when someone hovers over the menu items, create a new layer and pull out the rectangle tool with the roundness set at 5 like we did before. set the color from a gradient of black to white and once again in the right hand side configure the color of the gradient to be like below:

Draw out the rectangle (doesn't matter what you draw it out like you can always transform it later) then use the transform tool to rotate and shape the rounded rectangle into the right form, like below.

Now right click on the rectangle and select Convert to Symbol, convert it to a movie clip, double click on the new movie clip, now that you are editing the movie clip you need to convert the shape in the movie clip to a graphic to do this right click on the rectangle and select 'Convert to Symbol' and select graphic. Now in the Keyframe box select frame 5 and press F6 to make a new keyframe at that position, also create a keyframe at frame two, like below, as well as create a keyframe at frame 6. (whew that's alot of frames!). Your frame box should look like below:

Select frame two and in the bottom where the properties usually are change the frame label to 'home':

Now your doing about the same thing except for arrange your keyframes like below (disregard the a's for now) but for each frame you see a flag put in the corresponding name of the frames, i.e. 'downloads', and 'portfolio'. Your frames should look like below without the a's and the blue arrow:

If you click on layer 1 and set the tween to motion, it will 'tween' or animate the keyframes (that is once you actually position the frames) To change the tween of a layer just click on the layer and in the bottom area click change tween to motion:

Now starting with frame 5 selected position the green hover thing over top of the home button, like below:

Now doing about the same thing, in Frame 10 put the green thing over Downloads and in Frame 15 put the green thing over Portfolio. Now in Frames 1, 5, 10, and 15 click on the Actions tab and type in 'stop();' Frame 1 is shown below:

Now we need to switch out of the movie clip we are in, and switch back to the scene, to do this in the top middle click on scene 1 in the top middle of Flash

Click on the green thingie, and down in the properties area change it's instance name to selection_mc.

Now that we back in the entire scene create a new layer above everything else and pull out the rectangle tool and draw three black shapes like below.

Right click on each black shape and convert it to a button. Click on the 'home' button, set the alpha to 0%, and bring up the action script box and input the code like below:

Let's explain the code abit, it basically means:
On a mouse rollover our selection Movie Clip go and play starting at the home keyframe, our previous stop(); stops it at the right time. when we roll the mouse off of the button we want the hover thing to move back to Frame 1 where it is off of the screen and hidden.
Now do the same thing with the other buttons but change home to 'downloads' and 'portfolio' depending on which button you are editing. Once that's done you should have the Flash Hover Animation portion done like below.

Now we need to work on actually making text come up when someone clicks on one of the buttons in the far left hand side, once again off of the video playing area create a grey #999999 circle like below.

Right click on the circle and convert it to a movie clip, double click on it to go into Movie Editing mode for that circle, Create Keyframes at 1, 5, 10, and 11.

Now on Frame 5 use the transform tool to shape the circle like so:

Place Keyframes on 6, 7, 8, 9. And clicking on alternate frames 6 and 8 press the delete key this will create a flicker effect, your frames should look like:

In Frames 9, 10 and 11 move the grey circle to the far right, select layer one and change it's tween to shape.

Create a new layer and on Frame 11 of that layer create a keyframe, with Layer 2 selected and keyframe 11 selected use the text tool to write the text you'd put on the homepage.

With Layer 2 and Frame 11 still selected bring up the action tab and type in the stop();

This will stop the animation once it reaches the homepage text. Now in layer 2 create a keyframe at Frame 2 and for the frame label, type 'home'.

Ok, now just to make sure you're doing everything right, go back to Scene 1, click on the grey circle movie clip and give it an instance name of pages_mc.

Now you know the drill, click on the button for home and type in the following code:

Do the same for your Downloads and Portfolio, and you've got yourself a site:

Click Here Discuss This Tutorial and ask questions.

discuss this topic to forum