Read this thoroughly explained tutorial and see how to create advanced glow flash menu using the Action Script code. You can use this menu for any web site. Using this lesson, you will also learn how to design glow menu, how to animate it, how to apply action script code on it, how to create motion tween and much, much more!




Example:



Step 1

Create a new flash document and set Width to 450px and Height to 60px. Frame rate set to 30fps (Frames per Second).



Step 2

Take the Rectangle Tool (R), Under Stroke Color set this color: #9F9F9F, under Fill Color set: #FAFAFA, and draw a "rectangle" like it is shown on the picture below.



Step 3

Take the Text Tool (T), and type any text on the "rectangle".



Step 4

Select the "rectangle" (Ctrl+A), click and hold down Alt+Shift key on the keyboard and duplicate that "rectangle" (which will represent menu) , like it is shown on the picture below.



Step 5

Then, rename the names of "rectangle". See the picture below.



Step 6

Select the first "rectangle" in menu and press F8 on the keyboard (Convert to Symbol), to convert it into a Movie Clip.



Step 7

After that, open the Properties Panel (Ctrl+F3), choose Filters, click on plus icon and choose Glow. See the picture below.



Step 8

Then, set the options from the picture below.



Now, you get this:



Step 9

Double click on a new made Movie Clip ("rectangle") or choose right click and Edit in Place. Look at the picture below!



Step 10

Click on frame 40 and press F5.

Step 11

Insert a new layer (layer 2), click on the first frame, open the Action Script Panel (F9), and paste this script:

stop();

Step 12

Click on frame 2, take the Line Tool (N), under Stroke Color set this color: #595959 and draw a line beneath the name of "rectangle". Look at the picture below and everything will be clear.



Step 13

Select that line, and press F8 on the keyboard (Convert to Symbol), to convert it into a Movie Clip.



Step 14

Click on frame 20, press F6 (Keyframe), open the Action Script Panel (F9), and paste this script:

stop();

Step 15

Go back on frame 2, open the Properties Panel (Ctrl+F3), and for Frame Label type go1. See the picture below.



Step 16

Click on frame 21, press F6 again, and in Properties Panel Frame Label type go2.

Step 17

Go back on frame 2, select the line, and in Properties Panel under Color choose Alpha and set it to 0%. Look at the picture below!



Step 18

Click again on frame 2, and in Properties Panel under Tween choose Motion.

#ads#

Step 19

Click on frame 40, select the line, in Properties Panel under Color choose Alpha and set it to 0%

Step 20

While you're still on frame 40, open the Action Script Panel (F9), and paste this script:

gotoAndPlay (1);

Step 21

Click on frame 21, and in Properties Panel under Tween choose Motion. See the picture below.



Step 22

Insert a new layer (layer 3), click on the first frame, open the Action Script Panel (F9), and paste this script:

stop();

Step 23

Click on frame 2, press F6 and draw this:



Step 24

After that, set that "shape" on the position like it is shown on the picture below, and change its color in #595959.



Step 25

Select that "shape" and Convert it into a Movie Clip.

Step 26

While you're still on frame 2, open the Properties Panel (Ctrl+F3), and for Frame Label type go3.

Step 27

Click on frame 20 and press F6 (Keyframe).Then, open the Action Script Panel (F9) and paste this script:

stop ();

Step 28

Click on frame 21, press F6, open the Properties Panel (Ctrl+F3), and for Frame Label type go4.

Step 29

Click on frame 40 and press F6. Then, in Action Script Panel paste this script:

gotoAndPlay (1);

Step 30

Go back on frame 2, select the "shape", open the Properties Panel, under Color choose Alpha and se it to 0%. Then, under Tween choose Motion, under Rotate CCW and set Ease to 100. Look at the picture below!



Step 31

Click on frame 21, in Properties Panel under Tween choose Motion, Ease set to -100, and udner Rotate choose CW.



Step 32

Click on frame 40, select the "shape", and in Properties Panel under Color choose Alpha and set it to 0%.



Step 33

Go back on main scene (Scene1).



Step 34

Select the "rectangle" (Movie Clip), open the Action Script Panel (F9), and paste this script:

on (rollOver) {
gotoAndPlay ("go1");
}

on (rollOut) {
gotoAndPlay ("go2");
}

on (rollOver) {
gotoAndPlay ("go3");
}

on (rollOut) {
gotoAndPlay ("go4");
}

on (release) {
getURL ("http://www.flashvault.net", _self);
}

We're done!

Have a nice day!

Download source file (.fla)

Have questions about this tutorial? Visit our friendly Community Forums!