Getting Acquainted: Scaling and Moving

Let’s take a comprehensive tour of the Motion Editor, covering all the basics. Portions of this will feel like a review after Chapter 7, but it’s important to understand how the mechanics of motion, scaling, and distortion are distinct from the machinery of classic tweens. You won’t be seeing any shapes, by the way, until much later in the chapter. The Motion Editor deals exclusively in symbols and text fields, just as is the case with classic tweens.

In this case, you’ll be creating motion tweens, which look and behave like their classic cousins. The differences come in how they’re made and how you can edit them, as you’ll see in the following steps:

1. Open the 01_Map.fla file found in the Chapter 8 Exercise folder. When it opens, you will notice a pin on a map. The pin you see on the stage is the Pin graphic symbol found in the Library.

2. Right-click on Frame 1 of the Pin Layer and select Create Motion Tween. This converts the layer into a tween layer and makes it available to the Motion Editor. (Alternatively, you can click frame 1 of the Pin layer and select Insert ➤ Motion Tween.)

   When you apply the motion tween, several things happen at once: the single frame stretches out to a 24-frame span and the span turns light blue when deselected. Why 24 frames? The default length is 1 second, so what you are seeing is one second of animation on the timeline. If you need more time, roll the mouse pointer to the end of the span. When the mouse pointer changes to a double-arrow, click and drag to the right, extending the tween to frame 70.

3. With the playhead at Frame 70, drag the pin down and to the right where the two big white streets intersect. What you have is a Pin, Figure 8-2, that moves in a straight line. Let’s change that, shall we?

   

   Figure 8-2. A motion tween has been applied to the Pin symbol

At this point we have played with the Motion Path by dragging a point on the path. There is another method. Here’s how:

1. Open the Motion Editor by double-clicking anywhere between the two keyframes. This time—provided you haven’t deselected the tween layer—you’ll see the various grids and input controls shown in Figure 8-3.

   

   Figure 8-3. Applying a motion tween activates the Motion Editor for that layer

2. Removing a motion tween is as easy as applying one. Right-click (Windows) or Control+click (Mac) the tween layer. Select Remove Tween, and the layer turns gray again. If you have removed the tween, undo it.

   It’s time to take a look at the some of the differences between motion tweens and classic tweens. The key is to be aware the Timeline and Motion Editor are so integrated in Animate CC that they are actually fond of each other. You might even say they’re connected at the hip. When you apply changes to a tween layer in one view, you’ll see the changes are instantly reflected in the other.

3. In the Timeline panel, drag the playhead to frame 20. Use the Free Transform tool or the Transform panel to make the symbol much wider than it should be.

   When you widen the symbol, you’ll see a black diamond appear under the playhead in frame 20, as shown in Figure 8-4. Notice the diamond is a tad smaller than the dot that represents the default keyframe in frame 1. The difference in shape and size tells you this is a property keyframe, which is just “tween-layer–speak” for a keyframe.

   

   Figure 8-4. Tween layer changes are stored in property keyframes

4. Open the Motion Editor by double-clicking anywhere in the tween span. Scroll vertically until you find the Scale X grid, as shown in Figure 8-5, and then scroll horizontally until you find the property keyframe that was automatically added when you changed the symbol’s width in the Timeline panel.

   

   Figure 8-5. The Motion Editor shows property changes in detailed, collapsible graphs

5. In the Motion Editor and select Transform ➤ Scale ➤ X.

   The graph depicted shows a change in x-axis scale; that is—assuming the symbol isn’t rotated—the width. The numbers along the left side stacked vertically show values that pertain to this property, which are percentages of scale. The numbers along the top show frames, which equate to changes over time.

   Follow the slanted line in the graph from bottom left up toward the upper right. It shows that the selected symbol began at a 100 percent width—the 100 is partially obscured by the slanted line’s left point—and was stretched to over 200 percent over a span of 20 frames

   This is considerably more detail than you get with classic tweens. We’ll come back to this graph concept in just a moment. First, back to the kissin’ cousin.

6. In the Timeline and with the playhead still in frame 20, drag the Pin symbol to the upper-right corner of the stage, as shown in Figure 8-6. At this point, you’ve tweened three distinct properties: Scale X, the X position, and the Y position.

   

   Figure 8-6. Expanded graphs in the Motion Editor can make motion data easier to see

Note that the property keyframe, from this view, is still just a small diamond at frame 20 in the timeline. All you can tell at a glance is that something has changed. But even if there’s less detail here, the two views are in agreement, and the Timeline view does give you a summary. Later in this chapter, in the “Changing Duration Nonproportionally” section, you’ll see how the Timeline panel’s abridged view actually makes it easier to update numerous property keyframes at once.

Naturally, you can see the changed properties directly on the stage, not only because the symbol itself is stretched and moved but also because of that dotted line that connects the current position of the symbol (specifically, its transformation point) to the position it held in frame 1. If you count them carefully, you’ll see 20 dots along the line, which represent the 20 frames in this tween span. The dots are all evenly spaced apart, which tells you the tween has no easing applied.

The vertical values in these graphs, along with the tooltips, change depending on the property represented. For example, the Location X graph starts just under 160 on the left side (not 100, like the Scale X graph), because the symbol is positioned at 156.95 pixels on the x-axis in frame 1. On the right side of the slanted line, the Properties panel shows a value of 291.95, because that’s where the symbol is positioned on the x-axis in frame 20. The point to take away from this is that these graphs are adaptable, and they change to suit the values of the property at hand. The X graph shows pixels, Scale X shows percentages, Rotation Z and Skew X show degrees, and so on.

Applying Easing

It is a fact of life, when it comes to objects in motion in Animate CC, that easing needs to be applied. Objects in motion don’t automatically stop and start. Instead they accelerate and decelerate, which is the purpose of easing. The really neat aspect of the Motion Editor is that you can apply eases from the Properties panel or right in the Motion Editor. Here’s how:

1. Open the Timeline panel and select the keyframe at frame 20 of the timeline.

2. In the Properties panel; twirl down the Ease twirlie, if necessary; and scrub the hot text value—0, by default—slowly toward the left. Scrub it to approximately -10, and then let go. Scrub again to -20 or so, and then let go. Scrub again to -30, -40, and so on, until -100, which is a full ease-in.

   As you scrub and release in small increments, you’ll see that the dots, which were evenly distributed after Step 12, begin to cluster toward the lower left, as shown in Figure 8-7, which represents the beginning of the tween. You just applied an ease in, so it makes sense that the dots are packed more closely at the beginning of the tween.

   

   Figure 8-7. Easing can be applied using the Properties panel

   In classic tweens, easing takes effect only between keyframes. In motion tweens, easing is distributed over the frame span of the whole tween, independent of property keyframes. This is a significant departure from the classic model.

3. Close your file without saving it.

Easing applied to a motion tween with the Properties panel is the same sort of easing applied to classic tweens, excluding the special-case Custom Ease In/Ease Out dialog box , discussed in Chapter 7. To get to the exciting stuff, you’ll need the Motion Editor, and advanced easing merits its own section.

Easing with Graphs

When it comes to the Motion Editor, the concept of easing ascends to a whole new level. For classic tweens, the Custom Ease In/Ease Out dialog box is the only thing that came close to sharing similar functionality, yet it provides little more than an introduction. The Custom Ease In/Ease Out dialog box associated with a classic tween is a good place to start but the real power of easing is found in the Motion Editor.

A powerful feature of the Motion Editor is that it overcomes a subtle, but significant, limitation of the Custom Ease In/Ease Out dialog box : classic easing, for whatever property is under consideration, begins at a starting point of 0 percent and ends at a destination point of 100 percent. If you’re moving a symbol from left to right—for example, from 25 pixels to 75 pixels—a classic tween begins at its starting point of 25 pixels (0 percent of the destination) and ends at 75 pixels (100 percent of its destination). Normal easing lets you adjust the acceleration and deceleration between those two immutable points. The Custom Ease In/Ease Out dialog box lets you adjust the velocity with greater control, thanks to Bézier curve handles. In fact, by adding anchor points, you can even opt to arrive at the destination point early, then head back out again and return later, as demonstrated in Chapter 7 with the bouncing mallet exercise. But in the end, there must always be a final anchor point. With classic easing, the final anchor point is always tethered to the 100 percent mark (see Figure 8-8).

Figure 8-8. Without easing, the graph shows a straight line

Unimpeded in this regard, the graphs of the Motion Editor can end up where you like. A custom ease can start at its beginning point of 0 percent, travel three quarters of the way to its destination, dance around a bit, and then return all the way to the beginning.

This freedom within the property graphs is a powerful tool, which is generally a good thing. But as anyone into Spider-Man will tell you, “With great power comes great responsibility.” Everything comes at a cost, and the price here is that the banished 100 percent restriction can occasionally be disorienting, especially when eases continue past the last property keyframe in a tween span. Let’s take a look.

Changing Duration Proportionally

The animation in the PixelDisposal.fla you were just using spans 60 frames. At 24 fps, that’s approximately 2.5 seconds, which may or may not be what you want. To change a tween span’s duration proportionally, you’ll need to use the Timeline panel . Here’s how:

1. Move your mouse to the right edge of the tween span. You’ll see the cursor turn into a double-headed arrow, as shown in Figure 8-17. Click and drag toward the left. For example, shorten the tween span so that it ends at frame 50. Notice that all four property keyframes are still in place, and, proportionately speaking, are the same relative distance from each other as before.

   

   Figure 8-17. Drag the tween span to shorten or increase a tween’s duration

2. Click and drag the right edge tween span so that it ends at frame 59. Now release and drag the right edge of the tween span to frame 60.

This time, the property frames are nearly back to their original places, but some are slightly off. That makes sense, because frame 59 is an odd number, and Animate CC had to make a decision on how to shift the frames to compensate.

To get the property keyframes back to frames 30, 40, 45, and 50 exactly, you’ll need to use a different approach. If you’re into tedium, you could switch to the Motion Editor and visit every property graph in turn, sliding numerous anchor points while holding the Shift key. The middle keyframe, especially, would give you a headache, because it affects the X, Y, Rotation Z, Scale X, and Scale Y graphs. There’s an easier way, and we describe it in the very next paragraph.

Manipulating Motion Paths

The most fascinating thing about this feature of the Motion Editor is you don’t need to use the Motion Editor. Motion paths are best manipulated through the Timeline panel . Here’s how:

1. Open the 06_MotionGuideSimple.fla file from this chapter’s exercise folder. When it opens, you will see that our pixel disposer has three pixels to toss into the trash bin. Turn off the visibility of the Green and Blue layers by clicking the eyeball icon on the layer strip.

2. Scrub through the timeline, and you will see that red cube fall to the bottom of the wastebasket. Did you catch the problem? The cube seems to move over the bin before hitting the bottom. You can see this in Figure 8-18 if you follow the motion path. Let’s fix that.

   

   Figure 8-18. The motion path shows you the “line” an object in motion will follow

3. Drag the playhead somewhere between the two keyframes and switch to the Selection tool. Hover near the motion path, and a curve will appear under the arrow. Click and drag the path to the left. As you do, the path will curve, as shown in Figure 8-19.

   

   Figure 8-19. Motion paths can be manipulated on the stage

4. Turn on the visibility of the Green layer and switch to the Subselection tool.

5. Click on either anchor point and drag the Bézier curve handles, as shown in Figure 8-20 to increase the range of the curve. As you can see, motion paths can be treated as vector objects.

   

   Figure 8-20. Use the Subselection tool to treat the path as a vector line

   This technique works only if the path has a curve.

   Not only can you reshape the motion path, but you can also move it, rotate, skew it, and treat it like any other shape or object on the stage. Let’s keep experimenting.

6. Turn on the visibility of the Blue layer and select it. Now turn your gaze to the Properties panel. Twirl down the Path options. Scrub across the X, Y, W, and H values, and you will see that you can move and resize the path. Impressed? Hang on—it gets better.

7. Open the Transform panel. Get your hand off the mouse because this one is a bit trickier. You need to select the path here, not the object, or Animate CC will think it has to transform the blue cube instead.

8. Use the Selection tool to click anywhere along the path. Now scrub across the Transform panel’s Rotate value. The path will, as shown in Figure 8-21, rotate around its start point.

   

   Figure 8-21. Use the Free Transform tool, Transform panel or press Ctrl (Windows) or Cmd (Mac) to transform a motion path with your mouse

9. Experiment with the Width, Height, and Skew properties in the Transform panel.

10. If you want to do it yourself and not use numbers, switch to the Free Transform tool and select the path. As shown in Figure 8-21 you can manipulate the path just as you would with a movieclip of graphic symbol. If you don’t want to switch tools and do this strictly with the mouse, select the path with the Subselection tool and press Ctrl (Windows) or Cmd (Mac).

    Don’t forget the Alt (Windows) or Option (Mac) key while you make these transformations with the mouse. Without it, transformations pivot around the bounding box’s center. With Alt (Windows) or Option (Mac), transformations pivot along the opposite corner or edge. In either case, the Ctrl (Windows) or Cmd (Mac) key is required to produce the bounding box.

Motion Tween Properties

As you’ve seen throughout this book, the Properties panel is the most versatile panel in your arsenal, simply because it changes to reflect whatever object is selected. When you’re dealing with motion tweens, there are two things the Properties panel lets you manipulate: the symbol and the tween itself (that is, the motion path). Some of these properties are the ones you see for classic tweens, but they don’t all apply for motion tweens.

Let’s take a look. Open any of the files you’ve used to far, and make sure a motion tween is applied to at least one symbol. Select the tween span, and you’ll notice the following properties in the Properties panel:

• Ease: This applies the Motion Editor’s Simple (Slow) ease to the full frame span selected. You can adjust this ease’s hot text to a value from -100 (ease in) through 0 (no ease) to 100 (ease out).

• Rotate [x] time(s) + [y]°: This is comparable to the Rotate drop-down for classic tweens and manages symbol rotation. The two hot text values let you specify the number of full rotations ([x]) and degrees of partial rotation ([y]).

• Direction: Once rotation numbers are configured with the previous property, you can choose clockwise (CW), counterclockwise (CCW), or none to determine the direction of those settings or cancel them.

• Orient to path: This check box applies only to orientation along a motion path.

• X, Y, W (Width) and H (Height): These reposition or transform a tween span’s motion path.

• Sync graphic symbols: Human beings still have an appendix, but modern science still hasn’t definitively figured out what it’s good for, and the same goes for this property. Given its name, it’s presumably the motion tween equivalent to the classic tween Sync property discussed in Chapter 7. With motion tweens, symbol synchronization happens automatically, whether or not this property is selected. As you’ll see in the next section, this feature is moot in any case, because motion paths can be reassigned to any symbol you like.

The other motion tween–related Properties panel settings depend on the symbol itself. For movieclips, your configuration options for motion tweens are the same as those for classic tweens. Some properties—such as position, scale, and rotation, and even color effects such as alpha—are tweenable. Others, such as blend modes, are not. These are consistent across the board when you’re dealing with movieclips. It’s when you’re using graphic symbols that you need to be aware of a few limitations.

The limitations involve the Loop , Play Once, Single Frame , and Frame options in the Properties panel’s Looping area . These properties apply to classic tween keyframes as discussed in Chapter 7. For motion tweens, they apply only to the tween span’s first keyframe. They’re ignored for property keyframes. The long and short of it is that you can set the Loop , Play Once , and Single Frame drop-down options and Frame input field once for a given motion tween—and Flash will obey your command—but only once for that tween span. Change these settings at any frame along the span, and the settings are changed for the whole span.

Even though we’re focusing on symbols in these paragraphs, bear in mind that motion tweens can also be applied to text fields.

One final note. Like classic tweens, motion tweens can accommodate only one symbol per tween span. In fact, motion tweens are a bit stricter about this constraint. Once you’ve applied a classic tween between two keyframes, Animate CC won’t let you draw a shape or add a symbol to any of the frames between the keyframes. Interestingly enough, it will let you draw or add symbols to tweened keyframes, but doing so breaks the classic tween, whose “I’m a tween” indicator line then becomes a dashed line. With motion tweens, Animate CC won’t let you draw or add a symbol to any frame of the tween span, keyframe or not. The moral of this story is that you should give each of your tween spans its own layer.

Using the Bone Tool

The Bone tool is your key to the world of poseable armatures in the authoring environment. Using it will give you an inkling of the satisfaction experienced by a certain famous Victor Frankenstein, without anywhere near the hassle he went through or the illegal outings. You won’t be visiting any actual graveyards, for example.

Let’s see how the Bone tool works.

1. Open the 09_Bones.fla file from the exercise folder for this chapter. You’ll be greeted by a more or less anatomically correct hand, sans flesh. Go ahead and wave! The wrist and hand bones are all part of the same graphic symbol, named “hand” in the Library. The knuckles are also graphic symbols, named by finger and knuckle number—for example, ring1, ring2, and ring3. All of these symbols happen to be on the same layer, but that doesn’t need to be the case.

2. Select the Bone tool from the Tools panel. It’s the one in Figure 8-25 that looks like a bone, just above or to the left of the Paint Bucket, depending on your Tools panel configuration.

   

   Figure 8-25. The Bone tool lets you connect symbols the way bones are connected in real life

3. Click over the bottom-center portion of the skeleton’s wrist, and drag toward the bottom of the thumb’s first knuckle, as shown in Figure 8-26. When you release the mouse, you’ll see your very first armature, which includes a single IK bone.

   

   Figure 8-26. Drawing your first bone creates the armature

   Bones can only be rigged between graphic symbols, movieclips, or artwork that has been broken apart. Trying to run a bone, for example, from one photo to another will result in an error message telling you, essentially, “Nope you can’t do that!”

   Notice the new layer in the Timeline panel, called Armature_1. The layer icon is also noticeably different, resembling a stick figure. That’s your armature, and as you continue to connect your symbols together with IK bones, those symbols will automatically be pulled to this new layer. Just like a motion tween layer, this layer has distinctive properties. For example, you can’t right-click (Windows) or Control+click (Mac) an armature layer to tween it, even though IK poses can be tweened (more on this later in the chapter, in the “Animating IK poses section”). You can’t draw shapes on or drag symbols to an armature layer.

   Bones have two ends, and it’s helpful to know their anatomy. The larger end of the bone, where you started to drag, is called the head. The smaller end of the bone, where you released the mouse, is called the tail. The tail is pointing up and to the left in Figure 8-26. A string of connected bones is called an IK chain or a bone chain.

4. Still with the Bone tool, hover somewhere inside the symbol that represents the first knuckle on the thumb. You don’t need to be exact—just within the symbol’s bounding box. Then click and drag toward the bottom of the second knuckle. You’ll notice that even if you don’t begin the second drag directly over the tail of the first armature bone, Animate CC will automatically snap it into place for you. Release when you’re over the bottom of the second knuckle.

5. To finish the thumb, hover anywhere inside the second knuckle’s symbol. Click and drag upward to the bottom of the third knuckle. When you release, you’ll have the simple bone rigging shown in Figure 8-27.

   

   Figure 8-27. As you connect symbols with bones, the symbols are pulled to the armature layer

   If you’re anything like the authors, you’re just dying to try these bones, so let’s take a quick break and do just that.

6. Switch to the Selection tool, grab that third knuckle, and give it a shake.

We fully expect you’ll have fun, but all the same, you’ll also see that it’s also pretty easy to arrange the hand into what looks like an orthopedic surgeon’s dream (see Figure 8-28). It may surprise you, for example, that the wrist pivots, and those knuckles are bending into contortions that make even our yoga buddies wince. We’ll fix those issues in just a moment. First, let’s get acquainted with the Bone tool properties.

Figure 8-28. Ouch! Bones are easy to connect, but the results aren’t always what you might anticipate

Bone Tool Properties

There are two ways to nudge the Properties panel into showing bone-related properties: by clicking an IK bone on the stage and by clicking the armature itself, which is represented by an armature layer. Let’s start with the armature.

1. Continuing with the Bones.fla file, click frame 1 of the Armature layer. When you do, the Properties panel updates to show three twirlies:

   • Ease: In this area, you’ll find a drop-down list for selecting easing from a list of prebuilt choices and a Strength value that lets you specify intensity, just as you saw in the Properties panel for motion tweens. These settings configure easing for the span of an armature layer (you can drag out an armature span to encompass as many frames as you like). Armature layers provide their own tweening capability, which is discussed in the “Animating IK Poses” section and again in the last exercise of this chapter. For now, just note that this is where you can apply easing.

   • Options: The area gives you something to see even without tweening. The Style drop-down list lets you specify how you want the IK bones to look. You have three choices: Wire (the default), Solid, Line, and None, which are illustrated in Figure 8-29 from left to right. When working with numerous or very small symbols, consider using the Wire or Line styles. Why? Because the Solid view can obscure symbols that appear under the IK bones.

     

     Figure 8-29. Bones can be configured as Wire, Solid, Line, and None

   • Springs: Allows you to enable or disable springs for the entire armature. Springs are enabled by default.

2. Change the Type drop-down selection from Authortime to Runtime. You’ll see the warning message shown in Figure 8-30.

   

   Figure 8-30. Only MovieClip bones can be interactive at runtime

   The reason for the warning is that, although bones can be made interactive for the user, Animate CC requires that the boned symbols be movieclips when Type is set to Runtime. Fortunately, this is easy to change, even if there are numerous symbols in play.

3. Click OK to close the warning dialog box.

4. Open the Library, and click the first symbol, named hand, to select it. Press and hold the Shift key, and then select the last symbol. Now everything in your Library is selected.

5. Right-click (Windows) or Control+click (Mac) any one of the symbols and choose Properties from the context menu.

   What you get is a feature introduced way back in Flash Professional CS4, which is an incredible time-saver. The Symbol Properties dialog box opens—not just for the symbol you clicked, but for all selected symbols.

6. In the Symbol Properties dialog box, place a check mark in the Type property, and change the drop-down choice to Movie Clip, as shown in Figure 8-31. Then click OK.

   

   Figure 8-31. Animate CC lets you change multiple symbol properties at once in the Library

   All of your Library’s graphic symbols become movieclips simultaneously. This used to take a separate visit to each asset. However, you still need to let the stage know what you’ve done.

7. Click the stage to select it. Select Edit ➤ Select All. In one swoop, you just selected all your symbol instances on the stage.

8. Click any one of the symbol instances to update the Properties panel, and then select MovieClip from the drop-down list at the top of the Properties panel.

9. Click frame 1 of the Armature layer and change the Type drop-down selection to Runtime.

10. Test the movie and wiggle those thumb knuckles inside Flash Player. Pretty neat!

11. Close the SWF and click one of the IK bones to update the Properties panel.

Runtime Armatures in HTML5 Canvas

As you’ve seen, in order to manipulate IK at runtime, your armature must be composed of MovieClip symbol instances. There is another restriction to consider when dealing with armatures—target document type, as shown in Figure 8-32.

Figure 8-32. When targeting HTML5 Canvas, you cannot select Runtime as an Armature Type

1. 12. With the properties updated, double-click one of the bones on the stage (not the symbol instance) and in the Properties panel you now see bone-specific properties. Let’s go over those:

   • Position X, Y, Length, and Angle: These are read-only properties, which means you can look, but don’t touch. Thankfully, the names are self-explanatory.

   • Speed: Think of this as friction, or how much “give” the selected bone has in the armature. A higher number means faster movement, and your range is 0 (no movement) to 200 (fast movement). You can also select the Pin check box here to pin the tail of the selected bone to the stage.

   • Joint: Rotation: Here, you have the following choices:

     • Enable: Selecting this check box allows the bone to pivot around its head. In contrast, deselecting it means the bone won’t act like a hinge.

     • Constrain, Min, and Max: Selecting Constrain activates the Min and Max hot text values, which allow you to determine how wide an arc your hinge can pivot on.

   • Joint: X and Y Translation: The choices for this property are as follows:

     • Enable: Selecting this check box allows the bone to effectively pop in and out of its socket, in the X- or Y-axis.

     • Constrain, Min, and Max: Selecting Constrain activates the Min and Max hot text values, which allow you to determine how far the bone can move.

   • Spring: This property integrates dynamic physics into the Bones IK system. The two properties allow easier creation of physics-enhanced animation.

     • Strength: Think of a car spring and a Slinky. The car spring is rigid, whereas the Slinky is totally bendable. The Strength property stiffens a spring. If the Slinky has a value of 0, then a car spring has a value of 100.

     • Damping: The rate of decay of the spring effect. Higher values cause the springiness to diminish more quickly. A value of 0 causes the springiness to remain at its full strength throughout the frames of the pose layer

Of the properties available, Rotation , Translation , and Spring will give you the biggest bang for your buck. Let’s see how easy it is to fix that misshapen hand! While we’re at it, you’ll learn some helpful subtleties on manipulating the symbols in an armature.

Applying Joint Translation

Another way to control the movement of joints is called joint translation—generally meaning a change in position or movement. This affects movement of an IK bone along its X- or Y-axis (or both). To illustrate, we’ll leave our skeleton at the chiropractors for a while and turn our attention to a vampire.

“Sava Savanović was said to have lived in an old watermill on the Rogačica river, at Zarožje village in the municipality of Bajina Bašta . It was said that he killed and drank the blood of the millers when they came to mill their grains.” – Wikipedia

It was in November of 2012 that the authorities of the Serbian village of Zarozje issued a warning to the world after the vampire’s mill (the place he would reside in) collapsed. The local mayor even stated “People are worried, everybody knows the legend of this vampire and the thought that he is now homeless and looking for somewhere else and possibly other victims is terrifying people. We are all frightened.” Truly frightening. Let’s build Sava a new mill.

1. Open the Mill.fla file from the Chapter 8 exercise folder. The symbols are already in place for you and there is much additional artwork to help attract Sava back to his refuge.

   In Figure 8-38, we’ve labeled the mill wheel assembly’s anatomy to assist you in the next steps, so you can focus your attention entirely on the IK rigging. You’re going to connect three horizontal symbols from left to right. Ignore the actual wheel for the time being.

   

   Figure 8-38. The movement of this mill wheel will include joint translation

2. Select the Bone tool and then add a bone that starts on the left side of the piston rod symbol and ends on the crosshead bearing symbol (the center symbol).

3. Add another bone from the crosshead bearing symbol to the right side of the connecting rod symbol, as shown in Figure 8-39. This is no different from the bone rigging you did for the knuckles.

   

   Figure 8-39. Two bones connect three symbols

   Joint translation doesn’t require ActionScript, but we’re going to use some programming to demonstrate it in this particular case. Because we’ll be using ActionScript, let’s give the bones and armature meaningful instance names.

4. Using the Selection tool, select the bone on the right, and use the Properties panel to give it the instance name connectingRod, as shown in Figure 8-40.

   

   Figure 8-40. Bones and armatures support instance names, just like movieclip symbols

   Pay close attention to the Properties panel when making your selections. It’s easy to accidentally click the symbol to which a bone is applied, rather than the bone itself. In this context, the symbol is listed as an IK Node in the Properties panel. If you select an IK node, this exercise won’t work properly. Figure 8-41 shows the correct selection of a bone, which displays IK Bone in the Properties panel.

   

   Figure 8-41. Joint translation is indicated by a double-headed arrow along the relevant axis

5. Select the other bone and give it the instance name pistonRod.

6. Select the armature itself by clicking frame 1 of its layer in the Timeline panel. Use the Properties panel to give the armature the instance name engine. The armature’s layer name will update to the same name.

   Now it’s time for the joint translation, but first, let’s keep this bone from rotating. It’s possible for bones to translate and rotate, but that isn’t what we want here. Our aim is to let the piston rod slide left and right when the armature moves.

7. Select the pistonRod bone and use the Properties panel to disable its rotation (that is, deselect the Enable check box in the Joint: Rotation area).

8. To achieve the left-and-right motion, select the Enable check box in the Joint: X Translation area. The bone’s head gets a horizontal double-headed arrow, as shown in Figure 8-41.

   You could optionally constrain this translation by selecting the Constrain check box and configuring Min and Max values, just as with joint rotation, but that isn’t necessary here. Note, too, that you could optionally translate (and constrain) along the y-axis, but we’ll also omit that step.

   Time to get Sava’s wheel moving!

9. Click frame 1 of the armature’s layer (engine) to select the armature. In the Options area of the Properties panel and change the Type drop-down selection to Runtime. Now this rigging is ready for ActionScript.

10. Select frame 1 of the Actions layer and open the Actions panel. Type the following ActionScript:

    import fl.ik.*;
    
    var pt:Point = new Point();
    var arm:IKArmature = IKManager.getArmatureByName("engine");
    var bone:IKBone = arm.getBoneByName("connectingRod");
    var tail:IKJoint = bone.tailJoint;
    var pos:Point = tail.position;
    
    var ik:IKMover = new IKMover(tail, pos);

    The first line imports all the classes in the fl.ik package, which includes classes necessary for identifying and manipulating armatures created in the authoring tool. The next line declares and instantiates a variable, pt, set to an instance of the Point class. (The Point class doesn’t reside in the fl.ik package, but in just a moment, you’ll see that something called the IKMover class needs a Point instance.)

    From the third line on, the code unfolds like the lyrics in that old catchy tune, “Dry Bones” (“the knee bone’s connected to the…thi-i-igh bone”). How so? A variable, arm, is declared and set to an instance of the IKArmature class. This variable takes its value from a method of the IKManager class, which connects it to the armature whose instance name is engine.

    After that, a bone variable—an instance of the IKBone class—is connected to the bone whose instance name is connectingRod. Then a tail variable (IKJoint class) is connected to the tailJoint property of the bone instance. Finally, a new Point instance (pos) is connected to a pair of coordinates from the position property of the tail instance.

    The tail and pos variables are passed as parameters to a new instance of the IKMover class, which is stored in the variable ik. That ik variable allows you to move the armature with code.

11. Add the following new ActionScript after the existing code:

    wheel.addEventListener(Event.ENTER_FRAME, spin);
    function spin(evt:Event):void {
      wheel.rotation += 5;
      pt.x = wheel.crank.x;
      pt.y = wheel.crank.y;
      pt = wheel.localToGlobal(pt);
      ik.moveTo(pt);
    }

    The basic premise here is something you’ve already seen in other chapters: a custom function, spin(), is associated with the Event.ENTER_FRAME event of an object with the instance name wheel. In this case, wheel is the instance name of the wheel-shaped movieclip symbol. (We’ve already configured the instance name for you in the sample file, and the wheel symbol contains another movieclip inside it with the instance name crank.)

    So, what’s going on in this event handler? First, the MovieClip.rotation property of the wheel instance is incremented by five. That gets the wheel rolling continuously. After that, it’s just a matter of updating the pt variable declared earlier. Being an instance of the Point class, the pt variable has x and y properties, which are set to the crank movieclip’s x and y properties, respectively. Because crank resides inside wheel, the object path to the desired x property is wheel.crank.x. The same goes for y.

    This updates pt’s properties to the current position of crank, but that isn’t quite enough. From the wheel symbol’s point of view, crank never actually moves—it’s wheel that does the rotating!—so the coordinates need to be considered from the point of view of the stage. That’s what the second-to-last line does by invoking the DisplayObject.localToGlobal() method on the wheel instance. In plain English, it tells pt to reset itself in from crank‘s local coordinates inside wheel to the crank‘s global coordinates shared by all objects on the stage.

    Finally, pt is passed as a parameter to the IKMover instance represented by the ik variable.

12. Test your movie so far to see the result.

    It’s close to being correct, and the pistonRod bone does perform its horizontal joint translation, but if you look carefully, you’ll notice that the armature occasionally “slips” from the crank movieclip. That’s easy to fix, and it’s nothing more than a matter of priorities.

    The armature isn’t updating as quickly as the wheel turns, so let’s fix that by tweaking the number of calculations it has to make.

13. Use the Actions panel to insert the following two lines after the ik variable declaration and before the event listener (the new code is shown in bold):

    ...
    var ik:IKMover = new IKMover(tail, pos);
    ik.limitByIteration = false;                          
    ik.iterationLimit = 5;                          
    
    wheel.addEventListener(Event.ENTER_FRAME, spin);
    function spin(evt:Event):void {
    ...

14. Test the movie again. As you can see in Figure 8-42, everything should run fine.

    

    Figure 8-42. The completed mill—you’ve saved Serbia from the vampire’s wrath!

We’ve used ActionScript to wire up the code for this example. What if you needed to use JavaScript instead? Sorry, you’re out of luck and Sava has you for an early breakfast. JavaScript and CreateJS simply do not allow the sort of control over armatures that ActionScript does so you must be targeting either Flash Player or AIR for the above to work correctly. Of course, you can always perform the same sort of animation without code when targeting HTML5 Canvas. It’s a matter of choice and approach.

Animating IK Poses

As you saw earlier with the springs example, to get those trees to bend in the wind, we needed to animate the IK poses. In this section, we show you how to do that but rather than bend trees, let’s slip on our hard hats and visit a construction site.

1. Open the 12_Poses.fla file in your exercise folder. You will see we have placed a Steam Shovel on the stage. The image started life as a multilayer Photoshop image imported into Animate CC. Each layer of the Photoshop image was placed in a graphic symbol, and each symbol has its own layer on the main timeline.

2. Select the Magnifying Glass tool and zoom in on the machine. You are going to need a closer view of the pieces to place the bones.

3. Select the Bone tool and draw a bone from the back of the MainArm symbol to the top joint of the ShovelArm symbol. Keep in mind that Bones only link symbols to each other. Bones within a symbol will kick out an error message. In this case, run the bone between the MainArm and ShovelArm symbols, as shown in Figure 8-46.

   

   Figure 8-46. The bones used in the animation are in place

4. Draw another bone from the top of the ShovelArm symbol to the joint where the shovel is attached to the ShovelArm. The three symbols have been moved from their respective layers to the armature layer.

5. Right-click (Windows) or Control+click (Mac) frame 70 of the Cab layer and select Insert Frame. The Cab symbol now spans 70 frames. Lock the Cab layer.

6. We are going to start the animation by establishing its finish position. Right-click (Windows) or Control+click (Mac) frame 70 of the armature layer, and, as shown in Figure 8-47, select Insert Pose from the context menu.

   

   Figure 8-47. Poses are added through the context menu

   That green strip across the armature layer tells you that you have created a pose layer. Pose layers are quite different from motion layers. They can only be created by adding a pose at a frame and they only work with armature layers. The little keyframe icon in the pose layer tells you where the poses are located.

7. Scrub back to frame 1. Switch to the Selection tool, and move the arms and the shovel to the position shown in Figure 8-48. If you scrub across the timeline the two arms and the shovel lower to the ground. This tells you that poses in an armature layer can be tweened only in the armature layer.

   

   Figure 8-48. Use the Selection tool to change a pose

8. Move the playhead to frame 15. Switch to the Selection tool, and extend the shovel arms. What you need to know about this is that by changing the positions of the bones in an armature layer, a keyframe is automatically added. There is no need to insert a pose. This may sound rather familiar because this is exactly what happens when you change the properties of an object in a motion layer.

9. At this point you can continue moving through the timeline and having the machine scoop up and dump some dirt however you wish. When finished, go ahead and close this example and don’t save the changes.

Using the Bind Tool

We expect that IK has sparked the creative center of your brain enough to keep you happily busy for weeks. Believe it or not, you still have one more tool to see. The team at Adobe has made IK available not only to symbols but also to shapes! You’ll be using the Bone tool for this exercise, but the Bind tool will make an appearance as an important sidekick. The best way to describe IK for shapes is to consider it a super-advanced evolution of shape tweens in combination with the shape hinting discussed in Chapter 7. Let’s jump right in.

When it comes to IK, the distortion to be controlled is in both the stroke and fill areas of a shape. Depending on the configuration of an IK shape, you may find that the stroke of the shape does not distort in a pleasing way or joints move around when moving the armature. This is where the Bind tool comes into play.

By default, the control points of a shape are connected to the bone that is nearest to them. The Bind tool allows you to edit the connections between individual bones and the shape control points. The upshot is you control how the stroke distorts when each bone moves.

Before we start, it might not be a bad idea to simply take a look at what effect “binding” has on a drawing. This way, you can see in a rather dramatic fashion what it does and learn what to look for.

1. Open the 13_BadBind.fla file in your exercise folder. When it opens, you will see a girl resting her arm.

2. Click the girl’s left arm to see the bones.

3. Switch to the Selection tool and move the arm. You will notice two things, as shown in Figure 8-49. First, the elbow moves from the bottom of the stage and some rather disturbing distortions occur around the elbow joint.

   

   Figure 8-49. Moving a bone in a shape causes distortions and artificial movement

4. Open the GoodBind.fla file in your exercise folder and give the arm a wiggle. As you can see the distortions are not nearly as severe.

Now that you have seen how binding can affect an armature, let’s get to work and start learning how to use the Bind tool.

1. Open the 14_Worm.fla file in the exercise folder for this chapter and say hello to a smiling worm, as shown in Figure 8-50. (The correlation between a worm, bones, steam shovels, and graveyards is purely coincidental, we assure you.) The Library for this FLA is empty, because the worm is nothing more than a handful of shapes.

   

   Figure 8-50. IK for shapes is brought to you by a worm

2. Assuming you want to drag the worm around by its head, you’ll want to draw the bones of your armature from the opposite side of the worm. Select the Bone tool and starting from the bottom of the shape, drag a small IK bone upward.

3. With that first bone in place, hover over the tail of the IK bone. When the tiny white bone icon inside the mouse cursor turns to black, you’ll know you’ve hit the right spot. Click and drag upward to add another bone.

   In this manner, keep adding small IK bones until you reach the top of the worm (see Figure 8-51).

   

   Figure 8-51. IK bones can easily be applied to shapes

4. Before you give the worm a wiggle, switch to the Bind tool, and click the bottom-most IK bone.

5. This is where it gets interesting. Using the Bind tool, marquee the bottom several bones in the tail. Now you’re ready for action.

   Using the Bind tool is a bit like using the Subselection tool in that it reveals a shape’s anchor points. In Figure 8-52, you can see anchor points represented in three different ways. At the top of the figure, they look like the sort you’ve seen in previous chapters—just small squares. At the bottom, they’re considerably larger and thicker and appear in the form of triangles as well as squares.

   

   Figure 8-52. The Bind tool lets you manipulate anchor points

   When you select an IK bone with the Bind tool, Animate CC shows you which of the shape’s anchor points are associated with that particular bone. Squares indicate an association with a single bone; triangles indicate an association with many bones.

   In this case, the bottom four anchor points—the heavy squares—are associated with the bottom-most bone only. The upper two anchor points—the heavy triangles—are associated with the bottom-most bone and with the bone immediately above it. The triangle anchor points are affected when either of their associated bones moves.

   Click any of the other IK bones in this armature, and you’ll see that Animate CC has done a great job of automatically deciding which associations to make. This won’t always be the case. Thankfully, you can override these decisions.

6. Hold down the Ctrl (Windows) or Cmd (Mac) key, and click one of the bottom four heavy squares. This makes it look like a normal anchor point (smaller and not bold). Still holding Ctrl (Windows) or Cmd (Mac), click one of the heavy triangles, which also becomes a normal anchor point.

7. Select the next IK bone, and you’ll see that the triangle anchor is back. but now it’s a heavy square. That makes sense: before step 6, this anchor was associated with two bones (triangle), but now it’s associated with only this one (square).

8. Select the bottom-most bone again, and, without holding down Ctrl (Windows) or Cmd (Mac), click the anchor point that was previously a heavy square. Drag it toward the bone (see Figure 8-53) and release. That anchor point is now reassociated with the bone.

   

   Figure 8-53. Click and drag an anchor point to associate it with a bone

9. Click another bone, and then click this one again. You’ll see the heavy square as it originally was, along with its companions.

10. To reassociate the formerly triangle anchor point, use the Bind tool to select the appropriate anchor, and then press and hold Ctrl (Windows) or Cmd (Mac) while you drag it to the bottom-most bone. As you do, you’ll see an association line in the upper bone as well as the diagonal association line created by your dragging (see Figure 8-54).

    

    Figure 8-54. Press Ctrl (Windows) or Cmd (Mac) while dragging to associate an anchor point with more than one bone

11. Save the file. (You’re going to continue with it in the next exercise.)

Use the Bind tool to fine-tune your shape armatures, just as you would use shape hints to fine-tune a shape tween. Any anchor points not associated with an IK bone are ignored when the armature is manipulated.

Your Turn: Animate a Fully Rigged IK model

We figure you appreciate worms, bending trees, steam shovels, and skeleton hands as much as the next designer (and so do we!). But surely, your thoughts have already wandered toward more complex implementations. We suspect you’re wondering if the IK tools are useful for more than a few fingers. What about a whole body? The answer to these questions is yes, and you’re about to find out firsthand. In this final exercise of the chapter, you’ll expand on what you learned in previous sections by rigging up a character with arms and legs and then animating it. Let’s do it.

1. Open the 15_Penelope.fla file from the exercise folder. You’ll see an assembled collection of symbols in human form. Let’s name her Penelope (see Figure 8-55).

   

   Figure 8-55. Let’s bring Penelope to life!

2. Select Edit (Animate CC) ➤ Preferences and click the Drawing choice in the Category area. Deselect the IK Bone tool: Auto Set Transformation Point check box. Click OK to confirm the changes. As described in the “A Note About Bone Preferences” section earlier, this means you’ll be the one deciding where to place your bone heads and tails, and you’ll adjust them afterward.

3. Select the Oval tool and, in the Penelope layer, draw a small circle about 22 pixels × 22 pixels near one of the character’s hands. Select the shape and convert it to a MovieClip symbol named Ghost. This is going to be your “ghost handle,” which lets you constrain the hands, feet, and head.

4. Drag additional instances of the handle symbol from the Library to the stage, positioning them near the Penelope’s other hand, her feet, and her head, as shown in Figure 8-56. In this exercise, Penelope’s chest will act as the starting point for every new chain of bones, just as the skeleton’s palm did in earlier exercises.

   

   Figure 8-56. Make sure to include extra symbols to allow for rotation constraints

5. Select the Bone tool and then click and drag a bone from the torso symbol to the pelvis symbol.

6. Now drag a bone from the pelvis to one of the legs. Be sure to release the bone’s tail low enough on the upper leg that it clears the bounding box of the torso (see the bounding box in Figure 8-57, and note how the bone tail falls below it). Even though this puts the bone tail lower than it should on the leg symbol—effectively moving the “hip” into the thigh—you’ll be able to readjust it in just a moment.

   

   Figure 8-57. Make sure the bone’s tail clears the bounding box of the pelvis symbol

   The fact these symbols overlap is part of the reason we had you deselect Auto Set Transformation Point in step 2. Although not always a problem, in this case, the obscured symbol rotation points make it harder for Animate CC to decide on its own where new chains of bones should begin.

7. Just as you did earlier for the knuckles, continue adding a new bone that connects the upper leg to the lower leg, the lower leg to the foot, and finally the foot to the foot’s ghost handle. Feel free to zoom the stage—particularly for the foot!—if necessary.

8. Select the Free Transform tool and then click the stage to deselect the armature itself.

9. Click each symbol in turn, from the ghost handle back up to the torso, and adjust the transformation point so that it sits over the symbol’s registration point. To do this, click the white circle (transformation point), drag it to the small plus sign (registration point), and then release. Selecting Snap to Objects in the Tools panel will make this task easier for you.

10. After you’ve adjusted the transformation point for each boned symbol, select the Bone tool again, and click the head of the torso’s existing bone to begin a new chain of bones down the other leg. Follow this with a repeat of the Free Transform tool adjustments of the relevant symbols’ transformation points.

11. Obviously, the arms need the same treatment, as does the head. Starting from the same gathering of torso bones each time, use the Bone tool to create new bone chains from the torso to upper arm, lower arm, hand, to ghost handle on both sides, and then from torso to head to ghost handle at the top of the character. When you’re finished, revisit all relevant symbols with the Free Transform tool to reposition transformation points over their corresponding registration points. Your armature should look like the one shown in Figure 8-58.

    

    Figure 8-58. A complete IK rig

    Go ahead and adjust the Alpha property value to 0 in the Properties panel Color Effect area with each Ghost instance selected to render them all invisible. You can still select them for various adjustments, even if not they aren’t visible!

    At this point, Penelope is nearly ready for her stretches. First, we need a few rotation constraints.

12. Using the Selection tool, click any of the torso bones and deselect the Enabled option in the Joint: Rotation area of the Properties panel. Because all the torso bones share the same head, this action will disable rotation for the whole body.

13. Add rotation constraints to the remaining bones according to your preferences. For example, select the lower leg’s bone, and in the Properties panel, select the Constrain option and adjust the Min and Max values to keep the knee from bending backward.

    When you’re finished, the Timeline‘s original Penelope layer will have long since been emptied, because every symbol was moved to the automatically created armature layer as it was associated with a bone.

14. Create a new layer named Poses and move it below the layer containing your armature.

15. Select File ➤ Import ➤ Import to Stage and import the jumping.jpg file in this chapter’s exercise folder. This JPG features a number of hand-drawn poses you can use as guides to manipulate the armature. Position the imported JPG slightly to the right, so that it appears behind Penelope, and then lock the armature layer.

16. Select the imported image and adjust its size until the initial drawn pose matches the height of Penelope, as shown in Figure 8-59. You will use this as a guide to position the armature.

    

    Figure 8-59. Resize the hand-drawn guides to match Penelope, and you’re set

    Penelope’s jump should take about one second. Because the movie’s frame rate is 24 fps, that means 24 frames is fine.

17. Hover near the right edge of the of the armature’s single frame until the icon turns into a double-headed arrow. Drag out the armature span until it reaches frame 24.

18. Right-click (Windows) or Control+click (Mac) the poses layer at frame 24, and select Insert Frame from the context menu. This matches up the JPG to the time span of the armature layer.

19. We’re about to cut you loose, so here’s the basic gist of what you’ll repeat until the sequence is finished:

    1. Unlock the poses layer and slide the JPG to the left in order to position the next pose under the armature. Once the JPG is moved, lock the poses layer again.

    2. Drag the playhead six frames to the right (one-fourth of the armature span, because there are four poses after the first drawing).

    3. Use the Selection tool to manipulate the character’s body parts so they match the hand-drawn pose.

    Here are two important tips:

    • Depending on how you might have constrained your joints, you may not be able to match the drawing perfectly. Treat the drawings as rough guides. You may have noticed, for example, that our elbows don’t match the pose at all—they’re bent in the opposite direction! Just have fun with it.

    • You will often need to move the whole armature at once. To accomplish this, hold down the Ctrl (Windows) or Cmd (Mac) key, and click the current frame of the armature layer. Doing so simultaneously selects all the armature’s symbols in the chosen frame. At this point, slowly tap the keyboard’s arrow keys to move the armature. If you hold down Shift while pressing the arrow keys, you can move in 10-pixel increments, which makes it go faster.

20. After you’ve finished posing the armature at frames 6, 12, 18, and 24, right-click (Windows) or Control+click (Mac) the poses layer and convert it to a guide layer. This will keep it from showing when you publish the project. (Alternatively, you could hide the poses layer and configure your preferences to omit hidden layers from the published project—or simply delete the poses layer.)

21. Save your file and test the movie.