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

You need to be a member to view comments.

Join today. Cancel any time.

Sign Up

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

Download Exercise Files

Transcript

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.

  • Powered by Marvin
  • Terms of use
  • Privacy policy
  • © Bring your Own Laptop Ltd 2024