Bone Tool in Adobe Animate for HTML5

Hey, welcome to this video, and were going to look at the bone tool in this one. the bone tool, think of it as putting bones into a character you can add some structure to them and make them move over time. They also call it inverse kinetics or IK you might call it rigging or using a puppet. Putting puppet pins in, there's lots of different ways of calling it but adobe animate calls it the bone tool. So what were going to do is make a new canvas and were going to put in a background colour, what colour does it have to be, green. I'm sick of green, I'm going to go greeney blue. Pick any colour, green. And lets bring in our monster, I'm going to save this one actually and I'm going to put it in my desktop and out it under adobe animate project files, put in my underscores. And I'm going to go command r, to import to stage and I'm going to bring in this one here I've made special called bones tool, what I've done for you in illustrator is I've gone through and created one that has a layer called body, he's just there and I've made two arms that are on separate layers. So you need them separated out, you could do this in adobe animate, I've made it a little bit easy to make it simpler. And were going to maintain layers, that’s the big one. Click okay and its going to say its missing some bits and pieces for blend modes, that’s okay, he's turned out fine.

So there's my body, he's on the top, you can see body and the left arm and right arm. And what we will do is lets just turn the eyeball off on body and lock it so we don’t wreck it. And well just turn the eyeball off on the left arm so lets lock the right arm, so what we need you to do is select it and what this needs to be, it needs to be a raw shape. So you can’t go through and turn it into a symbol, it needs to be one of those raw shapes. So what I'm going to do is ungrouped and not into a symbol.

So we've got the bone tool, it looks like a bone or spanner, I'm going to click hold and drag it. I'm going to start where its shoulder should be, that’s when the monsters elbow goes and what I'm doing is I'm click holding and dragging from that last point to where his wrist should go then clicking and holding and dragging to where his little fingers are. So that’s my rough structure for my arm. Now what you're going to do is move back to the selection tool, and give it a wiggle, it does really cool things, I love it. How useful it is? I don’t use it very much but you might find some really good uses for this so lets look at animating over time. So were going to start it where it was and then, what you'll notice as well is left arm no longer exists, its been sucked out of there, can you see down there it’s a clear key frame, its empty. Its been sucked up to this one called armature one. so this left arm here is rubbish, it sucks it into this really special layer and you'll see its special because its got a running man next to it. And were going to call it left arm and what were going to do is were going to insert a key frame but they call them differently, they call them poses, exactly the same as a key frame but they call them poses now because well be dealing with what’s called armature, so how far out I'm going to go insert pose, and what am I going to do I'm going to straighten his arm out, then insert another pose, and I'm going to curl it around a little bit and you can see I can click on all of these different ones. I can click on you, and extend this one and then this one separate from this one. And you can start working them around, so what is he do, he's flopping his arms back and forth.

So, copy pose, and then paste pose, I'm going to insert pose, and then I'm going to right click and go to paste pose. There's a little bit of learning on the fire, I don’t use the bone tool very much, so it swings back and forth and then he's going to get all excited, insert pose, and he's going to go (Dans sound effects) like a big hug. Awesome, so lets make sure that this extends all the way out, so my right arm goes all the way out here so I'm going to right click and insert a frame. And the same with the body, right click, insert a frame, just going to back out so I can see it. And save it, preview in a browser and lets remember that it always appears in the other screen. Here he is, and there we go. How exciting is that?

Okay, not my best work, but you get the idea what it does, you can turn vectors, you cant do this with bitmap images but you can turn them into animated over time little bit more proper animation. You could do it with waves, you could do it with trees, you could do it with Wrigley worms you could do it with arms, its meant to be obviously set up for doing characters, now I'm not going to do a full thing on how to use the bone tool. Mainly because I don’t use it very much and I understand it but it’d take me a while to get to the grips with all the bits and pieces and to be honest for animated banners, if you're going to rig up a character you're probably not going to be doing them for animated banners anyway.

But just so you know, the quick run through is you can do things like, so I've click on this joint here and I can say I want to constrain the rotation so it doesn’t rotate all the way around, so this is going all the way around, I can say something like it only goes from 10 to -10, so it only has a limited rotation so it doesn’t bend all the way around and what else could I do, so its doing it for this joint. I could do it for x and y so it doesn’t allow it to move left and right, it can only go up and down the spring and dampening is quite interesting, I'm going to select this whole thing and see if I can play around with the bone tool. I can’t do it there. So lets have a look at this first one it’s actually this transition between these two. Spring and damping is quite interesting, I select them all, I'm going to hold shift and grab all of these guys and I'm going to crank up the dampening and the spring, actually the spring, spring looks funny.

Save it, and it turns it into more of a wobbly arm, I laugh every time I teach that. Why you’d need to do the spring? I don’t know, but have a look, if you want to go a bit more into it, you might have to check out somebody else tutorial.

Alright, that’s going to be it for the bone tool. Lets move out to the next video. That cracks me up, the spring, alright, next video.