Guess

Something that Flash is really good for is games. While Macromedia's Director is used for the complex web-based games, Flash has the capabilities to help you create great games. If you do not believe me, play some excellent Flash games on Ferry Halim's site Orsinal: http://www.ferryhalim.com/orisinal/

Needless to say, I do not have the intricate knowledge of programming (yet) to create great games as Mr. Halim. But I do know how to create some simple games and the basics behind creating them. Here is an example of the Guess the Numbers game:

This tutorial will help you to create a simple "guess the numbers" game. More specifically, the tutorial will be broken down into the following parts:

• Planning The Game
• Creating the Interface
• Coding
• Polishing it Up

Simple Movement along the X Axis
The best way to start exploring movement is to take a simple object and move it horizontally along the x axis. The following is an example of an object that moves along the x axis powered by only a few lines of code:

[ press the 'start over' text if you do not see anything ]

Let's create the above animation:

1. Click here to open an FLA that contains nothing but the interface. Don't worry, you will add the cool code to make the box move by yourself.
    
2. Once you have opened the xmovement.fla file you downloaded from the above link, you should see a movie clip of a box.
    
4. Right click on the box and select Actions. The Actions dialog box will appear. Copy and paste the following lines of code into the Actions dialog box:

onClipEvent(enterFrame) { speed = 1; this._x += speed; }

[ copy and paste the above code into the Actions dialog box ]

5. Preview the animation. You will notice that the box moves across slowly.

ActionScript Explained
Not to leave you in the dark, I will explain what each line of the code accomplishes.

onClipEvent(enterFrame) {
     speed = 1;
     this._x += speed;
}

The first line is nothing more than the OnClipEvent event handler (enterFrame) that executes the code continuously in a one frame movie clip.

In the second line, I am declaring and initializing the variable speed with a value of 1. As is expected, the variable speed refers to the speed at which the object will move.

In the third line, I set the current position of the movie clip (this._x) to continuously increment with the value of speed. You know I am incrementing because of the operator += following the statement this._x.

What is happening?
Let me explain what happens in the code. As I explained above, enterFrame continuously executes the code under it. The speed at which the object moves will be 1. Therefore, the first time the code runs through, the current X position of the movie clip increases by a value of 1. The second time the code runs through, the current X position of the movie clip increases by another value of 1.

This process gets repeated numerous times (25 times per second to be exact) to simulate movement. The speed at which the code executes depends on the frames per second (FPS) of the movie.

To understand the concepts more, try the exercises listed in Exploring Further.
 

EXPLORING FURTHER Try the following little modifications and observe the results: In the code, set the value for speed equal to 2 instead of 1. Preview the animation.   Drag the box all the way to the right side of your stage and set the value for speed to -2 instead of positive 2. Notice the big difference that is visible.   Modify the code by replacing _x with _y. Preview the animation and check out the changes.

If you tried the Exploring Further modification mentioned in the above box, your animations will look like the following. Do not hesitate to press the [ start over ] text to view the animation again (or for the first time).

Modification A
By changing the variable for speed from 1 to 2, we are changing the speed at which the x position increases. The higher the number, the faster the movement. Therefore, the box moves more quickly from the left to the right: