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

2. Open the Tool bar in case it is not open from Windows -> Tools. First I create the ball using the Ellipse tool.


fig 1.1

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.

fig 1.2
fig 1.3


4. Now after creating the ball you need to convert it into an symbol (refer the gray area for a brief explanation on making symbols.
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 :).

fig 1.4


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.

fig 1.5


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

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

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.