How to use a Motion Path in Adobe Animate for HTML5
Overview
Daniel Scott
Founder of Bring Your Own Laptop & Chief Instructor
instructorI 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.
Alright, this video were going to look at motion paths. So were going to do a motion path using our motion tween. The one I ragged on in the last video. But it has this great perk where we can do these motion paths. So lets give that a go.
So were going to go html5 canvas, I'm going to save it, call it this. And I'm going to bring in some graphics so in your exercise files I'm going to file, places, there is a file called motion path, bring in background, I'm going to lock it, call this one the background and I'm going to make a new layer, and I'm going to bring in one of these two guys import to stage, that’s not working, if it greys out, watch this if I undo, I've only got one layer and its locked and I go into here and its all greyed out, it just means it needs at least one layer that’s not locked. I'm going to use the rocket, you can either use the spaceman or the rocket out of this library, spaceman or space ship. Spaceship, hit return, great. It’s a bit big so I'm going to use my free transform tool, and I'm going to shrink it down holding shift to make sure it scales proportionally. Its going to start big and its going to wiggle it’s way following a motion path, rather than just straight across to planet earth. So what we need to do is we need to right click and go to motion tween and click okay. Actually no, it said hey, you haven’t turned this into a symbol. So I forgot to do that, so modify, symbol and call this one mc ship. I'm going to right click it now, and go to motion path, and its extended out one second, it jumps out here for some reason and the background needs to be extended and I want it to be a long little animation so I'm going to extend out by inserting frame on the background so its around for a long time.
And now what I want to do is a couple of things, so about maybe 10 frames into it I want to grab this and drag it up and this little dotted line here is the is the fun bit that is the motion path and the cool thing about it, like we did in really earlier drawing episodes. Watch this so I have nothing selected, I don’t click on it, I just hover, I click in the background. I've got my black arrow and if I hover can you see I can get this little bendy icon. It means I can bend it so I can go, and a bit further along maybe at 20 I'm going to physically move him and bend this thing maybe this way. Bit further along, because we've run out of this key frame stuff were going to have to start sticking in key frames so I'm going to go insert, all and what I wanted to do is maybe be down here, and I can start bending this one, this is doing some weird stuff there. If it’s doing some weird things and you're doing what the hell is it doing. Go to this white arrow, we don’t use this very much in adobe animate but if you click on it, you can start to see points start clicking on these little anchor points and these little handles here help determine the direction of where this animation is going and I've made a real this feels really bad, anyway back to the black arrow and lets insert a key frame. Insert all, lovely, and then he's going to move up there for that last bit. Make it to earth.
What id also like him to do with his selected is he's going to get a little bit smaller when he gets down to here. So he's heading away to earth. So lets give it a preview, I'm going to save, preview in a browser. And how exciting is that little guy. Yep, he's whizzing around now one of the things that I might want to do is its moving not like a ship would. It’s staying parallel. So what we can do is we can go back into the timeline and we can click on this, anywhere in here and the one that says orient to path and this is probably like what we want. Can you see it moves around, even then its not quite right, its because of its initial take off, can you see, the way he's aligned to the line it s a little bit off to the side, so when he's going he's a little bit skewed the whole time. So what I'm going to do is right at this first frame, I'm going to grab the rotation tool and I'm going to get you and I'm just going to get it so it looks like its heading off into that line and you'll find that its following a lot smoother, except when it gets to these bits.
Alright, if you know how to use the bezier pen tool and this white arrow here, you can get a lot more control with these lines, can you see I can start clicking on these little key frames here and start adjusting these, they do start straightening up, you, line them up, awesome. Oh well, its close enough and that is a motion path. And remember the cool thing about this as well is that we could save it as a motion preset if we needed to. So if you're going to have to do a motion path, you can do it on a classic tween, the problem with doing a motion path on a classic tween is you cant do this orient to path which is really quite important so really if you're going to do a motion path, definitely use a motion tween.
Alright, that’s going to be it, that’s motion paths using motion tweens and, see you in the next video.