As i said on the previous page, animating in fireworks
is really rather easy. To start this tutorial you will need this
file. The aim of this tutorial is
to creat an animation of the red ball moving across the yellow square.
Step 1 - Add a grid.
To ensure that the movement you get in the finished animation is
smooth, add a grid to match the distance the ball travels between
frames. To do this go to view > Grid > show grid. also enable
snap to grid to further smooth the movement:
Step 2 - Making frames.
Now, drag the ball off the left hand side of the image
so that it is completely hidden.
In the frames palette, drag frame one to the new/duplicate
frame button, outlined in red below:
In this new frame, move the red ball so that it's
right hand edge touches the first gridline on the stage like this:
Step 3 - Repeat
basically, that's it. Keep making new
frames and then shifting the ball along by one gridline and eventually
it will move off the right hand side of the image. This took me
15 frames and i ended up with this:
Step 4 - Set up timings.
I wanted the animation to run a little
faster. To do this, click frame 1 and then shift-click your final
frame. Next click the frames menu button in the top left corner
of the frames and history dialogue. From the drop down menu select
properties and then set the frame delay to 2/100 of a second:
I can also set up the timings of individual
frames using this technique. Select only frame 1 then bring up the
frame properties dialogue again. Set the frame delay to 50/100 of
And that's it. The final png for this
file is here, so that you can compare.
For information about exporting your
animation for web work or b3ta see here.