StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POFlash Form: Expand/Contract Sections - My AS3 Code is running wild.. need advice
text
Body
copied!<p>This question is related to: CS5 FLASH + AS3</p> <p>Hello,</p> <p>I am simply trying to mimic the collapse/expand functionality in the following link: <a href="http://static.geewax.org/checktree/index.html" rel="nofollow">http://static.geewax.org/checktree/index.html</a></p> <p>The form itself does not need to be functional.</p> <p>This is my first AS3 project, and I believe I am making things too complicated and the code is just getting so crazy I keep losing myself in it. I tried making certain functions for things that are repetitive, but all my attempts fail :(.</p> <p>What I was able to accomplish:</p> <ol> <li><p>Create checkboxes+labels dynamically from an array and properly position them underneath eachother.</p></li> <li><p>Clicking Section, causes checkboxes to appear/disappear</p></li> <li><p>Clicking 1st Section, automatically repositions 2nd section correctly.</p></li> </ol> <hr> <p>My Issue,</p> <p>I can not find a viable way to reposition the checkboxes that are underneath the 2nd section when the 1st section expands/collapses. I basically need these checkboxes to always be located under the 2nd section.</p> <p>Here is my code:</p> <pre><code>stop(); import fl.controls.CheckBox; import fl.controls.RadioButton; //General Variables var i:int; // Tab1 Group 1 var tab1_gp1_main:CheckBox = new CheckBox(); addChild(tab1_gp1_main); tab1_gp1_main.move(0, 20); tab1_gp1_main.width = 120; tab1_gp1_main.label = "Landscape"; // Tab1 Group 2; var tab1_gp2_main:CheckBox = new CheckBox(); addChild(tab1_gp2_main); this.tab1_gp2_main.move(0, 20 + tab1_gp1_main.y ); tab1_gp2_main.width = 120; tab1_gp2_main.label = "Performance"; // Section Click Listeners tab1_gp1_main.addEventListener(MouseEvent.CLICK, sectionHandler); tab1_gp2_main.addEventListener(MouseEvent.CLICK, sectionHandler); //Declare Number of Options; var tab1_grp1_Options:int = 4; var tab1_gp1_op_Labels:Array = ["Test1","Test2","Test3","Test4","Test5"]; var tab1_grp2_Options:int = 4; var tab1_gp2_op_Labels:Array = ["Test1","Test2","Test3","Test4","Test5"]; //Section Click Functions; function sectionHandler(event:MouseEvent):void { switch (event.currentTarget) { case tab1_gp1_main : switch (tab1_gp1_main.selected) { case true : for (i=0; i<=tab1_grp1_Options; i++) { //Option Creation Loop var tab1_gp1_op:CheckBox = new CheckBox(); tab1_gp1_op.name = "tab1_gp1_op" + i; addChild(tab1_gp1_op); //Add Properties for Options tab1_gp1_op.label = tab1_gp1_op_Labels[i]; tab1_gp1_op.width = 120; //Position 1st Option Below Main if (tab1_gp1_op.name == "tab1_gp1_op0") { tab1_gp1_op.move(20, 20 + this.tab1_gp1_main.y); } else { //Position Options > 1st below it var prevOptionNum:int = i - 1; var prevOption:CheckBox = getChildByName("tab1_gp1_op" + prevOptionNum) as CheckBox; tab1_gp1_op.move(20, 20 + prevOption.y); } //Testing trace(tab1_gp1_op.name); trace(tab1_gp1_op.label); trace(tab1_gp1_op.y); } ExpandCollapse("tab1_gp1_main_selected"); break; default : //Remove all options for a section for (i=0; i<=tab1_grp1_Options; i++) { var RemoveOption:CheckBox = getChildByName("tab1_gp1_op" + i) as CheckBox; trace("unselected"+RemoveOption); removeChild(RemoveOption); } ExpandCollapse("tab1_gp1_main_unselected"); } break; case tab1_gp2_main : switch (tab1_gp2_main.selected) { case true : for (i=0; i<tab1_grp2_Options; i++) { //Option Creation Loop var tab1_gp2_op:CheckBox = new CheckBox(); tab1_gp2_op.name = "tab1_gp2_op" + i; addChild(tab1_gp2_op); //Add Properties for Options tab1_gp2_op.label = tab1_gp2_op_Labels[i]; tab1_gp2_op.width = 120; //Position 1st Option Below Main if (tab1_gp2_op.name == "tab1_gp2_op0") { tab1_gp2_op.move(20, 20 + tab1_gp2_main.y); } else { //Position Options > 1st below it var tab1_gp2_op_prevnum:int = i - 1; var tab1_gp2_op_prevopt:CheckBox = getChildByName("tab1_gp2_op" + tab1_gp2_op_prevnum) as CheckBox; tab1_gp2_op.move(20, 20 + tab1_gp2_op_prevopt.y); } //Testing trace(tab1_gp2_op.name); trace(tab1_gp2_op.label); trace(tab1_gp2_op.y); } break; default : //Remove all options for a section for (i=0; i<tab1_grp2_Options; i++) { var tab1_gp2_op_remove:CheckBox = getChildByName("tab1_gp2_op" + i) as CheckBox; trace("unselected"+tab1_gp2_op_remove); removeChild(tab1_gp2_op_remove); } } break; } } function ExpandCollapse(SectionClicked:String):void { switch (SectionClicked) { case "tab1_gp1_main_selected" : var lastOption:CheckBox = getChildByName("tab1_gp1_op" + tab1_grp1_Options) as CheckBox; tab1_gp2_main.move(0, 20 + lastOption.y); break; case "tab1_gp1_main_unselected" : tab1_gp2_main.move(0, 20 + tab1_gp1_main.y); break; default : } } </code></pre> <p>Thank you in advance.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload