独自行走的天空

　　网上类似的效果很多，将工具栏隐藏起来，在鼠标滑过时显示出来，今天刚好有点时间，在聊天室边讲边做，完成了下面效果。

　　仔细想想其实这样的效果其实很容易实现的，只是对鼠标的滑入（roll_over）滑出（roll_out）进行相应的侦听，再加上一个缓动的函数即可。

　　说到缓动函数，我不由得还是拿 TweenLite  来应用了一下，但具体到缓动函数的选择上，还是费了一些周折才找到较满意的运动效果。对于TweenLite来说，函数是固定的，缺少更精确调整的方法。

　　场景中写代码，形式如下，场景中做好四个面板元件，每个元件中放入四个按钮：

import gs.TweenLite;
import gs.easing.*;

for (var i:uint = 1; i<= 4; i++) {
 var mc = this["panel_mc"+i];
 mc.origY = 366;
 mc.destY = 202;
 mc.title_mc.text = "Title "+ i;
 mc.addEventListener(MouseEvent.ROLL_OVER, onROver );
 mc.addEventListener(MouseEvent.ROLL_OUT, onROut );
 for (var j:uint = 1; j<= 4; j++) {
  var btn = mc["btn_mc"+j];
  btn.txt.text = "btn" + j;
  btn.stop();
  btn.addEventListener(MouseEvent.ROLL_OVER, onBtnROver );
  btn.addEventListener(MouseEvent.ROLL_OUT, onBtnROut );
  btn.addEventListener(MouseEvent.CLICK, onBtnClk );
 }
}
function onROver( evt:MouseEvent ) {
 trace( "ok");
 var mc = evt.target;
 TweenLite.to(mc,0.1, {y:mc.destY, ease:Quart.easeOut});
}

function onROut( evt:MouseEvent ) {
 var mc = evt.target;
 TweenLite.to(mc,0.1, {y:mc.origY, ease:Quart.easeIn});
}

function onBtnROver(evt) {
 evt.target.gotoAndStop(2);
}
function onBtnROut(evt) {
 evt.target.gotoAndStop(1);
}
function onBtnClk(evt) {
 trace( "you choice is panel:",evt.currentTarget.parent.name );
 trace("you choice is button:",evt.currentTarget.name);
}

又考虑用类来实现了一下简单封装，按钮类代码如下：

package {
 import flash.events.MouseEvent;
 import flash.display.MovieClip;
 import flash.text.TextField;
 public class MyButton extends MovieClip {
  public function MyButton() {
   addEventListener(MouseEvent.ROLL_OVER, rollOverHandler );
   addEventListener(MouseEvent.ROLL_OUT, rollOutHandler );
   addEventListener(MouseEvent.CLICK, clickHandler );
  }
  static public function rollOverHandler(evt:MouseEvent) {
   evt.target.gotoAndStop(2);//　显示点亮的效果
  }
  static public function rollOutHandler(evt:MouseEvent) {
   evt.target.gotoAndStop(1);//　　显示变暗的效果
  }
  static function clickHandler(evt) {
   trace( "you choice is panel:",evt.currentTarget.parent.name );
   trace("you choice is button:",evt.currentTarget.name);
  }
 }
}

面板代码如下，通过代码实现了动态添加按钮数量的目的。

package {
 import flash.events.MouseEvent;
 import flash.display.MovieClip;
 import flash.display.Sprite;
 import flash.text.TextField;
 //import flash.events.Event;
 import MyButton;
 import gs.TweenLite;
 import gs.easing.*;

 public class MyMenuPanel extends Sprite {
  public var origY:Number;
  public var destY:Number;
  public function MyMenuPanel(btnNum = 4) {
   addButton( btnNum );
   origY = 375;
   destY = 370 - btnNum * 40;
   addEventListener(MouseEvent.ROLL_OVER, onROver );
   addEventListener(MouseEvent.ROLL_OUT, onROut );
  }
  private function addButton(btnNum) {
   for (var i:uint = 0; i< btnNum; i++) {
    var btn:MyButton = new MyButton();
    btn.name = "button" + (i+1);
    btn.gotoAndStop(1);
    btn.txt.text = "btn" + (i + 1);
    btn.y = i* btn.height + 30;
    addChild( btn );
   }
  }
  static function onROver( evt:MouseEvent ) {   
   var mc = evt.target;
   TweenLite.to(mc,0.1, {y:mc.destY, ease:Quart.easeOut});
  }

  static function onROut( evt:MouseEvent ) {
   var mc = evt.target;
   TweenLite.to(mc,0.1, {y:mc.origY, ease:Quart.easeIn});
  }
 }
}

这里的封装并不是很彻底的，所以还有一些直接使用的数字，真实环境下（in real world ），面板主要是用来盛放各种不同类形的按钮或组件的，起到的只是移动的作用，所以它里面研究放什么，怎么放其实并不是这里讨论的内容。

场景中加入代码用来加载多个面板，代码如下：

for (var i:uint = 0; i< 8; i++) {
 var mc = new MyMenuPanel(i+2);//添加新面板，并指定按钮数量
 mc.name = "panel" + (i+1);
 mc.x = i * 80;
 mc.y = 375;
 addChild( mc );
}

所有这些完成之后，就可以看到前面 Flash 文件所展示的效果。

源代码下载

 压缩包下载