一个Flash 网页导航效果 - 达人(独自行走)

2008/11/14 | 一个Flash 网页导航效果

类别(Flash课件设计) | 评论(2) | 阅读(2946) | 发表于 23:32

　　在网上找到一段“Flash动态地图制做”的视频教程，下载下来一看原来只是一种导航按钮的功能实现。效果还算不错，于是考虑用TweenLite来实现一下，顺便做一下代码练习。

制做流程：
舞台场景外放置多个图片（比如３个），将全部图片转换成一个元件（实例名pic_mc），场景中放置对应个数的按钮，实例名依次为 a_btn,b_btn,c_btn。
位置图片如下：

//用变量记录下图片的原始坐标位置，再依次将每个小图片摆放到舞台中央，分别记录下pic_mc的坐标位置。

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

var homeX = 230;
var homeY = 170;

var pic1X = 641;
var pic1Y = 479.6;

var pic2X = 352.8;
var pic2Y =-150.3;

var pic3X = -196.4;
var pic3Y = 178.6;

//为按钮添加代码，点击按钮显示相关图片，点击图片回到初始位置：

pic_mc.addEventListener(MouseEvent.CLICK, onToOrig );
a_btn.addEventListener(MouseEvent.CLICK, onToA );
b_btn.addEventListener(MouseEvent.CLICK, onToB );
c_btn.addEventListener(MouseEvent.CLICK, onToC );

代码优化一：

上面的代码中，事件处理函数中的内容几乎相同，可以考虑用同一个函数来实现，switch 结构终于可以派上用场了。

代码修改如下：

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

var homeX = 230;
var homeY = 170;

var pic1X = 641;
var pic1Y = 479.6;

var pic2X = 352.8;
var pic2Y =-150.3;

var pic3X = -196.4;
var pic3Y = 178.6;

pic_mc.addEventListener(MouseEvent.CLICK, onMovePic );
a_btn.addEventListener(MouseEvent.CLICK, onMovePic );
b_btn.addEventListener(MouseEvent.CLICK, onMovePic );
c_btn.addEventListener(MouseEvent.CLICK, onMovePic );

function onMovePic(evt:MouseEvent) {
var destX,destY:Number;

代码优化二：

原本想将位置信息直接保存到按钮中去，改成如下的形式，无奈按钮组件不能直接添加新属性，这个尝试算是失败了。（解决此问题的办法是继承按钮类，在子类中增加新属性，时间关系暂不去做这一步

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

pic_mc.destX = 230;
pic_mc.destY = 170;

a_btn.destX = 641;//系统会报错，不能给组件动态添加新内容。
a_btn.destY = 479.6;

b_btn.destX = 352.8;
b_btn.destY =-150.3;

c_btn.destX = -196.4;
c_btn.destY = 178.6;

function onMovePic(evt:MouseEvent) {
var destX = evt.target.destX;
var destY = evt.target.destY;
TweenLite.to(pic_mc, 0.5, {x:destX, y:destY, ease:Cubic.easeInOut});
}

优化三：空空的主背景有些不大好看，加上个新背景实例名为 bg_mc，并加入让背景淡入淡出的效果，

代码如下：

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

var homeX = 230;
var homeY = 170;

var pic1X = 641;
var pic1Y = 479.6;

var pic2X = 352.8;
var pic2Y =-150.3;

var pic3X = -196.4;
var pic3Y = 178.6;

function onMovePic(evt:MouseEvent) {
var destX,destY:Number;

switch ( evt.target ) {
  case a_btn :
   destX = pic1X;
   destY = pic1Y;
   break;
  case b_btn :
   destX = pic2X;
   destY = pic2Y;
   break;
  case c_btn :
   destX = pic3X;
   destY = pic3Y;
   break;
  default :
   destX = homeX;
   destY = homeY;
   TweenLite.to(pic_mc, 0.5, {x:destX, y:destY, ease:Cubic.easeInOut});
   TweenLite.to( bg_mc, 0.5, {alpha:1, ease:Cubic.easeIn});
   return;
}
TweenLite.to(pic_mc, 0.5, {x:destX, y:destY, ease:Cubic.easeInOut});
TweenLite.to( bg_mc, 0.5, {alpha:0, ease:Cubic.easeOut});
}

完整的效果如下：

点击按钮显示相关图片，点击图片回到初始位置，显示背景图：

TweenFilterLite 参数说明中文翻译
http://blog.5d.cn/user12/dzxz/200809/500545.html

TweenMax 参数说明中文翻译
http://blog.5d.cn/user12/dzxz/200809/500547.html

TweenLite 参数说明中文翻译
http://blog.5d.cn/user12/dzxz/200808/497831.html

TweenLite 的一个应用
http://blog.5d.cn/user12/dzxz/200808/497862.html

个性签名时钟版
http://blog.5d.cn/user12/dzxz/200810/504465.html

http://dzxz.5d.cn/

评论Comments