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 a second:

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.





| Home | B3ta | Me | Contact | Flash and stuff | Links |

Site design © Sam Cartwright 2004