Info about object

Date: 13.7.2007, 20:16 Total views: 28218

This lesson, explained in extreme detail, will teach you how to create info panel when you move your mouse cursor over the object. To make this lesson, you have to use action script code. Using this lesson, you will also learn how to convert any symbol into a Movie Clip Symbol, how to create instance name, how to enter any action script code into a Action panel and much much more! You can use this lesson for some web elements as information about some photos, presentations...

Example:

Step 1

Create a new flash document.

Step 2

Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as whatever you like. Select any color as background color. Set your Flash movie's frame rate to 34 and click ok.

Step 3

Draw, or Import, or create a three objects in flash that you will be use for this example. For this example I will be used a three pictures. You can also download my pictures if you like and use it for this example.

After you have drawed, imported, or created any objects or pictures, select every object, picture... and press F8 key (Convert to Symbol) to convert that object into a Movie Clip Symbol. For example:

After you have converted first object, picture... into a Movie Clip Symbol, go to the Properties Panel (Ctrl+F3) below the stage. On the left side, You will find the Instance name input field there. Call that Movie Clip (object, picture) whatever you like. For this example, I will call my Movie Clip "picture1_mc". See the picture below.

Do that also for every other objects, pictures....

Step 4

Cretae a new layer above the layer 1 and name it toolbar.

Step 5

Select toolbar layer and take the Rectangle Tool (R). 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 any color and draw a rectangle which will represent your toolbar. See the picture below.

Step 6

While the toolbar is still selected, press F8 key (Convert to Symbol) to convert this toolbar into a Movie Clip Symbol.See the picture below.

Step 7

While the new made Movie Clip (toolbar) is still selected, go again to the Properties Panel (Ctrl+F3).On the left side, You will find the Instance name input field there. Call this Movie Clip(toolbar) toolbar_mc. See the picture below.

Step 8

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

Step 9

After that, create a new layer above the layer 1 and name it dynamic content.

Step 10

Select the dynamic content layer and take the Text tool (T). Then, go to the Properties Panel (Ctrl+F3) below the stage, and select the following options:

a) Select a Dynamic Text field.
b) Select a Trebuchet MS font.
c) Choose 11 as font size.
d) Select any color.
e) As the rendering option, select Anti - alias for readability.

Then, create the dynamic area over the toolbar. See the picture below.

Then, go again to the Properties Panel (Ctrl+F3) and for Instance Name type text. See the picture below.

Then, type in dynamic area "toolbar". See the picture below.

Step 11

Go back on the main scene (Scene 1).

Step 12

Then, move the toolbar somewhere out of stage. See the picture below.

Step 13

It's time for action script code, so create a new layer above the toolbar layer and name it action.

Step 14

Click on the first frame of layer action and go to the Action Script Panel (F9). Then, enter the following action script code inside the actions panel:

toolbar_mc._visible = false;
letter_width=8;

funk_toolbar_mc = function (flag, toolbar_mc_text) {

if (flag) {

createEmptyMovieClip("control", this.getNextHighestDepth());
toolbar_mc.text.text = toolbar_mc_text;
toolbar_mc._width =letter_width*toolbar_mc.text.text.length;

control.onEnterFrame = function() {
if ((_root._xmouse+toolbar_mc._width)>Stage.width) {
d_x =-10-toolbar_mc._width;
}
else {
d_x=10;
}
if ((_root._ymouse-toolbar_mc._height)<0) {
d_y =toolbar_mc._height;
}
else {
d_y=0;
}

toolbar_mc._x = _xmouse+d_x;
toolbar_mc._y = _ymouse+d_y;
toolbar_mc._visible = true;
}
} else {
toolbar_mc._visible = false;
delete control.onEnterFrame;
}
}

picture1_mc.onRollOver=function() {
_root.funk_toolbar_mc(true, "This is flowers");
}

picture1_mc.onRollOut=function() {
_root.funk_toolbar_mc(false);
}

picture2_mc.onRollOver=function() {
_root.funk_toolbar_mc(true, "This is sunset");
}

picture2_mc.onRollOut=function() {
_root.funk_toolbar_mc(false);
}

picture3_mc.onRollOver=function() {
_root.funk_toolbar_mc(true, "This is sea");
}

picture3_mc.onRollOut=function() {
_root.funk_toolbar_mc(false);
}

We're done!

Have a nice day!

Download source file (.fla)