Read this thoroughly explained, detailed flash lesson and see how to create photo information animation using the toolbar and action script code. You can use this action script animation for some presentation, flash banner... Using this lesson, you will also learn how to import any photo into a flash stage, how to convert it into a movie clip symbol, how to create instane name, how to create toolbar field and much more! Let's go!

Example:

Move your mouse cursor over the photo to see information!



Step 1

First, save the photo below that we will use for this lesson.





Step 2

Create a new flash document. Press Ctrl+J key on the keyboard (Document Properties) and set the dimensions of your document as the dimensions of photo (400x300px). Select any color as background color. Set your Flash movie's frame rate to 22 and click ok.

Step 3

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

Step 4

Choose now File > Import > Import to stage (Ctrl+R) and import the photo that you just saved into a flash stage. While the photo is still selected, go to the Align Panel (Ctrl+K) and do the following:

1. Make sure that the Align/Distribute to Stage button is turned on,
2. Click on the Align horizontal center button and
3. Click the Align vertical center button.

Step 5

While the photo is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 6

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 photo_mc. See the picture below!



Step 7

It's time for toolbar, so create a new layer above the layer photo and name it toolbar! After that, Select the 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 #B1B2B3 color and draw a rectangle shape about 140x15 px. See the picture below!



Step 8

While the rectangle shape is still selected, hit F8 key (Convert to Symbol) to convert it into a Movie Clip Symbol.



Step 9

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 toolbar_mc. See the picture below!



Step 10

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



Step 11

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

Step 12

Create a new layer above the layer toolbar inside and name it dynamic text.

Step 13

Select the dynamic text 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 and bold it.
c) Choose 11 as font size.
d) Select #303132 as color.
e) As the rendering option, select Anti - alias for readability.



Step 14

After that, create a dynamic area over the toolbar. See the picture below.



Step 15

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



Step 16

Type now on the rectangle shape toolbar. See the picture below!



Step 17

Go back on the main scene (Scene 1).

Step 18

It's time for action script code, so create a new layer above the layer toolbar and name it action script. After that, select the first frame of layer action script and go to the AS 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;
 }
}

photo_mc.onRollOver=function() {
  _root.funk_toolbar_mc(true, "This is Petra Nemcova!");
}
photo_mc.onRollOut=function() {
  _root.funk_toolbar_mc(false);
}

We're done now!

Test your movie and enjoy!

Download source file (.fla)