Join Anastasia McCune for an in-depth discussion in this video Bone tool for IK animation, part of Flash Professional: 2015 Creative Cloud Updates.
- View Offline
- Inverse kinematics or IK for short is a special kind of motion that you build with the Bone Tool in Flash. Until Flash CS6, the Bone Tool was available for creating IK animation. It was removed from the software in Flash Procreative Cloud until now. The Bone Tool is back, and if available for ActionScript 3, WebGL, and HTML5 Canvas document types. The Bone Tool works pretty much the way it did in the past. It's really useful for things like drawing a person, who needs to have realistic motion for a walk sequence, or maybe a crane as it lifts and moves cargo, or a long earring with multiple segments as it swings.
To animate with bones, you draw a series of bones connected at the joints, and then when one bone moves, the connected bones move in relation to it. In case you never used the Bone Tool in the past or you need a refresher, we'll do a quick demonstration. So, you can use the Bone Tool in two types of setups. The first is drawing bones on shapes, and the second is drawing bones over a collection of movie clips. So in our first example, we have this giraffe. You can see his body is broken up into different layers on the timeline. So we've got his back leg in the background, and his front leg in the background.
Then his tail and his body, and then his back leg in the foreground, and then his front leg in the foreground. So that's the one that we're gonna be working with. Now when I click on his leg here, you can see in the Property Inspector that it says Shape. This isn't a movie clip. It's not a drawing object. It's just a shape. Pretty much a blob of color on the screen that is in the shape of a giraffe. So to use the Bone Tool, first I'm going to use my mouse to draw a rectangle, so I can select everything on this layer.
And now I'll go ahead and click the Bone Tool. And I'm gonna zoom in a little bit, so I can see better what we're doing, and I'll draw two bones. One from the top of his leg to his knee, and then a second one from his knee down to the bottom of his hoof. You can see that Flash has now made our layer a special layer called an Armature. I'm gonna click away from everything on the screen, so you can see that it is this green color.
So everything that was in the front leg layer has now been moved into this armature layer. So from here we could start to animate his legs. Now you could also draw a bone system by chaining symbol instances, so let's take a look at that. We'll go over to this tractor example. I'm not a very good artist, but this simple tractor I drew using the rectangle tool. So you can see we've got two layers here. One is the body, and then the rest is here in the arm layer. And as I click each one of these, you can see that they are all instances of movie clips.
It says Movie Clip up here in the Property Inspector. So to make an armature out of this, once again I will use my arrow tool to draw a rectangle on the stage and select everything here. Now I'll grab the Bone Tool, and I will draw two bones for this. So from the bottom of the arm up to the first joint, and then across the second piece of the arm to the bucket, to the end. We don't need a third bone.
So once again, you can see that Flash has taken all of those movie clips and moved them into an armature layer. So you can draw bones over shapes or over movie clips. Let's look at some animation. Let's jump back to the giraffe. To animate his leg, we need to add a series of poses. Think of a pose like pretty much adding a key frame in a motion tween. So since I want to make his leg look like he's walking, like it's a walk cycle, I want the start frame and the end frame to look the same. So first I'm gonna move my Playhead to the last frame, and I'm gonna right click on it, and I'm gonna say, Insert Pose.
Now you can see that Flash adds this little Key Frame here in the timeline for us. So our first frame and last frame look the same, so there's not much motion going on with his leg here, and that's okay. Let's now go to frame 34, and I'll insert a pose here. And so for this pose, I'm gonna move his leg back, and you can have a lot of fun moving things around with the Bone Tool and see how the different pieces connect to each other.
So I'll just move his leg back to about there. So Flash does the animation from one pose to another for us. So I'll add another pose on frame 38 or so, and from here, I'm gonna move his leg like this, so he's kind of bent at the knee a little bit, and I'll add a similar one on frame 42.
Maybe about like that, and maybe another one on frame 45. Kind of straighten his leg out here. So let's see how that looks. I'll press play under the timeline. Alright, so the motion I think was pretty good, but the timing is a little bit off. So you can grab any pose in the timeline just by clicking it, and then dragging it wherever else you want down the timeline. So I'll just kind of move these here, and I'm not gonna spend a lot of time.
You can spend a lot of time adjusting these. So let's try this now. So that's a little more realistic, and again, we could spend more time with this, but for now, we've got our giraffe pretty much walking on one leg. So let's move back to the tractor. So there are more controls available for your individual bones, and they're pretty much the same ones that were available in previous versions of the Bone Tool. For instance, I'm gonna click on the first bone in this armature here.
And I'm gonna click right on that purple line, and when I do, you'll see the Property Inspector changes and tells us some of the different properties that we have available for this. Right here we have Rotation, and you can see that Enable is checked by default. And indeed, if I grab any part of my armature here, any part of my bone structure, I can rotate that arm all the way around the joint right here for the first bone. And I could do the same thing for any of the other bones. You can see I can rotate a full 360 degrees.
And we can do it for the last part in the armature as well. Some of the control available for rotation is this. I'm gonna click on that bone again, and I'm gonna choose Constrain here in the Properties. You'll see that Flash fills in for me negative 45 and 45 by default. So basically what we're saying is we want to constrain the rotation of this bone 90 degrees. So now when I try to move it, you can see I only get 90 degrees range of motion.
And you can see this little angle right here that is right at the joint, that kind of tells you how far you have to move this bone. So I'll select the bone again. I will turn off the constraint and the enabling of my rotation. Let's check out X Translation, so when I enable that, you can see that you can move the whole armature along the x axis.
Whoop, I lost my properties there. You can also constrain this, so Flash fills that in negative 50 to 50. So now I can only move this 100 pixels in either direction from the origin of that joint. That's maybe not so realistic for a tractor. I'm gonna turn that off, and here's the Y Translation. and you can imagine that this is pretty similar to the X Translation except we are moving on the y axis. And we're constrained to 100 pixels as well since that's what we got when we hit Constrain.
So I'm gonna turn those off. In the end, I'm gonna leave Rotation enabled. Now I'll quickly go through and just add some poses to this, so we end up with a working tractor. I'm gonna go to frame 15 and insert a pose, and I'm gonna make him like this. Now I'll go to frame 35, and I'll insert a pose here. And then I'll go to frame 48, I think that is, the last frame, and insert the pose here, and make him scoop up, maybe like that.
So let's take a look. Pretty cool. So the Bone Tool has been added back into Flash. Now this has been a quick overview of some of the things that the Bone Tool can do. There are more controls available for manipulating armatures, so if you want more practice with how to use the Bone Tool, you can check out the course Flash CS6 Essential Training here on Lynda.com.
Check back often for new movies. This course will be updated every time Adobe releases a Creative Cloud update.
- AIR binaries for iOS
- The Bone tool
- Exporting bitmaps as spite sheets
- Brush size scaling
- Pasting and overwriting frames
- Importing H.264 video
- Code snippets for WebGL
- Audio splitting