How To Make Your Characters Come To Life in Flash

Our first lesson that we'll teach the aspiring video game designer is the very basics of moving a character in Flash. In any game, obviously control over the character's movement is paramount.

To understand how our character can move, first you must be familiar with how the axes (the horizontal and vertical planes, or x and y) work in Flash. Unlike the coordinate plane that you may be familiar with from your math classes, the origin (0,0) in Flash is not in the dead center of the screen, but rather in the top-left corner. As you increase the x value of the coordinate, the location moves right, and increasing the y value of a coordinate moves an object down.

In Flash, there are certain parameters that objects like movie clips possess: their position on the x axis, their position on the y axis, their height, width, and their rotation degree; just to name a few. These parameters are known as properties, and can easily be manipulated to change the orientation of the object. Properties are expressed by their name, which is prefixed with an underscore (_). For example, the way to change the position of any movie clip would be expressed as:

_root.myMovieClip._x += 5;

To create a movie clip of your own, draw any object on the stage, highlight your drawn object, and press F8 or select "Convert to Symbol..." under the Modify menu. A dialogue box will appear, allowing you to create a movie clip, button, or graphic symbol. Select "movie clip" and make sure you give your movie clip a relevant name simply for organizational purposes. A movie clip is essentially a drawn object that can be programmed to behave in a certain way with Flash's built-in ActionScript language. Movie clips run completely independent of the main animation timeline. To enter code or "Actions" into your movie clip, you must highlight your desired movie clip and select "Actions" from the Window menu, or simply press F9.

It's important to note that when entering Actions into a movie clip, all code must be contained within onClipEvent() handlers. Typically, the two handlers you'll use the most is onClipEvent(load), and onClipEvent(enterFrame). onClipEvent(load) script executes once when the movie clip first loads, and onClipEvent(enterFrame) executes all the code contained within every frame. If your movie has a frame rate of 30 frames per second, then onClipEvent(enterFrame) code is executed 30 times per second.

This script, assuming that your movie clip has the instance name, "myMovieClip" will first find the value of _x in myMovieClip. Let's assume that particular movie clip is located at the origin (0,0) in the top-left corner. After this command is executed, the clip will be located at (5,0), which will locate the clip 5 pixels to the right of where it was originally. This is the foundation for moving characters and objects around on the screen.

Now all that we must do is allow the user to press and hold down arrow keys to force our character or object to move in any direction. (up, down, left, right, and all four diagonal directions in-between each of them) To do this, we have to use conditional testing (if statements) every frame to test to see if one of the arrow keys have been pressed, and manipulate our character's _x and _y properties accordingly.

onClipEvent(enterFrame){

if (Key.isDown(Key.LEFT)){
this._x -= 5;
}

if (Key.isDown(Key.RIGHT)){
this._x += 5;
}

if (Key.isDown(Key.UP)){
this._y -= 5;
}

if
(Key.isDown(Key.DOWN)){
this._y += 5;
}

}

This code ensures that Flash will check every time a new frame is loaded to see if one of the arrow keys is pressed, and move your movie clip based on which arrow keys are pressed. Your character can even move in diagonal directions with this very simple script. It should be noted that using the default frame rate of 12 frames per second will produce a very slow and 'choppy' effect. Typically, 30 frames per second is a good frame rate for a Flash video game. To alter the your document's frame rate, simply right-click an empty part of the stage in Flash and select "Document Properties."