Flash Tutorial – Powerful green flash button

Step 1

Open a new Flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the width of your document to 200 pixels and the height to 100 pixels. Select white as background color and click ok. Frame Rate set to 34 fps (Frames per Second). Look at the picture below!

Step 2

Take the Rectangle tool (R).You will draw a rectangle without the outline colors.In the Colors portion of the Tool panel, block the Stroke color by clicking on the little pencil icon and then on the small square with the red diagonal line.For Fill color choose #EE761E and draw a “rectangle” about 140×55 px on the stage. See the picture below.

Step 3

For Fill color choose #BCD703, take the Rectangle Tool again, and draw beneath the “rectangle”, another “rectangle” 140×6 px. See the picture below.

Step 4

For Fill color choose C9C7C7, take again the Rectangle Tool (R), and draw above the “rectangle” line 140×1.5 px. See the picture below.

Step 5

Take the Text Tool (T), in the Properties Panel (Ctrl+F3) below the stage, choose Static Text (see left part of the image below). Choose any font you like, any size, but for color choose white. After that, type “submit” and place it on the position like it is shown on the picture below.

Step 6

Select the Line Tool (N), Select a white as line color and choose Solid as type of line, with thickness set to 1.5px.

Then, draw “x” icon and place it on the position like it is shown on the picture below.

The button now looks like this:

Now we have designed our button and it is time for animation.

Step 7

Select the button (Ctrl+A key), and press F8 key (or select Modify > Convert to Symbol ) to convert this button into a Movie Clip symbol. See the picture below.

Step 8

Go to the Properties Panel below the Stage to its left side. You will find the Instance name input field there. Then, in that input field type submit ( Call this movie clip) “submit”. See the picture below.

Step 9

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

Step 10

Take the Selection Tool (V) and select only the “submit” (text) of button and press Ctrl+X key (Cut). Then, create a new layer (layer2), select it and press Ctrl+Shift+V key (Paste in Place). Repeat this process for every other parts of button (“x icon” see step 6, “another rectangle” see step 3 and “line” see step 4). Select the all parts, cut it, create the particular layers and paste it in place (Ctrl+Shift+V). See the picture below.

Step 11

Select layer 1 and press F8 key (Convert to Symbol) to convert it into a Movie Clip symobl.

Step 12

Click on frame 15 and press F6 key. Then, take the Selection Tool (V), click once on “rectangle” to select it and  go to the Properties Panel (Ctrl+F3). On the right, you will see the Color menu. Select Tint, for Tint color choose #7A8E01 and  for Tint Amount choose 100%. See the picture below.

Step 13

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.

Step 14

Select lalyer 2 (text layer), click on frame 15 and press F6 key.

Step 15

Then, using the mouse or by arrows key place the “submit” (text) on the position like it is shown on the picture below.

After that, right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.

Step 16

Select layer 3 (line layer), and press F6 key fiftheen times. See the picture below.

Then, click on every second frame and press delete key on the keyboard.

Step 17

Select layer 4 (“x icon” layer), click on frame 15 and press F6 key. Then, using the mouse or by arrows key, place the “x icon” on the position like it is shown on the picture below.

After that, right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.

Step 18

Select layer 5 and press F8 key (Convert to Symbol) to convert it into a Movie Clip symobl.

Step 19

Click on frame 15 and press F6 key. After that take the Selection Tool (V), click once on “another rectangle” to select it, go to the Properties Panel (Ctrl+F3) and on the right, you will see the Color menu. Select Tint and for Tint color choose #7A8E01. See the picture below.

Step 20

Right-click anywhere on the gray area between the two keyframes on the timeline and choose Create Motion Tween from the menu that appears.

Step 21

Go back on the main scene (Scene1), create a new layer and name it Invisible Button.

Step 22

Select the Invisible Button layer and create the Invisible Button over the our button. See the picture below.

Step 23

Take the Selection Tool (V), click once on the Invisible Button to Select it, open the Action Script Panel (F9) and enter the following Action Script Code inside the Actions panel:

on (rollOver) {
_root.mouse_over_submit = true;
}

on (rollOut) {
_root.mouse_over_submit = fstartlse;
} on (release){
getURL(“http://www.flashfridge.com/“, “blank”);
}

Step 24

Create a new layer above the Invisible Button layer and name it A.S. (Action Script). Then, click on frame 1 and enter the folowing Action Script code inside the Actions Panel:

_root.submit.onEnterFrame = function() {
if (mouse_over_submit) {
_root.submit.nextFrame();
} else {
_root.submit.prevFrame();
}
};

We’re done!

Test your Movie (Ctrl+Enter).

Have a nice day!

Source: flashfridge.com

Leave a Reply

Name (required)

Mail (will not be published) (required)

Website