TUTORIALS SUBMENU

PHOTOSHOP    FLASH    ILLUSTRATOR    BLENDER    CINEMA 4D    WEB-CODING    [SUBMIT]

This is second in a series of tutorials, so go ahead and open up your file from the Motion Tweening tutorial. If you have not followed the tutorial you can get the file you need here.  In this tutorial you will learn how to further enhance this very simple animation by making the circle slowly morph into a differently colored square.
 

Step 1: We ended our previous animation at frame 12, after one second of animation that moved our circle from one corner of the canvas to another. We will now animate the circle morphing into another shape using a technique called shape tweening. Shape tweening can take two different shapes at keyframes set any number of frames apart, and mathematically calculate the frames in-between to produce a smooth animation of one shape morphing into the other.

In order to make a shape tween, we'll have to create another shape on a separate keyframe.  At the moment we should be on frame 12, where our last animation ended. The last animation was one second long at 12 FPS - let's make this new animation three seconds long, which means that we'll need three times as many frames: 36. Since we want our second shape to be the very end of the animation, we'll want to create it on the last frame.  To do this, click 36 frames onwards from frame 12... i.e. at frame 48 (yes, its just simple maths!).

 
Step 2: As you can see, frame 48 is not currently a keyframe, but the blue circle in the animation still appears there. We're going to make it a key frame but, because we don't want our circle to stay there, we will make it a blank keyframe instead.   To do this, right-click on frame 48 and select "Convert to Blank Keyframe". The dot that marks a keyframe will appear, and it will be white which marks a blank keyframe. The expanse of frames between frames 12 and 48 will turn pale violet with a dashed line connecting them. This is because Flash automatically tries to extend the motion tween created in the previous lesson, but there is no object on the last panel to tween to.

Step 3: Drag and click to select frames 12-48 (DON’T SELECT FRAME 12 ITSELF) before right-clicking and selecting "Remove Tween". This will create a static expanse from frames 12 to 47, repeating frame 12 up until the next keyframe.

Step 4: Click on frame 48 to select it, and choose the Rectangle Tool from the toolbar (next to the Oval Tool).  Leave the stroke set to black and change the fill to a nice violet color. In the same area as the resting location of the circle in frame 12, draw a square or rectangle. Make it any size. Once you've drawn your shape on this frame, the keyframe marker will instantly turn to black, indicating that there is an object on this keyframe.   Unlike motion tweens, shape tweens can only be performed on non-grouped shapes, or on shapes that have not been converted to symbols. So with the shape drawn, let’s get ready to create the final animation.

Step 5: We want to make certain that this animation does not interfere with the previous animated frames. To do that we need to copy our last keyframe of the small blue circle to a new frame, directly afterwards. Do this by clicking on frame 12 to select it; then right-click and select "Copy Frames". Now click on frame 13 (which should be the very next frame) and right click, before selecting "Paste Frames". This should place a copy of the keyframe on frame 12 on frame 13.   If you have done this successfully, your timeline should have changed from my example above, to the example below.

Step 6:  Make certain you are on frame 13 and click on the blue circle in your canvas to select it. Then, in the top menu, select Modify > Break Apart. The symbol is now broken down into its individual shapes (i.e. the shapes of the circle's blue fill and the black stroke outline). You can tell that it's broken apart because the blue outline signifying a symbol is replaced by the dotted fill indicating a selected shape.

Step 7: All we have left now is to apply a shape tween and morph the shapes from one into the other. Just click and drag to select all of the frames from the second to last keyframes (frames 13 to 48). Then, in the Properties toolbox, click on the "Tween" dropdown and select "Shape". The frames affected will turn a pale green on the timeline.

And that's pretty much it - a simple shape tween!  In your animation you should now see your circle morphing into a square of a different color.  This may seem like rather simple stuff, but it forms the basis of a great deal of Flash's underlying functionality, so practice lots and learn it well before moving on any further.

very usefull, it looks great..would be awesome for building websites and such, or text clouds.

i think it's a bit too much text tho, maye less text and more images.

Reply to this post