Flash: Sprites and Sprite Groups

[chili5]

Sprites

Just like you can add things to the stage with addChild, you can also add things (like shapes and other things) to other containers.

In this tutorial, we are going to make a few sprites on the stage. Then we are going to add some sprites on to the other sprites. This will get us a lot closer to being able to make some nifty games with depth.

First, you want to create a new flash file called sprites.

On the timeline, go to layer 1 and open the actions window. We are going to add two sprites to the stage.

var box1:Sprite = new Sprite();
var box2:Sprite = new Sprite();

This creates 2 sprite objects that we are going to put on the stage.

stage.addChild(box1);
stage.addChild(box2);

Now we are going to draw two boxes.

box1.graphics.beginFill(0xE3FE34);
box1.graphics.drawRect(50,30,200,200);
box2.graphics.beginFill(0xE3FE34);
box2.graphics.drawRect(260,30,200,200);

This will look like this:



Now what we are going to do is add a sprite onto the two rectangles. When the user moves the mouse over the sprite, the sprite will move to the other sprite. I am going to draw a smiley on the stage, and have him move around the two rectangles when the user puts the mouse on him.

Using the tools in the flash environment, draw something that you like to draw. When you draw a smiley, follow these instructions to convert it to a symbol:

1. Select your drawing using the selection tool
2. Right click, and go to convert to symbol
3. In the window that appears, you need to give the symbol an appropriate name. I called mine "smiley".
4. You need to set it to a movie clip.
5. Click the box export for action script.
6. Click okay.
7. Clear the stage.

Now, you can go back to your action panel on the first frame. We need to create an instance of the object we just created and add it to box1.

We can easily create an instance like this:

var smile:smiley = new smiley();

Now, we can add it to the box1 sprite.

box1.addChild(smile);

Here I specify that I want to add smile as a child of box1. Now, you will see why I say stage.addChild instead of addChild. Even though I don't have to say stage.addChild it makes sense if I can read it, and understand what I am adding the component/sprite to.

Let us change the position of the smile.

smile.x = 50;
smile.y = 40;

Note, that the coordinates are relative to the top left of the container. In this case, box1 not box2.

Now the event listener.

box1.addEventListener(MouseEvent.MOUSE_OVER,moveSprite);
box2.addEventListener(MouseEvent.MOUSE_OVER,moveSprite);

Notice, how the two sprites use the same callback function? This is useful because we can use the callback function to determine which sprite caused the event. Then we just move the simile sprite to that box.

The event.currentTarget property will hold a reference to the item that caused the event. We can then use this to add the smiley to the other box. A sprite can only be a child of one object, which is why it is seemingly removed from one box and added to a second one.

The final code is:

var box1:Sprite = new Sprite();
var box2:Sprite = new Sprite();
var smile:smiley = new smiley();

box1.graphics.beginFill(0xE3FE34);
box1.graphics.drawRect(50,30,200,200);

box1.x = 50;
box1.y = 50;

box2.graphics.beginFill(0xE3FE34);
box2.graphics.drawRect(80,60,200,200);

box2.x = 250;
box2.y = 20;

smile.x = 100;
smile.y = 100;

stage.addChild(box1);
stage.addChild(box2);
box1.addChild(smile);


box1.addEventListener(MouseEvent.MOUSE_OVER,moveSprite);
box2.addEventListener(MouseEvent.MOUSE_OVER,moveSprite);

function moveSprite(event:MouseEvent) {
	event.currentTarget.addChild(smile);
}

You can view the result here: Sprites.

[Jordan]

Very cool. I like that red smilie. +rep

[WingedPanther]

The mustache and red mask are... odd +rep