Have you ever want to learn how to create advanced gradient flash button? Exactly this tutorial will show you how to create advanced gradient flash button with RollOver and RollOut effect using the Action Script.You will also learn how to draw gradient button, how to animate it and more.



Step 1

Open a new flash document. Open the Document Properties dialog (CTRL+J) and set Width to 200 and Height to 100px. Frame rate set to 25fps (Frames per second).

Step 2

Take the Rectangle Tool (R),under Fill color choose the color which you like, Stroke color must be switched off. After that in the Color Mixer Panel (Shift+F9) set the Linear and create the "rectangle" that would represented your button. Look at the picture below!



Step 3

While your "rectangle" is still selected, press F8 on the keyboard (Covert to Symbol). In Convert to Symbol window under Behavior (Type - flash8) choose a Movie Clip, name what you like and press ok.



Step 4

Double click on the new made Movie clip, or right click and choose Edit in Place.



Step 5

After that click on the twentieth frame and press F6. Then insert a new layer (layer2). Look at the picture below!



Step 6

Click on the first frame of layer 2, open the Action Script Panel (F9), and paste this script:

stop ();

Step 7

Click on the second frame of layer 2, and press F6 (Keyframe). After that select layer 1, and press Ctrl+C on the keyboard (Copy) to copy it . Then click on the second frame of layer 2, and press Ctrl+Shift+V (Paste in place).



Step 8

While your "rectangle" that we just have copied, is still selected, press F8 on the keyborad (Convert to Symbol). In Convert to Symbol window under Type: choose a Movie Clip, name which you like and press ok!

#ads#



Step 9

Take the Free Transform Tool (Q), and do like it is shown on the picture below!



Step 10

Click on the tenth frame of layer 2 and press F6 (Keyframe). After that open the Action Script Pannel (F9), and paste this script:

stop ();

Step 11

Go back on the first frame of layer 2, select the "rectangle", open the Properties Panel (Ctrl+F3) and under Color choose Alpha and set it to 0%. Look at the picture below!



Step 12

Click on the twentieth frame of layer 2 and press F6.



Step 13

After that open the Action Script Pannel (F9) and paste this script:

gotoAndPlay (1);

Step 14

While you're still on the twentieth frame of layer 2, select the "rectangle", open the Properties Panel (Ctrl+F3) and under Color choose Alpha and set it to 0% like we have done in step10.



Step 15

Go back on the second frame of layer 2, open the Properties Panel (Ctrl+F3) and under Tween choose Motion. After that in the Properties Panel for Frame Label type go1.Look at the picture below!





Step 16

Click after that on the tenth frame of layer 2 and in the Properties Panel under Tween choose Motion again, and for Frame Label type go2.



Step 17

Go back on the main scene (Scene 1), select your button, open the Action Script Panel (F9), and paste this script:

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

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

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

Step 17

Insert a new layer and name it text. Take the Text Tool (A), and type any text on the button. Look at the picture below!



Test your movie (Ctrl+Enter).

We're done, Enjoy!

Download source file (.fla)

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