Shape Tweens and Previewing in Adobe Animate

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.