Hey there. Uh, this video we're gonna look at shape tweens. So this is our first bit of animation, so let's look at them. Let's make, uh, we'll do a real quick basic one, then we'll implement into something a little bit more exciting and show some of the quicks, um, two A shaped tween. So we're gonna create a new HTML five canvas. If you can't see this, 'cause you don't show again, somebody's turned that off, you can go to file new, you end up with a similar looking window.
You just wanna make sure it's on HTML five canvas. We're gonna change the sizes later on when we start doing banner ads, but while we're doing our drawing practice, we're gonna leave this all as is and click okay. I'm gonna save this. I'm gonna put it onto my desktop and do my Adobe Animate project files. I'm gonna call this one, I'm gonna call it 15 a. I use these numbering just to help me with video editing later on, but this one's gonna be called Shape and underscore Tween, so make sure that there's no spaces perfect.
Okay, so really basic shape tween is I'm gonna turn a square and I'm gonna get it to morph into a circle. So I'm gonna draw a square over here. Now it's using a lot of my presets from uh, the last thing I drew. So what I'm gonna do is undo that and before I start drawing, I'm gonna have it with, let's say no stroke. It's a little red line and the fill. I'm gonna go from my awful, uh, gradient just to a simple green.
Okay, so I'm gonna start on the left hand side here with a rectangle. I need to be able to see my timeline. If you can't see it, like I can't, you click on this little tab here. Okay? If anything goes missing. So you do lose your timeline and you close it and it can never be found again.
This is a handy one. If you go a window and go down to workspaces and you say essentials. Okay, perfect. Gotta reset essentials, click yes, it'll rejig everything back to the way it came outta the box. You'll see this thing here has gone back to a single line. I'm gonna pop it out just so it's double line so I can see it on my laptop and you'll see my timeline is back.
Great. So I've got one layer, um, and the only thing on that layer at the moment back to my selection tool is, uh, square. And one of the rules for a shape tool is you can't group them. Okay? So it can, uh, it can't be grouped or turned into a symbol, which we're gonna do later on. Um, and then later on down here, let's say after 40 frames, um, so I'm gonna right click frame 40.
If you don't have a right click and you're on a Mac, um, you hold down the control key on your keyboard, um, and click once. That'll give you a, a fake little right click. Um, but everyone else right click and go to insert. We wanna blank key frame because what happens is the first key frame's going to be a circle. And in this blank one over here, you can see down here, um, key frames. Your key frame is the one that has the circle in it.
This little square thing here, I hate, okay, you're trying to teach people here to ignore that thing. There. It doesn't do anything. It looks important. It looks like you click on it and do stuff. It doesn't, it's just happens to be there to show you the ending of where this one goes along and stops.
And this new one here, you see the difference between a key frame that has something in it, it's black and this one here that doesn't, okay, it's hollow. So I'm gonna get it to transform into a circle. So I'm gonna hold down the rectangle tool. No it's not. There it is. There's the oval tool.
Okay, I'm gonna pick a different color as well. Doesn't really matter whether it's a different color or not. And I am going to drag out a circle now while I'm dragging it out, if I hold down shift, okay, like I did with the transform tool earlier, it lock the height and width. So we'll get a perfect circle. Okay? So over here, square and over here circle, nothing really happens yet, just kind of flicks between the two.
The magic happens with in between, anywhere in between here, right click and go to this one that says Create shape tween. You'll notice the color changes to this green color and you'll notice now once I start, what I'm doing is, can you see this little red box here? I'm dragging it from left to right, left to right. Okay. And that's a shaped tween. Okay?
Morphs from one shape to the other. Um, it's best with not super complicated, um, shaped tweens like text ends up looking a little bit hard and goes all over the place and also ends up burning up the CPU and kind of running really fast and hot. So, um, nice simple shapes. It's perfect for. The other thing we're gonna do is preview in the browser. So we haven't done that yet.
So we've been previewing or we haven't had to preview anything yet. So there's a couple of ways. Drag your play head back to frame one hit return on your keyboard or the enter key and you can see it plays through. Okay. That's one way of doing it. The other way to do it is under control and we go to test a movie.
It's gonna be in browser. So I'm gonna click test, click on that, and it opens up in a browser and it previews it in a browser. It's always best to a browser rather than in Adobe Animate. It makes a good job of it, but there's lots of things that don't work until you're out in the browser. And this is its final home. Okay?
I've installed Chrome on my machine. Make sure you have Chrome installed 'cause it's probably the most popular browser in the world. Uh, rather than Safari or Firefox or anything else. So go and install that test 'cause it's the best way to test. Um, and it's, yeah, it's just a great way of previewing. There's a shortcut for previewing, weirdly on my version on Max.
It doesn't show you. Um, so it's if you hold down the command key and hit return. Um, so command key return, it opens up in a browser and previews it, uh, on a pc it's, uh, control enter, but on weirdly on a pc, it'll actually have it written here. Great. So that's how to preview our lovely little shape tween. Alright, so we'll leave this basic shape tween here and look at something a little bit more advanced in the next video.