Animated logos in Fireworks

This article demonstrates a typical Adobe Fireworks animation workflow by creating a 3D-like animated logo. It also highlights some of the innovative new features available in Fireworks CS4 and later and describes best practices for using them in animation projects.

Many Fireworks users are not aware of the built-in animation features available in Fireworks. Some of my Fireworks-savvy colleagues were surprised to hear that this 2D graphics application contains a powerful animation engine that simplifies the process of designing and exporting website and user interface animation elements. Working with animation in Fireworks has become even easier now, as Fireworks CS4 introduces new functionality that provides a wide range of possibilities to resourceful designers.

In this article I provide step-by-step instructions to make an animated rolling football—also known as a soccer ball in the United States (see Figure 1).

Note: Special thanks to Aaron Beall for improving an earlier version of this animation.

How is it possible to create 3D animation in a 2D graphics program? The real answer is, it isn't. But you can use Fireworks to create animations that appear to be three-dimensional by optical illusion. In this case, the football that appears to be rolling is merely the visible portion of a flat image perpetually looping through a segment of linear forward motion. The mechanics of the animation are demystified in Figure 2.

After you review Figure 2, you may already surmise what we are going to do. After assembling the flat football skin, turning it into a symbol, and animating it, we will create a mask to reveal a circular portion of the animated symbol while hiding the rest. Finally, we'll apply some effects over the mask to complete the 3D feel.

Let's begin by assembling the flat football skin object, which we will convert into an animated symbol in a minute:

1. Create a new Fireworks document (File > New). Choose File > Save and name the file as football.png.
2. In the New Document dialog box, set the Width and Height to 300×300 pixels. Set the Resolution field to 72 pixels per inch. Select the Custom option button and choose Dark Gray (#333333) for the canvas color (see Figure 3). Click OK to close the dialog box.

3. Select the Smart Polygon tool from the Tool panel. Draw a smart polygon on the canvas, using no stroke and a white (#FFFFFF) fill color. Choose Window > Auto Shape Properties to access the Auto Shape Properties dialog box (you can drag this panel onto the Property inspector to dock them together).
4. Set the properties of the Smart Polygon, using the following values:

   Points: 6

   Sides: 6

   Outer radius: 51

   Inner radius: 0

   Rotation: 30

   Leave the Split check box unchecked (see Figure 4).

5. Click the Properties tab to make the standard Property inspector active. Set the width and height of the Smart Polygon to 30×26, respectively.
6. While the Smart Polygon is still selected, hold the Alt key (Windows) or Option key (Mac) and repeatedly press the down arrow key six times to create multiple copies of the selected object. Although the duplicate polygon shapes are placed on top of one another, you can see them listed in the Layers panel. You should see a total of seven smart polygons.
7. Change the fill color of the visible smart polygon to solid black (#000000). One by one, turn on the visibility for each Smart Polygon in the list and manually rearrange the polygon shapes to form a flower shape (see Figure 5).

8. Now that the first section is complete, we'll use copied portions of this shape to add more segments until the football skin is fully assembled. Shift-click to select the upper five polygons and choose Edit > Copy. Choose Edit > Paste and drag the copied objects to the upper right corner (see Figure 6).

9. Choose Select > Select All and then choose Modify > Group to group all of the objects. Choose Edit > Copy, Edit > Paste again. Drag the new copy of the pattern to the left so that both groups are visible on the canvas (see Figure 7).

10. Drag the top (right side) group on top of the bottom group, overlapping the highlighted polygons shown in Figure 7 to complete the football skin. If desired, you can choose the Subselection tool, Shift-click to select the four overlapping polygons, and delete them (see Figure 8).

11. Choose Select > Select All, and then choose Modify > Group to create one group of the football skin.

Now that the base object is complete, we can convert it into an animated symbol:

1. While the entire grouped object is selected, press F8 to access the Convert to Symbol dialog box.
2. In the Name field, enter skin.
3. Set the type of symbol to Animation and click OK. The Animate dialog box appears (see Figure 9). Enter the settings for the Animation symbol and then click OK.

Note: To arrive at these values, I used a new tool available in Fireworks CS4 called the Measure tool, found either in the Vector category of the Tools panel or in the Auto Shape Properties panel (the last button in the panel). This tool is usually used to measure the distance between any two points, but the shape of this tool lends itself nicely to the task of defining a perfectly diagonal motion path as well. The Measure tool is composed of two pointed arrows and two short lines perpendicular to the arrow on both ends. In this example, I positioned one of the end nodes so that the short lines were parallel to the upper right side of the polygon group. This caused the two pointed arrows to cut diagonally through the center of the animated symbol. Next, I dragged the motion path handle of the symbol until it perfectly overlapped the Measure tool (see Figure 10).

4. After clicking OK to close the Animate dialog box, an alert message appears (see Figure 11).

5. Click OK to allow Fireworks to add the new states to your document.

The next goal is to mask the animation so that only a circular shape shows through. The first step involves determining the best position for the mask so that the motion path goes straight across it:

1. Create a new layer. Drag it above Layer 1 in the Layers panel and then double-click it. Name the layer mask. Also be sure to choose the option to Share Layer Across States. This ensures that every object placed in this layer will show up throughout every state in the animation. Depending on your settings, a warning message may appear. If it does, click OK and proceed to the next step.
2. Use the Ellipse tool to draw a circle with the stroke color set to none and the fill color set to white (#FFFFFF). Use the Property panel to set its height and width to 76×76. Set the circle's opacity to 80 and position it so that its center is approximately centered on the first lower black polygon (see Figure 12).

3. Play the animation. The first attempt may be a bit off. Play it again and pay close attention to the section beneath the white circle. Does it move straight diagonally through the circle? If not, stop the animation and adjust the circle's position. Does the motion loop seamlessly? The animate values provided in Figure 9 should make a good loop right away—but when you create these types of animation elements on your own, you'll need to access the States panel and delete or add states from there until the looping is smooth.

   Note: As you work on animation projects, you may find yourself frequently switching between the States panel and the Layers panel. In Fireworks CS4, you can save time by creating a custom workspace layout specifically for building animation elements. Drag and dock the States panel right next to the Layers panel, or wherever you find it most convenient, and save this new setup by selecting Window > Workspace Layouts > Save Current. Alternately, you can select the Save Current option from the pop-up menu located in the Control panel. Enter a descriptive name for your custom workspace so that you can choose your new animation-friendly layout when you need it, and switch back to the default workspace when you don't need it anymore (see Figure 13). Also read about the Workspace Manager panel in Fireworks CS4 to learn more.

4. When both the direction and the looping of the animated football are satisfactory, create a copy of the circle object, lock it, and hide it—we'll use it later.
5. Access the States panel to make sure that State 1 is the current state. Select both the original white circle and the animated symbol and choose Modify > Mask > Group as Mask. The selected circle appears to have disappeared; in reality, it was attached to the animated symbol as a mask.

Now we'll apply some Live Filters over the masked football to give it the illusion of a 3D object. Unlock and show the remaining white circle in the mask layer. Use the Property panel to set its blend mode to Multiply. Click the plus (+) sign next to the Live Filters section and choose Sharpen and Glow > Inner Glow. Applying the Inner Glow filter makes the football animation appear to have a 3D ball shape. Experiment with different settings, or use the values that I found to be most effective (see Figure 14).

To further enhance the 3D effect, Fireworks expert Aaron Beall recommends placing a semitransparent highlight over the animation. Use the Ellipse tool to draw a new circle above the white circle in the mask layer. Set the Width and Height to 62×56 in the Property panel. Set the stroke color to none and select Gradient > Radial from the fill category. Click the fill swatch and edit the gradient to set both gradient nodes to white (#FFFFFF) and decrease the opacity of the gradient's end node to zero. Set the circle's blend mode to Additive and set its overall opacity to 86. Use the Selection tool to place the image partially on the football to achieve the final effect (see Figure 15).

Now that the animation is complete, you can change the canvas color. Deselect all objects and use the Properties panel to set the canvas color to light gray (#CCCCCC). Also increase the canvas width to 700 pixels wide. There's a good reason for changing the canvas color, by the way. When we started building the assets, it was easier to manipulate the light-colored objects on a dark canvas, but now that the animation is complete, the football will appear more realistic with a lighter-colored canvas. (Note that the canvas gives the color of the gaps between the hexagons.)

To illustrate a real-world project, now add text to the completed animation to make it part of a larger composition:

1. Create a new layer and name it text. Make sure it is above the mask layer and choose the option to Share Layer To States. Use the Text tool to type Football on the canvas, using a robust font like Arial Black or Aharoni.
2. Set the text to bold. Select the Scale tool (press Q) to increase the size of the text until its "O" characters are about the same size as the ball.
3. Use the Selection tool to Position the second "O" so that it is located right on top of the ball. (For easier positioning, temporarily turn off the visibility of Layer 1 to hide the animation, and use the Inner Glow circle to line it up with the "O" in the text.)
4. While the text is selected, choose Text > Convert to Paths. The text object has been converted to a group of eight paths, each corresponding to a character.
5. We now need to remove one of the "O" letters to make space for the rotating ball animation. We could ungroup the eight path elements, delete the unneeded "O," and regroup the remaining seven paths. But there's an easier way because Fireworks makes it possible to select a specific element inside a group without ungrouping it first. Choose the Subselection tool, select the second "O," and delete it from the group (see Figure 16).

To export the final animation (GIF) file:

1. Turn the visibility of Layer 1 (the animation layer) back on so that you can see it again.
2. Choose File > Image Preview to access the Image Preview dialog box. In the Options tab, select Animated GIF as the Format. Set the Palette to Adaptive.
3. Click the File tab and use the Export Area tool (which is located between the Arrow and the magnifying tool and looks like the Crop tool) to crop off the unwanted areas of the canvas. Set the Scale to 50%.
4. Click the Animation tab and play the animation using the controls along the bottom. Set all of the state delay values to 10. Play the animation again to check it. Make sure the animation is not stuttering when it loops. If desired, you can vary the speed of the different states of animation by entering different numeric values in the state delay fields.
5. When you are satisfied with the settings, click Export and save the animated GIF. This is the finished logo element, ready to be uploaded to a website.
6. Open your favorite browser and choose File > Open File. Navigate to select the animated GIF that you just exported and watch the logo animate.

This article has highlighted just a few of the many animation features available in Fireworks CS4 and later. Remember that you can use the new Measure tool to create a diagonal motion path, and that the States panel makes it easy to set important animated symbol qualities, such as motion paths and looping. You also learned how to combine masking and animation in a creative way. Finally, this example shows the value of adding Live Filters to create 3D effects.

Hopefully this article has sparked your interest to try new animation techniques. Take your projects to the next level by coming up with some innovative strategies to design and animate graphics. Don't be afraid to use the tools for unintended purposes and experiment with combining features in unusual ways.

To learn more, read about animation symbols in the Creating animations section of the Fireworks CS4 online documentation. Also check out the article Workspace Manager panel in Fireworks CS4 to learn more about managing custom workspace layouts. Finally be sure to visit the Fireworks Developer Center, where you'll find articles and sample projects to inspire you with creative, new ideas.