Creating springs with ActionScript

Welcome to the fifth tutorial in this series on scripted motion. In this tutorial, we’ll look at an effect that you may have seen in some Flash movies - a spring. The spring effect allows you to drag a movie clip that springs backwards and forwards and finally settles back in its original position. This effect is much easier to achieve than you might think and I’ll show you how in this tutorial. We’ll work through some examples, create a function and a text heading that uses a spring on each letter. You’ll learn about multi-dimensional arrays and calling functions at specified time intervals using setInterval.

Earlier tutorials have looked at motion in a straight line and in a circle, fades and rotations and adding inertia and gravity effects. You won’t need to have completed them before moving on to this tutorial. I've assumed that you are using Flash MX or Flash MX 2004 and that know how to add ActionScript to a movie. I've used ActionScript 1.0 for the examples.

You can download the source files for the tutorial from the blue Properties box that contains the article PDF. There's a heading titled Code Download and you can click the Details link next to it to get the zip file. The download includes the starter files you'll need as well as the completed files.

Note: If you have difficulties downloading the source files or PDF, you might have a problem with your cookies. Delete the cookies from your machine and try again. In Internet Explorer, you can do this by choosing Tools > Internet Options… and clicking the Delete Cookies… button on the General tab.

Overview

Creating a Flash spring

Think about how a spring works in the real world. You can pull the two ends apart and when you let go, they’ll spring together. The further apart you pull the ends, the faster the spring effect. When you pull a spring, the rebound causes it to bounce back in the opposite direction, not quite as far as the original length. This effect repeats until the spring settles back into its original position.

We’ll create this effect in Flash. Start by opening the resource file spring.fla. You'll see a ball on the Stage. The ball symbol has a centre registration point to make calculations easier. If you hide the ball layer, you’ll see that the layer below it has a square shape. This shows the tether position for the spring.

We need to set up the variables first. Select the ball instance and open the Actions panel with the F9 shortcut key. Enter the code below.

onClipEvent (load) {
   var anchorX = 198.4;
   var anchorY = 130.5;
   var inertia = 0.9;
   var springBack = 0.2;
   var moveToX;
   var moveToY;
   var newXPos = 0;
   var newYPos = 0;
   var haveMoved = false;
}

The first two variables set the co-ordinates of the anchor point. This represents the x and y position of the movie clip on the square layer. The next variable, inertia deals with how far the movie clip springs back. I've set the value to 0.9. I need to choose a value less than 0.9 so that the instance won't spring back to its previous position. If I used a value of 1, the ball would spring back forever. The springBack variable tells me how fast the instance will spring back towards the anchor point. Using a higher value will result in a quicker response from the spring.

Sas Jacobs

Sas Jacobs Hello. I'm the Principal of Anything Is Possible, an Australian web development business specialising in web applications development and training. I'm interested in using Flash with dynamic content and I've presented at a number of International conferences on topics relating to applications development, XML and scripting components. I have recently released my second print book Beginning XML with DOM and Ajax to match the first one - Foundation XML for Flash. I have a business web site
and a personal web site.

See All Postings From Sas Jacobs >>

Reviews

Be the first to write a review

You must me logged in to write a review.