Advanced Flash Button in Flash

Advanced Flash Button

1.2.2006, 15:54
Submited in: Flash | Total Views: 115882

In this tutorial I will show you how to create advanced flash button with RollOver and RollOut effect, using the Action Script. Using this tutorial, you will also learn how to aligned picture with the background using the Align Panel, how to convert it into a Movie Clip Symbol, how to apply action script code on it and more.

Example:

Step 1

Open Flash, press Ctrl+R (Import to stage) and insert some picture dimensions: Width 150px, Height 90px or download my picture.

Step 2

Press Ctrl+J (Document Properties) and set dimensions of background to be same as picture.

Step 3

Select that insert picture and press Ctrl+K (Align Pannel) and in Align Pannel click on Align to Stage, Align Vertical Center and Align Horizontal Center icon. Look at the picture.

Now you're aligned your picture with background.

Step 4

Rename layer 1 on the main timeline to AdvancedButton. Select your picture and press F8 (Convert to symbol), in Convert to symbol window under Behavior choose Movie Clip, name AdvancedButton_mc and ok.

Step 5

Double click on new made Movie Clip (picture) or right click and Edit in place. As your picture is still selected press again F8 (Convert to symbol) and under Behavior choose Graphic, name AdvancedButton_gr and ok.

Step 6

Click on 20 frame of layer 1 and press F6. Select your picture, open Properties Pannel (Ctrl+F3) and under Color choose Brightness and set to -65%. Look at the picture below.

Step 7

Click on first frame of layer 1 and in Prperties Pannel (Ctrl+F3) under Tween choose Motion.

Step 8

Insert new layer above layer 1 and name it Action.

Step 9

Click on 20 frame of layer Action and press F7 (Blank keyframe).

Step 10

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

stop ();
this.onEnterFrame = function(){
if(rewind == true){
prevFrame();
}
}
this.onRollOver = function(){
rewind = false;
play();
}
this.onRollOut = function(){
rewind = true;
}
this.onRelease = function(){
getURL("http://www.toxiclab.org");
}

Step 11

Click on 20 frame of layer Action and in Action Script Pannel (F9) paste this script:

stop();

We're done!

Have a nice day!

Download example

Are you a website owner?
Click here to register and submit your tutorials!