Tutorial: How to make a smooth animation effect in Flash using the SmoothMover Class

Tutorials - December 18

In this tutorial, you will learn how to use SmoothMover to make an eased smooth animation effect with ActionScript quickly and easily.

First, go to the SmoothMover page to download the class and see some examples of it in action.

Then, download this example fla file (there is a SmoothMover.as here too), and open it in flash MX 2004 or above.

This is the animation we are going to make:

The complete code

If you copy/paste this code on the frame 1 ActionScript window, you will see the red ball (myClip) perform the animation like in this movie (only once, we will add recurrance later).

import PippoFlash.SmoothMover;
var par = new Object();
par.speed = 10;
par.props = ["_x"];
par.endPos = [460];
SmoothMover.slide(myClip, par);

The code step by step

import PippoFlash.SmoothMover;

This Statement is needed to Include the class in your project. Make sure that SmoothMover.as is in the PippoFlash folder, in your project folder.

var par = new Object();

Here we create the "parameters" object (read this post for further information about Parameter Objects) to store all animation details (using an object makes it easier to update properties, and allows to do multiple animations with the same parameters saving memory).

par.speed = 10;

The property "speed" in the parameters object stores the friction of the motion. In other words, the higher the speed is, the slower the motion will go. Experiment with different speed settings to find the one you like.

par.props = ["_x"];

"props" stores an array with all the properties to be affected in the movieclip. Properties must be set as strings ("_x" = correct, _x = wrong); If we want to affect multiple properties, we can write: ["_x","_y","_alpha", etc...]. The order of properties is not important.

par.endPos = [460];

"endPos" stores the array with the destination values of all properties. Again, here too, we can add multiple values in this way: [460,200,30, etc...]; The order of values must reflect the order of properties in the "props" array.

SmoothMover.slide(myClip, par);

This is the command to shoot the animation. "myClip" is the instance name of the movieclip to move, and "pars" is the object with parameters. As you can see, the 2 are separate. In this way, you can move different movieclips using the same parameters object.

Condensed version

The real power of SmoothMover is in it's ease of use. The above code is verbose in order to explain functionalities, but a motion command can be asily issued with this syntax:

SmoothMover.slide(myClip, {speed:10,props:["_x"],endPos:[460]});

Adding recurrence

Adding these few lines to the code, it is possible to activate recurrance:

import PippoFlash.SmoothMover;
params = new Object();
params.speed = 10;
params.props = ["_x"];
params.endPos = [460];
params.listener = this;
function onSmoothMotionEnd() {
myClip._x = 40;
SmoothMover.slide(myClip, params);
}
onSmoothMotionEnd();

SmoothMover casts 2 events in a listener object. The events are "onSmoothMotionEnd(clip)" and "onSmoothMotionStart(clip)", with a single parameter, which is a reference to the moved clip. Let's check how we updated the code:

params.listener = this;

The "listener" property stores a reference to the object where the events will be triggered. In this case, we put a reference to "this" which is the main timeline.

function onSmoothMotionEnd() {
myClip._x = 40;
SmoothMover.slide(myClip, params);
}

Here we define a function, called "onSmoothMotionEnd", which will be called by SmoothMover everytime a motion is complete. The function puts the movieclip again at it's original position, and then calls the SmoothMover.slide() method.

onSmoothMotionEnd();

At the end, we just call the function once, to start the recurrent motion.

Animating more properties

SmoothMover can be used to affect multiple properties too. Here's is the effect we are going to do now:

To test the animation on more properties, copy/psate in the ActionScript of frame 1 the following code:

import PippoFlash.SmoothMover;
params = new Object();
params.speed = 10;
params.props = ["_x","_yscale","_rotation"];
params.endPos = [460,300,810];
params.listener = this;
function onSmoothMotionEnd() {
myClip._x = 40;
myClip._xscale = 100;
myClip._yscale = 100;
myClip._rotation = 0;
SmoothMover.slide(myClip, params);
}
onSmoothMotionEnd();

As you can see, we just set the "props" property with ["_x","_yscale","_rotation"], and the "endPos" property with [460,300,810]. In this way, we achieved a more complex animation. Of course, for recurrance, we had to reposition the clip in place, and re-set _rotation and _yscale to their original values.

Condensed version

Copy/paste the following code, and you will achieve the same effect with much lesser amount of typing

import PippoFlash.SmoothMover;
function onSmoothMotionEnd() {
myClip._x = 40;
myClip._xscale = 100;
myClip._yscale = 100;
myClip._rotation = 0;
SmoothMover.slide(myClip,{speed:10,props:["_x","_yscale","_rotation"],endPos:[460,300,810],listener:this});
}
onSmoothMotionEnd();

Now that you learned how to use SmoothMover, try to experiment with it to achieve other effects. Once yuo learn how to use it, despite it's semplicity, it's highly addictive and you will find it very useful to quickly add smooth animations to your projects.

If you have any questions, please do not hesitate to contact me.

Namaste,
Pippo