+ Reply to Thread
Results 1 to 3 of 3

Thread: Flash: Sprites and Sprite Groups

  1. #1
    Code Slinger chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5 has a reputation beyond repute chili5's Avatar
    Join Date
    Mar 2008
    Posts
    7,023
    Blog Entries
    1

    Flash: Sprites and Sprite Groups

    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.

    Code:
    var box1:Sprite = new Sprite();
    var box2:Sprite = new Sprite();
    This creates 2 sprite objects that we are going to put on the stage.

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

    Now we are going to draw two boxes.

    Code:
    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:

    Code:
    var smile:smiley = new smiley();
    Now, we can add it to the box1 sprite.

    Code:
    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.

    Code:
    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.

    Code:
    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:

    Code:
    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.
    Attached Thumbnails Flash: Sprites and Sprite Groups-sprites.jpg  
    Last edited by chili5; 08-31-2009 at 07:45 AM.

  2. #2
    Administrator Jordan is a name known to all Jordan is a name known to all Jordan is a name known to all Jordan is a name known to all Jordan is a name known to all Jordan is a name known to all Jordan's Avatar
    Join Date
    Nov 2005
    Location
    Hendersonville, NC
    Posts
    24,556
    Blog Entries
    97

    Re: Flash: Sprites and Sprite Groups

    Very cool. I like that red smilie. +rep

  3. #3
    Super Moderator WingedPanther has much to be proud of WingedPanther has much to be proud of WingedPanther has much to be proud of WingedPanther has much to be proud of WingedPanther has much to be proud of WingedPanther has much to be proud of WingedPanther has much to be proud of WingedPanther has much to be proud of WingedPanther has much to be proud of WingedPanther's Avatar
    Join Date
    Jul 2006
    Age
    36
    Posts
    11,662
    Blog Entries
    57

    Re: Flash: Sprites and Sprite Groups

    The mustache and red mask are... odd +rep
    CodeCall Blog | CodeCall Wiki | Shareware
    Programming is a branch of mathematics.
    My CodeCall Blog | My Personal Blog

+ Reply to Thread

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

     

Similar Threads

  1. Need Your Help About Sprite Movement
    By jaypaul in forum General Programming
    Replies: 2
    Last Post: 06-25-2009, 05:45 AM
  2. Replies: 1
    Last Post: 06-16-2009, 10:32 AM

Bookmarks

Bookmarks

     
        Algorithms and Data Structures

        Java tutorials

        Algorithms Forum

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts