Home » Technology » FLASH Programming » TWEENED ANIMATION - Tweening motion

TWEENED ANIMATION - Tweening motion

© Umais Ahmad

We are going to start TWEENED ANIMATION portion of the Flash. Following is the list of articles that will come under this heading.

1. Tweening motion
2. Tweening size and rotation
3. Using a motion path
4. Tweening color
5. Shape tweening

What is TWEENED ANIMATION?

TWEENED ANIMATION is a technique that Flash uses to create movements in a movie producing unimaginable low file size.

How TWEENED ANIMATION works?

Keyframes play an important role behind its working. What is keyframe? We already have a little idea of it. Keyframe is a frame where we specify changes in a movie. In TWEENED ANIMATION, we create keyframes at important points in the timeline and let Flash to create the frames in between them. Tween means ‘In between’.

Tweening motion

Today we are starting with the first article ‘Tweening motion’. In Tweening motion we create motion of objects in a movie. For example, we have a ball at certain position on the stage and we want to move it to another position on the stage. To do this, we shall create two keyframes on the timeline. The contents of these keyframes will define the initial and final positions of the ball. After that we shall allow Flash to automatically create frames in between these two keyframes. Clearly the file size will reduce as Flash has to only store the two keyframes and some other information. Lets take an experiment so follow steps one by one.

STEP 1:

Press Ctrl+N to open a new file. Choose View > Timeline if already not present.

STEP 2:

Click frame number 1 and draw a ball at right position on the stage. Make sure ball is selected and choose Insert > Convert to Symbol. Choose Graphic in the behavior and click OK. Why we have converted the ball into symbol? The object must be a symbol for tweening motion.

After the ball is created, the keyframe on the timeline appears as small circle in the frame. A keyframe without any contents appears as blank (as before drawing the ball).

STEP 3:

Click frame number 20 and press F6 to insert a keyframe at frame 20. Flash automatically copies the contents of keyframe 1 into it. Drag this ball to left position on the stage by using Arrow tool. So far we have created two keyframes that define the initial and final positions of the ball.

STEP 4:

Now we allow Flash to automatically create frames in between two keyframes. Click frame number 10 and choose Insert > Create Motion Tween. After all, the timeline should look like as shown.