AS3 addChild with multiple buttons top layer fails - actionscript-3

Question

this seems like an odd one as it seems pretty straight forward, I have a movieclip that contains a back and forward button to invoke a tween for 2 groups of buttons to slide accross the screenI addChild then make the tween and then removeChild for the old group of buttons to leave the new one on the screen.
My question is when the second group comes in with all the buttons the button that is on the top layer of the movieclip fails to work (rollOver Tween and all) if I change which button is on the top layer then that one fails.
any ideas as to why this may occur so I can make a fix?
code for process is below.
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.Strong;
import flash.events.*;
import flash.display.MovieClip;
fOverlay.addEventListener(MouseEvent.ROLL_OVER, mOver);
fOverlay.addEventListener(MouseEvent.ROLL_OUT, mOut);
fOverlay.addEventListener(MouseEvent.CLICK, mDown);
bOverlay.addEventListener(MouseEvent.ROLL_OVER, mOverB);
bOverlay.addEventListener(MouseEvent.ROLL_OUT, mOutB);
bOverlay.addEventListener(MouseEvent.CLICK, mDownB);
var butts1:MovieClip = new sButtons1;
var butts2:MovieClip = new sButtons2;
addChild(butts1);
butts1.x = -10;
butts1.y = 0;
function mOver(e:MouseEvent)
{
var mouseOTween:Tween = new Tween(fBack, "alpha", Strong.easeOut,0.2,0.8,1,true);
}
function mOut(e:MouseEvent)
{
var mouseOTween:Tween = new Tween(fBack, "alpha", Strong.easeOut,0.8,0.2,1,true);
}
function mOverB(e:MouseEvent)
{
var mouseOTween:Tween = new Tween(bBack, "alpha", Strong.easeOut,0.2,0.8,1,true);
}
function mOutB(e:MouseEvent)
{
var mouseOTween:Tween = new Tween(bBack, "alpha", Strong.easeOut,0.8,0.2,1,true);
}
function mDown(e:MouseEvent)
{
if (butts1.stage)
{
addChild(butts2)
butts2.x = 1832;
butts2.y = 0;
var nTweenout1:Tween = new Tween(butts1,"x", Strong.easeInOut, -10, -1860, 1, true);
var nTweenin1:Tween = new Tween(butts2,"x", Strong.easeInOut, 1832, -10, 1, true);
nTweenout1.addEventListener(TweenEvent.MOTION_FINISH, moFinish1);
function moFinish1(e:TweenEvent)
{
removeChild(butts1);
}
}
else if (butts2.stage)
{
addChild(butts1)
butts1.x = 1832;
butts1.y = 0;
var nTweenout2:Tween = new Tween(butts2,"x", Strong.easeInOut, -10, -1860, 1, true);
var nTweenin2:Tween = new Tween(butts1,"x", Strong.easeInOut, 1832, -10, 1, true);
nTweenout2.addEventListener(TweenEvent.MOTION_FINISH, moFinish2);
function moFinish2(e:TweenEvent)
{
removeChild(butts2);
}
}
else
{
MovieClip(root).addChild(butts1)
butts1.x = -10;
butts1.y = 0;
}
}
function mDownB(e:MouseEvent)
{
if (butts1.stage)
{
addChild(butts2)
butts2.x = -1860;
butts2.y = 0;
var nTweenoutB1:Tween = new Tween(butts2,"x", Strong.easeInOut, -1860, -10, 1, true);
var nTweeninB1:Tween = new Tween(butts1,"x", Strong.easeInOut, -10, 1832, 1, true);
nTweenoutB1.addEventListener(TweenEvent.MOTION_FINISH, moFinish3);
function moFinish3(e:TweenEvent)
{
removeChild(butts1);
}
}
else if (butts2.stage)
{
addChild(butts1)
butts1.x = -1860;
butts1.y = 0;
var nTweenoutB2:Tween = new Tween(butts1,"x", Strong.easeInOut, -1860, -10, 1, true);
var nTweeninB2:Tween = new Tween(butts2,"x", Strong.easeInOut, -10, 1832, 1, true);
nTweenoutB2.addEventListener(TweenEvent.MOTION_FINISH, moFinish4);
function moFinish4(e:TweenEvent)
{
removeChild(butts2);
}
}
else
{
addChild(butts1)
butts1.x = -10;
butts1.y = 0;
}
}

Answer 1

I suspect you've got objects overlapping eachother. In that case, only the top-most object will receive the mouse event. If so, it is expected behavior. An example of this can be seen with a transparent png.
Without the rest of your DisplayList structure or appearance of your UI, I can't say exactly what's plaguing your events. However, I think the code below might help clear up some things.
import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.Strong;
import flash.events.*;
import flash.display.MovieClip;
var butts1:MovieClip = new sButtons1;
var butts2:MovieClip = new sButtons2;
var lookup:Dictionary = new Dictionary(true);
var removeTarget:MovieClip = null; // This is the next object to be removed from onscreen
var onComplete:Tween = null; // A reference to the tween the calls our remove
function init():void {
// It's healthy to keep your initialization routine grouped away from the rest of your program logic.
// Optionally, you can recall the function to rerun first time setup, if necessary.
addChild(butts1);
butts1.x = -10;
butts1.y = 0;
// Use event target as a key in our dictionary to correspond which objects should be hidden/shown
// This way, we can keep our code consistent and maintainable from one function.
lookup[fOverlay] = {
"back":fBack,
"out":butts1,
"in":butts2
}
lookup[bOverlay] = {
"back":bBack,
"out":butts2,
"in":butts1
}
// Because we're registering the same events to the same functions, we can handle it through a loop.
var overlayEvents:Array = ["rollOver", "rollOut", "click"];
for (var overlay in lookup) {
for each (var type:String in overlayEvents) {
overlay.addEventListener(type, overlayListener, false, 0, true);
}
}
}
function overlayListener(e:MouseEvent):void {
// Having generalized our objects, we swap for the appropriate object based on the type of event.
switch (e.type) {
case "rollOver":
new Tween(lookup[e.currentTarget].back, "alpha", Strong.easeOut,0.2,0.8,1,true);
break;
case "rollOut":
new Tween(lookup[e.currentTarget].back, "alpha", Strong.easeOut,0.8,0.2,1,true);
break;
case "click":
var show:MovieClip, hide:MovieClip;
if (lookup[e.currentTarget].out.stage) {
hide = lookup[e.currentTarget].out;
show = lookup[e.currentTarget].in;
} else if (lookup[e.currentTarget].in.stage) {
hide = lookup[e.currentTarget].in;
show = lookup[e.currentTarget].out;
} else {
show = butts1;
addChild(show);
}
show.x = 1832;
show.y = 0;
new Tween(hide, "x", Strong.easeInOut, -10, -1860, 1, true);
if (hide != null) {
removeTarget = hide;
if (onComplete != null) {
onComplete.stop()
onComplete.rewind()
}
onComplete = new Tween(show, "x", Strong.easeInOut, 1832, -10, 1, true);
onComplete.addEventListener("motionFinish", remove, false, 0, true);
}
break;
}
}
function remove(e:Event):void {
if (removeTarget != null) {
removeChild(removeTarget)
removeTarget = null;
onComplete.removeEventListener("motionFinish", remove);
onComplete = null;
}
}
init();