Black-and-white flash menu

Date: 3.5.2007, 0:43    Total views: 69359
Page:  1  2  3
See this tutorial and learn how to create black-and-white flash menu. To create this tutorial, you have to use action script. You will aslo learn:

1. How to design a menu,
2. How to animate it,
3. How to apply action script on menu to make it more powerful and more.



Step 1

Open Flash and start a new project with dimension of 420 X50. Select #393838 as background color. Set your Flash movie's frame rate to 28 and click ok.



Step 2

Choose View > Rulers. Then, place the left side of background on the zero points of rulers. See the picture below.



Step 3

After that, take the Line Tool (N) and go to the Properties Panel (Ctrl+F3) below the stage. Then, make the adjustements as follows:

1. Enter #616060 for the stroke color,
2. Select Solid as the type of outline, with the line thickness set to 1.



Then, draw a vertical line on 140px points of rulers. See the picture below.



Do that also for 280px points of rulers. Now you have this:



Step 4

Take the Text Tool (A) and go to the Properties Panel (Ctrl+F3) below the stage again. Then, make the adjustements as follows:

1. Select a Static Text field,
2. Select a Antigoni as font,
3. Choose 20 as font size,
4. Select #858383 as color,
5. As the rendering option, select Anti-alias for readability.



Then, type on the left top corner of the first field "01". See the picture below.



Step 5

While the Text Tool (A) is still selected, go again to the Properties Panel (Ctrl+F3) below the stage. Then, make the adjustements as follows:

1. Select a Static Text field,
2. Select a Franklin Gothic Book as font,
3. Choose 12 as font size,
4. Select white as color,
5. As the rendering option, select Anti-alias for readability.



After that, type below the number "ABOUT US" or some other text. See the picture below:



Do that also for other two fields, but for 01, typ 02 and 03. Also, change the text. See the picture below.



Now, we have designed our menu, and its time for animation.

Step 7

Take the Selection Tool (V) and select the first field (including text and number).



Then, press F8 key (Convert to Symbol) to convert this text and number into a Movie Clip Symbol.



Step 8

While the new made Movie Clip is still selected, go to the Properties Panel (Ctrl+F3) below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip AboutUs_mc.



Step 9

Double-click on the movie clip on stage with the Selection tool(V).You should now be inside the Movie Clip.

Next:  Animation
  Digg it! Add this tutorial to del.icio.us! Furl it! Add this tutorial to reddit! Spurl it! Add this tutorial to technorati!