How to Design a flash menu with rollover effect

August 30, 2010

Problem

You want to add a beautiful menu to your website. You can create a Flash menu with rollover effect. Here we’ll give an example to explain how to design a flash menu with rollover effect.

Solution

Open Adobe Flash CS4.
Insert a new movie clip named “bb”. Then draw a rectangle like this.

insert a button’s up movie clip
Insert a new movie clip named “button’s over”. Dag the bb movie clip to stage. Insert a keyframe in frame 5 and frame 10. Create a shape tween to change the shape on frame 5 and frame 10. Input the following codes in the “Actions” of the frame 10.

stop()

First frame

first frame

Frame 5

frame 5

Frame 10

frame 10
Insert a new layer and draw a rectangle have a same size and position but different color with bb movie clip.

draw a rectangle in layer 2
Insert a new layer and create a classic tween.

create a classic tween
Insert a new layer and drag the bb movie clip in the position as graphic of layer 1 following. Right-click this layer and choose Mask to mask layer 3.

create a mask layer
Insert a new button symbol and drag the bb movie clip to the frame Up and frame Hit then drag the button’s over movie clip to the frame Over.

insert a button
Following this button to create other buttons.
Return to scene and drag these buttons to stage. Align them like this to become a menu. Change stage size as the menu size.

create the menu
Press Ctrl+Enter to test it. Now, we have finished designing a flash menu with rollover effect.