Dynamic grid using FlashDevelop & Actionscript 2.0

Question

I'm new to actionscript. What I'm tryin to do is simulate traffic flow near a 2 lane intersection, following Wolfram's rule 184. To begin with, I'm trying to create a grid (8x8 of which the intersection is between the middle two rows and the middle two columns, like a plus sign) whose cells have the following attributes:

color = white;
car = false;
when clicked:
 color = red;
 car = true (a car is present);

So, after the user clicks cells to position the cars initially and presses the start button, the simulation will begin.

Here's my code so far (apologies for incorrect formatting):

class Main 
{
private var parent:MovieClip;

public static function main(mc:MovieClip) 
{
    var app = new Main(mc);
}

public function Main(mc:MovieClip) 
{
    this.parent = mc;

    //grid settings
    var Cell:MovieClip = mc.createEmptyMovieClip("cell", mc.getNextHighestDepth());
    var x:Number = 0;
    var y:Number = 0;
    var color:Number = 0xffffff;
    var car:Boolean = false;
    for (y = 0; y < 3 * Stage.height / 8; y += Stage.height / 8)
    {
        for (x = 3*Stage.width/8; x < 5*Stage.width/8; x+=Stage.width/8)
        {
            UI.drawRect(Cell, x, y, (Stage.width / 8) - 5, (Stage.height / 8) - 5, color, 100);
        }
    }
    for (y = 3*Stage.height/8; y < 5 * Stage.height / 8; y += Stage.height / 8)
    {
        for (x = 0; x < Stage.width; x+=Stage.width/8)
        {
            UI.drawRect(Cell, x, y, (Stage.width / 8)-5, (Stage.height / 8)-5, color, 100);
        }
    }
    for (y = 5*Stage.height/8; y < Stage.height; y += Stage.height / 8)
    {
        for (x = 3*Stage.width/8; x < 5*Stage.width/8; x+=Stage.width/8)
        {
            UI.drawRect(Cell, x, y, (Stage.width / 8)-5, (Stage.height / 8)-5, color, 100);
        }
    }
    Cell.onMouseDown()
    {
        Cell.color = UI.RED;
        Cell.car = true;
    }
}
}

I know there's quite a few things gone wrong here. First of all, the cell color doesn't change on mouse down. Do i need to make movie clip for each cell in the for loops? I think it would be easier to make a grid of objects with given attributes, but i don't know how to do that. Would really appreciate if someone helps me out.

score 0 · Accepted Answer · answered Jul 05 '11 at 16:18

From what I can tell, issue with your current approach is that using drawRect() literally draws pixels on to the stage, which means you'll have no reference to those shapes in future frames. right now, you've got one MovieClip that has been drawn many times. What you need is a lot of MovieClips so you have a reference to each cell that you can update/edit every frame.

Your best bet is to do the following (I'll just provide pseudo because I'm a bit shaky on AS2 syntax):

A) Create an array to hold all of the Cells. Call it:

var Cells:Array = new Array();

B) During each step of the loops in your constructor, do 4 things.

1) Create a new MovieClip `var tempCell:MovieClip = new MovieClip();

2) Draw a rectangle on to each MovieClip: A tutorial for the graphics API in AS2 http://www.actionscript.org/resources/articles/727/1/Drawing-shapes-with-AS2/Page1.html

3) Add an event listenerto each MovieClip that points to a common event handler. This listener listens for mouse clicks on that MovieClip (or MOUSE_DOWN)

4) and use Cells.push(tempClip) to add that new MovieClip to your array so you now have one object that contains a reference to all of your cells.

C) Create an click event handler that redraws the cell that has been clicked. Try MouseEvent.target

You have another option to using the graphics API to draw rectangles, and that is to simply add and remove stock graphics from your Flash library. You'll have to draw these graphics in Flash and then 'Export for Actionscript' to call them up.

Hope this points you in the right direction!

J

Dynamic grid using FlashDevelop & Actionscript 2.0

1 Answers1