Making Grid with MovieClip. Help Please.

[pirzada]

All I want to make a grid with movieClip. But I can't make no matter how much time I have used exploring and trying.

I have 2 movieClips and button
1 - mc_main
2 - Row

Both movieClips are linked to classes. mc_main is on stage its a small dot.
when I press button a new instance of Row should be attached to mc_main and should append. Below is code if anyone tell me how to attachieve this.

Do you have any code to share if you have done something like that to learn from it please.

package  
{
    import flash.display.MovieClip;
    import flash.events.*;
    public class Main extends MovieClip 
    {

        public function Main() 
        { 
            cmd_create.addEventListener(MouseEvent.CLICK, cmd_create_click);
        }
        
        private function cmd_create_click(evt:Event):void
        {
            var test:mc_main = new mc_main();
            test.addChild(new Row());
        }
    }



package  {
    import flash.display.MovieClip;
    public class Row extends MovieClip {

        public function Row() 
        { 
            trace("row");
        }

    }
    
}


package  {
    import flash.display.MovieClip;
    public class Mc_main extends MovieClip{

        public function Mc_main() 
        { 
            trace("Mc_main");
        }

    }
    
} 

[5TonsOfFlax]

You need to add test to the displayList in order for it to show up. Though the structure makes me wonder whether you've got something confused.

        private function cmd_create_click(evt:Event):void
        {
            var test:mc_main = new mc_main();
            test.addChild(new Row());
            addChild(test);
        }

[pirzada]

Can you improve the structure please. I want to see your approach please.

[pirzada]

I see the movieClip now but its just showing up top left corner of stage and not aligning at the corner of mc_main. Do I need to work on x and y axis or is there anything easy as this Row is attached to mc_main. Anything you can share please.

[5TonsOfFlax]

I can't really because I'm not entirely sure what represents what in your project.

But I'll tell you what looks weird:
You posted an Mc_main class, but used an mc_main class.

You create both an mc_main and a Row in cmd_create_click. Since I can't tell what mc_main is for, it seems superfluous.

Your subject indicates you're trying to make something like a grid, but there's nothing in here that positions anything. You do have a thing called a Row, so maybe the columns in that row are coming later.

Unless there is frame script, you don't need to extend MovieClip. A Sprite is a little lighter and will work fine.

Now for the good stuff:
I like that you're using external classes even before you need them for functionality. It's a good way to get a head start.
I also like that you are typing all your variables and return types, this is just good practice.

Keep trying, you'll have something up and running in no time.

[5TonsOfFlax]

As far as positioning goes, unless you specify otherwise, things go at (0,0). This is the registration point of your clips. For entirely code-generated stuff, it's generally the upper-left corner.

Do you have an instance named mc_main on the stage that you were trying to attach the Row to? There are 2 problems with that:
1) you can't have a class and a variable called the same thing (you can have an instance with that name and a class, but don't. It's confusing). So rename the instance on the stage.
2) instead of creating a new mc_main (the class, not the thing on stage), you want to use the thing on stage already.

So, assuming you rename it "maininstance", you'd do this:

        private function cmd_create_click(evt:Event):void
        {
            maininstance.addChild(new Row());
        }

That will work great for the first one, but all the subsequent ones will also go at the same place.

To automatically move them down, you could do:

        private function cmd_create_click(evt:Event):void
        {
            var h:Number = maininstance.height;
            var r:Row = new Row();
            r.y = h;
            maininstance.addChild(r);
        }

[pirzada]

Thanks for the good things . Actually I am programmer from C# ASP.NET and recently started working flash. Working with Flash is frustrating now hehe when I can not perform simple tasks but I know its learning process and I will learn it no matter what.

Actually above was simple test example to make thing work.
I have used Row class where I will code more like displaying userinfo and setting that Row color and few things on and off. So I need that there. There are no columns just full row. You can say one full column.

I will add things in mc_main as well.

Onething please.
I see the Row is showing on the stage at top left corner. How can I make it to corner left start from that mc_main dot movieClip.

thanks for the help.

[5TonsOfFlax]

I'm not sure if my last post answered your question or whether you saw it. To re-iterate:
When you add a child to a parent, it goes at that parent's (0,0). You can then adjust it's x and y properties to move it relative to that parent.

The Row was going to the upper left corner because it was at (0,0) of the new mc_main that was created. And that new mc_main was at (0,0) of the stage, which is the upper left. If you wanted to attach the row to something already on the stage, then you need to get a reference to that thing first.

[pirzada]

Yes got it. Reading and testing work.
Thanks let you know if any problem.

[pirzada]

ok here is the test result. I removed mc_main class and instead that dot on stage instance name is mc_main. Now below is the code. Good thing is that alignment is auto when I did that and Row was attached right at the mc_main.

One Question:
How can I added multiple instances of new Row to that mc_main and append it?

package  
{
    import flash.display.MovieClip;
    import flash.events.*;
    public class Main extends MovieClip 
    {
        public function Main() 
        { 
            cmd_create.addEventListener(MouseEvent.CLICK, cmd_create_click);
        }
        
        private function cmd_create_click(evt:Event):void
        {
            mc_main.addChild(new Row());
            addChild(mc_main);
        }
    }
}

package  {
    import flash.display.MovieClip;
    public class Row extends MovieClip {

        public function Row() 
        { 
            trace("row");
        }
    }
} 

[5TonsOfFlax]

You need to position each new row to be in a different space than the last.

        private function cmd_create_click(evt:Event):void
        {
            var h:Number = mc_main.height;
            var r:Row = new Row();
            r.y = h;
            mc_main.addChild(r);
        }

Note that you do NOT have to call addChild(mc_main) now because mc_main is already on the stage. Calling it again will re-add it to the root, and the only effect it will have is going to the top of root's displayList.

[pirzada]

I got every word you said and its working fine. Here is fix.
I will experiment and play it more.

I am really greatful and thanks alot for your time and help. cy later

package  
{
    import flash.display.MovieClip;
    import flash.events.*;
    public class Main extends MovieClip 
    {
        public function Main() 
        { 
            cmd_create.addEventListener(MouseEvent.CLICK, cmd_create_click);
        }
        
        private function cmd_create_click(evt:Event):void
        {
            var r:Row = new Row();
            var h:Number = mc_main.height;
            r.y = h;
            mc_main.addChild(r);
        }
    }
} 

[pirzada]

Working on more with Grid display.

I made 2 rows with different background color and imported in flash.

Made another movieClip with Name as manageRows and linked class as RowClass.
In manageRows timeline I set above both row graphics with 2 labels called roomName_lb and roomCount_lb on them.

How I can access the movieClip labels in the manageRows movieClip?
At head 1 called Frame name r0 and 10 is called r1. both heads have keyframes and different row colors. How I access the r0 and stop there? like manageRows.gotoAndStop(r0)?

Below is the link to download FLA with everything set
FLA

below are the classes. No sure what to do .

Thanks

package  
{
    import flash.display.MovieClip;
    import flash.events.*;
    public class Main extends MovieClip 
    {
        public function Main() 
        { 
            cmd_create.addEventListener(MouseEvent.CLICK, cmd_create_click);
        }
        
        private function cmd_create_click(evt:Event):void
        {
            for(var i=0; i < 5; i++)
            {
                var r:RowClass = new RowClass("Room " + i, 500+i, i);        
                var h:Number = mc_main.height;
                r.y = h;
                mc_main.addChild(r);
            }
        }
    }
}


package  {
    import flash.display.MovieClip;
    public class RowClass {
        var rN:String = "";
        var rC:Number = 0;
        var ind:Number = 0;
        public function RowClass(roomName:String, roomCount:Number, index:Number) 
        { 
            /*rN = roomName;
            rC = roomCount;
            ind = index;
            PrepareRow();*/
        }
        
        private function PrepareRow():void
        {
            this.gotoAndStop("r0");
            this.roomName_lb.text = rN;
            this.roomCount_lb.text = rC;
            trace("rN=" + rN + " rC=" + rC + " ind=" + ind);
        }
    }
} 

[5TonsOfFlax]

The code you posted looks okay. What errors are you getting? Of course, with the call to PrepareRow commented out, that function won't run.

[pirzada]

I commented to test. Below is the RowClass.
Error is
1119: Access of possibly undefined property roomName_lb through a reference with static type RowClass.
1119: Access of possibly undefined property roomCount_lb through a reference with static type RowClass.

package  {
    import flash.display.MovieClip;
    public class RowClass extends MovieClip
    {
        var rN:String = "";
        var rC:Number = 0;
        var ind:Number = 0;

        public function RowClass(roomName:String, roomCount:Number, index:Number) 
        { 
            rN = roomName;
            rC = roomCount;
            ind = index;
            PrepareRow();
        }
        
        private function PrepareRow():void
        {
            this.gotoAndStop("r0");
            this.roomName_lb.text = rN;
            this.roomCount_lb.text = rC;
            trace("rN=" + rN + " rC=" + rC + " ind=" + ind);
        }
    }
} 

[5TonsOfFlax]

You can use getChildByName to get those. I'm never quite sure what "auto-declared" variables will work or not.

package  {
    import flash.display.MovieClip;
    public class RowClass extends MovieClip
    {
        var rN:String = "";
        var rC:Number = 0;
        var ind:Number = 0;

        public function RowClass(roomName:String, roomCount:Number, index:Number)
        {
            rN = roomName;
            rC = roomCount;
            ind = index;
            PrepareRow();
        }
        
        private function PrepareRow():void
        {
            this.gotoAndStop("r0");
            var rnlb:MovieClip = MovieClip(getChildByName('roomName_lb'));
            rnlb.text = rN;
            var rclb:MovieClip = MovieClip(getChildByName('roomCount_lb'));
            rclb.text = rC;
            trace("rN=" + rN + " rC=" + rC + " ind=" + ind);
        }
    }
}

[pirzada]

Did what you said but gives an error

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at RowClass/PrepareRow()
at RowClass()
at Main/cmd_create_click()

[5TonsOfFlax]

Then one or the other of those is not on the displayList at the time of PrepareClick.

[5TonsOfFlax]

You might want to use addFrameScript to add script to run at particular frames. It's not officially documented.
http://www.kirupa.com/forum/showthread.php?p=2098269

[pirzada]

hmm this is confusing. Don't know how to use addFrameScript. Read the whole thread. Any hints to get going with this?