| After you have decided the output format for your animation, you can start building your creative masterpiece of motion. Again, Fireworks enables you to build animations using the frame-by-frame method, the tweened method, or the animation symbols method. Frame-by-Frame Animation Frame-by-frame animation is the most basic method of the three types of animation you can do in Fireworks. Each element in each frame is repositioned or modified to create the illusion of motion. Remember the stick figures you drew on your school notebooks and how you flipped through the pages to make them move? Those flip books used frame-by-frame animation. Frame-by-frame animation requires the artist to create each frame by hand. Tweening and animation symbols use the computer to automate the drawing process required between frames . The simplest way to create an animation is to create an object, add a new frame, place the object on the new frame, and modify it in some way (change color , reposition, and so on). Repeat each step of this process until the animation is built. The rub with this method is that you cannot see the previous frame as a point of reference if you're moving the object. If you've ever seen hand animators at work, they're constantly flipping between sheets of tracing paper (also known as onion skin) to gather their reference points for the animation. Fortunately, Fireworks offers two solutions to this dilemma: Onion Skinning and the Distribute to Frames command. Onion Skinning Onion Skinning pays homage to the traditional animation work process, where animators worked on translucent pieces of paper so they could see several layers of drawings simultaneously . In Fireworks, Onion Skinning simulates that process by displaying nearby frames partially grayed out (Figure 26.12). Figure 26.12. Onion Skinning enables you to use surrounding frames to aid in positioning graphics in the animation. 
To use Onion Skinning, open the Frames panel. In the lower-left corner is the Onion Skinning button. Click the button to view the Onion Skinning menu (Figure 26.13). The No Onion Skinning option turns off the feature and shows only the active frame. All other options show a user a selected range of frames. Note that all ranges are relative to the active frame. If you select the Multi-Frame Editing option, all visible objects can be edited, including those on inactive frames. Figure 26.13. The Onion Skinning menu provides several display options. 
Distribute to Frames Another option is to use the Distribute to Frames command, which takes a group of selected objects and sends each to its own frame in the order in which it is stacked in the Layers panel. To use the Distribute to Frames command, create all the objects in one layer. Notice that there are several sublayers , depending on how many objects you create. Use the Layers panel to make sure your objects are in the proper stacking order for the animation. Because objects are distributed from bottom to top, make sure the graphic that starts your animation is the bottom sublayer and the graphic that ends your animation is the top sublayer. Select all the objects you want to include in the animation with Edit, Select All, or Shift-click if you want to selectively choose graphics. Click the Distribute to Frames button in the Frames panel and Fireworks automatically inserts each graphic in its own frame, in order (Figure 26.14). Figure 26.14. Use the Distribute to Frames command to automatically place each layered object in its own frame. 
Playing Your Animation After you've created your animation, you'll want to see whether you've effectively created the illusion of motion. Built right into the document window is a set of playback controls, similar to those found in a VCR (Figure 26.15). Figure 26.15. Use the playback controls in the document window to preview your animation. 
The animation will be played back a high rate of frames per second and will loop continuously. To change the frame delay, which determines how long the active frame is displayed, double-click in the frame delay of any frame. Remember that frame delay is measured in 100ths of a second. The default frame delay of 7 indicates the frame is delayed seven-tenths of a second. To hold the frame for 3 seconds, enter a value of 300. To control the looping properties of your animation, click the GIF Animation Looping button at the bottom of the Frames panel (Figure 26.16). Select an option (No Looping, 1 “5, 10, 20 and Forever) to set the looping properties. Figure 26.16. The GIF Animation Looping button controls the looping properties for the animation. 
Tweened Animation After working with frame-by-frame animations, playing with tweened animations will appear to be a piece of cake. To build a tweened animation, you create a beginning and an end point, then define the number of frames, or steps, in between. Fireworks does the rest. To create a tweened animation, create an object and convert it to a graphic symbol (Modify, Convert to Symbol, select Graphic Symbol, in the Symbol Properties dialog box) (Figure 26.17). Drag two instances of the symbol onto the canvas. They must be instances of the same symbol. Figure 26.17. After creating the first object in a tweened animation, convert the object to a graphic symbol. 
Position and modify each instance as desired. Select both instances and choose Modify, Symbol, Tween Instances (see Figure 26.18). Enter the number of steps in the Tween Instances dialog box. Select the Distribute to Frames option to distribute the symbols across frames. If you want to modify the symbols, leave this option unchecked. Figure 26.18. Use the Tween Instances command to create the tweened animation. 
Animation Symbols Animation symbols are one of the three symbol types in Fireworks (animation, button, and graphic). They are stored in the Fireworks library, and you can use them by simply dragging each symbol onto the canvas. The beauty of using animation symbols is that they hold objects in multi-frame animations together as a single unit. If you move one of the objects, the rest are automatically repositioned. Although animation symbols are similar to tweened animations, there are a few differences. When you use animation symbols, Fireworks sees the entire animation as single entity. Accordingly, you can make global changes to the entire animation. Animation symbols are also created from a single selection and parameters that you control (scaling, positioning, and rotation). Because animation symbols are created from a single selection (tweened animation requires two symbols), you cannot visually set the endpoint. You must numerically designate the endpoint of the animation. But, animation symbols use modifiable motion paths, which allow you to easily change positioning after the animation is created. Creating Animation Symbols The first step in building an animation with animation symbols is to create the symbol. To create the symbol, select one or more objects on the canvas. Choose (Modify, Animation, Animate Selection) to open the Animate dialog box (Figure 26.19). -
Frames ” Sets the number of frames used in the animation. -
Move ” Controls the number of pixels the object is moved over the course of the animation. You can visually reposition the object later by modifying the motion path . -
Direction ” Controls the direction, in degrees, the object is moved. -
Scale To ” Controls the size of the final object compared to the first object. A relative percentage is used to measure this. -
Opacity ” Changes the object's opacity. The first number represents the opacity of the first object, whereas the second number represents the opacity of the last object. -
Rotation ” Controls the number of degrees the object is rotated . The CW and CCW radio button options represent clockwise and counter-clockwise rotation, respectively. Figure 26.19. The Animate dialog box enables you to set the parameters of an animation symbol. 
Modifying Animation Symbols You can modify animation symbols in several ways, including modifying the animated object itself, editing the Animate dialog box settings, and modifying the motion path. To modify the animated object itself, simply double-click an instance and the Symbol Editor window appears (Figure 26.20). You can then add new objects and modify or replace the existing object. Note: All objects in the animation are modified, but the animation itself is not modified. Figure 26.20. Use the Symbol Editor to modify the animated object. 
To make changes in the Animate dialog box, simply select the animation and choose (Modify, Animation, Settings) to see the Animate dialog box. Make your changes, press OK, and the symbol is updated. If you're a numbers person, the Animate dialog box is the way to go to set the motion path. If you're a visual person, use the motion path to modify the object's trajectory in the animation. After you've created the animation symbol, select an instance and the motion path will appear (Figure 26.21). This path displays the length and direction of the trajectory. To change either setting, drag the first (green) or last (red) point on the path. All intervening frames will be updated. Figure 26.21. Modify the animation symbol's trajectory by dragging the points of the motion path. 
Note that the motion path is a straight line and not a curve. Because you can modify only the first (red) and last (green) points on the motion path, you can change only the length and direction of the trajectory. Optimizing Your Animation for Export as an Animated GIF Now that you've created your animations, you need to get them out there for the adoring public to see. You can use the Export tool or the Export command (File, Export) to start the process of creating an Animated GIF. The Export Preview dialog box appears. Select Animated GIF from the Format pull-down menu under the Options tab. Select the Animation tab to set the compression. A key difference between static exports and animation exports is that animated files require compression across frames. Fireworks enables you to choose between three levels of frame-to-frame compression (Figure 26.22): -
None ” This yields the largest file size because there is no compression. The Animated GIF describes complete bitmap images for each frame. None is automatically selected when the Crop Each Frame and Save Differences Between Frames options are not selected. -
Crop Each Frame ” The Animated GIF describes only the rectangular region where the pixels are changed. -
Save Differences Between Frames ” The Animated GIF describes only the pixels that change within the rectangular region. Note that Crop Each Frame must be checked for the Save Difference Between Frames to be enabled. Using Saving Differences Between Frames yields the smallest file size. Figure 26.22. Control the frame compression in the Animation tab of the Export Preview dialog box. 
When you're finished setting the export options, click the Export button, name the file, choose where to save it, and you've created an Animated GIF. Optimizing Your Animation for Export to Flash To send your animation to Flash, click the Quick Export button located at the top right of the document window. Select Macromedia Flash and Export SWF (Figure 26.23). Enter a filename and click Save and you're finished. Figure 26.23. Use the Quick Export button to easily send your animation to Flash. 
| 