Home » Technology » FLASH Programming » TWEENED ANIMATION - Using a motion path

TWEENED ANIMATION - Using a motion path

© Umais Ahmad

Using a motion path

In Tweening motion, we have learnt about motion of objects in a movie but this motion is restricted to only straight paths. Sometimes we need to move an object on complex paths, e.g. how we can make it possible to move an object in a circular path? The immediate answer that will stuck in your mind will be using several keyframes in which each keyframe define the position of object on a circular path slightly varying from consecutive keyframe. It makes possible but the task will be difficult, not precise and accurate.

Keeping in view this difficulty, the Flash architecture has provided us a technique (motion path), which makes complex path motions as easy as straight path motions. The motion path makes it possible to create complex path motion by using only two keyframes like in straight path motions. It also reduces movie file size unlike using several keyframes.

Above is a movie shown we are going to create today in which Suite101 is orbiting around WWW so follow steps one by one.

STEP 1:

Add two layers and name them WWW and Suite101. Right-click on the stage and choose Movie Properties. Choose Black from Background Color and click OK.

STEP 2:

Click frame number 1 of WWW layer and draw a picture as shown. Select this picture and convert it into group by pressing Ctrl+G. Now select this group and choose Window > Panels > Align. Press the button marked as 'To Stage'. Press Align horizontal and vertical center buttons. This will center the WWW picture to stage.

STEP 3:

Click frame number 1 of Suite101 layer. Draw a picture as shown and convert it into group. Important! We have converted it into group because later we shall use this image for animation and object must be a symbol or group for tweening motion.

STEP 4:

Select Suite101 layer and choose Insert > Motion Guide. Click frame number 1 of Motion Guide layer and draw an elliptical path of white color using Pencil tool as shown.

STEP 5:

Erase a little portion of elliptical path as shown in the figure.

STEP 6:

Choose View > Snap to Objects if already not selected. Click Suite101 picture and drag so that its center point is over one end of the elliptical path as shown. A white ring appears at the center point when it is locked to the motion guide.

Button States

The copyright of the article TWEENED ANIMATION - Using a motion path in FLASH Programming is owned by . Permission to republish TWEENED ANIMATION - Using a motion path in print or online must be granted by the author in writing.