How to Create a Complex Shape Tweens in Adobe Flash CS3
Related Videos
Most Recent
Most Viewed


Learn how to create a Complex Shape Tween in Adobe Flash CS3.


Now what we have created is a nice, clean, simple shape tween but we can also use the shape tween to get a little bit more complex and more visual effect by simply using more complex shapes. Now what I would like to do is try this out by simulating another tween with a couple of changes to it. So let me add another layer up here to the top. To start with, I would like a copy of each one of the shapes that we started with. Now if we were to copy the keyframes from our suits layer into our new layer, we would not only get the graphics but we would also get the tweens as well. So we can shortcut this process by simply copying the entire animation from the suits layer up to our new layer. Whenever you want to copy more than the graphics themselves, you don't want to use Copy and Paste in a standard way, you want to use Copy and Paste of the frames or more specifically of the keyframes. So what I am going to do is I am going to select the first frame of our suits layer and I am going to Shift+Select the last frame. That has all of our keyframes selected. We can go over to the Edit Menu and as I said, instead of using the standard Cut, Copy and Paste, we are going to go down here to where it says Timeline and we are going to use Cut Frames, Copy Frames and Paste Frames. Now in this case, I want to leave the old animation there, so I am just going to use Copy Frames. I can select all of Layer 5, we can either click on the first frame and Shift+Click the end or I can just click on the layer name itself. You see that grabs the entire layer all the way out to the end. Now we will go back into Timeline and we will choose Paste Frames. Now we have a duplicate of that animation including all the tween settings. Now I am just going to hide our old animation that we did before, so that we know which one we are working on. We really don't want those shape hints getting in the way of the new tween that we are going to be making. So I am going to select each one of the keyframe pair's first frames, in this case, frame 1 to start with. We will go up to Modify>Shape and I will choose Remove All Hints. It will only remove the hints on the keyframe that I have selected. So we will do that for each one of these and just make sure that our shape hints are all cleaned up. We will do it for the keyframe at 50 and at 75. Now we didn't add any shape hints at a 100, so we should be pretty much cleaned up at this point. Now as I mentioned before, in order to make a more complex shape tween we can just simply use more complex shapes. Now I don't want to re-draw the shapes that we were working with. So what I will do is I will add a keyframe at the middle point of each one of these tweens and we will add a more complex shape there. Now if we just click somewhere in the middle of these two frames and press F6, we will get a brand new keyframe and a new set of tweens divided up from the original tween. Like a motion tween, it will pick out that mid-point and create a controllable shape right at that keyframe for me, but I don't really want that shape, that's kind of a messy, ugly shape there. So I am going to hit the Delete key and once again that will just delete the graphic, it won't delete the keyframe. That leaves me with an empty keyframe and a broken tween. So what we will do to fill up the graphics in this keyframe is I am going to back to keyframe 1, I am going to select the spade shape and I am just going to use Copy. Now remember that it will just copy the graphic and not the keyframe setting. So all I have in the Copy is the shape. Let's go out to that new keyframe that we made and I am going to paste the shape in, but I am going to use my Transform Tool to first make the shape much smaller than it originally was. Now I will hold down the Shift key, so we get a nice proportional change. I want to make it about one-quarter of it's original size, push over here to the side a little bit. While it's still selected, I am going to use a drag-copy to make three more copies of this shape. Now once again drag-copy, all I need to do is press and hold the Option key on the Mac or the Alt key on the PC, while I select and drag an object and I will make a copy. Let's do two more and I have a much more complex shape. Now we have already got the tween setup and as we said, program only need shapes and it doesn't matter how many. So let's see what we have got in under this tween. I am going to back to keyframe 1 where we start with a single fill shape and we will scrub across the line. You can see that this fill shape breaks up to form the other four shapes along the tween. I have got another tween on the other side where these shapes are going to pull back together and form the second part of the tween. Now this is basically what we mean by a more complex tween. As the different shapes overlap, we get negative and positive areas and we get a very interesting pattern emerge, as it's completing the morph from one shape to another. Now in these shapes, you can still use shape hints, if you want. I am going to leave these ones running pretty much as it is and I am going to fill in the rest of the tweens by creating keyframes and building those keyframes up for the remaining tweens. So let's try the diamond to the club. Once again, I am going to go to the middle and create a keyframe. Now if you remember, last time we created the keyframe and then deleted the resulting graphic that it made for us. Well, I can simplify that process by going up to Modify, we will go down to Timeline and where we would normally choose Convert to Keyframes, I can choose Convert to Blank Keyframes or I can use the F7 keyboard shortcut. This simplifies the process because it just drops a blank frame in the middle and it ignores all the graphics. Now once again, I am just going to go back to the original set of keyframes. I will copy out that diamond shape, we will paste it into our new keyframe and make it smaller. I will hold the Shift key down to get a proportional scale and I will make a drag-copy of the resulting shape. We will hold Option down on the Mac, that's Alt on the PC and I will drag it out once, twice and three times. We have already got our tween setup. So now we end up with our diamond breaking apart and reforming back into a club. Let's do the other ones. I will use my keyboard shortcut this time, I will go out to the mid-point, I will press F7 this time. It gives me a blank keyframe, we will go back and copy the club out, paste it into our new blank keyframe, scale it down a little bit, holding Shift key to get a proportional scale and I will do a drag-copy to make three more copies of it. We will go ahead and do the last one. F7 gives me a blank keyframe, we will copy our heart shape and paste it into that new blank keyframe and scale it and copy it like the others. Now if we scrub over the resulting animation, you can see that we have got the mixing of the shapes going on, as each one of the tween sets goes from a simple shape to a complex shape and then back again.