banner

Animating a Butterfly in Fireworks and Flash


Build a Simple Graphic and and Animate It!



Draw Your Butterfly

  Open Fireworks from the yellow Fw icon in the Dock. Create a new PNG document from the welcome screen and set its size to the same dimensions as the Flash stage (550 x 400). Set its background to transparent. In the Vector section of the toolbox, select the Ellipse tool (may be behind the Rectangle or Polygon tool). In the Properties panel, set the fill and stroke colors to black and the stroke width to 7. Draw a long vertical oval in the middle of the background. Change the Ellipse tool to the Polygon tool. In the Properties panel, set the number of polygon sides to 3. Set the fill color to a bright color of your choice. Draw a left-pointing triangle. Copy and paste it, move the new triangle below the first, paste again. Move this triangle to the right of the first. Go to the Edit menu, select Transform>Flip Horizontal, copy and paste this one and move it below the original. Finally, select the Line tool and draw two diagonal lines from the top of the oval to give your butterfly its antennae. Move the triangles against the oval body until they resemble wings. Your butterfly should look something like the illustration to the left.

Import and Animate Your Butterfly

  Open Flash and create a new document. Import your butterfly png file to the Library, using the following settings: Into: New Layer, Objects: Keep all paths editable. Double click the icon for the butterfly.png file in the Library panel to enter Symbol Editing mode. Use the various methods of rounding and reshaping the wings and antennae, using the Selection, Subselection and Pen tools. Follow these steps in exact order: Select both left wing segments and group them (command -G). Repeat for the right wing segments. Right-click either group and Create Motion Tween. Move the timeline playhead to the end of the tween. Select the Free Transform tool. Move the tiny circular registration point in the center of the wings to the edge of the transform box that is next to the body. Pull the outer edge of the wing by its central handle in toward the body until it is about one-fourth its full width. Move the playback back and forth to see the animation. Right-click on the tween in the timeline, select Copy Frames, then right-click on the first empty frame after the tween to paste them. Finally, right-click the pasted tween and Reverse Keyframes. Repeat these steps for the opposite group of wings, and you should have a complete open-and-close movement of wings.

Back