Toxiclab.org

Active flash icon

18.12.2006, 2:20
Submited in: Flash | Total Views: 65839

In this detailed tutorial made for Flash 8, you will see how to create active flash icon which you can use for any web sites. You will also learn how to use Action Script, how to convert icon into a Movie Clip Symbol, how to create Instance name and more.



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 150 pixels. After that, in Document Properties dialog find the Frame rate field and enter 32 inside it.

Step 2

Using the Flash tools for drawing, draw some "icon". See the picture below.



Step 3

Take the Text Tool (T), and type above the icon "flash icon".



Step 4

Select the "icon" and "text" (Ctrl+A), and press F8 (or select Modify > Convert to Symbol ) to convert this icon and text into a movie clip symbol.



Step 5

You can use the flash filters, if you like to have more attractive icon.



Step 6

Select the "icon", Go to the Properties Inspector (also called the Properties panel, below the scene), to its left side. You will find the Instance name input field there. Name this Movie Clip icon.



Step 7

Double-click on the movie clip on stage with the Selection tool (V), or choose right click and Edit in Place.



You should now be inside the movie clip.



Step 8

Select only the text ("flash icon"), press Ctrl+X key (Cut), insert a new layer (layer2), click on frame 2 and press Ctrl+Shift+V (Paste in Place). After that, lock layer2 (text layer), select layer 1 and press F8 key (Convert to Symbol) to convert only the icon (without text) into a Movie Clip.



Step 9

Click on frame 10 and press F6 key. Then, using the mouse or by arrows key on the keyboard, move the "icon" a little up.

Step 10

While the "icon" is still selected, go to the Property inspector. On the right, you will see the Color menu. Select Tint in it ( Choose color which you like) and put it down to 43%.



Step 11

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 12

Lock layer 1, select layer 2, click on frame 10, and press F6. Then, take the Selection Tool (V), and move the "text" beneath the "icon". 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

Click on frame 10, open the Action Script Panel (F9), and type this:

stop();

Step 15

Take the Selection Tool (V), and using "drag and drop" technique, move the layer 2 beneath layer 1.

Step 16

Go back on the main secene (Scene1), insert a new layer, name it Invisible Button, select it, and create the Invisible Button over the Icon. See the picture below.





Step 17

Select the Invisible Button, open the Action Script Panel (F9), and paste this script:

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

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

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

}

Step 18

Insert a new layer and name it AS. Click on the first frame, open the Action Script Panel (F9), and paste this scritp:

_root.icon.onEnterFrame = function() {
if (mouse_over_icon) {
_root.icon.nextFrame();
} else {
_root.icon.prevFrame();
}
};

That's it!

Have a nice day!

Download example

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

Browse by category


Most popular tutorials