• Step one: getting started
• Step two: refining the code
• Step three: stopping the clip at a specific point
• Step four: controlling the clip from a button
• Step five: making the clip scroll to specific positions

• Load Flash.
• Set the frame rate to 21.
• Draw a small circle on the stage and convert it to a movieclip.
• Give your movieclip an instance name of ball.
• Make a new layer and name it actions.
• Put this action in the first frame:
  
  //this sets the initial x position of our clip
  ball._x=50;
  
  //this creates an enterFrame action that occurs every frame (even though our main timeline only has 1 frame)
  ball.onEnterFrame=function(){
  //this moves our clip 5 pixels to the right every frame
  this._x=this._x+5;
  }

Test your movie. Too easy right? Now let us refine the code a little. In the enterFrame handler, I want you to change

this._x=this._x+5;

to

this._x+=5;

Test your movie again and you will see that both lines of code do exactly the same thing but the later is neater.

Now let's stop our clip when it gets to a certain point. Change the enterFrame part of the code to this:

ball.onEnterFrame=function(){
//this moves our clip 5 pixels to the right every frame until it reaches a certain point
if (this._x<300){
this._x+=5;
}
}

Test movie again. Starting to see how this all works? What you have just learned applies to scale, alpha, rotation etc. For example, change the entire code on the frame to

ball._x=50;
ball.onEnterFrame=function(){
//this scales our clip along the x axis 5% every frame until it reaches a certain width
if (this._xscale<500){
this._xscale+=5;
}
}

Test your movie.

Or perhaps you might like to make a random effect? Change the actions to:

ball.onEnterFrame=function(){
//this changes the x scale of our clip every frame to a random amount between 0 and 500
this._xscale=random(500);
}

Once again, test your movie.

You can get some interesting effects with randomness. Change the actions to:

ball.onEnterFrame=function(){
//this makes the clip go crazy
this._xscale=random(500);
this._yscale=random(500);
this._alpha=random(100);
this._x=random(500);
this._y=random(400);
}

Test the movie again.

Now let us control our clip from a button. Draw a rectangle on the stage and convert it to a button. Give your button an instance name of button1. Remove all the actions on frame 1 and add these:

button1.onRelease=function(){
_root.ball._xscale=random(500);
_root.ball._yscale=random(500);
_root.ball._x=random(500);
_root.ball._y=random(400);
_root.ball._alpha=random(100);
}

Test your movie and click on the button a few times.

Now lets make the clip scroll to different positions. Remove all the actions on frame 1 and add these-

ball._x=50;
ball.onEnterFrame=function(){
//this variable stores the current x position of the clip
cX=this._x;
//this variable stores the distance between the clips current x position
//and where we want it to go
//I am setting the targX variable in the root so that it is easy to target with our button
difX=cX-_root.targX;
//this moves the clip 1/5 of the distance every frame.
//Because the difference between the clips current location and its destination
//will get smaller each frame, so will the amount the clip travels each frame.
//This is what makes the clip appear as though it "eases into" it's final destination
setProperty(this, _x, cX-(difX/5));
//check the flash manual to learn more about the setProperty action
}

button1.onRelease=function(){
//this sets the targX variable to a random number between 0 and 500
_root.targX=random(500);
}

Test your movie and click the button a few times. You can use this formula on the movieclip to get some great effects. Try adapting it to effect the clips x and y scale. You should end up with something like this:

_root.targXscale=50;
_root.targYscale=200;
ball.onEnterFrame=function(){
cXscale=this._xscale;
cYscale=this._yscale;
difXscale=cXscale-_root.targXscale;
difYscale=cYscale-_root.targYscale;
setProperty(this, _xscale, cXscale-(difXscale/5));
setProperty(this, _yscale, cYscale-(difYscale/5));
}
button1.onRelease=function(){
_root.targXscale=random(500);
_root.targYscale=random(500);
}

Test your movie. You will notice that even if you click the button quickly the scaling of the clip never jumps - imagine trying to do that with tweened animation!

This code works fine and is easy to read but if you want to clean it up change it to the code below, which does the same thing:

//set the starting value for 2 variables
targXscale = 50;
targYscale = 200;
ball.onEnterFrame = function() {
//smooth scaling code
this._xscale-=(this._xscale-targXscale)/5;
this._yscale-=(this._yscale-targYscale)/5;
};
button1.onRelease = function() {
//set the 2 vars to random values
_root.targXscale = Math.random()*500;
_root.targYscale = Math.random()*500;
};

That's it. Have fun experimenting with this code.