|
|
|
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.
 |
- Tutorial written by bedlam123
| 
|
|
|
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 |
--- View Entire Thread ---
|

|
|
 |
Apple Mighty Mouse Author: johnnye1975 Posted: Oct 13th, 5:08am Activity: 0 replies, 1 views
|  | How to transfer Brushes and fonts from CS2 to CS3 Author: greyhoundsrus Posted: Oct 11th, 10:15pm Activity: 2 replies, 88 views
|  | Hi Everybody Author: vincent2008 Posted: Oct 11th, 12:07pm Activity: 2 replies, 43 views
|  | Some of my works Author: CBCOOLEST Posted: Oct 10th, 5:15pm Activity: 3 replies, 97 views
|  | I am sorry...and Hy Author: CBCOOLEST Posted: Oct 10th, 3:19pm Activity: 9 replies, 100 views
|  | Calling All PS7 Users... Author: tamlin Posted: Oct 10th, 7:37am Activity: 0 replies, 59 views
|  | Hey there Author: PrIEzT Posted: Oct 09th, 11:48pm Activity: 1 replies, 48 views
|  | Hp layout Author: ngz Posted: Oct 09th, 6:12pm Activity: 3 replies, 85 views
|  |
|
 |
 |
 |
 |
 |
| --- Site Resources --- |
| Total Tutorials: | 210 |
| Total Downloads: | 413 |
| Linkbase Links: | 255 |
 |
|
 |
 |
|