Getting Started With ActionScript: Flash Tips for Basic Motion

Using ActionScript
This article is an attempt to convince some of you new Flash keyframers that there are some very compelling reasons to consider using ActionScript for your next Flash project. Even if you’re not a programmer with a degree in Computer Science, you can speed up your work and speed up your download times with a few simple, reusable pieces of ActionScript. Trust me, it’s not as tough as you might think…

Why ActionScript?
Why use ActionScript you ask? I can give you two very simple reasons:

Reason #1: Your Time
Creating a few pieces of ActionScript that can be reused will save you time in the development phase of your Flash work. Once you’ve created an ActionScript function, you can use it in multiple projects without having to solve the same problems over and over. Let’s face it, your time is worth money – it’s time you started acting like it…

Reason #2: Your User’s Time
Most Flash developers don’t stop to think that every time they add a new layer and all of the frames that go along with it, they are also adding size to their SWF. Using ActionScript will allow you to substantially limit the size of your SWF files. This saves your users time on download, not to mention that your clients will always be happier with smaller file sizes. Check out this quick test (click to download the FLA’s):

Keyframe Animating 1 Clip: 514 Bytes
ActionScript Animating 1 Clip: 369 Bytes

Keyframe Animating 2 Clips: 839 Bytes
ActionScript Animating 2 Clips: 388 Bytes

At first glance these file sizes might not seem like a big deal to you. After all they are all less than 1K. However, what is important to look at is the relationship between the sizes. Using keyframes and doubling the complexity of an animation gives you a 60% increase in file size (from 514 Bytes to 839 Bytes), while doing the exact same thing with ActionScript only gives you a 3% increase (from 376 Bytes to 388 Bytes)! The animation using keyframes with 2 MovieClips is more than 115% larger than the exact same animation using ActionScript. Imagine how this could impact your file size on a large, production-scale project. Numbers like these are hard to deny…

Getting Started
The first thing you need to understand in order to take advantage of ActionScript for moving a MovieClip is how Flash refers to your MovieClip’s position. This is done with the x and y properties of the MovieClip. If we say “ball1_mc is located at an x of 50 and a y of 100″, we mean that the registration point of ball1_mc is 50 pixels from the left of the Stage, and 100 pixels from the top of the Stage.

ActionScript provides you with two properties of every MovieClip that let you change (or just read) its location. Here’s how you’d set the location of a MovieClip with the name “ball1_mc” to an x position of 100 and a y position of 200:

  ball1_mc._x = 100;
  ball1_mc._y = 200;

Not too bad huh? Any MovieClip object has these properties associated with it, but remember that in order to use them, you need to give the object instance a name. This is done in the Properties panel by selecting the object on the Stage and then entering a name in the Instance Name edit box of the Properties panel.

Creating an ActionScript Function
Now we need to figure out how to write a function in ActionScript. Functions allow you to associate a group of commands together into a block of code and then call that group of functions from other places in your ActionScript. A function that would set the x and y position of a MovieClip would look like this (line numbers are added for later explanation):

 1.    setXandY = function(theMovieClip_mc, newX, newY)
 2.    {
 3.      theMovieClip_mc._x = newX;
 4.      theMovieClip_mc._y = newY;
 5.    }

This might look a little confusing, but lets look at it one line at a time.

Line 1 is the Function Definition. This line basically says “Create a function called ’setXandY’ that accepts three parameters called ‘theMovieClip_mc’, ‘newX’, and ‘newY’. A parameter is a variable (remember that high school algebra class?) that allows us to pass different data into the function. This will make a little more sense below when we discuss actually calling the function, so for now, just think of parameters as a way to make the function work on multiple MovieClips in multiple cases.

Line 2 and Line 5 are open and close curly braces. Any block of code is always contained in curly braces. In a Function definition, they allow you to specify where the code for the Function starts and where it ends.

Lines 3 and 4 contain the actual code. They are simply taking the MovieClip that is passed into the “theMovieClip_mc” parameter and setting it’s “_x” and “_y” Properties to the two other parameters that are passed into the Function: “newX” and “newY”. This is just like the first code example above where we set the position of “ball1_mc”, but it’s dynamic – meaning it can change depending on what parameters you pass to the Function when you call it.

Calling an ActionScript Function
The previous code snippet is great, but by itself, it won’t actually set the position of anything. All it really does is create the Function. In order to use the Function, you have to call it later on in your code. So, how do you do that? It’s really quite simple:

  setXandY(ball1_mc, 100, 200);

This one line (coupled with the Function Definition above) will do exactly the same thing as the first two lines of code we looked. It will set the x and y position of the “ball1_mc” MovieClip to 100 and 200 respectively. The really cool part is that you could set the x and y position of ANY MovieClip with this function simply by passing a different MovieClip name as the first parameter:

  setXandY(square5_mc, 50, 25);

This code would set the x and y position of the “square5_mc” MovieClip to 50 and 25 respectively. Hopefully this is all starting to make sense, because it’s time to start moving things…

Defining the onEnterFrame Function
Flash Movies all have a Timeline that is made up of a series of Frames. The Framerate of a Movie determines how long Flash will wait before moving to the next Frame. Think of this in the same way as a film that you would see in a movie theater. In the USA, the standard framerate for film is 24 fps (or Frames Per Second). By default, Flash sets the framerate to 12 fps. You’ll notice that things look a little choppy at this framerate, so I’d recommend setting it to at least 20 fps (I typically use 24 fps) to smooth things out a little. You can change this in the Properties panel for the Stage. Simply click on the background area outside the Stage and then type “24″ in the Frame Rate edit box. Remember that Flash is dependent on the processor of the local machine, so anything over 30 fps can really start to bog a user’s machine down.

So what does this have to do with moving a MovieClip? We’re going to define a Function for our MovieClip that actually will get called each time a new Frame is entered. So, if we have our framerate set to 24 fps, this function will get called 24 times each second (assuming the user’s processor can handle that amount of work). Let’s look at the code, and then step through it a line at a time again:

 1.    moveClip = function(theClip_mc)
 2.    {
 3.      theClip_mc.onEnterFrame = function()
 4.      {
 5.        this._x = this._x + 1;
 6.      }
 7.    }
 8.
 9.    moveClip(ball1_mc);

This is a bit more complicated than the last Function, but let’s take it a bit at a time.

Line 1 just defines the Function with one parameter (the MovieClip we want to move).

Lines 2 and 7 group the lines of code to include in the Function.

Line 3 is where things start to get interesting. Here we’re using a special Function that Flash recognizes for each MovieClip on the Stage called “onEnterFrame”. Quite simply, this is the Function that will be executed at each new Frame (or 24 times each second if our framerate is 24 fps). This Function is not defined by default, so our defining it here is enough for Flash to know that it’s supposed to be executed each Frame.

So, what does it do? Line 5 is where we actually change the x position of the MovieClip that we passed in as a parameter. We use the keyword “this” here which just refers to whatever MovieClip we are defining “onEnterFrame” for – in this case it’s “theClip_mc” which holds whatever MovieClip we pass into this Function (“ball1_mc” from line 9). The math involved is very easy. We’re setting the “_x” Property of “this” to the “_x” Property of “this” plus 1. In other words, we’re incrementing the “_x” Property by 1. This is such a commonly executed step, that there is actually a short-hand way of writing this:

     this._x++;

Line 9 is the last important piece of code – remember that defining a Function doesn’t actually call the Function. We need to do that separately, which is what we’re doing on line 9.

So what will happen if we actually run this? You can probably guess that it will move the “ball1_mc” MovieClip to the right one pixel each Frame, forever. The one BIG flaw here is that we don’t ever check to see if we got to where we’re going… It will move the MovieClip on every new Frame until you exit the Movie. Eventually, the MovieClip will disappear from the Stage altogether. Honestly, this Function (as it stands) is pretty useless, but it does demonstrate how “onEnterFrame” works. With this knowledge, we can do some pretty cool stuff.

A Useful Motion Function
Ok, let’s dive in now. Here’s a useful function for basic horizontal movement:

 1.    moveClipTo = function(theClip_mc, newX, frameDuration)
 2.    {
 3.      var xDistance = newX - theClip_mc._x;
 4.      var xStep = xDistance / frameDuration;
 5.      var currFrame = 1;
 6.
 7.      theClip_mc.onEnterFrame = function()
 8.      {
 9.        if (currFrame > frameDuration)
10.       {
11.         delete (this.onEnterFrame);
12.         this._x = newX;
13.       }
14.       else
15.       {
16.         this._x += xStep;
17.         currFrame++;
18.       }
19.     }
20.   }
21.
22.   moveClipTo(ball1_mc, 500, 100);

Let’s discuss. Line 1 should look familiar by now, it’s just a function definition. The function name is “moveClipTo”, the paramaters are “theClip_mc” (the MovieClip we want to move), “newX” (where we’d like to move it to) and “frameDuration” (how many frames we’d like to take to move it). You can see on line 22 how we call our new function. We’re moving “ball1_mc” to a new x position of 500 pixels from the left of the screen over a period of 100 frames.

Lines 3, 4 and 5 define some variables to work with in our movement. “xDistance” is the difference between the new x position and the current x position. “xStep” is how many pixels we’ll move the MovieClip each frame (the “step size”). If we know the distance and we know how many Frames we have to get there, we can just divide the distance by the number of Frames. “currFrame” is just a counter so we know how far we’ve gone.

Line 7 is where we define the special Function “onEnterFrame”. This is the code that will get executed each frame.

Line 9 is our first logical comparison. We’re asking ourselves if the Frame that we’re currently on is greater than the total number of Frames that we’ve been given to complete the move (“frameDuration”). We simply ask if “currFrame” is greater than “frameDuration”. If it is, we’re done with our movement. All we need to do is stop the “onEnterFrame” for this Clip and make sure that the final resting place for “theClip_mc” is actually the position that was sent into the Function (“newX”).

If our current Frame is NOT as high as the “frameDuration” then we have more processing to do. This is when the “else” portion of the Function is executed. First of all we’ll add our step size to the current x position of “theClip_mc”. We do this with another short-hand increment operator (+=). All this means is “set my x equal to my x plus xStep”. The only other thing to do in this block of code is to increment the “currentFrame” counter by 1.

That’s it! Now we’ve written a function that will move any MovieClip from it’s current x location to any new one.

Final Thoughts
Don’t stop here! The “_x” and “_y” properties are not the only thing you can change in ActionScript. You have control over the transparency (“_alpha”) the rotation (“_rotation”) the x and y scale (“_xscale”, “_yscale”) and a host of other properties. This is where you can have some fun, be creative. Keep in mind the fact that Flash will only allow you to have one “onEnterFrame” Function defined for any MovieClip at a time. Everytime you define a new one, it will always overwrite the current one.

Coming Soon…
Check back soon for the next chapter where we’ll discuss a simple “Easing” Function!

Related posts:

1. Basic CSS Tips
2. Everything You Need to Know about Flash Video Player
3. Howto : Crash Internet Explorer
4. Basic Windows Keyboard Shortcuts
5. Most effective Top 5 iPhone Security Tips

Filed Under: Archive Categories