Best way to expand rectangles

[AdamMead]

Problem resolved. Thanks all!

[iamgotenks]

The easiest way by far is to use a custom library called TweenLite to resize and move the squares smoothly. Usually you would simply just stretch the box, but as you have text on it then that text will stretch aswell, so you can either disable the text during the resize, or seperate the text from the box and then only resize the box. If you still need more help then ask, and me (or someone else) will go into more detail.

[[afz]snickelfitz]

variables + TweenLite (or TweenMax)

The following basic example uses internal XML for the panel data, 3 Class files to construct the app, and TweenMax to tween the panels open or closed when clicked. (Obviously, you'll want to do a lot more with the panels; this just shows how variables can be used with TweenMax)
Live example: http://swfcabin.com/open/1333409611

No stage or library assets are required to compile this code; just an empty FLA with the Doc class set to Main, the following 3 class files, and the greensock AS3 classes "com" folder. (the preceding files are all in the same project directory)

Main.as (Document Class)

package 
{
    import flash.display.*;
    import flash.events.*;
    import com.greensock.*;
    
    public class Main extends Sprite
    {
        // objects referenced in this Class
        private var xml:XML;
        private var menu:Menu;
        private var currPanel:Panel;
        // remember the initial panel coordinates, width, height
        private var panelX:Number;
        private var panelY:Number;
        private var panelW:Number;
        private var panelH:Number;
        // remember if the panel is expanded or contracted
        private var expanded:Boolean;
        
        public function Main()
        {
            // data for the panels
            // each <item> is a panel with title, description and background color
            xml = 
            <nav>
                <item color="0xFF0000">
                    <title>Home</title>
                    <description>
                        Some text about Home...
                    </description>
                </item>
                <item color="0x00FF00">
                    <title>About</title>
                    <description>
                        Some text about About...
                    </description>
                </item>
                <item color="0x0000FF">
                    <title>Services</title>
                    <description>
                        Some text about Services...
                    </description>
                </item>
                <item color="0xFF9900">
                    <title>Contact Us</title>
                    <description>
                        Some text about Contact...
                    </description>
                </item>
                <item color="0xFF0099">
                    <title>Photos</title>
                    <description>
                        Some text about Photos...
                    </description>
                </item>
                <item color="0x9900FF">
                    <title>Videos</title>
                    <description>
                        Some text about Videos...
                    </description>
                </item>
            </nav>
            
            // panels start contracted, so expanded is false
            expanded = false;
            // create new menu, pass in an XMLList of items
            menu = new Menu(xml.item);
            // listen for click events
            // AS3 event propagation at work here
            menu.addEventListener(MouseEvent.CLICK, onClick);
            // position menu at the center of the stage
            menu.x = stage.stageWidth/2 - menu.width/2;
            menu.y = stage.stageHeight/2 - menu.height/2;
            // add menu to displaylist
            addChild(menu);
        }
        
        private function onClick(e:MouseEvent):void
        {
            // if the panel is not expanded, remember its coords, width, height
            // expand the panel
            // set expnaded to true
            if(!expanded)
            {
                // assign the event.target (the panel that was clicked) to currPanel
                currPanel = e.target as Panel;
                // panel coords
                panelX = currPanel.x;
                panelY = currPanel.y;
                // panel width and height
                panelW = currPanel.panel.width;
                panelH = currPanel.panel.height;
                // set exapnded to true
                expanded = true;
                // move currPanel to top of stack
                e.currentTarget.addChild(currPanel);
                // tween the panel coords
                TweenMax.to(currPanel, .5, {x:0, y:0});
                // tween the panel's child "panel" width and height
                TweenMax.to(currPanel.panel, .5, {width:menu.width, height:menu.height});
            }
            else
            {
                // if the panel is already expanded, contract it and set expanded to false
                expanded = false;
                TweenMax.to(currPanel, .5, {x:panelX, y:panelY});
                TweenMax.to(currPanel.panel, .5, {width:panelW, height:panelH});
            }
        }
    }
}

Menu.as

package 
{
    import flash.display.*;
    import flash.events.*;
    
    public class Menu extends Sprite
    {
        // reference to the XMLList passed into the class constructor
        private var list:XMLList;
        
        public function Menu(list:XMLList)
        {
            this.list = list;
            // pass in the number of items (panels to be constructed)
            build(list.length());
        }
        
        // build a grid with 3 columns
        private function build(n:int):void
        {
            // space between the panels
            var pad:int = 5;
            // index selector for the data
            var index:int = 0;
            // number of columns
            var col:int = 3;
            // calculate the number of rows based on the total number of panels (n)
            var row:int = Math.floor(n/col);
            // panel instance
            var p:Panel;
            
            for (var c:int = 0; c < col; c++)
            {
                for (var r:int = 0; r < row; r++)
                {
                    // instantiate a new panel, pass in the color, title and description
                    p = new Panel(list[index].@color, list[index].title, list[index].description);
                    //position the panel
                    p.x = (p.width + pad) * c;
                    p.y = (p.height + pad) * r;
                    // add the panel to the Menu instance
                    addChild(p);
                    // increment the XMLList index selector
                    index++;
                }
            }
        }
    }
}

Panel.as

package 
{
    import flash.display.*;
    import flash.events.*;
    import flash.text.*;
    
    public class Panel extends Sprite
    {
        public var panel:Shape;
        
        public function Panel(color:uint, title:String, description:String)
        {
            // set button properties
            buttonMode = true;
            mouseChildren = false;
            
            // add a colored rectangle to the class instance
            panel = new Shape();
            var g:Graphics = panel.graphics;
            g.beginFill(color);
            g.drawRect(0,0,240,120);
            g.endFill();
            addChild(panel);
            
            // add a textfield to the class instance with the title and description
            var t:TextField = new TextField();
            t.autoSize = TextFieldAutoSize.LEFT;
            t.text = title + "\n";
            t.appendText(description);
            t.x = t.y = 20;
            addChild(t);
        }
    }
}

[AdamMead]

Thank you! I shall have a read up on TweenLite and TweenMax and also have a read through the code you posted.

Thank you both for your replies! It is much appreciated.