Creating a boucing ball:
In this tutorial I will show you how to create basic animation
using Macromedia Fireworks as shown below, Fireworks creates files
with a PNG (Portable Network graphics) which can later
be rendered in to a desired format. I expect you to have a basic
idea of using Macromedia Fireworks 4.0, its ok if you don't.
1. After booting Macromedia Fireworks, Create a new document
with dimensions Width: 400, Height: 150, Background
custom with Hex values #E9E3DE, I am using this colour
so that the background of my animation gels with the background
of the Web page. You are free to use any other color or keep it
2. Open the Tool bar in case it is not open from Windows
-> Tools. First I create the ball using the Ellipse
3. At the top left corner draw a ball drag while keeping
the Shift key pressed this gives u a proper circle. Go to
Window > Fill or press Shift + F7 to open the Fill
palette. Select a Radial fill from the drop down as shown
below (fig 1.2). Click on the edit (fig 1.3) to change colours if
you want to put any other colours rather than black & white.
Click on the paint bucket tool and adjust the Radial gradient to
make it look as it does in the animation.
4. Now after creating the ball you need to convert it into
an symbol (refer the gray area for a brief explanation on making
|Select the object (Ball)
U just created, Right click on the object using the Pointer tool and the select 'Convert
to Symbol' or simply press F8 on the Keyboard
5. After creating a symbol it will look something like one
shown below when selected.
6. Now 'Copy' the symbol & 'paste' it,
by default the pasted object will overlap the original object, Use
the pointer tool to place the object to the bottom center but a
little towards the left of the canvas to give a realistic effect
as per Physics :).
7. Now comes the Animation part, keeping both the
objects selected go to Modify > Symbol > Tween Instances,
You will get a pop-up asking how many frames as shown below (fig
1.5). Say 5 frames and keep 'Distribute to Frames'
checked, say OK.
8. Now go to Window > Frames, you will see a total
of 7 frames in the Frames palette 1 for the beginning, one
for the end and five for the in-between tweening as we had said
five frames. You can now view the animation U just created by clicking
on the Play button at the bottom of the document window
9. Hold on! that's not the end of the animation cos after
the ball hits the floor it has to bounce back up and in the same
10. Now select the last frame in the animation click on the
small triangle on the Frames palette (fig 1.6) as shown below.
11. After you click on 'Duplicate Frame' U will get
a pop-up click on 'At the End', so U will get frame N0. 8
select the Ball with the pointer tool.
12. Go to Modify > Transform >Distort &
distort the ball as if it looks a bit pressed as it touches the
ground as shown in the image below.
13. Now go back to the first frame copy the ball from there
and paste it on Frame No.8 at the Top-Right corner of the
14. Repeat step 7, Now you will have total of 14
frames, click on the Play button to view your animation.
15. Now the final part i.e. rendering your animation or exporting
it. Go to the File menu select Export Preview, You
will get a export preview window. In the Format selection
choose Animated GIF, If you want to control the speed of
the animation go to the Animation tab select all the frames
from top to bottom by pressing Shift and simultaneously clicking
on the top and the bottom frames and putting a number in the input
box with a small clock above it shown below.
16. Click on Export, save the GIF animation
wherever u want to on your Hard drive or your Floppy and VOILA your
animation is ready. Similarly before you save ur animation u can
save it in SWF (flash) format just change the file type in
the 'Save As' window to Macromedia Flash SwF.