Dragging with Easing without the Tween Class

We present here a simple way to create a smooth response to mouse-controlled input by the user, without the use of the Tween class. We use the dragging of MovieClip graphics for our examples presented below, but the same principle can be applied to any type of mouse-controlled interaction. One of the three examples below involves a slider, in the other two an object is dragged with the mouse with easing. Easing creates an effect of smooth dragging and gives the dragged object 'weight'.

Download

Download the well-commented source fla files corresponding to the three examples above:

Comments

Consider moving an object according to mouse position. The easiest way to accomplish this is to set the x and y coordinates of the object to equal the mouseX and mouseY coordinates with respect to the container of the object. But this immediate response creates an abrupt motion, and we may prefer something more fluid.

A simple solution to creating smoother motion is to move the object only a portion of the way towards the mouse position (for example, only 20% of the way). Repeating this motion through calls to an update function (either based upon an ENTER_FRAME or Timer event), the object will eventually converge on the mouse position when the mouse comes to rest. This is the idea that we use in all three of our examples.

In each example, we are moving an object according to user input. In the first example, an object moves according to slider values. In the next example, motion is controlled by pressing the mouse and dragging the object. In our third example, we show how to apply this same principle to moving an object in two dimensions.

The well-commented Timeline code in each of the fla files contained in the zip package is very simple, short, and easy to follow.

Another example when we applied the same technique in a more complex context is our particle effect: Flower Twist - Interactive 3D Bitmap Particles in AS3. (Be sure to click the button to turn off automatic mode first to see the effect.) When you move the sliders, you will notice that the parameters react with smooth transitions. We used the same simple smoothing technique which we describe here.

Back to AS3 How-Tos and Tips              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.