Animating a Flag with Bones

Animating a Flag with Bones

Flash CS4 Tutorial


How to Add Bone Structure to Merge Shapes to Create a Flash Animation



Bones are used to drive character animation or fluid motion such as a flag waving in the wind. They can also be used to simulate wind blown grass or the mechanical articulation of an excavator.

Bones are added to objects in multiple ways. It is possible to draw one or more Merge Shape objects, select the entire object, then add the bone structure. For more information on Merge Shapes, see topic, Merge Shape.

A second method of adding bones requires that you create your object as a series of Movie Symbols. Once you arrange your Movie Symbols, the bone structure is added with the Bone tool by click-dragging between the symbols. For more information on Movie Symbols, see topic, Movie Symbol Basics. To learn more about creating and animating a Bone structure with Movie Symbols, see topics, Adding Bones to Symbol Objects and Creating a Walk Cycle with Bones.

In this topic we will demonstrate how to create and animate a Merge Shape flag that contains several objects


Step One

To Open a new document and turn on the grid feature (View > Grid > Edit Grid). Select Show Grid, Show Over Objects and Snap to Grid.

Step Two

Select the Rectangle tool (r key) and set the fill color.

Step Three

Disable the stroke color.

Step Four

Set the Object Drawing option to Merge Shape.

Step Five

Click-drag to draw the flag shape.

Step Six

Changing the fill color, continue to add merge shapes to your flag using the various shape tools.

Step Seven

Once you finish your flag, hide the grid by choosing, View > Grid > Show Grid.

Step Eight

Choose the Selection tool (v key) and marquee select the entire flag with all the shapes.

Step Nine

Select the Bone tool (x key) and click-drag a short bone starting at the left side of the flag.

Step Ten

Click-drag to add three more bones to the flag.

Step Eleven

With the Selection tool (v key), click the first bone and open the Properties panel (Window > Properties).

Step Twelve

Open the Joint: Rotation section and uncheck the Enable box. This will lock the left edge of the flag so it won't rotate.

Step Thirteen

Drag the Bones to reshape the flag with the Selection tool (v key).

Step Fourteen

Click frame 30 of the new Armature layer and press F6 to add a keyframe.

Step Fifteen

Click frame 5 and reshape the Bones. A new keyframe is automatically added.

Step Sixteen

Click frame 10 and reshape the Bones again. Another keyframe is added to the Armature layer.

Step Seventeen

Repeat the process for frames 15, 20 and 25.

Step Eighteen

Publish your movie by choosing Control > Test Movie (Cmd/Return (PC-Ctrl/Enter). The flag distorts because of the Bone structure. The movie loops because the first keyframe and last keyframe are identical.

 Why Not Use Drawing Objects?

Drawing Objects work if you have only one fill object. If you add multiple fills (as we did in the flag), you need to use a Merge Shape.

Deleting Keyframes

To delete a keyframe from an Armature layer, right-click the keyframe and choose Clear Pose from the pull-down menu.


Stock Images