1

I'm using this code to animate the buttons on the contact page of a website I'm designing. 

//Contact Buttons
//Email
ContactPage.Email.addEventListener(MouseEvent.MOUSE_OVER,bounceEmailover);

function bounceEmailover(event:MouseEvent):void
{
    var scaleTween:Tween=new Tween(event.target,"scaleX",Elastic.easeOut,1,1.5,1,true);
    var scale2Tween:Tween=new Tween(event.target,"scaleY",Elastic.easeOut,1,1.5,1,true);
}

ContactPage.Email.addEventListener(MouseEvent.MOUSE_OUT,bounceEmailout);

function bounceEmailout(event:MouseEvent):void
{
    var scaleTween:Tween=new Tween(event.target,"scaleX",Elastic.easeOut,1.5,1,1,true);
    var scale2Tween:Tween=new Tween(event.target,"scaleY",Elastic.easeOut,1.5,1,1,true);
}

There are 4 buttons with the same code lined up across the page that I want to bounce out and overlap when I mouse over. Is there a way to bring the button I've moused over to the front instead of staying behind the button next to it?

Here's an image of the buttons. The Wordpress button has been moused over but it stays behind the Facebook button.

user7083681
  • 53
  • 7

2 Answers2

1

simply get an instance of that button, then remove it from its container list, then add back it to top of the list

function bounceEmailover(event:MouseEvent):void
{
    var scaleTween:Tween=new Tween(event.target,"scaleX",Elastic.easeOut,1,1.5,1,true);
    var scale2Tween:Tween=new Tween(event.target,"scaleY",Elastic.easeOut,1,1.5,1,true);

    var parent:MovieClip = event.target.parent as MovieClip;
    var btn:MovieClip = event.target as MovieClip;
    parent.addChild(btn);
}

Edit: thanks to @NealDavis, removed parent.addChild(btn);from above as:

removeChild is unneeded here. Callig addChild for an object that is already in existence will not create a second instance, but only move the already crated instance to the top of the z-order

make sure getChildByName and removeChild and addChild called from right place

payam_sbr
  • 1,428
  • 1
  • 15
  • 24
1

Since all of the buttons are embedded within the Contact Page movie clip, I was able to add this code to just the Contact page which brings any button within that movie clip to the front when I mouse over. Works fine.

for (var fl_ChildIndex:int = 0;
        fl_ChildIndex < this.numChildren;
        fl_ChildIndex++)
{
    this.getChildAt(fl_ChildIndex).addEventListener(MouseEvent.MOUSE_OVER, fContactMObringtofront);
}
function fContactMObringtofront(event:MouseEvent):void
{
    this.addChild(event.currentTarget as DisplayObject);
}
user7083681
  • 53
  • 7