How to Set Up a Shape Tween in Adobe Flash CS3
Related Videos
Most Recent
Most Viewed


Learn how to set up a Shape Tween in Adobe Flash CS3.


Now when we take a look at the technical aspects of a Shape Tween, there really is a one rule and that is you can only Shape Tween shapes. It seems fairly obvious but when we contrast that with Motion Tweens, our Motion Tweens have those two rules, we can only Motion Tween something that's not a shape and it's better to Motion Tween a symbol and we can only Motion Tween one object per layer. But Shape Tweens don't have that restriction, you can have as many objects in that layer as you want to as long as they are all shapes. Now what we will find as we start to apply Shape Tweens is even though you can do as many objects as you want, the simple is the object, the better the tween you are going to get and of course that depends on the results you are looking for. So what I would like to do is try it with the suites that we have here, we have got these shapes for our four different suites, all in keyframes. Let's setup Shape Tween so that we can change from one suite to the other. Now we will need to give ourself a little bit of room to tween, so I need to spread these frames out so they are not all sitting next to one another. We can easily move any keyframe, just make sure you select it first and then go back and click and drag it and you can move the keyframe individually. I am going to take the heart keyframe, the last one and move it out here to frame 75 and you can see that that automatically added frames in between. Let me grab the next keyframe, select it first and then move it out to about frame 50 and finally grab the diamond keyframe, move it out to frame 25. Now I also want my animation to loop. So it starts on spades, goes through each one of the others suites and I want it to end on spades at the end. Now a fast way to do this is to use a drag copy in the program. You might have already known that you can drag copy anything that you select. I will do an example here with the heart shape. If I click on the heart shape, and hold my Option key on the Mac or Alt key on the PC down, I can grab that object and drag and move it and you see that I will make a copy of it instead of moving the original. Now I am just going to hit the Delete key because I really don't two hearts in here right now but let's try that same thing with a keyframe. In order to loop this back to spades, I need a copy of this keyframe right at the very beginning, at the end of my animation. That way we will have a tween for each one of the suite changes and it will change back to its original location. To make a copy of this keyframe, all I have to do is hold the Option key on the Mac or Alt key on the PC down, click and drag that frame and you see my cursor there has a little plus sign on it. That indicates that I am going to make a copy of this keyframe instead of moving the original and there we have it, I am going to put it out at frame 100 and we end on exactly the same keyframe that we start with. Now of course, we need our background graphics here to stay on the screen. I will just select frame 100 for layer A and I will Shift+Select the card layer as well, I will press F5 and we will have frames covering that whole distance all the way out to the end of our movie. Now since we had shapes in all the keyframes before hand, we are actually ready to do the Shape Tween. That was the only requirement for Shape Tweens that we have shapes in our keyframes. So just like in Motion Tweens I can go back to the pair of keyframes, in this case, keyframe 1 and keyframe 25, that's going to be our first tween and click anywhere in the middle of those two and we can setup our Shape Tween. Now if we see the green color for your Shape Tween and we see a solid arrow, then everything is good, we have got a tween going on and on screen we have got something that's half way in between a spade and a diamond but if we scrub it, we will see that it's actually changing from one point to the other. Now the way it changes, that's usually the thing that bothers most people about Shape Tweens. So what we are really going to be finding out in this lesson is how to control the tween a little bit better so that we get a nicer movement from point A to point B. Now we might as well go ahead and setup the other tweens. There is one new feature in this version of this Flash that we could point out and it's something that you are always able to do with Motion Tweens but now we can do it with Shape Tweens as well, and that is right-click or access the Context Menu. Now I will just between the next pair of keyframes and let's setup our next Shape Tween. If you have got a right click mouse on your Mac, you can go ahead and right click otherwise you can hold the Ctrl key down while you click and of course on the PC you can just use the right click as well and what you will see is at the top of the menu we have an option for creating a Motion Tween which we have always had and now we have an option for creating a Shape Tween. So now you can create both of your tween types by accessing the right click or Context Menu. Once again you can see that we have created a tween that is going from a diamond shape and morphing it into that black club shape. Now we can use some other techniques that we have used before on Motion Tweens as well. I can multiple select frames and setup a bunch of tweens at once. If you are comfortable already selecting just a point in the middle of the two tweens, I would like to point out once again that the place we are actually setting the tween setting is on the first of the two keyframes. We can't really set any changes inside of Flash on an empty frame so we are always making changes to the last available keyframe. With that in mind, if I select the first keyframe of the next pair and I Shift+Select the second keyframe which is actually the first keyframe of the last pair, I will be setting up a tween for both of those two keyframes at once. I can use any method we want; we can go down to the Property Window or I can use the right-click or Ctrl+Context Menu click, choose Create Shape Tween and I will create the last two tweens at once. Now let's scrub through each one of these tweens and see what we have got. There you can see we have got a heart going to a spade and once again it's kind of lumpy in the middle, not really a very nice looking shape and as I said that's usually the thing that bothers most people about Shape Tweens.