Toxiclab.org

Complex Flash Button

20.2.2006, 13:46
Submited in: Flash | Total Views: 117393

We are going to see in this tutorial how to create complex flash button using the Action Script.

Example:



Step 1

Create in photoshop or any other graphic program (could be done in flash also) a button without text. See the picture below.





Step 2


Start Flash. Choose File > Import > Import to Stage (Ctrl+R), and Import that button.

Step 3

Take the Selection Tool (V), and double click on layer 1 to rename its name in button. After that, create a  new layer above button layer and name it effect.



Step 4

Lock button layer, select effect layer, Take the text Tool (A), go to the Properties Panel below the stage (Ctrl+F3), choose any font, size, and color and type any text on the button. For this example I'll  type Toxiclab.org. See the picture below.



Step 5

After that, using the Flash tools for drawing, draw in flash any icon which we will place on the right side of button. For this example I'll draw a "circle". See the picture below.



Step 6

From the left side draw some other icon. I'll draw some triangle. See the picture below.



Step 7

Now, it's time for animation. Take the Selection Tool (V), click once on Effect layer to select it, press F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.

Then, go to the Properties Panel (Ctrl+F3) below the stage and for <Instance Name> type button. See the picture below.







Step 8

Double-click on the movie clip on stage with the Selection tool (V). You should now be inside the movie clip. After that, select just "triangle", press Ctrl+X key (cut), create a new layer above layer 1, select it and press Ctrl+Shift+V (Paste in Place). Go back on layer 1, select just "circle" press again Ctrl+X key (Cut), create a new layer above layer 2, select it and press Ctrl+Shift+V (Paste in place). See the picture below.



Step 9

Lock all layers except layer 2 (layer of "tringle"). Select the  "triangle" and press F8 key (Convert to symbol) to convert this "triangle" into a Movie Clip Symbol.



Step 10

Click on frame 15 of layer 2 and press F6 key. After that, take the Free Transform Tool (Q), and do like it is shown on the picture below.



Click after that on frame 15 of layer 1 and press F5 key, to see more where the type it is!
Then, click on frame 5 of layer 2 and move the "rectangle" a little right using the arrow keys. See the picture below.



Step 11

Take the Selection Tool (V), click once on layer 2 to select it, open the Properties Panel (Ctrl+F3) and for Tween choose Motion. See the picture below.




Then, click on frame 15 again, go to the Action Script Panel (shortcut: F9), and enter the following ActionScript code inside the Actions panel:

stop();

Step 12

Lock all layers except layer 3 (layer of "circle"). Select it and press F8 key (Convert to Symbol) to convert this "circle" into a Movie Clip Symbol. See the picture below.



Step 13

Then click on frame 15 and 25 and press F6 key. Go back on frame 15, go to the Properties Panel (Ctrl+F3) below the stage and for Tween choose Motion. For Rotate choose CW. See the picture below.



After that, click again on frame 25, open the Action Script Panel (F9) and paste this script:

stop();

Step 14

Lock layer 3, unlock layer 1. Select layer 1 and  press F8  key (Convert to symbol), to convert it into a Movie Clip Symobl.



Step 15

Click on frame 15 and 25 and press F6 key. Take the Selection Tool (V), click once on the title ( in my example Toxiclab.org) to select it, go to the Properties Panel below the stage and for Color choose Tint. For Tint color choose any color. I choose some kind of grey color. See the picture below.



Step 16

Go back on frame 15, and in the Properties Panel below the stage for Tween choose Motion. See the picture below.



After that,  click on frame 25, and in Actions Panel enter the following Action Script code inside the Actions panel:

stop ();

Step 17

Go back on the main scene (Scene1). Create a new layer above effect layer and name it Invisible Button.



Step 18

Take the Rectangle Tool (R), For Stroke Color choose no color,for fill color choose any color and draw a "rectangle" over the button. Look at the picture below!



Step 19

While the "rectangle" is still selected, press F8 key to convert it into a Button Symbol.



Step 20

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

Right-click on this layer's Hit frame and select Insert KeyFrame from the menu that shows up.See the picture below.



Step 21

Go back on the main Scene. Now, we have the Invisible Button. See the picture below.



Step 22

Take the Selection Tool (V), click once on the Invisible button ("rectangle") to select it, open the Action Script Panel (F9), and enter the following Action Script code:

on (rollOver) {
_root.mouse_over_button = true;
}
on (rollOut) {
_root.mouse_over_button = fstartlse;
}

on (release) {
getURL ("http://www.toxiclab.org");
}

Step 23

Close the Actions Panel (F9), and create a new layer above the InvisibleButton layer and name it ActionScript.See the picture below.



Step 25

Click on the first frame of A.S. layer and enter the following Action Script code inside the Actions panel:

_root.button.onEnterFrame = function() {
if (mouse_over_button) {
_root.button.nextFrame();
} else {
_root.button.prevFrame();
}
};

We're done!

Test your Movie (Ctrl+Enter).

Have a nice day

Download example (29 KB)

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

Browse by category




Most popular tutorials


Resources Worth visiting


Friends