Home Tutorials Forums Articles Blogs Movies Library Employment Press
Old 04-02-2012, 10:23 PM   #1
AdamMead
Registered User
 
Join Date: Apr 2012
Posts: 9
Default Best way to expand rectangles

Problem resolved. Thanks all!

Last edited by AdamMead; 04-03-2012 at 01:13 PM.
AdamMead is offline  
Old 04-02-2012, 11:24 PM   #2
iamgotenks
Super Saiyan
 
iamgotenks's Avatar
 
Join Date: Nov 2011
Location: New Zealand
Posts: 345
Default

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.
iamgotenks is offline  
Old 04-03-2012, 02:06 AM   #3
[afz]snickelfitz
Senior Member
 
[afz]snickelfitz's Avatar
 
Join Date: Dec 2011
Location: Tucson, AZ
Posts: 2,397
Default

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)
ActionScript Code:
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
ActionScript Code:
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
ActionScript Code:
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);         }     } }
[afz]snickelfitz is offline  
Old 04-03-2012, 01:07 PM   #4
AdamMead
Registered User
 
Join Date: Apr 2012
Posts: 9
Default

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.
AdamMead is offline  
Closed Thread


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 11:10 AM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.