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 allthe other elements of your Outback Adventure page. Notice that the file consists of only oneelement, 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.

2 9FIREWORKS CURRICULUM

Figure 4-1Our animation exercise beginswith an image of a single jeep.

Use Symbols and Instances to:

– simplify modifications to existing animations by changing only the Symbol object and having theInstance 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 usednumerous 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 ina simple animation. If you create a copy, a duplicate or a clone of your jeep symbol, you will becreating an Instance. An arrow icon represents an Instance object.

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 dragginginward on a corner handle (Figure 4-4).

5 . Rotate your jeep subtly, moving its position bydragging on the rotation handle. This is a curvedhook tool that appears when you move the cursoroutside the boundaries of the box around thejeep (Figure 4-4).

6 . Repeat the above steps until you have six jeepinstances and the original symbol.

7 . When you want to reverse the direction the jeep is facing select it and choose Modify >Transform > Flip Horizontal.

FIREWORKS CURRICULUM3 0

Figure 4-2

Figure 4-3

Making a Symboland creatingan Instance

Figure 4-4Rotate your jeep by moving

the rotation handle.

Symbol

Instance

8 . Once you get the hang of it you can save time by copying andpasting instances and then modifying them instead of creating eachone separately.In our example your jeep instances travel in an arc from the top-leftcorner to the bottom-left corner getting progressively smaller. Atbottom 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 createthe animation. You are going to distribute the seven jeeps to individualframes 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).

Fireworks has created seven frames, each containing one instanceof the jeep symbol. There are only a few more steps to creating your animation.

Changing a Symbol

Copying objects to frames creates animations, but what would happen ifyou needed to change the way that your jeep looks? Ordinarily, youwould need to open each individual frame and make the change, whichwould be a long and grueling process. Instead, Fireworks allows you tomake changes to a symbol, which propagates that change to all of theinstances. In this case you are going to make a very simple change. Youwant 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 beread by Web browsers. There are several settings that you will need to adjust on the Animation tab ofthe Export Preview dialog box.

3 1FIREWORKS CURRICULUM

Figure 4-5Repeat the above steps until you

have six jeep instances and theoriginal symbol.

Figure 4-6Choose Distribute Selectionfrom the Options pop-up menu.

1 . Choose File > Export to open theExport Preview dialog box (Figure 4-7).

2 . On the Format pull-down menu,choose Animated GIF from theFormat pop-up menu.

3 . Leave the other export settingsat default.

4 . Click on the A n i m a t i o n t a b .5 . The animation options let youcontrol the transitions andbackgrounds for each of the frames of the animation.

Setting Disposal, Timing, and Looping

The d i s p o s a l method determines how pixels of the selected frame are replaced by the next framewhen viewed in a Web browser. (It’s the button with the trash can icon in Figure 4-8.) There are fourdisposal methods:

– U n s p e c i f i e d : No disposal method is specified. Fireworks automatically selects the disposalmethod 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 ontop 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 thebackground color or pattern that appears in the Web browser. Choose Restore to Backgroundwhen moving an object in a transparent animated GIF.

– Restore to Previous: Erases the current frame’s image and restores that area to the previousframe’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. Thehigher the number, the longer the frame is displayed.

To change the frame delay,select the frame and type anumber in the Frame delayfield. You will most likelyneed to change multipleframes at the same time.To do this, select the firstframe of the sequence thatyou want to change, holddown the Shift key, andselect the last frame of thesequence. Then type thenew frame delay number inthe Frame delay field.

3 , An animation can be set toplay once, loop a specifiednumber of times, or loopf o r e v e r .

Click the L o o p button (Figure4-8) and choose 5 from theNumber of loops field.

FIREWORKS CURRICULUM3 2

Figure 4-7The Preview dialog box

Figure 4-8The animation options let you control the transitions and

backgrounds for each of the frames of the animation.

Disposalbutton

Loops

Number ofloops field

4 . To preview your animated GIF, click P l a y from the control at the bottom of the Export Preview dialogbox (Figure 4-9).

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 isparticularly important when pertaining to animated GIF advertising banners that usually have stringentrules regarding file size. If your animated GIF’s file size were too large, you would have the option oflimiting the palette or changing to animation settings to reduce the file size (Figure 4- 1 0 ) .

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 filein 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 advertisingbanner 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 3FIREWORKS CURRICULUM

Figure 4-9Click Play to preview your animated GIF.

Figure 4-10The export Area toolbox

FIREWORKS CURRICULUM

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 andpositions it directly on top of the original.

8 . Using your Pointer tool, draw a selection rectangle aroundthe capital A in Arcanum. This selects both the symboland the instance, but not the graphic on the right side ofthe banner.

9 . Choose Edit > Symbols > Tween Instances.1 0 . 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.

1 2 . In the Layers panel choose Add Frames from the Optionspop-up menu and type “3” in the number field. Choosethe At the end radial button and click OK.

1 3 . Use your Eyedropper tool to sample the color of the textfrom the seventh frame.

1 4 . In the eighth frame, click the Text tool. Type“Restaurants.” Choose Times New Roman for the fontand 35 for the font size.

1 5 . Repeat in the ninth frame but type “Retail,” and for thetenth frame but type “Residential.”Because your text graphic is on top of a graphic, you need to include it in the frames over which yourtext graphic animates. Copying an object to multiple frames is not difficult.

1 6 . Using the Pointer tool, select the graphic to the far right of the panel.1 7 . Click the Frames tab of the Layers and Frames panel. Choose copy to Copy to Frames from the

Options pop-up menu.1 8 . Select All frames and click OK.

Exporting the Tweened Animation

In Lesson Five, you will be learning more about exporting files. However, you will export your tweenedanimation 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 mightchoose to tween the transparency of text or an image or the effect placed on an image. Eachof these animations should be in a separate file.

3 4

Figure 4-11Use the opacity slider to change the

opacity of the image in different frames.

Figure 4-12To distribute the tweened objects to separateanimation frames check Distribute to frames.