How to create a fade-in/fade-out animation in Fireworks 4

A little history on Fireworks animation
Fireworks users have produced fast-loading animated GIFs in Fireworks since the early days of the product. There have been many changes to the User Interface (UI) since Fireworks 1, when the Opacity and URLs toolbars graced the screen horizontally. Several years ago, a Lynda Weiman seminar inspired a TechNote on the ever-popular fade-in/fade-on animation technique. This TechNote has been updated with each new version of Fireworks [see How to animate a text fade in and out (TechNote 13728)]. Since Fireworks 4 can now boast of a time-saving animation symbol creator, a brand new TechNote for the fade-in/fade-out technique is in order.

Animation symbols
Below is an overview of the options on the Animate dialog box. These options allow for most kinds of animation, including movement, direction, scale, opacity and rotation. With this automated feature, you can quickly create basic animated symbols. Further, multiple animated symbols can exist on one canvas. More complicated animations, however, will still have to be made with tweening or with frame-by-frame alteration of the image.

The Animate dialog box in Fireworks 4

Animation functions available on the Animate dialog box

Frames: This option allows you to designate the number of frames that you want in your animation. A new Fireworks document starts on Frame 1 and this frame is included in this number. In this example, if 5 is selected, there will be 5 frames total.

Move: This option allows you to designate the distance the object will move from its point of origin in a straight line. Animation along curved or other path shapes is not available under this option.

Direction: This allows the user to set an angle in which the object will move from its point of origin in a straight line. When the option arrow is selected, rotate the dial so the indicator points in the direction of the animation.

Scale to: This setting tells the animation symbol to change scale incrementally to the specified percentage in this field over the specified number of frames as designated in the Frames text box at the top of the dialog box. If an object is going to scale to 200% over 5 frames, the second frame's image will be 125%, the third, 150%, the fourth 175% and the fifth 200%. The percent increments will vary depending on how many frames are selected in the Frames text box.

Opacity: This allows the user to specify a transparency percentage for the selected Animation symbol to appear as in the initial frame and incrementally changes the opacity setting over the specified number of frames in the Frames text box to the transparency percentage designated in the "to" field. If an object is going to fade from 0% to 100% (opaque) over a 5 frame animation, the transparency of each successive image would be as follows: frame 2 would display the symbol at 25% transparency, frame 3 at 50%, frame 4 at 75% and frame 5 at 100%. The percent increments will vary depending on how many frames are selected in the Frames text box.

Rotate: This allows the user to specify the range in degrees of the rotation as well as the direction, Clockwise (CW) or Counter Clockwise (CCW). Rotating objects will move in a circular motion, but can be transformed to create interesting effects.

Text fade-ins and outs Text that fades in and out continues to be a popular animation on Web sites. Usually such text has an image map link and invites the viewer to click on it to navigate to another page or site. This TechNote provides the steps you should use to create a text fade-in/fade-out animation in Fireworks 4.

Section 1: Creating a text fade-in

1

Choose Window > Optimize to open the Optimize panel.

2

In the Export File Format pop-up menu, select Animated GIF.

3

Choose Window > Frames to open the Frames panel. Click Frame 1.

4

Click the Text tool in the tools panel. Then click on the canvas. The Text Editor will appear on the screen.

5

Type your first text item. Make other text and formatting selections on the Text Editor as needed.

6

Click OK to close the Text Editor.

7

With the text object on your canvas still selected, choose Command > Document> Center in Document to place the object in the center of the canvas.

8

With the text object still selected, choose Modify > Animate > Animate Selection to open the Animate dialog box.

9

Set the appropriate values in the various text boxes in the Animate dialog box (see below). Generally a change in opacity of 10% between increments will give a smooth transition, so a 0% to 100% transition will appear smooth over 10 frames.

10

Click OK.

11

The message box in will appear, asking if you want to create additional frames for the animation. (This message appears if Fireworks has to extend the animation past the last frame of your document. You have the option of not showing this message again.)

12

Click OK to create the additional frames.

13

The symbol will now appear on the canvas. Since you set your animated symbol to start at 0% opacity, it will appear transparent in Frame 1.

Section 2: Creating a text fade-out

1

Now that you've made an animation symbol that fades in, you can add a symbol instance that fades out. Open the Frames panel and click the last frame.

2

Click the Add Frames button at the bottom of the Frames panel. This will add an additional frame on the Frames panel.

3

Choose Window > Library to open the Library panel.

4

On the Library panel find the animation symbol that is in Frames 1 through 10. Drag the symbol from the Library panel to the center of the canvas.

5

With the symbol selected, choose Command > Document > Center in Document to place the object in the center of the canvas.

6

With the symbol selected, open the Object panel and set the animation settings to fade the symbol out over 10 frames, just as you did for the first instance of the symbol to make it fade in.

7

Test the first part of the animation by clicking the Play button at the bottom of the Canvas window.

Section 3: Creating a second text fade-in

1

Now that you know how to make animation symbols fade in or out, you can add additional fading in/out animations to further accent your design. This third animation will alternate with the second symbol instance.

2

Open the Frames panel and click the Frame on which the first animation ends.

3

Click the Text tool and then on the canvas.

4

Type your alternate text item. Make other text and formatting selections on the Text Editor as needed.

5

Click OK to close the Text Editor.

6

With the text object still selected, choose Commands > Document > Center in Document to center the text on the canvas.

7

While the text object is still selected, choose Modify > Animate > Animate Selection to activate the Animate dialog box.

8

Set the animation options in the Animate dialog box that appears. In this case, the settings will be the same as the first text fade-in.

9

Click OK.

10

If you receive the message box asking if you want Fireworks to create additional frames for your animation, Click OK to accept.

Section 4: Creating the second text fade-out To finish this technique, you'll only need to add one more symbol instance that fades out. The steps will be similar to the steps in Section 2 above, as follows:

1

Click on the last frame.

2

On the Library panel, locate the second animated symbol.

3

Drag the second animation symbol from the Library panel to the center of the canvas.