Flash: Sprite Animation

[chili5]

Basic Animation of Sprites

Since we can change the location of sprites by changing the x or y coordinates, animation is easy. All that we have to do is constantly change the x or y positions. To do this, we can use the ENTER_FRAME event. This event runs when we enter a frame. Once one frame ends, a new one begins and this event occurs again. Thus the method is called again. This allows for a method to animate a sprite.

First, we need to draw something to animate. Again I am going to draw a smiley because they are simple and easy to draw.

My image:



The next thing we need to is convert it to a symbol. To do this, select the smiley on the stage. Right click and go to "convert to symbol". Make sure you change the name of the symbol, make it a movie clip and export for action script. This will place a symbol in your library.

On the stage, you have an instance of the symbol. In the properties window, you need to change the instance name.



Now, we can start entering our code. Go to the timeline, and on the first layer, go to the first keyframe and press F9. This opens the window for you to start writing your action script code.

First the event listener:

stage.addEventListener(Event.ENTER_FRAME,moveSmile);

This function is called everytime, we enter a new frame. Once the frame is done, we enter a new frame and this calls the method again. Now the method simply has to change the coordinates of the image.

function moveSmile(e:Event):void {
	smile.x ++;
}

This function makes him move left to right, at a rate of 1 unit(pixel) per frame. You can see what this looks like here.

To make him move down, you just increase the y coordinate.

function moveSmile(e:Event):void {
	smile.y++;
}

You can view this here.

Notice, that it just keeps moving forever. Eventually it will move off the stage. Even when it is moved off of the stage, it is still moving.

Diagonal Movement

This is as simple as changing both the x any coordinates.

Example:

function moveSmile(e:Event):void {
	smile.y++;
	smile.x++;
}

This is going to make him move diagonally to the bottom right. You can view the result here.

Instead of having the sprite slide across the stage, we can actually animate it. This is something that we will look into another day. This requires creating several frames for the movie clip. Then we can use code to tell us what frame we should go to next. This we will look at on a later day. However, this animation technique uses the same concepts as we are using here.

Keyboard Movement

Similary, we can use the concepts to make something move, when the user presses a key. The first thing we have to do is add an event listener at the stage level. This will listen for a key press. We will then use a callback function to determine which key the user pressed and move accordingly.

Go back to your actions panel, and erase whatever you have there.

The event listener we need is:

stage.addEventListener(KeyboardEvent.KEY_DOWN,moveSmile);

Everytime the user presses a key, we will call the moveSmile function. However, we don't want to move our smiley everytime we press a key. Why would we move if the key pressed is A? Since this is just a demonstration I am calling it moveSmile but a better name for the function would be keyPressed. All this function should do is determine which key was pressed and call an appropriate function for that key.

I'm not going to do that though.

function moveSmile(e:KeyboardEvent):void {
	switch (e.keyCode) {
		case Keyboard.UP:
			smile.y -= 5;
			break;
		case Keyboard.DOWN:
			smile.y += 5;
			break;
		case Keyboard.LEFT:
			smile.x -= 5;
			break;
		case Keyboard.RIGHT:
			smile.x += 5;
			break;
	}
}

The switch structure is more like a generalized if structure that assesses one variable. The movement code should make sense just by reading it. By including only the keys we care about, nothing happens when the user presses any other key. You can view the result here.

Mouse Movement

The last thing we are going to do is make him follow the mouse. There are two variables mouseX and mouseY that keep track of the location of the mouse's cursor. So we add an event listener for mouse move and in the callback function, we simply assign the mouseX and mouseY variables to the x and y variables of the smile. Easy, and it is cool.

stage.addEventListener(MouseEvent.MOUSE_MOVE,moveSmile);

function moveSmile(e:MouseEvent):void {
	smile.x = mouseX;
	smile.y = mouseY;
}

You can view the result here: Mouse Move.

Once we find out how to hide the user's mouse cursor, we could easily use this technique to create our own cursors.

[Jordan]

That is one creepy looking smilie. +rep

[WingedPanther]

I think we've found your new avatar. +rep