Animating Objects

Animating Objects

Animating Objects in Fireworks is a snap if you know some basic steps. This activity will show you how to move an object across the page like the example shown below:

Open an object (or create your own) in fireworks.
Select the object with the arrow tool.
Click Modify on the Menu Toolbar>Animate>Animate Selection.
At the Animate Selection Dialog Box, choose the following:
- Frames: The number of frames (Ex. 5) you want your animation to be.
- Move: Enter a number (Ex. 180) that the object will move in pixels.
- Direction: Enter a number (Ex. 45) that will be the angle from the starting point at which the object will move.
- Click OK to close the Animate Selection dialog box.
- If you are asked if new frames should be added to the document, click OK to add the new frames. The object now has a small arrow in one corner indicating that it's an animation symbol. The line is the symbol's motion path and each dot represents a frame.
To preview the animation directly on the canvas, follow the directions below.
- Open the Frames panel is not visible by clicking Window on your Menu bar, then Frames.
- In the bottom area of the Document window, click the Play/Stop button.
- Click the Play/Stop button at the bottom of the Document window to stop the animation.
- Click a frame in the Frames panel to display the frame in the Document window.
To make changes/modifications to the animation using the Animate dialog box, follow the helpful tips below:
- If the Object panel is not visible, choose Window>Object.
- Click Frame 1 in the Frames panel.
- Use the pointer tool to select the symbol. The Objects panel displays the current animation setting.
- Place values in Scaling (Ex. 110) to scale the object. By entering 110, this sets the animation to gradually increase the object size from the first to last frame by 10 percent.
- For Opacity, enter a number (Ex. 10) in the left text box and a number (Ex. 100) in the right text box. This will fade in the symbol from the first to last frame.
- For Rotation, enter a number (Ex. 180) that will make the object rotate that number of degrees as it travels along the motion path.
- Click the Play button to see the changes. Click the Stop button to stop the animation.
In addition to changing animation setting, you can change an animation by modifying its motion path.
- Use the Pointer tool to select the symbol on the canvas so that the motion path appears (a series of red, blue, and green dots along a line is the path the object will travel.
- Either drag the starting frame (the green dot) of the ending frame (the red dot) to change the angle of the motion path.
- Drag any of the intermediate frames (the blue dots) to move the entire motion path.
Export as an Animated GIF. For your animation to play correctly in a Web browser, you can export it as an Animated GIF or Macromedia Flash SWF.
- If the Optimize panel is not visible, choose Window>Optimize.
- Select Animated Gif from the Export File Format pop-up menu.
- Choose File>Export.
- Select a location and enter a name for the animation.
- Select HTML and Images from the Save As pop-up menu.
- Select Export HTML File from the HTML pop-up menu and click Save.
- Open the export HTML file in a browser to see the animation.
To change the frame rate (the rate in which your object moves) open the Frames Panel (Window>Frames)
- A number appears to the right of each frame. Double click in the box that contains the number to open a drop down menu.
- Change the numbers, smaller numbers will speed up the animation rate and larger numbers will slow the speed rate down, until you have the result you want.
To create the banner, insert another layer, draw a rectangle, and type the words inside of the shape. Click in each frame to place the banner in the correct position.
To drop the file in Dreamweaver, click the Insert Fireworks HTML button on the Common Objects Toolbar. Select the HTML file of your animated object.
Preview your animation in a browser.