This tutorial was written for the Flash Designer software, which allows you to create flash animations in a much easier way than by using Macromedia Flash. You may get Flash Designer here.

 

 

 

This tutorial demonstrates how create a Flash movie that changes its size when the user moves the mouse over it and collapses when the mouse is out of the rectangle.

1. Launch Flash Designer and create blank animation. Set frame size ("Frame" > "Frame Size") to 300 x 300.
2. Make the first frame static, choose "Frame" > "Frame Delay", check "Stop" and click OK.
3. Draw a small rectangle (about 80 x 80 pixels) in the left top edge with "Rectangle" tool. Later it will react to mouse over events. Press Ctrl+F to change rectangle fill color.
4. Choose "Frame" > "Duplicate" to make a copy of the frame. Frame 2 will be created.
5. Enlarge the rectangle on Frame 2 with "Item" > "Align" > "Fit to Frame" command (or resize it with "pointer" tool)
6. Go back to Frame 1 and define "MouseOver" action for smaller rectangle. Select the rectangle and choose "Item" > "Actions" > "OnOver". Choose go to "Frame 2" and click OK.
7. Go to Frame 2 and define "MouseOut" for larger rectangle. Select the rectangle and choose "Item" > "Actions" > "OnOut". Choose go to "Frame 1" and click OK.
8. Press F9 to preview the animation. Verify if mouse actions work.
9. Create animation effect. Go to Frame 2, select larger rectangle and choose "Item" > "Intro" > "Tween". Select "Frame 1:Rectangle" as the tween start and click OK.

Now you have a base for your dynamic size Flash animation.

In the next step you have to export swf file and use absolute positioning to embed it in the HTML page.

1. Choose "Movie" > "Export Options" and check "Transparent" option. Uncheck "Show loader progress". Click OK.
2. Choose "File" > "Export SWF file" and save Flash file.

To embed Flash file in your web page use DIV tag:

<DIV STYLE="position:absolute">
<OBJECT CLASSID="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
...
</DIV>
<P>&nbsp;
<P>&nbsp;

Absolute position will take DIV content off the HTML flow and place it over the elements that follow DIV tag. To make some space for the smaller rectangle (so it doesn't overlap the text) use few nbsp; and <P> tags