flex的ApplicationControlBar中组件滑出

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 <mx:Script>
  <![CDATA[
   import mx.events.EffectEvent;
   import mx.events.MoveEvent;
   private var is_center:Boolean = false;
   private var y_pos:int = 0;
   private function slide_center():void {
    if (!is_center) {
     //记下按钮原位置
     y_pos = btnSlide.y;
     //将按钮从control bar中移出
     acbMain.removeChild(btnSlide);
     //加入到主场景以便滑动
     this.addChild(btnSlide);
     //滑动
     btnSlide.move(btnSlide.x, stage.height/2 - acbMain.height/2);
     is_center = true;
    } else {
     btnSlide.move(btnSlide.x, y_pos);
    }
   }
   
   private function on_effectend(e:EffectEvent):void {
    //为了能够看见按钮回去的过程，要在移动结束后才将它归还control bar控件
    //相反操作即可让按钮回到bar上去
    if (is_center && btnSlide.hitTestObject(acbMain)) {
     this.removeChild(btnSlide);
     acbMain.addChild(btnSlide);
     is_center = false;
    }
   }
  ]]>
 </mx:Script>
 <mx:ApplicationControlBar x="0" y="0" width="100%" id="acbMain">
  <mx:Button label="Click Me" click="slide_center()" id="btnSlide" moveEffect="Move" effectEnd="on_effectend(event)"/>
 </mx:ApplicationControlBar>
 
</mx:Application>