Shape tweens - Adobe Animate Tutorial

- When working with simple vector shapes in Animate, a shape tween is the best choice when animating your content. Shape tweens have the additional ability to actually change the overall composition of the initially defined shape as the tween progresses between keyframes. Here, we have our little circle and these two frames here, these two different positions between keyframes. Let's go ahead and add an additional keyframe at frame five. So, we'll select frame five and choose Insert, Timeline, Keyframe. Now, what this is going to do is it's going to hold our circle at this very position, from frame one to frame five, and then we're going to add a shape tween that goes between the keyframe at frame five to the keyframe at frame 20, which is the difference in position. To do that, just right-click anywhere between those two keyframes and in the menu that appears, choose Create Shape Tween. All right, so this is a shape tween here and if we scrub now, we can see that Animate goes ahead and fills in the different frames between those two position differences expressed in the keyframes. Let's go ahead and clean this up a little bit. I don't need this Labels layer, so I'm going to select that and delete it. I also want to actually shift this particular keyframe around a bit, so let's remove our blank keyframe. I'm going to select it and right-click and from here, I will Clear Keyframe and that will remove it. And then, I can select the keyframe on frame 20 and with that selected, I can shift it all the way over to frame 25 or 26 or whatever I like. So now, we have this nice animation. Now, what I'm going to do is actually change this. We don't want to change position. Since this is a shape tween, we actually want to change the shape. So, I'm going to select the object on frame 25 and hit Delete. As you'll notice, the shape tween is now broken, indicated by this dotted line and we have this blank keyframe. Choose the rectangle tool and select a different color. So, instead of that blue, I'm going to have a nice kind of violet color, here. And then, we can go ahead and create a square, somewhere around that big. It doesn't really matter. And then, select the square and, using the Align panel once again, we're going to Align to stage and center this. So, just like the circle, this is centered. If we go ahead and preview now, we can see that the shape actually morphs. And of course, since this isn't quite a circle anymore, let's change the name of our layer by double-clicking on Circle and we'll just call that Shape for now because it's just a non-distinct shape. Now, I don't quite like how everything's sort of twirling out like that to form the square, I want it to just pop out from the center. So, in order to do that, I'm going to have to use something called Shape Hints. And what I'll do is go to the keyframe on frame five and choose Modify, Shape, Add Shape Hint. This adds a little marker with a A inside and I'm going to shift that over to the corner of the circle or where the corner would be if circles had corners and I'll choose once again, Modify, Shape, Add Shape Hint. Now, we have B. Move that up there. We're going to think of this as a square and then, when it blows up into the square shape, we can pin these different points. So, Modify, Shape, Add Shape Hint. There, we have C. And then one more, Modify, Shape, Add Shape Hint. We'll move D over there. So, we've basically defined, upon our circle, a square. Now, if we jump over to the keyframe at frame 25, we can see, sure enough, we've got our shape hints there, too. So, here's D, C, B and A. All right, so they're positioned exactly where they are on the circle. Let's go ahead and play this back by using the playback controls here. So, our circle now morphs cleanly into a square using a shape tween along with shape hints.