Animated GIF images are silent movies; if you want to mix sound and animation, use QuickTime movies or Macromedia Flash.

Transcription

1 LESSON 7: CREATING ANIMATED GIF IMAGES OBJECTIVES When you finish this lesson, you will understand: frame-by-frame animation onion skinning symbols tweening and you will have learned: how to create GIF animations how to change the playback settings for an animated GIF image how to use tweening to fade in an image how to create symbols and use the Library Animated GIF images are a variant of CompuServe s Graphics Interchange Format. In 1987 the specification was enhanced to enable for GIFs to contain multiple images that can play back sequentially to provide flip-book-style animation. A 1989 amendment added such controls as an optional delay between frames. For all their advantages, animated GIF images aren t perfect. Because they are GIF files, they re limited to 256 colors. GIF files are far from ideal for photographic images, such as a time-lapse view of a sunset. They re best for animated banners, buttons, or line art. You can stop a looping GIF animation with a browser s Stop button and start over by reloading the image, but you can t stop and resume playback where you left off. If you need VCR-like playback control, use a commercial animation program such as Macromedia Flash or Director. Animated GIF images are silent movies; if you want to mix sound and animation, use QuickTime movies or Macromedia Flash. Despite its shortcomings, the animated GIF file is a good medium for simple Web animation no plug-ins, no server tweaking, and relatively mild browser-compatibility headaches. The GIF animation is a simple technology that has come to dominate the field because it s simple. In a Web world increasingly obsessed with bells and whistles, that s an important lesson. FIREWORKS 3 CURRICULUM 71

2 CLASS EXERCISE This exercise demonstrates basic frame-by-frame animation for creating an animated GIF image. You ll use the Andes_logo.fh8 file and have each of the letters of the logo appear one by one. To create a frame-by-frame animation: 1. Create a new document. Make the canvas size 600x50 pixels and the color white. 2. Import the Andes_logo.fh8 file from the Home_page folder. Place the graphic on the left side of the canvas as shown in Figure 7-1. You ll add another object to the right of this logo in a later lesson. Once you have created the animation, you can t move the objects. Figure 7-1 Andes logo placed on left side of canvas. 3. Select all the objects on the page by choosing Edit > Select All or by using the shortcut Command-A (Macintosh) or Ctrl-A (Windows). 4. Choose Edit > Copy. You will use the copy in step Choose Window > Frames to open the Frames panel. 6. Click the Distribute to Frames icon in the Frames panel (see Figure 7-2) or choose this option from the Options pop-up menu. This places each individual object on a separate frame. You should now have six frames. Frames Options pop-up menu Figure 7-2 Frames panel with Options pop-up menu. Looping control Onion Skinning Distribute to Frames New Frame Delete Frame FIREWORKS 3 CURRICULUM 72

3 7. Click each frame in the Frames panel to view successive frames of the animation. 8. Click the Play/Stop VCR control button at the bottom of the document window to preview the animation (see Figure 7-3). Figure 7-3 VCR controls for animation in the document window. First frame Play/Stop Last frame Frame number Previous frame Next frame The animation displays each letter in the logo separately, but you never see the entire logo. Now you will add a frame at the beginning and a frame at the end to display the entire logo. 9. Click the right arrow at the top right of the Frames panel to access the Frames Options pop-up menu (see Figure 7-2) and choose Add Frames. 10. Choose At the Beginning in the Add Frames dialog box (see Figure 7-4) to add one frame at the beginning of your animation. Click OK. Figure 7-4 Add Frames dialog box. 11. Repeat steps 9 and 10, this time choosing At the End in the dialog box. Click OK. 12. Choose frame 1 in the Frames panel. The clipboard should still contain the copy of the entire logo. Choose Edit > Paste to place the logo in frame Repeat step 12 for the last frame. Note: Fireworks places copies you paste in the exact position of the original copy. This is very handy when you are moving or coping objects in frames. 14. Save your file and name it Andes_animation.png. FIREWORKS 3 CURRICULUM 73

4 CONTROLLING PLAYBACK Once you have the animation sequence working, you can change the playback speed by setting the frame delay. The frame delay determines the amount of time each frame is displayed. Frame delay is specified in hundredths of a second. For example, a setting of 100 displays the frame for a second, and a setting of 25 displays the frame for a quarter of a second. For the fastest animations, set the frame delay to zero. To set the frame delay: 1. Click Frame 1 in the Frames panel to select the first frame. Hold down Shift and click Frame 8 to select all the frames in the animation. 2. Click the right arrow at the top right of the Frames panel to access the Frames Options pop-up menu. Choose Properties from the list. The Frame Delay settings window appears (see Figure 7-5). Figure 7-5 Frame Delay settings window. 3. Type 30 in the Frame Delay field. This will slow down the animation. 4. Click outside the Frame Delay settings window to close it. Note: You can set the delay separately for each frame by choosing the Frames Options menu with only one frame selected in the panel. FIREWORKS 3 CURRICULUM 74

5 Looping makes the animation play over and over. Make sure it is absolutely necessary to loop your animation before changing this setting. There is nothing more irritating on a Web page than an animated GIF image that loops for no apparent reason. Make sure that the last frame of your animation contains the final information you want to display and that you limit the number of loops. To set looping: 1. Click the Looping icon in the Frames panel if you want the animation to play more than once. A drop-down menu appears where you can choose the amount of looping you want for the animation. 2. To remove the looping, choose No Looping (see Figure 7-6). Figure 7-6 Frames panel Looping drop-down list. EXPORTING A GIF ANIMATION Once you have your animation the way you want it, you need to export it as an animated GIF file. Make sure the file size is as small as possible, just as for the other images on your page. The more frames and colors in your animation, the bigger the file size. To export a GIF animation: 1. Click the Preview tab in the document window to see a preview of the file. 2. Choose Window > Optimize to access the Optimize panel (see Figure 7-7). Change the export file type to Animated GIF. Change the palette to Web Adaptive (Macintosh) or WebSnap Adaptive (Windows). Figure 7-7 Optimize panel showing the Animated GIF option. FIREWORKS 3 CURRICULUM 75

6 3. Look at the top of the Preview window to view the file size and the download time for the file (see Figure 7-8). Change the number of colors and see if this number changes. Figure 7-8 Preview panel in the document window showing the file size and download time. 4. Once you are satisfied with the settings, choose File > Export to export the file. Click Export (Macintosh) or Save (Windows) to save the file. CREATING SYMBOLS Symbols are objects or groups of objects that you use when you want to control multiple copies of objects. Usually symbols are used in animations, to create different views or shapes of the same object in the animation. Copies of the symbol are referred to as instances. The advantage of using symbols over frame-by-frame animation is that the initial image the symbol controls the overall look of all the other images. If you change something in the symbol, (the color, size, or rotation, for example), the instances are changed as well. They are, in a sense, tied together. If you had created the animation frame by frame, you would need to make your changes in each frame. To create a symbol: 1. Create a new document with a canvas size of 500x500 pixels and a white canvas. 2. Choose Insert > New Symbol. This opens the Symbol Properties dialog box where you can give your symbol a name and choose whether it is to be a graphic or button (see Figure 7-9). Figure 7-9 Symbol Properties dialog box. 3. Type cup as the name and choose the Graphic option (the default). 4. You are now in the Symbol editing window. This is where you create and edit the symbol. All the tools and commands work the same as in the main document window. Choose File > Import and open the Yellow_cup.fh8 file in the ClipArt folder. In the Vector File Options dialog box that appears, change the Scale value to 150 percent. Click OK. 5. Click to place the graphic within the Symbol work area. The cup is composed of multiple objects. Group it to make it easier to work with. 6. Move the cup so that it is centered on the crosshairs. The crosshairs indicate the centerpoint of the graphic. 7. Click the Close box or choose File > Close to save your changes. FIREWORKS 3 CURRICULUM 76

7 USING THE LIBRARY The Library is a panel for storing the symbols and buttons you create. When you create a symbol, it is automatically placed in the Library for you. The Library is document specific; the items within the Library are only those created in that document. You can, however, export Library items and import them to other documents. After you have an item in the Library, it is an easy task to drag the item onto the canvas. Each time you drag another copy from the Library onto the canvas, the item becomes an instance. To use the Library: 1. Choose Window > Library to access the Library panel (see Figure 7-10). Options pop-up menu Preview window Sort direction Show All Columns Minimize Panel Width Figure 7-10 Library panel. New Symbol Symbol Properties Delete Symbol 2. Click the name cup in the list. 3. Place the cup symbol on the canvas by dragging the item name from the list and dropping it on the canvas. You can also drag the image from the Preview window. This creates the first instance. 4. Place several more copies of the cup on the canvas using this same method. Each copy of the cup you ve placed on the canvas is an exact copy of the original symbol. If you were creating an animation, you could resize or rotate each cup to create the illusion that the cup is moving towards the viewer. If you later decide to change the color of the cup, you need only to edit the original symbol, and all instances will be modified to reflect the change. To change a symbol: 1. Double-click any cup graphic on the canvas to open the Symbol editing window. 2. Use the Subselection tool to select the base of the cup. Change the color to blue. 3. Click the Close box or choose File > Close to close the window and save your changes. All the cups on the page should now reflect the color change. Symbols appear only in the document where they were created. If you want to use a symbol in another document, export the symbol, and then import it into the other document. FIREWORKS 3 CURRICULUM 77

8 To export a Library: 1. Choose Window > Library to access the Library panel. 2. Click the arrow at the top right of the Library panel to access the Options pop-up menu (see Figure 7-11). Figure 7-11 Library panel Options pop-up menu. 3. Choose Export Symbols. The Export Symbols dialog box appears. 4. Choose the symbols to export. Command-click (Macintosh) or Ctrl-click (Windows) to select multiple noncontiguous symbols in the list. 5. Click Export. 6. Type a name for your symbols and click Save. To import a Library: 1. Open another file or create a new one. 2. Choose Window > Library to access the Library panel. 3. Click the arrow at the top right of the Library panel to access the Options pop-up menu. 4. Choose Import Symbols. In the Open dialog box that appears, find the Custom Symbols.png file in the Symbols folder. This file contains some symbols you can place on your page. 5. Click Select All to import all the symbols; then click Import. The symbols are now placed in the Library for the current document (see Figure 7-12). Figure 7-12 Import Symbols dialog box. FIREWORKS 3 CURRICULUM 78

9 APPLYING TWEENING Tweening is the process of defining beginning and end frames and then creating images in between to give the appearance that the first frame slowly changes to the end frame. This is similar to the Blend command in a drawing program such as FreeHand. You define the first image as a symbol, make a copy of the symbol, and then let Fireworks calculate (tween) the images in the middle. CLASS EXERCISE In this exercise, you will add the effect of an object fading in by changing its opacity and using tweening to create the steps in between. 1. Open the Andes_animation.png file you created earlier. 2. Select the last frame of the animation. Import the Bnw_text.png file from the Home_page folder and place it on the right as shown in Figure Figure 7-13 Andes_animation file. 3. Choose Insert > Convert to Symbol. 4. You want the object to fade in, so change its opacity by using the Opacity slider in the Object panel (see Figure 7-14). Choose Window > Object if the Object panel is not already open and change the opacity to zero percent so the object is not visible. Figure 7-14 Opacity slider in the Object panel. 5. With the object still selected, choose Edit > Clone. The cloned image is on top of the other image and is selected. 6. Increase the Opacity slider value to 100 percent. FIREWORKS 3 CURRICULUM 79

10 7. Using the Select Behind tool, hold down the Shift key and click twice to select both the symbol and the instance. To verify that you have both objects selected, check the Object panel (see Figure 7-15). It should show two objects. Figure 7-15 Object panel with two objects selected. 8. With both objects selected, choose Modify > Symbol > Tween Instances to open the Tween Instances dialog box (see Figure 7-16). 9. Make sure Distribute to Frames is checked and enter 10 steps. Figure 7-16 Tween Instances dialog box. 10. View the animation by clicking the Play/Stop button in the document window. 11. Save the file. FIREWORKS 3 CURRICULUM 80