网上类似的效果很多,将工具栏隐藏起来,在鼠标滑过时显示出来,今天刚好有点时间,在聊天室边讲边做,完成了下面效果。
仔细想想其实这样的效果其实很容易实现的,只是对鼠标的滑入(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
作者:
{commentrecontent}