creating animations – lesson 71 creating animations lesson 7

Download Creating Animations – Lesson 71 Creating Animations Lesson 7

Post on 16-Dec-2015

216 views

Category:

Documents

3 download

Embed Size (px)

TRANSCRIPT

  • Slide 1
  • Creating Animations Lesson 71 Creating Animations Lesson 7
  • Slide 2
  • 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.
  • Slide 3
  • 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.
  • Slide 4
  • 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.
  • Slide 5
  • 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.
  • Slide 6
  • 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.
  • Slide 7
  • 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
  • Slide 8
  • 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.
  • Slide 9
  • 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
  • Slide 10
  • 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 panels 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.
  • Slide 11
  • 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.
  • Slide 12
  • 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.
  • Slide 13
  • 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.
  • Slide 14
  • 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.
  • Slide 15
  • 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.
  • Slide 16
  • 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.
  • Slide 17
  • 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.
  • Slide 18
  • 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.

Recommended

View more >