December 5, 1999

Creating a Shape Morph Animation in Fireworks

This is my first tip for using FreeHand with Fireworks. Fireworks is an exciting tool to create web graphics, animations and roll-overs. You can get a free 30 day demo from Macromedia's web site.

Fireworks works very similar to FreeHand and that makes it's learning curve very short for FreeHand vets. One of it's shortcomings however, is blending or morphing two completely different shapes together. But, it can open almost any native FreeHand document flawlessly, keeping layers and other information intact. Below is how you can easily morph one or more shapes together to create some interesting animations in Fireworks.

Version: 7 and above

 
 


FreeHand Steps

The first step is to draw the shapes you want to morph into each other. Above is the ending morph shape aligned on some guides. It's a simple star shape created with the Polygon tool.

 

Then I draw the starting morph shape. This is a basic filled circle. If you want to morph other shapes, draw those two.

 

Select both shapes and Blend them together. You can adjust the number of steps in the blend depending on how smooth you want the final animation to be, and how big the graphic is.

If the graphic is going to be pretty large, you may want to give it less steps to ensure a smaller file size. Above I will reduce the steps to about 15.

That's it.... now you can then save this file to be opened in Fireworks in the next group of steps. No special exporting is needed.


Fireworks Steps

Above is the Vector Options when opening a native FreeHand document in Fireworks (v3 shown). You can play with some of the options depending on what you'll need, but it's best to leave them at their defaults shown above.

The ones to watch out for are the Render as images options for the Groups and Blends. If you're not careful, you could end up rasterizing your Blends or Groups of objects.

 

When you import the art, the Blend will still be grouped together. Just select and Ungroup the Blend.

 

Keeping all of the shapes selected go to the Layers palette and hit the Distribute to Frames button shown above.

 

This will create a new frame for every shape of the selected objects like shown above. Of course they will be in reverse order.

To remedy this you can do one of two things depending on which version of Fireworks you're working in.

  • Fireworks 2: Manually reorder the frames by hand. Or go back to the original FreeHand file and reverse the objects in the Blend.
  • Fireworks 3: Go into the Commands -> Document menu and choose Reverse All Frames.

You can test the animation by hitting the Play button at the bottom of your document. You can then refine the animation play speed if needed.

 

Above is the test animation with various pauses in the timing at the beginning and end. It's exported settings are as follows:

  • Adaptive palette
  • 32 colors
  • No Dither
  • No Transparency

You now have a very nice morph of two different shapes.

 

After you get a morph you like, go ahead and add other things like text and some live effects. The creativity is endless in Fireworks.

So that's how you can easily create morphing shapes using FreeHand as an additional tool with Fireworks. You can also use similar techniques to import and animate Smudge Effects and Step-and-Repeat objects that wouldn't be as easy to create in Fireworks.