dynamic button movement with liquid stage

[jodiW 0 Likes (Newbie)]

hi there

 

i have built several top level nav buttons that i have pinned in a project that is set to:

 

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

 

var ls:LiquidStage = new LiquidStage(this.stage, 1920, 1080, 480, 320);

ls.attach(menu01_bu, ls.BOTTOM_LEFT);
ls.attach(menu02_bu, ls.BOTTOM_LEFT);
ls.attach(menu03_bu, ls.BOTTOM_LEFT);
ls.attach(menu04_bu, ls.BOTTOM_LEFT);
ls.attach(menu05_bu, ls.BOTTOM_LEFT);

 

this is great but some of these buttons have sub nav buttons, eg, if i click on menu02_bu i want to move all the buttons under menu02_bu (menu03_bu, menu04_bu, menu05_bu) down by 20 pixels to position a sub nav button (hidden at start), menu06_bu in between menu02_bu and menu03_bu (see attached jpeg of what i am trying to do)

 

the problem is that i originally had my project set as align BOTTOM_LEFT and could use specific y values, but now that it is TOP_LEFT (needs to be for a component i purchased), i can't use the y values

 

i know that i can do something like this:

 

//TweenMax.allTo([menu03_bu, menu04_bu, menu05_bu], 1, {y:"20"}, 0.1);

 

but the problem is that some pages use just the 5 top level buttons, some have one sub nav button that needs to appear, and another has 2 sub nav buttons, so there is a lot of movement required

 

is there a way to perhaps set a variable or some other option? thanks for your help

[jodiW 0 Likes (Newbie)]

sorry, me again

 

i could perhaps place all of the buttons in one menu_mc and pin that but i'm not sure if that would be a better idea

 

thanks, jodi

[GreenSock 8,117 Likes (Superhero)]

If I understand your dilemma correctly, yes, I would probably wrap your objects in a container Sprite and pin that (simply because it makes it easier to deal with). Then when the user clicks things and you have various other sub-menus show up, you figure out how much more/less space vertically it takes up and tween it accordingly using the LiquidPositionPlugin. This plugin basically allows you to define x and y coordinates as though the stage never scaled, and associate a pin to them (in this case ls.BOTTOM_LEFT) and it will automatically adjust things for you on the fly. There's some ASDoc documentation at http://www.greensock.com/as/docs/tween/ ... lugin.html

[jodiW 0 Likes (Newbie)]

thank you, jack - you are always very helpful! i will review the docs as well

 

best, jodi