Basic Animation | Macromedia Studio MX Bible

< Day Day Up >

The previous animation project got its muscle from a distortion envelope, blends, and the Animate Xtra. In this animation, you rely on drawn objects instead of envelopes. Obviously, this takes a bit more time and drawing skill. This animation will be basic, in and of itself, but will take on life when you add to it in Flash.

This project (shown in Figure 11-5) is found in the chapter11_exercise folder on the CD-ROM that came with this book. Open Flying Heron Animation.fh10 file to begin, and save it to your hard drive. The jumble of gray shapes is actually three separate birds. As in the previous animation, you want it to loop seamlessly, so the first and last states are identical, and the middle state has moved. The birds are broken down into three parts each: front wing, body, and back wing. Both wings are made in a sandwich style, with the high wing making the front and back, and the lowered state of the wing in the middle. The body could have stayed in a static location, but a bird's body rises just a bit as the wing flaps down. Besides that, it looks neater. To preview the finished movie, double-click HighHeron.swf on the CD-ROM.

click to expand
Figure 11-5: The great blue heron in flight

You may want to work on several layers as you're building an animation of this sort, because of the multiple elements you have to deal with. But it's very important that you have all the final elements (the blends) on a single layer when you use the Animate Xtra. If you don't, the animation will not work properly. This document has all nine elements on the same layer:

Begin by selecting the two top wings and hiding them (View ® Hide Selection). You might think that something went wrong, because the wings appear to be there still, but you're looking at the end state of the animation. Select them and hide them as well.
Select the bottom two wings and hide them. There are only two to hide.
Drag a selection around the body of the bird. Look in the Object Inspector. It should say that you have three objects selected.
Choose Modify ® Combine ® Blend. In the Object Inspector, change the number of steps in the blend to 12. Save.
Select View ® Show All; then select the body blend and hide it.
Select and hide the two top front wings and the bottom front wing. You should have the far wings left on the screen. The Keyline view (choose it from the pop-up menu at the bottom of the application window) may be helpful here so you can differentiate various objects.
Drag a selection box around the wings on the left, and blend them as you did previously. Change the blend steps to 12. Save.
Select View ® Show All again, and this time hide the body and the blended wing.
Repeat the blend and blend steps operation on the right wings.
Select View ® Show All. You should have a gray mass with many holes and slices in it. Don't fret. Save the document.
Now for the fun part. Drag a selection box around all three blended groups, and choose Xtras ® Animate ® Release To Layers.
In the dialog box, select Sequence, and leave the options unselected.
Nothing much changes on the screen. You can tell that the blends have been disassembled into many objects (as seen in Figure 11-6), and the Layers panel has several new layers. Choose Control ® Test Movie.

Figure 11-6: Three separate sets of blends make up the animation.
Choose File ® Export, and select Macromedia Flash SWF for the file format. Name the file HighHeron. (FreeHand appends the .swf suffix to the filename). You use this file later in the Flash section.

When you watch the animation, you'll see that the wings aren't perfect. To create a more precise animation, you can make intermediate steps in the animation instead of views at the extremes of movement. You'll make that decision based on accuracy versus time, money, drawing ability, and how important the image is to the overall effect of the site.

Waving Reeds project

This project won't take you much time at all, because most of it has been completed for you already in the file named Reeds.fh10 in the chapter11_exercise folder on the CD-ROM that comes with this book. Open that file and save it to your hard drive. The point of this animation is to give the appearance of a lot of action, when in fact not much is really happening. If you want to view the completed animation, double-click Reeds.swf file on the CD-ROM.

If you want something to remain on the stage throughout the animation, you must place it on the Background layer. The Background layer in this document contains four bird silhouettes, a lot of reeds, and some text. Four other groups of reeds have been placed on the Waving Grass layer, and three of them have been set up for you.

I dragged a selection box over the bottom edge of small areas of grass in the original logo concept. I cut the selection and pasted it into the document, where I converted it into a compound path (Modify ® Join). Because I wanted a looping animation, I made a clone from the compound path, and modified it for the midpoint of the animation. In this case, I skewed it left or right — a little or a lot for a random look — and shortened it to make the reeds appear as if they are bending in the breeze. That takes care of the first three groups of reeds. You can do the next one now:

Select the group of reeds on the far right, and assure yourself that it is a compound path by looking in the Object inspector. Clone the reeds.
Choose the Skew tool and place the cursor at the bottom of the lowest reed. Hold down the Shift key to constrain the skewing, and move the cursor the way you want the wind to blow.
It will look as if the reeds have stretched instead of bent. Press the Command/Control key to switch to the Pointer tool temporarily, and grasp a top corner of the grouped reeds. Drag that corner down until the reeds look about the same length they would be if they'd been bent as far as you skewed them.
Select the original reed group again, and clone it. By default, the clone rises to the top of the stacking order, but I like to bring it to the front just in case (Modify ® Arrange ® Bring To Front). You need an original in the back and the front, with the distortion in the middle of the animation sandwich.
Drag a selection box around the three groups of reeds that you've been working with. If you accidentally selected an adjacent group of reeds, hold down the Shift key and deselect it. Choose Modify ® Combine ® Blend.
In the Object inspector, change the number of steps in the blend to 6 and press the Return or Enter key. Save your document. It should look similar to Figure 11-7.

Figure 11-7: Four groups of reeds prepared to animate
Select all sets of reeds that will be animated. Go to Xtras ® Animate ® Release To Layers.
When the Xtra is through, go to Control ® Test Movie. As before, if a section of your animation moves and snaps back into a starting position, the stacking order of the graphic elements that make up that section are out of order. Stop the animation, by closing the window, choose Edit ® Undo, and make the necessary changes.
To prepare this animation for the Web, go to File ® Export, and choose Macromedia Flash SWF as the file format. FreeHand appends .swf to the file's name. The file can be placed in an HTML page, or imported into Flash for further animating.

< Day Day Up >