Question

I am working on a zooming square navigation project (visually like Windows Metro, but squares take over the screen when clicked on). I’m having trouble getting the squares to the top layer (setChildIndex). Here is the code for when a square is clicked on:

function zoom(event:MouseEvent):void {
    // saves location and size of icons
    returnto = event.currentTarget;
    returntoX = event.currentTarget.x;
    returntoY = event.currentTarget.y;
    returntoWidth = event.currentTarget.width;
    returntoHeight = event.currentTarget.height;
    // turn off button behaviours
    event.currentTarget.buttonMode = false;
    event.currentTarget.alpha = 1;
    event.currentTarget.removeEventListener(MouseEvent.MOUSE_OVER, rollover);
    event.currentTarget.removeEventListener(MouseEvent.CLICK, zoom);
    event.currentTarget.removeEventListener(MouseEvent.ROLL_OUT, rollout);
    // put clicked box on top
    setChildIndex(returnto, numChildren-1);
    // fade out icon decor
    TweenLite.to(returnto.decor, .25, {alpha:0});
    // make square take over screen, call finished when done
    TweenLite.to(returnto, 1, {x:stage.x,y:stage.y, width:stage.stageWidth, height:stage.stageHeight, ease:Expo.easeInOut, onComplete:finished});
}

the squares are all inside a main movieclip (named navigation) on the stage (so the first square is navigation.sq_1)

I am not a Flash developer, so I’m really struggling with AS3. Hopefully this is enough info for someone to help. Thanks!
S

Answer 1

Just try to add your returnto clip with addChild() method:

// put clicked box on top
addChild(returnto);

Display List’s default behavior when addChild() is to put the child on top of all childs. Other children’s indexes are recounted.