Classic Style Navigation

Within 15minutes or so, depending on your reading speed you will be able to make classic style navigation using Flash Professional.

Preview the sample here


Let’s start by designing our page. Now Open Flash » Create a new document Ctrl + N.

Click on the properties bar and set the dimension of the page to 380x250.



After setting the dimension click on add new layer and insert two more layers to the default layer 1. Making it three layers, layer 1, layer 2 and layer 3.



I think we should start with the buttons! So click on the buttons layer and select the rectangle tool (R), change the fill color to white (#ffffff) and line color blue (#0000FF). Now inscribe a 12x12 rectangle at the top left of your page.


Again, select the Line Tool (N) and draw a less than shape inside the rectangle you’ve just drawn.

Like this



Make sure you use Cap (square) and Joint (Milter).

Select everything you have on the stage and convert to a button symbol by pressing F8. Name you symbol nav_button and registration point center then click ok


After creating your button double click on it to enter the editing mode. On the time line click on over and press f6 to insert a keyframe


The black shade should be visible on the over






Now go back to your button on the stage and change the fill colour to this (#00CCFF) by select it once and changing the fill colour from the properties bar or by using the paint bucket tool (K).

After you are through with all this. Just go back to the main Scene by clicking on Scene 1 on the timeline to return to the main scene


Duplicate your button by press Ctrl + D. Or from edit choose Duplicate

Furthermore, place the duplicated symbol by the right just after the first symbol. Then from Modify Select Transform Flip Horizontal


You should have this now



Goto the content layer, take the text tool and type in your content. Or you can even insert an image. In my own case I used a text to illustrate it. See screenshot below





Now click on frame 2 on the timeline of the content layer and press f6 to insert a new keyframe.



Download the source code here

Read More!

Popular Posts