After this lesson you will be able to:

Transcription

1 LESSON 4: ANIMATION OBJECTIVES After this lesson you will be able to: use layers with frames create symbols and instances create motion by tweening create transformations by tweening set the timing of an animation CONTEXT Animation can add excitement and interest to a Web page. Animation techniques on a computer share a common heritage with the film animation techniques that have been used for decades. Traditional animations are produced by drawing the image components of each frame on sheets of transparent cellulose acetate. These sheets are called animation cells. The component cells are stacked to produce one animation frame. This frame is filmed, then the graphic elements in each cell are modified, the next frame is filmed, and so on. When the film is played back, the images appear to move. The same thing happens with the computer. It plays a series of images in frames to create an animation. Each cell of the animation (sprite) Fireworks is a new frame. EXERCISES Create an Animation In the first part of this lesson, you are going to create an animation frame by frame. 1. Choose File > Open, select ani.png in the Lesson 4 folder, and click Open (Figure 4-1). This file has been created for you to practice your animation techniques without worrying about all the other elements of your Outback Adventure page. Notice that the file consists of only one element, a vector graphic of an automobile. SYMBOLS AND INSTANCES To begin your animation, you will learn how to use S y m b o l s and I n s t a n c e s to simplify Fireworks animations and improve editability. Instances are representations of an original Fireworks object, which is designated as the Symbol. When the Symbol object (the original) is modified, the Instances (the copy) automatically change to reflect the modifications to the Symbol. Figure 4-1 Our animation exercise begins with an image of a single jeep. 2 9

2 Use Symbols and Instances to: simplify modifications to existing animations by changing only the Symbol object and having the Instance objects update automatically easily modify complex illustrations containing multiple copies of objects share components across rollover states Creating Symbols is an easy process. Elements, such as logos or trademark characters, which are used numerous times on one page, are good candidates to become symbols. 1. Using the Pointer tool, select the jeep graphic. 2. Choose Edit > Symbol > Make Symbol (Figure 4-2). A plus icon represents a Symbol object. Now your jeep graphic is a symbol and ready to be used in a simple animation. If you create a copy, a duplicate or a clone of your jeep symbol, you will be creating an Instance. An arrow icon represents an Instance object. Figure 4-2 Making a Symbol and creating an Instance Symbol Instance Figure 4-3 ANIMATIONS Frame by Frame You are going to create your animation by duplicating and transforming your jeep symbol step by step (Figure 4-3). 1. Using the Pointer tool, select the jeep symbol. Choose Edit > Duplicate. 2. Using the Pointer tool, select the jeep instance and move it down and to the right from the original. 3. Choose Modify > Free Transform. 4. Resize your jeep, making it smaller by dragging inward on a corner handle (Figure 4-4). 5. Rotate your jeep subtly, moving its position by dragging on the rotation handle. This is a curved hook tool that appears when you move the cursor outside the boundaries of the box around the jeep (Figure 4-4). 6. Repeat the above steps until you have six jeep instances and the original symbol. 7. When you want to reverse the direction the jeep is facing select it and choose Modify >Transform > Flip Horizontal. Figure 4-4 Rotate your jeep by moving the rotation handle. 3 0

3 8. Once you get the hang of it you can save time by copying and pasting instances and then modifying them instead of creating each one separately. In our example your jeep instances travel in an arc from the top-left corner to the bottom-left corner getting progressively smaller. At bottom left, your jeep should be approximately 50 pixels wide (Figure 4-5). Creating Motion When you have seven jeeps arranged in an arc, you are ready to create the animation. You are going to distribute the seven jeeps to individual frames to create the illusion of motion. 1. Using the Pointer tool, select the jeep symbol and all of its instances. 2. Click the Frames tab in the Layers and Frames panel. 3. Choose Distribute Selection from the Options pop-up menu (Figure 4-6). Figure 4-5 Repeat the above steps until you have six jeep instances and the original symbol. Fireworks has created seven frames, each containing one instance of the jeep symbol. There are only a few more steps to creating your animation. Figure 4-6 Choose Distribute Selection from the Options pop-up menu. Changing a Symbol Copying objects to frames creates animations, but what would happen if you needed to change the way that your jeep looks? Ordinarily, you would need to open each individual frame and make the change, which would be a long and grueling process. Instead, Fireworks allows you to make changes to a symbol, which propagates that change to all of the instances. In this case you are going to make a very simple change. You want the headlights of your jeep to be yellow instead of red. 1. Click frame 1 to select the frame with the Symbol. Be sure that your jeep is not selected; you wouldn t want to turn the whole jeep yellow. 2. Click on a bright yellow paint swatch in the Swatches panel. 3. Choose the Paint bucket tool, and click with the pouring spout cursor on the ellipses of the h e a d l i g h t s. 4. Remember, if you accidentally turn something yellow that you don t want, choose Edit > Undo. 5. Now take a few moments to examine the other frames of the animation. All of the headlights are now yellow. Symbols and instances can save you hours of work. Exporting an Animation Now that you ve created the frames of your animation, you need to export it in a file format that can be read by Web browsers. There are several settings that you will need to adjust on the Animation tab of the Export Preview dialog box. 3 1

4 1. Choose File > Export to open the Export Preview dialog box (Figure 4-7). 2. On the Format pull-down menu, choose Animated GIF from the Format pop-up menu. 3. Leave the other export settings at default. 4 Click on the A n i m a t i o n t a b. 5. control The animation the transitions options and let you frames backgrounds of the for animation. each of the Figure 4-7 Setting Disposal, Timing, and Looping The Preview dialog box The d i s p o s a l method determines how pixels of the selected frame are replaced by the next frame when viewed in a Web browser. (It s the button with the trash can icon in Figure 4-8.) There are four disposal methods: U n s p e c i f i e d : No disposal method is specified. Fireworks automatically selects the disposal method for each frame. Choose Unspecified to create the smallest possible animated GIFs. None: The frame is not disposed before the new frame is displayed. The next frame appears on top of the current frame. Choose None to add a smaller object to the existing frame. Restore to Background: Erases the current frame s image and restores the area to the background color or pattern that appears in the Web browser. Choose Restore to Background when moving an object in a transparent animated GIF. Restore to Previous: Erases the current frame s image and restores that area to the previous frame s image. Choose Restore to Previous to animate objects across a background image. 1. Click the Disposal button, but keep the disposal method Unspecified. 2. The t i m i n g of each frame is called the frame delay and is set in one-hundredths of a second. The higher the number, the longer the frame is displayed. To change the frame delay, select the frame and type a number in the Frame delay field. You will most likely need to change multiple frames at the same time. To do this, select the first frame of the sequence that you want to change, hold down the Shift key, and select the last frame of the sequence. Then type the new frame delay number in the Frame delay field. 3, An animation can be set to play once, loop a specified number of times, or loop f o r e v e r. Click the L o o p button (Figure 4-8) and choose 5 from the Number of loops field. Disposal button Number of loops field Loops Figure 4-8 The animation options let you control the transitions and backgrounds for each of the frames of the animation. 3 2

5 4. To preview your animated GIF, click P l a y from the control at the bottom of the Export Preview dialog box (Figure 4-9). Figure 4-9 Click Play to preview your animated GIF. Figure 4-10 The export Area toolbox Click the Update file size button to generate an updated GIF file size. This feature allows you to determine if your animated GIF will be of sufficiently small file size. File size is particularly important when pertaining to animated GIF advertising banners that usually have stringent rules regarding file size. If your animated GIF s file size were too large, you would have the option of limiting the palette or changing to animation settings to reduce the file size (Figure ). Click Export and name your GIF file, anitest, and save it into the Lesson 4 folder. Minimize Fireworks and navigate to your Lesson 4 folder. Double-click the anitest.gif to open the file in your browser and view the finished animation. TWEENED ANIMATIONS In traditional animation shops, a lead artist creates keyframes, the frames in which the animation changes, and other artists, called t w e e n e r s, draw all the frames in between the keyframes. This process can be quite tedious for the tweeners. Fireworks creates those in-between frames for you. This technique makes extensive use of Symbols and Instances. T w e e n i n g blends a Symbol and one or more of its Instances, creating interim Instance objects with transitional attributes. The ability to tween bitmap graphics is a powerful advantage of Fireworks. Tweening can apply to these object characteristics: transformations tween between objects with different rotation, scaling, distortion, or skew transformations opacity tween between opacity settings of the same opacity type live effects tween between settings of the same live effects Using Tweening to Make an Ad Banner Animated advertising banners on the Web are popular and effective. Let s create a simple advertising banner for a San Francisco advertising agency, Arcanum Architecture. 1. Choose File > Open and select banst.png, which you will find in the Lesson 4 folder. Click Open. 2. Choose File > Save As and type banner.png. Click Save. 3. Using the Pointer tool, hold down the Shift key, and select the text objects Arcanum and A r c h i t e c t u r e. 4. Choose Edit > Symbols > Make Symbol. 3 3

6 5. Decrease the Opacity slider to 50 (Figure 4-11). 6. Choose Edit > Clone. 7. Increase the Opacity slider to 100. Cloning creates an exact copy of the selected object and positions it directly on top of the original. 8. Using your Pointer tool, draw a selection rectangle around the capital A in Arcanum. This selects both the symbol and the instance, but not the graphic on the right side of the banner. 9. Choose Edit > Symbols > Tween Instances Enter 5 in the Tween Instances dialog box 1 1. Check Distribute to frames to distribute the tweened objects to separate animation frames (Figure 4-12). Click OK In the Layers panel choose Add Frames from the Options pop-up menu and type 3 in the number field. Choose the At the end radial button and click OK Use your Eyedropper tool to sample the color of the text from the seventh frame In the eighth frame, click the Text tool. Type Restaurants. Choose Times New Roman for the font and 35 for the font size Repeat in the ninth frame but type Retail, and for the tenth frame but type Residential. Because your text graphic is on top of a graphic, you need to include it in the frames over which your text graphic animates. Copying an object to multiple frames is not difficult Using the Pointer tool, select the graphic to the far right of the panel Click the Frames tab of the Layers and Frames panel. Choose copy to Copy to Frames from the Options pop-up menu Select All frames and click OK. Exporting the Tweened Animation Figure 4-11 Use the opacity slider to change the opacity of the image in different frames. Figure 4-12 To distribute the tweened objects to separate animation frames check Distribute to frames. In Lesson Five, you will be learning more about exporting files. However, you will export your tweened animation so that you can see the results in the browser window. 1. Choose File > Export to open the Export Preview dialog box. 2. On the Format pull-down menu, choose Animated GIF from the Format pop-up menu. Leave the other export settings at default. 3. Click on the Animation tab. 4. Click the Loop button. Choose Forever from the Number of loops pop-up menu. 5. Click the Export button. Name the file Bantest and save it in the Lesson 4 folder. 6. To test your animation, minimize Fireworks and navigate to your Lesson 4 folder. 7. Double-click the Bantest.gif to open the file in your browser and view the finished animation. MORE EXERCISES TO SHARPEN YOUR SKILLS Create two animations as you did in this lesson. The first should be an animation that you construct frame by frame and consists of 10 frames. Create an image to manipulate for this animation. The second animation should be a tweened animation, consisting of 10 frames. You might choose to tween the transparency of text or an image or the effect placed on an image. Each of these animations should be in a separate file. 3 4