| |
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.
|
|