This course has been archived, the content is no longer up-to-date or relevant to most students.

Bone Tool in Adobe Animate for HTML5

This lesson is exclusive to members

Course contents
SECTION: 6
Warnings & errors 1:10
SECTION: 7
Width tool 5:23
SECTION: 14
Project 9:34
SECTION: 15
Buttons 12:14
SECTION: 17
Bone Tool 6:53
SECTION: 18
Stop looping with JS 1:45
SECTION: 22
Conclusion 1:37

Questions

0

Course info

53 lessons / 5 hours

Overview

This course is for visual, creative people who need to start making HTML5 banner ads. I made this course for people that are struggling to get their heads around the new world of HTML5 advertising. This course is step by step with exercise files. I’ve saved a copy of each Adobe Animate file after every video so if you get lost you can compare your files to my completed files. At the end you’ll be able to create, test and upload standard banner ads.

This course is perfect for people completely new to the digital advertising world. We’ll cover all the basics. It’s also great for people who previously worked in Adobe Flash to produce SWF advertising.

Because this is such a new industry I’ll be around to help you with any questions. Use the forums on the pages and I’ll respond.

Thanks for considering my course. If you’re not sure if it’s right for you. Simply sign up, try it out and if you’re not happy I’ll refund you no problem. - Dan.

What are the requirements?

  • You'll need a copy of Adobe Animate CC 2015 or above. A free 30 day trial can be download from Adobe here.

  • No previous Adobe Animate or digital advertising knowledge is necessary.

  • If you're not sure if this course is right for you. Email me what you’re trying to do and check if you’re on the right track.

What am I going to get from this course?

  • 53 lectures 3 hours of content!

  • Forum support from me. 

  • How to build banner advertising

  • How to keep file sizes down.
  • Firm understanding of the publishing process for ad networks like Google Doubleclick, Adwords, Simek etc. 

  • Professional workflows and shortcuts. 

  • A wealth of other resources and websites to help your new career path.

What is the target audience?

  • YES: This course is for beginners. For people who prefer not to work in code. Visual people. Creative people. Graphic designers. Marketers. Past users of Flash.

  • NO: This course is not for developers. This course will cover standard animated banners. Not dynamic banners like expanding banners, video banners or game banners. 

Course duration 5 hours + your study.

Daniel Scott

Daniel Scott

Founder of Bring Your Own Laptop & Chief Instructor

instructor

I discovered the world of design as an art student when I stumbled upon a lab full of green & blue iMac G3’s. My initial curiosity around using the computer to create ‘art’ developed into a full-blown passion, eventually leading me to become a digital designer and founder of Bring Your Own Laptop.

Sharing and teaching are a huge part of who I am. As a certified Adobe instructor, I've had the honor of winning multiple Adobe teaching awards at their annual MAX conference. I see Bring Your Own Laptop as the supportive community I wished for when I was first starting out and intimidated by design. Through teaching, I hope to bring others along for the ride and empower my students to bring their stories, labors of love, and art into the world.
True to my Kiwi roots, I've lived in many places, and currently, I reside in Ireland with my wife and kids.

Downloads & Exercise files

Transcript

Hey, welcome to this video. And we're gonna look at the bone tool  in this one, the Bone Tool. Think of it as putting bones into a character. You can kind of add some structure to them  and make them move over time. They also call it inverse kinetic or ik. Uh, you might call it rigging or using a puppet.

Okay? Putting puppet pins in. There's lots of kinda ways of calling it,  but uh, Adobe animate calls it the bone tool. So what we're gonna do is make a new canvas  and we are gonna put in a background color. What color does it have to be green? I'm sick of green.

I'm gonna go green. Eat blue. All right. Uh, pick any color green and let's bring in our monster. So I'm gonna save this one actually  and I'm going to put it in my desktop under Adobe  Animate Project Files. Put in my underscores  and I'm gonna go, uh, command R to import the stage.

And I'm gonna bring in one of the monsters. Actually, no, I'm gonna bring in this one here. I've made special called Bones Tool. What I've done for you, an illustrator is I've gone through  and created one that has a layer called  body and he's just there. And I've made two arms that are separate on separate layers. So you need them separated out.

You could do this in flash. Um, I've made it a little bit easier just to kind  of, yeah, make it simpler. And we're gonna maintain layers. That's the big one. Click okay. And it's gonna say it's 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. Um, you'll see body Okay in the left arm, right arm. And what we'll do is let's just turn the eyeball off on body  and lock it so we don't wreck it  and we'll just work on the left arm. So let's uh, turn, let's lock the right arm.

So what we need to do is select it  and, um, what this needs to be, it needs  to be kind of a raw shape. So you can't go through and edit, um, turn it into a symbol. It needs to be kind of like one of those raw shapes. So what I'm gonna do is ungrouped  and yeah, make sure it's not grouped  and not, uh, into the symbol. So I've got the bone tool. This one here looks  like a bone or a spanner.

Okay? I'm gonna click hold and drag it. Okay? I'm gonna start kind of where a shoulder should be. That's kind of where a monster's elbow goes. And what I'm doing is I'm clicking, 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.

Okay? So that's my kind of rough structure for my arm. Now what you're gonna do is move back to the selection tool,  grab this little one and give it a wiggle. Okay? And it does really cool things. I love it how useful it is.

I don't use it very much. Okay? But you might find some really good uses for this. So let's look at animating over time. So we're gonna start it where it was. And then, um, what you'll notice  as well is left arm actually no longer exists, okay?

It's been sucked outta there. Can you see down here? It's a clear key frame. It's empty, it's been sucked up  to this one called Arm Amateur one. So this right arm, my left arm here is rubbish. Okay?

It sucks it into this really special layer  and you'll see it's special 'cause it's got a running man  next to it, okay? And we're gonna call it left. Um, and what we're gonna do is we're gonna, um,  insert a key frame, but they call 'em differently. They call 'em poses. It's exactly the same as a key frame,  but they call 'em poses now 'cause we're dealing  with what's called an armature. So how far out I'm gonna go insert pose  and what am I gonna do?

I'm gonna kind of straighten his arm out, then  insert another pose  and I'm gonna kind of curl it round a little bit. You can see I can click on all these different ones. I can click on you and kind  of extend this one and then this one. Super from this one, okay? And you can start working them round. Um, so what is he doing?

He's flopping his arms back and forth. Uh, so am I gonna, can I copy, copy pose? Maybe you can't. You can copy poses. You can. And then I'm gonna paste pose.

Hmm. Okay, I'm gonna insert pose  and then I'm gonna right click and go to pace pose. Okay, there's a bit of learning on the fly. I don't use the BA bone tool very much, so it kind  of swings back and forth. And then maybe he's going to get all excited, insert pose  and he's gonna go a big  hug, add your own sound effects. Okay, awesome.

So let's make sure  that this extends all the way out. So my right arm goes all the way out here. So I'm gonna right click and just insert a frame. And the same with the body. Right click, insert a frame, come on, insert frame,  turn it back on so I can see it and save it. Preview a browser and let's, let's remember  that it always appears in the other screen.

Here he is. There we go. How exciting is that? Okay. Uh, not my best work,  but you get the idea of what it does, right? You can turn vectors, you can't do this with bitmap images,  but you can turn them into kind of like 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. Um, it's meant to be obviously set up for doing characters. Now, I'm not gonna do a full thing on how  to use the bone tool, mainly because I don't use very much  and I understand it,  but it'll take me a while to kind of get to the grips  with all the bits and pieces. And to be honest, for animated banners,  if you're gonna rig up a character, it's,  you're probably not gonna be doing them  for animated banners anyway,  but just so you know, the quick run  through is you can do things like, um,  so I've clicked on this joint here  and I can say I want to constrain the rotation. Okay?

So it doesn't rotate all the way around. Okay? So this is going all the way around. I could say something like it only goes from 10 to, oh,  actually to minus 10. Okay? So it only has like a limited rotation  so it doesn't kind of bend all the way around.

And what else could I do? So it's doing it for this joint. I could do it for X and Y so it only, it doesn't allow it  to move left and right, okay? It only can go up and down. Um, the spring and dampening is quite interesting. I'm gonna select this whole thing  and see if I can play around with the bone.

I can't do it there. So let's have a look at this first one. There's actually this translation between these two. Um, spring and dampening is quite interesting. I'll select them all. Okay,  I'm gonna hold shift, grab all of these guys.

I'm gonna crank up the dampening in the spring,  actually the spring, the spring looks funny. Uh, save it and it kind  of turns it into a little bit more of like a wobbly arm. You see? Uh,  I love every time I teach that, um,  why you'd need to kind of do the spring. Uh, I dunno. Okay.

But have a look. Um, if you wanna go a bit more into it, um, you might have  to check out somebody else's uh, tutorial. All right. That's gonna be it for the bone tool. Uh, let's move out, um, to the next video. That cracks me up this spring.

All right, next video.
  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2025