Shape Tween Project in Adobe Animate

Hey, this video, what we're gonna do is gonna look at our  shape tween and do it kind of in context  with some other parts, um, 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, we're gonna open up a project that I've built. So I got a file open, find your exercise files  that you've downloaded from the site. Exercise files. Open up the one here called Shape  HeartCore Tween.

Okay? And what I've done  for you is I've created a layer here. I can turn the eyeball on and off. There's a wizard on it. I've changed the background color. I've created a new layer for us and I've called it magic.

Um, and we are gonna do, yeah, get the wizard  to do a little bit of magic with a shaped tween. So what we're gonna do is we're  gonna start off with a circle. What color is it gonna be? It's totally up to you. And, okay. And I'm gonna draw a circle.

What was the key held down  to make sure it goes perfectly straight,  not an oval like this. That's right shift. I'll shift down. I'm gonna grab my black arrow, click it, drag it around. So I want to be here, um, and I can't group it. Remember for it to be a shake tween.

And what I wanna do is maybe  after 25 frames, um, I want it  to change into say a star. So what I do remember is right click  and instead of blank key frame  and something weird happens, I've got a blank key frame,  but then the wizard disappears. You can start to see down here in 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. Okay? So what we need to do is when we're 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.

Problem with that is, I don't know  how long this animation's gonna be, so don't sweat it. Drag it out to kind of 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 it's at least gonna be this long. So I'm gonna right click here  and I'm gonna put in insert key frame  and also insert key frame does is just duplicate this  one along till here. Okay? Um, and you'll see, so he's, he's along  for the whole play time now.

Okay. And we've got this blank key frame here that I'd like  to fill with a star. So I'm gonna grab the Polygon tool  or the Polystar tool, go to my options,  make sure it's set to star. How many points do I want it to be? I want it to be like 10. And the start, um, point size, the higher it is, the less,  um, extreme it is.

So I'm gonna go quite low  'cause I want it to be quite pointy. So I'm gonna do 0.3 click. Okay? What color is it gonna be? I'm gonna use the same color as I did before. No, I'm not.

I'm gonna change it to something else. Blue click hold and drag out. Okay. And perfect. And I'm gonna grab my black arrow,  click it once in the middle and move it to kind of  where I think it should be. So over here it's a circle and it's green.

When it's at frame 25, it's uh, star and it's blue. The last thing I need to do, who remembers  what the last thing I need to do to turn it into a shape? Tween. That's right, it is right clicking between anywhere  between these two key frames on the magic layer. I've, I don't wanna do anything with the wizard layer. The wizard layer just sits there, um, behind.

I'm gonna right click this one  and I'm gonna go to create Shape tween. Okay? And you'll notice that if I drag my playhead down here  and that return, it should morph into this other start. And you can just keep tapping return on your keyboard  or enter key and it should keep previewing lovely. And he's got a little bit of magic going. All right, so there's a couple of things we needed  to do is we needed to make sure that we keep extending  that back along.

Okay? And what I'd like to do is actually I want to repeat  and go back to the beginning. So I want to go back down to the circle afterwards  so it doesn't, it gets to the top here and then continues on  and comes back down to the circle. So it kinda loops back and forth. So what I wanna do is I would like this exact key  frame, okay? To be, say, say at 25, I wanna do the exact same time.

So 50, maybe even sooner. So owning it, maybe at frame 40, I would like  to go back to a circle. Instead of trying to draw a circle here,  insert a blank key frame. Trying to draw a circle, trying to line it up. Okay? What you can do is actually I just wanna copy this one,  so I'm gonna right click it.

So select that up, right click it, I'm gonna go. There's lots of different copies. You gotta 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. Okay, I want to click on 40, right? Click it and then go to pace frames.

Okay. And you'll notice that there, he's back to being a circle. Um, you'll notice that the background has  disappeared 'cause you can see it finishes there. So I can do, I could add another key frame,  but it's easier actually just to click this key frame once,  select it, make sure it's orange,  then click hold and drag it out. What you don't wanna do when you're dragging key frames if I  go to undo is if I'm selected over here. So it's orange.

And if I click hold  and drag this, it starts kind  of like doing this weird long selection. So when you are in flash, sorry, in Adobe Animate, uh,  you click on this guy, wait for a second,  then click hold and drag it along. Great. So he extends it along whole timeframe there,  but there's no animation between here. You can see it's not green. So I'm gonna right click it.

Go to create shape tween and it should loop around. So I'm gonna preview on a browser. So I'm gonna hit file save. Um, I wanna preview a browser. Remember it's command return on a Mac  or control, enter on a pc  or you can go the long way and click on this one. And what I'll do is open up in a browser.

Okay? Mine's open in a different window. There he is. Okay. And it's morphing up there. And then back you can see it's just kind  of looping by default.

You'll see it here. It loops back and forth. This output here, there's a warning  that worry will do that in the next video. Ignore that for the moment. Alright, that's how to implement a shape tween, um,  with a little bit of extra things, with some backgrounds  and um, adding extra key frames  and looping it around and stuff. Alright, see you the next video.