Tween Child Display Object Index getting screwed up

[gamesville]

Hi,

I have a set of buttons which trigger menu panels to tween up from below the screen. I want these menu panels to be displayed behind the buttons (which are displayed on the button edge of the screen). So I add the menus to the parent container, then I add the buttons, so that the menus would be behind the buttons and getChildIndex(buttons) = 1 and getChildIndex(menus) = 0.

The menus are correctly displayed behind the buttons when I comment out the tween code. But when I implement the tweens and start the tween of the menus, they do their motion tween but are displayed in front of the buttons instead of behind; somehow their display object index order got screwed up.

Some very simplified code:

from the Menu class:


this.tweenIn = new Tween(this, "y", Regular.easeOut, stageHeight, stageHeight - this.height, 2, true);

this.tweenOut = new Tween(this, "y", Regular.easeOut, stageHeight - this.height, stageHeight, 2, true);

tweenIn.stop();
tweenOut.stop();From Button class:


this.addEventListener(MouseEvent.CLICK, startTween);

function startTween(e:MouseEvent) {
myMenu.tweenIn.start();
}

Is this a known issue? Any workarounds?

Thanks a lot,
Jeremy

[el_bob]

i've run into it before. best thing i've found to do is rearrange depths on the fly.

[gamesville]

Do you think using Tweenlite or a different external Tween library would fix this?

[gamesville]

i've run into it before. best thing i've found to do is rearrange depths on the fly.

how would u rearrange the depths on the fly?

[sebrofm]

try adding the menu panels into a menu_container sprite so that the display hierarchy would look like:

toplevel
--->button1
--->button2
--->button3
--->menuContainer
--------->menuPanel1
--------->menuPanel2
--------->menuPanel3

because then if the index of the panels go screwy, they're still inside a container that is below the buttons

[gamesville]

try adding the menu panels into a menu_container sprite so that the display hierarchy would look like:

toplevel
--->button1
--->button2
--->button3
--->menuContainer
--------->menuPanel1
--------->menuPanel2
--------->menuPanel3

because then if the index of the panels go screwy, they're still inside a container that is below the buttons

I already am using containers...this is what it looks like:

toplevel
--->buttonContainer (childIndex = 1)
-------->button1
-------->button2
-------->button3
--->menuContainer (childIndex = 0)
-------->menu1
-------->menu2
-------->menu3

should I get rid of the button container?

[sebrofm]

i dont know... you could try. maybe this has something to do with the builtin tween engine - you could try TweenLite

[el_bob]

how would u rearrange the depths on the fly?
swapChildren(menuContainer, buttonContainer);

though you may have to swapChildren with the individual menuPanel clips and the buttonContainer.

[el_bob]

i dont know... you could try. maybe this has something to do with the builtin tween engine - you could try TweenLite
i've run into the same issue using that one, too.

[gamesville]

though you may have to swapChildren with the individual menuPanel clips and the buttonContainer.

Awesome! I did swapChildren(menu, buttonContainer) and it works!

Thanks!