Software
: Flash v4
Tutorial : Cool 2D ... 3D looking flash menu technique ...
Step 1.
Boot Flash ... for this tutorial im using flash version 4.
Step 2.
Modify your movies properties by clicking Modify > Movie or CTRL+M
Set the grid spacing to 10 pixels, and click ok.
Step 3.
Next return to the main stage and ensure you have 'snap to' enabled
...
and make your grid visible by clicking View > Grid or pressing CTRL+ALT+SHIFT+G
Step 4.
Select the rectangle tool .
Set your line width to the 'H' setting (the smallest setting).
Now draw a rectangle slightly bigger than your menu like so ...
Step 5.
Next create another rectangle inside the last rectangle you created
like so ...
Step 6.
Now colour the bottom + right hand line of the inside rectangle white.
Also colour the top + left hand line of the outside rectangle white.
Select the two rectangles you've just created and press F8 ... make
this symbol a graphic and name.
Step 7.
To make this effect really stand out goto the movie properties dialogue
(CTRL+M) ... and this time set your movies background colour to a dark
grey colour like so ...
Step 8. Create another rectangle that fits inside your menu background like
so ... this is for the menu button.
Fill this rectangles lines the opposite way that you filled the inside
rectangle in step 6.
Select this rectangle and press F8 remembering to set the symbol type
to button.
In the picture below i've done this and copied enough buttons to fill
my menu ...
Step 9.
Now position your buttons inside your menu...
Step 10.
Now to create the roll over effect for your button.
Double click one of the menu buttons on the main stage.
Click the edit symbol button you should have somthing like this ...
Select the over frame and press F6 or right click the over frame and
choose insert keyframe.
Now swap the fill colour on the lines ... so your over state is like
this ...
Bottom line = white
Right line = white
Left line = black
Top line = black
Step 11.
Return to the main stage by clicking the scene tab as shown above.
Now press CTRL+ENTER to test your movie.
You should have a really nice subtle 3D effect on the menu and esp when
a user hovers over one of the buttons.
Experiment with different fill colours for the buttons menu bg and all
the lines ... have fun.
