Shape Tweens and Previewing in Adobe Animate

Hey there, this video were going to look at shape tweens so this is our first bit of animation, so lets look at then, we’ll do a really quick basic one and then well implement into something a little bit more exciting and show some of the quirks to a shape tween. So were going to create a new HTML5 canvas. If you cant see this because you’ve don’t show again, so we need to turn that off, you go to file new, you end up with a similar looking window you want to make sure its on html5 canvas. Were going to change the sizes later on when we start doing banner ads. But while were doing our drawing practice were going to leave all of this as is and click okay.

I'm going to save this, I'm going to put it on to my desktop, under my adobe animate project files. I'm going to call this one, 15a. I use these number systems to help me with video editing later on. But this ones going to be called shape and underscore tween. So make sure there's no spaces, perfect.

So really basic shape tween is I'm going to turn a square and I'm going to get it to morph into a circle. So I'm going to draw a square over here, now its using a lot of my presets from the last thing I drew. So what I'm going to do is undo that and before I start drawing I'm going to have it with no stroke so the little red line and the fill I'm going to go from my awful gradient to a simple green. So I'm going to start on the left hand side here with a rectangle. I need to be able to see my timeline, if you cant see it like I cant, you click on this little tab here, if anything goes missing, say you do lose your timeline and you close it and it can never be found again, this is a handy one. If you go to window and go down to workspaces and you say essentials, perfect. Go to reset essentials, click yes. It will rejig everything back to the way it came out of the box. You'll see this thing here has gone back to a single line, I'm going to pop it out so its 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 and the only thing on that layer at the moment, back to my selection tool is a square, and one of the rules for a shape tween is you cant group them, so it cant be grouped or turned into a symbol which were going to do later on. And then later on down here lets say after 40 frames, so I'm going to right click frame 40, if you don’t have a right click and you're on a mac, you hold down the control key on your keyboard and click once, that’ll give you a fake little right click. But everyone else right click and go to insert. We want a blank key frame because what happens is the first key frame is going to be a circle and in this blank one over here, you can see down here, key frames. Your key frame is the one that has the circle in it, this little square thing here, I hate. You're trying to teach people here to ignore that thing here, it doesn’t do anything, it looks important, it looks like you can click on it and do stuff. It doesn’t, it just happens to be there to show you the ending of where this one goes along and stops and this new one here can you see the difference between a key frame that has something in it, black and this one here that doesn’t, its hollow.

SO I'm going to get it to transform into a circle. So I'm going to hold down the rectangle tool, no the oval tool. I'm going to pick a different colour as well, doesn’t really matter if it’s a different colour or not. And I'm going to drag a circle, now while I'm dragging it out, if I hold down shift, like I did with the transform tool earlier, it locked the height and width so I get a perfect circle. So over here, square, and over here, circle. Nothing really happens yet, it just 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 colour changes to this green colour 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. And that’s a shape tweens. It morphs from one shape, to the other. Its best with not super complicated shape 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 running really fast and hot. So nice simple shapes its perfect for, the other thing were going to do is preview in the browser, so we haven’t done that yet, so 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. That’s one way of doing it, the other way of doing it is under control and were going to test movie, its going to be in browser so I'm going to click test. Click on that and it opens up in a browser and it previews it in a browser, its always best to preview in 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 a browser and this is its final home. I've installed chrome on my machine, make sure you have chrome installed because It’s probably the most popular browser in the world rather than safari or firefox or anything else. So go in and install that to test because it’s the best way to test, and it’s just a great way of previewing. There's a shortcut for previewing. Weirdly on my version on macs it doesn’t show you, so its if you hold down the command key and hit return it opens up in a browser and previews it. On a pc its control enter, but weirdly on a pc it'll actually have it written here, great so that’s how to preview out lovely little shape tween.

Alright so well leave this basic little shape tween here, and look at something a little bit more advance in the next video.