Image Info Effect – Flash CS3 Tutorial
Beatriz Mariniello

December, 2007

In this tutorial we will show you how to add info to an image in your web page using Flash CS3.

Start a new document.
Then, set the frame rate to 34:

Import an image into the stage:

Then, select the image, and convert it to Symbol: Movie Clip
Name it: picture1_mc

Don't forget to also include an instance name to it at the Properties Panel.
Call it: "picture1_mc"

After that, create a new layer above the layer 1 and name it: "toolbar"

Then, select the toolbar layer and select the Rectangle Tool.
In the Colors portion of the Tool panel, block the Stroke color.
For the Fill color choose any color and draw a rectangle which will represent your toolbar.

Then, while the toolbar is still selected, you must convert it into a Symbol.
Select:Movie Clip and name it: "toolbar_mc".

While the new Movie Clip is still selected, go again to the Properties Panel and give it an Instance name in the input field call it: "toolbar_mc".

After that, double click on the movie clip with the Selection tool. You should now be inside the Movie Clip.
Then, create a new layer above the the layer 1 and name it: "dynamic_content" or "dynamic_text".

After that, select the dynamic content layer and select the Text tool.
Then, go to the Properties Panel and select the following options:

Select a Dynamic Text field.
Select the Arial font.
Choose 11, 10 or 12 as a font size.
Select any color.
As the rendering option, select Anti - alias for readability.

Then, create the dynamic area over the toolbar.

Then, type in the dynamic area: "toolbar".

After that, go back to the the main scene and then, move the toolbar somewhere out of the stage:

Now we will create a new layer above the toolbar layer and we will name it: "action".

Now, click on the first frame of the layer "action" and go to the Action Script Panel.
After doing so, enter the following action script code:

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 a flower");
}
picture1_mc.onRollOut=function() {
_root.funk_toolbar_mc(false);
}

And you are done =)

Test your movie, this is the result:

Have fun!!

Download the original source files from this tutorial in Zip format Here




 

Copyright (c) 2007, Beatriz Mariniello, All Rights Reserved