Creating

Let us continue what we began in the first page, shall we? First, let me paste the entire chunk code in here for easy viewing:

onClipEvent (enterFrame) {
    //generating movement
    location = this._x;
    var i;
    i = 1+_root._xmouse/5;
    if (this, hitTest(_root.block)) {
        this._x = -1000;
    } else {
        this._x = location+i++;
    }
    //clips are scaled according to y-mouse;
    this._xscale = 40+_root._ymouse;
    this._yscale = 40+_root._ymouse;
}

In the next few sections, I will take each line (section) of code and explain the rationale behind it. Most of it will be mundane material you may already know, but some of the explanation might be new. If you want, you may simply skip ahead to the lines where you may have questions on.

onClipEvent (enterFrame) {

The above line signifies one of the most common code-openers for a movie clip. The statement is known as an On event handler because "on" an event, something should happen. In this case, on the event of entering the frame, the code found below the on would be executed. Unlike other events, enterFrame continuously executes the code under it without requiring some preconditioned statement or user action.

location = this._x;

I am assigning a value this._x to the variable location. Notice that I did not declare (forgot is the more proper word) the variable location before use. No worry! Unlike other programming languages, ActionScript is not very picky on details like this.

The words this._x refer the the X position value of the current movie clip. The statement this takes the place of a conventional movie clip instance name. Because our movie clip is actually a circle that will get copied and pasted numerous times, singling one name would have proven impractical for this animation. An example would be to call a group of kids "children" instead of calling each one by name. Similar to how a child knows to respond to "children", the movie clip knows to respond when it sees "this".

To sum it all, the variable location gets the current X position value of the movie clip.

var i;
i = 1+_root._xmouse/5;

Ok, it is not one line (or section) of code, but I digress from my original writings a bit. In the first line I declare the variable i in Flash. Of course, I do not have to declare the variable i before using it, but I just thought you would like to know how variables are declared.

In the second line, I am assigning the variable i the value of one added on to the X position of the mouse (_xmouse) divided by five. Why would I add one to the statement? After all, does "one" actually make a difference when we are dealing with numbers that go into the hundreds and thousands?

I add a 1 to the final result of the xmouse divided by 5 because I do not want the answer to ever be zero. The variable i is going to eventually become the value for the speed. If the speed happens to become zero, the circles would simply stop moving - which I do not want! The minimum speed of the circles will always be 1, and I started the co-ordinate plain at the x and y location: 0, 0. So _xmouse will never have a negative value.

if (this, hitTest(_root.block)) {
   this._x = -1000;
} else {
   this._x = location+i++;
}

Let's take a look at the dark colored portions of code first. The first line introduces the if statement. I am basically telling Flash, "If the movie clip (this) hits the block (the rectangle on the right) do what is contained above the else statement; if not, do what is contained under the else statement". That is basically it! You can learn more about if/else statements by clicking here.

The blue and green portions of code are the receivers of the if statement. If the the condition set forth by the if statement is true, the first blue colored statement executes. I am telling Flash to take the current movie clip's x value and subtract 1000 from it. You may remember in the Customizing section of this tutorial, I told you to edit the value of -1000 depending on your movie's width. Now you know when that happens - when the circles come into contact (hit) the rectangular block.

If the condition (hitting the block) is not met, the second blue colored line of code will execute. I am telling Flash to make the current X position of the movie to equal the current value (location) plus the value of i (the speed). This is called an "incrementer" because it increments the value of this._x.

Throughout the movie, the green portion of code will be likely to be executed the most. Why? Throughout the movie the circles will not be in contact with the rectangular "block". Only when the circles come into contact with the "block" does the if condition become true, and the code in blue executes.

this._xscale = 40+_root._ymouse;
this._yscale = 40+_root._ymouse;

The above two lines scale the movie according the vertical position of the mouse pointer (_ymouse). To make the scaling uniform in both the x and y directions, I use the same code for both _xscale and _yscale. Because I did not want the size of the movie clips to fall to go beyond a certain minimum, I add 40 to the final result; regardless of where the mouse pointer is, the scaling will be greater than 40. Of course, I used a standard geometric plane that has its origins at 0, 0. Therefore a negative value for _ymouse is not possible.

Factoid: In the code above, you will notice that I preceded anything having to do with the mouse pointer (_ymouse, _xmouse) with _root. Why would I do that? The reason is simple; Flash does everything relative to where the object containing the code is. _root tells Flash to start from the main timeline. If I did not specify _root, Flash would, relatively speaking, generate the mouse values in relation to the movie clip the code is on. Because the movie clips were randomly placed in various locations, the origin of the x and y values will not be a the standard 0, 0. To complicate matters, the movie clips are moving from left to right. Therefore, the mouse values will also change automatically with relation to the movie clips' movement. Because I am going to the main timeline where the stage begins at 0, 0, the mouse values will never go below 0, 0 and into the negatives. Also, the stage is not going to move like a movie clip! Therefore, if I did not use _root, for some movie clips, even the slightest deviation of the mouse pointer might force the code to start working on the negatives and creating a host of problems in positioning and size. A great many issues are solved by simply adding _root! Can you imagine subtracting 1000 from an already negative number? I always use _root when referring to the mouse pointer or something related to an absolute value for a relatively changing object. Now, are you not glad you learned that?

Conclusion
I hope the tutorial helped you to learn how to create continuous movement. More importantly, I hope you understand why the code works so you can create cooler effects and share it with others someday. This effect is really my favorite and the animation you saw in the previous page was only 856 bytes in size including the GIF image.

For a nice, compact effect, nothing really comes close to dethroning the magnetism of the continuously moving circle (or whatever you decide to use). One can spend a good deal of time simply moving the mouse pointer around the animation and watching the circles appear, disappear, grow, shrink, etc. If you are interested in the source code, click the Previous Page link and download both the MX and Flash 5 versions.

Previous Page

Discuss on kirupaforum.com