菜单条滑动效果

      Flash学习笔记 2008-11-25 16:43

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

  仔细想想其实这样的效果其实很容易实现的,只是对鼠标的滑入(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 文件所展示的效果。

源代码下载

 压缩包下载

回复Comments() 点击Count()

回复Comments

{commentauthor}
{commentauthor}
{commenttime}
{commentnum}
{commentcontent}
作者:
{commentrecontent}