1. Start Fireworks
|
|
2. Follow these steps to create a new Fireworks file
a. Select the File menu, then choose New.
b.Choose a width of 300 and a height of 150.
|
|
3. Draw a red rectangle
a. Click on the rectangle tool.
You may need to select the rectangle tool first by clicking the mouse on the button and holding it there. That will pop up a menu of tools to choose from.
|
|
b. Change the line color to red
Select square next to the pencil tool and choose the color red. This sets the rectangle's edge color to red.
|
 |
c. Change the fill color to red
Select the square next to the paint bucket and choose the color red. This sets the rectangle's inside color to red.
|
|
d. Now draw a skinny rectangle across the left half of the drawing |
|
4. Draw a green circle
a Click the rectangle tool and hold the mouse down until you see a list of tools. Choose the ellipse tool.
b. Set the edge and fill colors to green
|
 |
c. Draw a green circle to the right of the rectgangle
|
Frame 1 |
5. Duplicate the frame
a. On the right is the Frame panel. Click the Options button (shown circled in red).
b. Choose Duplicate Frame
c. Click OK
|
 |
6. Move the rectangle
a. Click the pointer tool.
b. Drag the rectangle about a third of the way over to the circle
c. Choose Duplicate Frame again
d. Drag the rectangle about the same distance toward the circle
e. Choose Duplicate Frame
f. Drag the rectangle so it just touches the circle
f. Choose Duplicate Frame
|
Frame 2
Frame 3
Frame 4
|
7. Flatten the circle
Your going to change the shape of the circle.
a. Choose the subselection tool
This tool lets you select points inside an object
b. Drag the left point of the circle (shown by the red arrow) a bit to the right
|
|
8. Move the cirlce against the rectangle
a. Switch back over to the pointer tool
b. Drag the circle so it just touches the rectangle
c. Choose Duplicate Frame
|
Frame 5 |
9. Move the rectangle and the circle to the right
a. Click the rectangle
b. Hold the shift key down and click the circle
c. Drag the two shapes a bit to the right
d. Choose Duplicate Frame
|
|
| 10. Repeat step 9 two times |
|
11. Test your animation from inside Fireworks
Click the Play button below the image
The animation should play through the eight frames
|
 |
12. Export your file using steps 7-10 from this page
Important: In the Export Preview window choose Animated GIF for the File Format
Name your file
David's collision
but replace David witih your name.
|
 |
13. Test the GIF
a. Go to your My Documents folder
b. Right click on the collision file you just saved
c. Choose Open With and then Internet Explorer
You should see the animation playing in a browser window
|
 |
| 14. Turn in the assignment |
|
