Toxiclab.org

Happy and sad smiley button with URL

9.12.2008, 20:6
Submited in: Flash | Total Views: 16941

Using this thoroughly explained, detailed flash 8 lesson, you will see how to create happy and said smiley button. Smiley will be sad until you hover the mouse over it - then they will become happy!! :) Using this lesson, you will also learn how to design simple flash smiley, how to apply action script code on it, how to animate it and much more!

Example: Move your mouse over the sad smiley and and he will be smiling!!



Step 1

Create a new flash document. Select Modify > Document (shortcut key: Ctrl+J ). Set the dimensions of your document as whatever you like. Select white as background color and set your Flash movie's frame rate to 26 fps. Then, click ok.





Step 2


Take now the Oval Tool (O). 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 yellow and draw Oval shape about 170x170 px like it is shown on the picture below!







Step 3

While the Oval Tool (O) is still selected, for Fill Color choose black and draw again Oval shape about 25x40px and place it on the position like it is shown on the picture below! That shape will represent left eye!







Step 4

Click now on the eye with the Selection tool (V) to select it. Then, Press Ctrl+C key (Copy) to copy the eye shape. After that, press Ctrl+Shift+V key (Paste in Place).

Step 5

Hold Shift on your keyboard and press the right arrow key repeadetly until the second eye has been positioned well. See the picture below!



Step 6

It's time for mouth, so take the Line Tool (N). In the Properties Panel (Ctrl+F3), choose black as color, Solid as line type and a thickness of 3.



Step 7

Draw now a horizontal line using the Line tool. Do this by holding Shift, clicking and dragging your mouse horizontally.



Step 8

Take now the Selection Tool (V), select a horizontal line and start dragging your mouse upwards. See the picture below!





Step 9

Take the Selection Tool (V) and select whole smiley shape. Then, press F8 key (Convert to Symbol) to convert this smiley shape into a Movie Clip Symbol.



Step 10

While the new made Movie Clip is still selected, go to the Properties Panel below the stage. On the left side, You will find the Instance name input field there. Call this Movie Clip smiley. See the picture below!



Step 11

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



Step 12

Click now on frame 15 and press F5 key. Then, take the Selection Tool (V) and select only a mouth! After that, press Ctrl+X key on the keyboard (cut).

Step 13

Create a new layer above the layer 1 (layer 2) select it and press Ctrl+Shift+V key on the keyboard (Paste in Place).

Step 14

Select now frame 15 of layer 2 and press F6 key. Take the Selection tool (V), select the mouth and start dragging your mouse downwards!





Step 15

Select now layer 2 and in the Properties Panel (Ctrl+F3) for Tween drop down menu choose Shape.



Step 16

Go back on the main scene (Scene 1).

Step 17

Call the current layer smiley. Double-click on its default name (Layer 1) to change it. Press Enter once you have typed in the new name!

Step 18

Create now a new layer above the layer smiley and name it Invisible Button. After that, create the Invisible Button over the smiley. See the picture below!



Step 19

Take now the Selection Tool (V) and click once on the invisible button to select it. Then, go to the Action Script Panel (F9) and enter this code inside the actions panel:

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

on (rollOut) {
_root.mouse_over_smiley = fstartlse;
}

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

Step 20

Create now a new layer above the layer Invisible Button and name it action. Then, click on the first frame of layer action script and enter the following Action Script code inside the Actions panel:

_root.smiley.onEnterFrame = function() {
if (mouse_over_smiley) {
_root.smiley.nextFrame();
} else {
_root.smiley.prevFrame();
}
};

That's it!

Test your Movie and enjoy!

Download example

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

Browse by category


Most popular tutorials