Chapter 11: Basic FreeHand Animation

---

 Download CD Content

In this chapter, you learn how to make a simple animation you can embellish in Flash or use as is on your Dreamweaver Web site. First, you work with envelopes to get a taste of some fun things you can do in FreeHand. Then you move on to a more traditional approach to animation.

All About Envelopes

An envelope is a path placed around an object or group of objects. Envelopes are not magic, but you can do things with an envelope that are impossible without a lot of work any other way. A basic envelope would be a rectangular shape, but FreeHand supplies 21 shapes from hearts to diamonds and tombstone shapes. The basic rectangle looks like you drew a rectangle around your objects and added a point to the center of each side of the rectangle. But that's where the similarity ends. As you move the envelope's points, or modify the point control handles, the entire contents of the envelope distort as though made from a sheet of flexible rubber.

Envelope toolbar

The Envelope toolbar is shown in Figure 11-1. Open the Envelope toolbar by choosing Window ® Toolbars ® Envelope. If you click the icon on the left, the envelope that's listed in the menu is applied to the object you selected in the document. The drop-down menu contains the 21 presets, and any other envelopes you add. The icon with the plus sign is the Add Preset button. After you manipulate an envelope, you can click this button to name and add that envelope as a preset that you can choose during another work session. The grayed-out icon with the minus sign is the Delete Preset button. Select an envelope preset from the menu, click this button, and that preset is history. Next is the Copy As Path button which copies an envelope as a simple path. The icon with the clipboard is called the Paste As Envelope button. You use it to paste a previously copied path as an envelope around a selected object. It works like this: Draw a closed shape, and copy the path to the Clipboard. Then select an object or group of objects, and click the Paste As Envelope button. The shape you drew becomes an envelope surrounding the objects you selected.

Figure 11-1: The Envelope toolbar can float free or be attached to the Main toolbar.

The next two buttons are the Release and Remove envelope buttons, respectively. Clicking the Release button deletes the envelope but leaves the distortion it provided. The Remove button deletes the envelope and returns the object to its original shape. If the envelope is a preset, it remains in the menu. The last button on the right is the Envelope Map button. Clicking that button applies a grid to the envelope so you can see the distortion that is taking place.

Use an envelope for a logo treatment

 Habitat Alert site   In this short project, you use an envelope to create text with a watery wave effect. Start by opening  LogoEnvelope.fh10 in the chapter11_exercise folder on the CD-ROM that comes with this book. Save the document to your hard drive. At the top of the page, you'll find the finished logo. "Alert" is supposed to look like a shadow of "Habitat." The shadow falls on water that happens to be the habitat for the herons this organization is attempting to protect. Beneath the finished logo is the starting point — the text. I converted everything to paths and applied some extreme kerning. You make some changes to the word, "Alert."

1. First, you must make "Alert" as wide as "Habitat," and give it the appearance of perspective. You could use the Perspective grid for this, but in this particular case, I thought the grid would be too extreme, so I chose the 3-D Rotation Xtra. Begin by selecting the "Alert" group and moving it so that the top corner of the "A" is under the "H" in "Habitat."

2. If rulers are not visible, go to View ® Page Rulers ® Show, and drag a vertical ruler out to the right edge of the "T" in "HABITAT." Place a horizontal guideline at the bottom of the word, "ALERT."

3. Select the "ALERT" group, and drag the bottom-right selection handle all the way to the right guideline. If you have Snap To Guides selected (View menu), the cursor will more or less "slide" along the guideline and maintain the baseline of the text object. Do not deselect the group.

4. Double-click the 3-D Rotation button on the Xtra toolbar (Window ® Toolbars ® Xtra Tools), and adjust the dialog box to match Figure 11-2.

   
   Figure 11-2: The 3-D Rotation dialog box

5. Hold down the Shift key and click (and hold) the cursor approximately at the top-left corner of the "E" in "ALERT." Drag the mouse up and watch the distortion. Stop when you think it's correct. Feel free to be creative and make the distortion as extreme as you wish. Don't worry if the word gets too thin from top to bottom, or wide from left to right. You adjust that next. Select the Pointer tool and save your document.

Now you use an envelope to make waves. You can view the completed logo animation by double-clicking  HabitatWave.swf in the Chapter 11 images folder on the CD-ROM. Bring the Envelope toolbar into the document (if it's not there already) by going to Window ® Toolbars ® Envelope.

1. Start by selecting the "ALERT" group if it's been deselected.

2. Choose Rectangle from the Envelope drop-down menu, and click the Create button to the left of the menu. This applies a simple rectangular outline with eight control points. For one reason or another, each of the control points has its control handles extended. All of the points in corners are corner points; curve points occupy the middle locations.

3. Just to see what's going to happen, select the top-middle point, and drag one of the control handles up or down. Pretty dramatic, huh? Choose Undo to revert to the original envelope.

4. You want to have several waves in this design, but you can't make all those waves with a single point. So, choose Xtras ® Distort ® Add Points. The Xtra places a point midway between any two existing points. Choose Xtras ® Repeat Add Points two more times to make a total of 15 points across the bottom and top (there are an equal number of points on each side).

5. Beginning with the second point on the horizontal path, drag and select the top and bottom points. Then skip to the fourth set of points and shift+drag and select that set. Continue with every other set of points on the envelope. You end up with eight points on the top and bottom selected.

6. Press the down arrow key twice. Assuming you haven't changed the preferences for this key, you move the points down a distance of two points.

7. Hold down the Shift key and click all the selected points on the top path to deselect them.

8. Press the down arrow key two more times. The result should look similar to Figure 11-3.

   
   Figure 11-3: The finished distortion by use of the Envelope feature in FreeHand

9. If you want to see how the envelope is doing its job, click the Map button. You should have a view similar to that in Figure 11-4.

   
   Figure 11-4: The Map view of an envelope

10. Click the Add Preset button and name this envelope Wave 1. Save your document.

Animating the logo

 Habitat Alert site   This could be the end of the project if you're only working for print. But why not spice it up a bit for the Web? Let's use what you've got already and make an animation:

1. Open a new document and drag and drop the "HABITAT ALERT" words onto the new document. (Don't bring the finished artwork from the top of the page.) Close the original document and save the new document.

2. Clone the distortion you just completed, and move the clone above or below the original enough to give you some room to work. Hold down the Shift key to constrain your movements vertically.

3. Use the Shift key to select all the points you previously selected and moved (every other point on the horizontal path sections).

4. Press the up arrow key four times.

5. Deselect all the points on the top row, and press the up arrow key four more times.

6. Click the Add Preset button and name this envelope Wave 2. Save your document.

7. Click Modify ® With the cloned wavy text still selected, release the Envelope by clicking the Release button in the Envelope toolbar. (Don't click the Remove button. It restores the text to its original format.) Then click Modify ® Join.

8. Click the original wavy text, and join it as well–remember to release the envelope here, too. (Do not join the two sets of wavy text together!)

9. Select an appropriate color for water; choose a light blue-green, for instance, and apply it to one wavy word.

10. Darken the color and apply it to the second wavy word.

11. Align the two words so the top-left corner of the initial "A" is in the same location for both words.

12. Clone the top word, and send it to the back.

13. Drag a selection box around all three words, and choose Modify ® Combine ® Blend.

14. Change the number of steps in the blend to 10 in the Object Inspector.

15. Select Xtras ® Animate ® Release To Layers. In the dialog box, select Sequence and leave the other options unchecked. Click OK.

16. Change the color of the word "HABITAT" to a dark sky blue.

17. Move the word "HABITAT" to its correct location directly above the wavy words, and place it on the Background layer. This action allows "HABITAT" to appear on all frames of the animation.

18. Turn off the Guide, and Foreground layers. The only visible layers should be the Background layer and layers containing the words "New Layer."

19. Now, go to Control ® Test Movie.

20. To save the file as a movie, it must be exported. Go to File ®Export, and choose Macromedia Flash SWF.

ToolTips — What's This Thing Do, Anyway?

Some of the FreeHand icons do not readily tell you what function they perform. To help you out, ToolTips occur if you hover the cursor over the icon for a second or two — be patient, FreeHand 10 is a tad slow in showing the ToolTips. The timelag of their appearance is long enough that having them on doesn't bother most people, and they do come in very handy when you're looking for a tool that you don't usually use. Although ToolTips are on by default, you can turn them off if you want by going to FreeHand's Preferences, and opening the Panels tab. Then just deselect Show ToolTips.

In this project, three versions of the wavy word were used so that the movie will loop. If you have only up and down states, so to speak, the animation goes up, stops suddenly, and starts at the bottom again, only to repeat itself in a herky-jerky motion. In some instances, that could be exactly what you want to do. In this example, however, I wanted a smooth — fluid, if you will — motion without beginning or end.

The number of layers must be maintained between all the animated elements. If you make your initial animation with 25 steps, and then draw something else that FreeHand blends into 18 steps, you'll have 7 steps in which the second element doesn't appear on the stage at all. Keep in mind that the number of blend steps you apply in the Object Inspector must be added to the initial objects that make up the blend.

You can make this animation much more colorful if you want to give the words a gradient fill. Just remember to give all the words the same number of colors in the fill. The colors can be as different as black and white, but they must number the same. Also, blended objects must either have a stroke or not. You cannot blend a stroked object with a non-stroked object; nor can you blend a group. You can't blend two sets of objects at the same time. If you select the multiple "for" words, and the multiple "Habitat" words and attempted to blend them, you'd get a warning dialog box stating that the elements are dissimilar. Take your time, plan ahead, and you'll save time in the long run.

On the CD-ROM 

A copy of the logo and animation is in the chapter11_exercise folder. The filenames are  LogoEnvelope.fh10 and  habitatwave.swf.

Sealing the envelope discussion

During the project, you saved two envelopes. Those can be chosen at any time to be applied to any graphic you choose. You can click the Copy As Path button to copy the envelope to the Clipboard. When you paste it, you have a normal path to work with. You could use it to outline the enveloped graphic, or as a basis for a blended fill or contour gradient fill. Many uses will occur to you as you work with envelopes. Lastly, you can delete them by clicking the Remove Preset button if you know you won't need the envelope in the future.

---