Shape Tween Project in Adobe Animate

Hey this video what were going to do is were going to look at our shape tween and do it in context with some other parts, other layers and other objects because there's a little bit more to it. Showing in isolation was great in the last video to understand what a shape tween needs to be. But there is a few other things that we need to understand to work with animation in general in adobe animate. So to do it, were going to open up a project that I've built.

So go to file, open, find your exercise files that you’ve downloaded from the site. Go to exercise files, open up the one here called shape underscore tween, and what I've done for you is I've created a layer here, turn the eyeball on and off, there's a wizard on it. I've changed the background colour. I've created a new layer for us and I've called it magic. And were going to get the wizard to do a little bit of magic with a shape tween, so what were going to do is were going to start off with a circle, what colour is it going to be? Its totally up to you, I'm going to draw a circle, what was the key I held down to make sure it goes perfectly straight not an oval like this, that’s right, shift. Hold shift down, I'm going to grab my black arrow, click it, drag it around, so I want it to be here, and I cant group it remember, for it to be a shape tween. And what I want to do is maybe after 25 frames, I want it to change into say a star. So what I'm going to do is remember, right click, insert a blank key frame, something weird happens. I've got a blank key frame but then the wizard disappears. You can start to see down here, on my timeline that the wizard here, is only on this first key frame. He doesn’t extend all the way along like this frame here we do with the magic. So what we need to do is when were animating, we need to extend out the background or any of the bits that need to stay around while the rest of the animation is running. The problem with that is I don’t know how long this animation is going to be. Don’t sweat it, drag it out to guess how long It might be and you'll end up moving it over and over again until you trim it all up right at the end. So I know its at least going to be this long. So I'm going to right click here and I'm going to put insert key frame. And all insert key frame does is just duplicate this one along till here.

So he’s along for the whole playtime now, and we've got this blank key frame here that id like to fill with a star. So I'm going to grab the PolyStar tool, go to my options, make sure its set to star, how many points do I want it to be, I want it to be 10. And the star point size the higher it is, the less extreme it is. So I'm going to go quite low because I want it to be quite pointy. So I'm going to do 0.3. Click okay, what colour is it going to be I'm going to use the same colour as I did before, no I'm not I'm going to change it to something else. Click hold and drag out, and, perfect. I'm going to grab my black arrow, I'm going to click it once in the middle, move it to where I think it should be. So over here, a circle and its green, when it’s at frame 25, it’s a star and its blue. The last thing I need to do, who remember what the last thing is that I need to do to turn it into a shape tween. That’s right, it is right clicking anywhere between these two key frames on the magic layer, I don’t want to do anything with the wizard layer, the wizard layer just sits there behind. I'm going to right click this one, I'm going to go to create shape tween. And you'll notice that if I drag my play head down here, and hit return, it should morph into this other star and you can just keep tapping return on your keyboard or the enter key and it should keep previewing. Lovely and he’s got his little bit of magic going.

Alright so, there's a couple of things we needed to do, is we needed to make sure that we keep extending that back along and what id like to do is, I want it repeat and go back to the beginning so I want to go back down to the circle afterwards so it gets to the top here and then continues on and comes back down to the circle, so it loops back and forth. So what I want to do is I would like this exact key frame to be, at 25, I want to do the exact same time so 50, maybe even sooner, maybe at frame 40 I would like to go back to a circle. Instead of trying to draw a circle here, inserting a blank key frame, trying to draw a circle, trying to line it up. What you can do is actually; I just want to copy this one. So I'm going to right click it, I've selected it, right click it, there's lots of different copies so you’ve got to be careful, there's copy frames, there's all sorts of weird things in here, so I want to go to the one that says copy frames, I want to click on 40, right click it and then go to paste frames, and you'll notice that there is back to being a circle. You'll notice that the background has disappeared because you see, it finishes there. I can add another key frame but it’s easier to click this key frame once, select it, make sure its orange, then click hold and drag it out.

What you don’t want to do when you're dragging key frames, so if I go to undo. if I'm selected over here so its orange, and if I click hold and drag this it starts doing this weird, long selection. So when you are in adobe animate, you click on this guy, wait for a second then click hold and drag it along, great. So he extends the along the whole time frame there. There's no animation between here, you can see it’s not green so I'm going to right click it, go to create shape tween and it should loop around.

So I'm going to preview in a browser, so I'm going to hit file, save. I want to preview in a browser, remember its command return on a mac or control, enter on a pc. Or you can go to the long way, click on this one and what I do is I open it up in a browser and mines open in a different window, there he is. And it’s morphing up there and then back. You can see its just looping by default, you'll see in here, it loops back and forth.

This output here, there's a warning, don’t worry well do that in the next video, ignore that for the moment. Alright, that’s how to implement a shape tween with a little bit of extra things, there's some backgrounds and adding extra key frames and looping it around and stuff. Alright, see you in the next video.