2 Creating Animations – Lesson 7 Objectives Add a reusable animation symbol to the Library panel. Create animation by using frames. Preview and edit animations by using onion skinning. Control the playback of frame animations. Automate the animation process with tweening. Export an animation as an animated GIF file. Optimize your animation settings by using Export Preview. Import and export symbols for use in other files.
3 Creating Animations – Lesson 7 Create animations in Fireworks MX You can create animations in Fireworks MX and export them as animated GIFs. You can create an animation in two ways: Tweening – With this method, you create the starting and ending frames of the animation and Fireworks MX automatically creates the intervening frames. Frame-by-frame – You can create each frame of the animation yourself, one frame at a time.
4 Creating Animations – Lesson 7 Use animation symbols If you are creating an animation in Fireworks MX that you want to use more than once, create it as an animation symbol. Once the animation is in the symbol library, you can add as many instances of the symbol as you want to your document. Changes made to the symbol are reflected in all instances of the symbol, but changes made to an instance do not affect the master copy in the library. Symbols can also be exported for use in Web sites or other Fireworks MX documents.
5 Creating Animations – Lesson 7 Create an animated symbol To create an animated symbol from a new or existing object: Select the object to be converted. Click the Modify menu, point to Symbol, then click Convert to Symbol. Assign a name to the symbol, click the Animation option, and click OK to open the Animate dialog box. Specify the number of frames, then set the Move and Direction options and other settings as required. Click the OK button. If you see a message that frames need to be added for the animation, click OK.
6 Creating Animations – Lesson 7 Create a frame-by-frame animation To animate an object moving across the screen: Select the object and make as many duplicates of the object as you need for your animation. Space them on the screen in the direction of the animation, then select all objects. Click the Distribute to Frames button on the Frames panel, and each object will be placed on a frame of its own. Click Frame 1 (if necessary) and click the Play button at the bottom of the window. You will see your object march across the screen.
7 Creating Animations – Lesson 7 Example of frame-by-frame animation The figure on the left shows nine copies of a compass image spaced across the screen. When selected and distributed to frames, the Frame panel (right-side figure) shows that a separate frame was created for each object. Distribute to Frames button
8 Creating Animations – Lesson 7 Use onion skinning to edit your animation When you have created your animation, the onion skinning technique can help you refine it and adjust it. Onion skinning allows you to see objects in frames before and after the current frame without having to skip back and forth. This is helpful in aligning objects and repositioning objects so your animation will look as expected. Turn onion skinning on with the Onion Skinning button in the Frames panel.
9 Creating Animations – Lesson 7 Onion skinning options The figure on the left below shows the Onion Skinning button and the pop-up menu where you can choose the option you want to use. The Before and After option shows the current frame, plus the previous and the next frame. The figure on the right shows the Frame panel. The vertical bar in the left column shows the before frame, the current frame, and the after frame. Onion Skinning menu Onion Skinning button
10 Creating Animations – Lesson 7 Control the playback of your animation The frame delay determines how long each frame is displayed when played. To control the playback frame delay: Select all frames of the animation. Click the Frame panel’s Options menu, then click Properties. Enter the frame delay value in the Frame Delay box. Frame delays are specified in hundredths of a second. You can also set a looping value if you want your animation to play repeatedly. Click the GIF Animation Looping button on the Frames Panel. Choose a loop value (or No Looping) from the pop-up menu.
11 Creating Animations – Lesson 7 Create animation with tweening Let Fireworks do the animating for you using tweening. You create the first frame and the last frame and Fireworks does the rest. Select the object to be animated and convert it to a symbol. Drag another instance of the symbol to the canvas and position it where it should be for the last frame of the animation. Edit it to make any other changes that are required. Select both instances, click the Modify menu, point to Symbol, then click Tween Instances. Enter a value for the number of steps, click Distribute to Frames, and click OK. Fireworks creates the frames between the start and end frame.
12 Creating Animations – Lesson 7 Export a GIF animation Once your animation is complete in Fireworks MX, it can be exported for use in a Web page. To do so: Click the Window menu and then Optimize to open the Optimize panel. Select Animated GIF as the file format. Set the Indexed Palette to WebSnap Adaptive or Web Adaptive. Click the File menu, then Export. Assign a name for the file, and select Images Only in the Save As box. Click the Save button to export the image.
13 Creating Animations – Lesson 7 The Optimize panel for an animated GIF This figure shows the Optimize panel for a file being exported as an animated GIF image.
14 Creating Animations – Lesson 7 Optimize your image using Export Preview You can choose default settings when exporting your file or set custom settings in the Export Preview window. One option you can set is the disposal method, which determines what happens to the previous frame when the next frame is loaded. Disposal methods you can choose include: Unspecified – Creates the smallest possible animated GIF file. None – Use for full-frame animations and for frame optimization and transparency. Restore to background – Use when moving an object across the screen. Restore to Previous – Use when animating objects across a background image within the animation.
15 Creating Animations – Lesson 7 The Export Preview window In addition to the disposal method, the Export Preview window allows you to set many other options to optimize your image. This window shows a preview of the image using the current settings.
16 Creating Animations – Lesson 7 Import and Export symbols Once an animation is created as a symbol, it can be exported from the library for use in another document. You can export all symbols in the library or just selected symbols. Exporting all symbols allows you to import the entire library for one document into some other Fireworks MX document. To export one or all symbols, click the Options menu in the Library panel, click the Export Symbols option, choose Select All or some other option from the menu, and then click Export.
17 Creating Animations – Lesson 7 The Import Symbols dialog box This figure shows the Import Symbols dialog box. To open this from a Fireworks MX document, click the Options menu in the Library panel and then click Import Symbols. Locate the file to import. You can select all symbols in the file or just selected symbols.
18 Creating Animations – Lesson 7 Summary In this lesson, you learned: How to add a reusable animation symbol to the Library panel. To create animation by using frames. To preview and edit animations by using onion skinning. How to control the playback of frame animations. How to automate the animation process with tweening. How to export an animation process with tweening. How to export an animation as an animated GIF file. How to optimize your animation settings by using Export Preview. How to import and export symbols for use in other files.