- Creating a New HTML5 Canvas Document
- Laying Out the Background Elements
- Drawing the Flowerpot
- Editing the Flower Graphic Symbol
- Animating the Flower Stalk with Inverse Kinematics
- Designing and Animating the Flower Head
- Create a Personalized Text Message
- Using JavaScript Code to Stop the Playhead
- Publishing Your Project for HTML5 Canvas
- Challenge!
- Conclusion
This chapter is from the book
This chapter is from the book
This chapter is from the book
Animating the Flower Stalk with Inverse Kinematics
ACA Objective 4.5
The Bone tool has been absent from Animate CC ever since the application was rewritten for 64-bit systems with the introduction of Animate CC CC. Today, however, the Bone tool, the Bind tool, armature layers, and everything else in the Animate CC inverse kinematics system are back.
About inverse kinematics in Animate CC
Inverse kinematics allow you to animate objects in Animate CC using a series of bones chained into linear or branched armatures in parent-child relationships. This means that when one bone moves during an animation, that connected bones will also move in relation to it. Inverse kinematics is a unique way of animating content to create natural motion.
To animate using inverse kinematics, specify the start and end positions of bones on the timeline. These positions are known as “poses” within Animate CC. The armature will be automatically adjusted to tween positions of the bones in the armature between poses (Figure 4.24).
)
Figure 4.24 Animating using reverse kinematics
You can apply inverse kinematics within Animate CC in one of two ways: by drawing bones across a single shape or through the construction of an armature composed of multiple Movie Clip symbol instances. In this project, you’ll create a shape-base armature from the flower stalk you just created.
Animating the flower stalk using an armature layer
Your next step is to animate the stalk growing up and out of the flowerpot. To do this, you’ll take advantage of the armature you’ve already created. You don’t need to specify any sort of tween when working with armatures; Animate CC will handle all this automatically once different poses are defined.
Video 4.14 Using the Bone Tool
- First, you’ll need to extend your frame span to frame 65. To do so, move the playhead to frame 65, select the frame, and choose Insert > Timeline > Frame from the application menu. These frames will provide enough time to nicely animate the growth of your stalk. Bring the playhead back to frame 1 when finished.
Select the Bone tool from the Tools panel. You’ll use this tool to define the bones within your armature (Figure 4.25).
Figure 4.25 Defining the bones
To define a bone, click and drag a short way. Draw subsequent bones across the shape by clicking the end point of the previous bone and dragging out a new segment. Draw 3–5 bone segments across the stalk.
Notice how the layer color is now yellow and the icon for the layers is a small figure running? These changes indicate that this is now an armature layer (Figure 4.26).
Figure 4.26 The yellow layer color indicated that Stalk is now an armature layer.
Because you’re using an armature, you need to use the Selection tool only to modify your pose. Try it out! Notice how everything naturally moves in relation to any portion of the stalk you click and drag? This is the power of inverse kinematics.
- Video 4.15 Managing Armature Poses
Once an armature is assembled, it has a default pose. When you modify a property on any particular frame, it’s called a pose. Poses can be copied for easy modification and reuse. You want your ending frame to contain a pose with the stalk fully extended.
- Select the small black diamond on frame 1 and right-click it.
- Choose Copy Pose from the context menu and move the playhead to frame 65.
Select frame 65 and right-click again; this time choose Paste Pose.
The duplicated pose is shown as a small black diamond. Now you need to define your additional poses across the frame span.
Moving back to frame 1, modify the pose so that all segments of your stalk are collapsed down into the flower pot.
- Video 4.16 Animating the Stalk
- Move the playhead forward about 10 frames and create a new pose by guiding the growth of the stalk up and out of the flower pot.
Jump ahead about 10–15 more layers. Create as many poses and modifications to these poses as necessary to animate the snake-like motion of a plant growing up from the soil (Figure 4.27).
Figure 4.27 Keyframes set at 10-15 frame intervals, poses created
)
)
)
