快精灵印艺坊 您身边的文印专家
广州名片 深圳名片 会员卡 贵宾卡 印刷 设计教程
产品展示 在线订购 会员中心 产品模板 设计指南 在线编辑
 首页 名片设计   CorelDRAW   Illustrator   AuotoCAD   Painter   其他软件   Photoshop   Fireworks   Flash  

 » 彩色名片
 » PVC卡
 » 彩色磁性卡
 » 彩页/画册
 » 个性印务
 » 彩色不干胶
 » 明信片
   » 明信片
   » 彩色书签
   » 门挂
 » 其他产品与服务
   » 创业锦囊
   » 办公用品
     » 信封、信纸
     » 便签纸、斜面纸砖
     » 无碳复印纸
   » 海报
   » 大篇幅印刷
     » KT板
     » 海报
     » 横幅

韩国A3动态弹性菜单分步学

  由于本人没有写过很长的教程的经验,而且还是这种大量抽像的代码性的东东!假如发现什么问题,希望能您客气的指出来:)

  A3菜单有不少翻版或改进,虽然出来了好长一段时间,但依然可谓经典的AS菜单之作!我们以小雨翻版的A3菜单为例!先看一下A3菜单的效果。

http://bbs.flash8.net/bbs/UploadFile/2005-7/200572514323208.swf

« Full Screen »

点击这里下载源文件


  他的难度在于是通过AS来控制每个菜单项的空间位置,且还伴有弹性的效果!假如空间感不强,就算每行代码注释,也很难形成完整的概念,将其理解透!因为分步进行讲解!

  下面是通过训练为A3的制作预备知识点,假如你已经认识,完全可以直接看二楼的帖子!

  第一步训练:

  动态生成菜单项:

  首先建立一个方块MC,在库文件中点属性,勾选1,4两项,标识符:menu 。如下图所示


  然后,在时间轴第一帧写出以下代码:

///////////////////////下面这段7个函数(b1()~b7())是保存菜单地址,可以让按钮随时调用
stop();
function b1()
{ trace("b1 pressed");
getURL("http://1.htm");
}
function b2()
{ trace("b2 pressed");
getURL("http://2.htm");
}
function b3()
{ trace("b3 pressed");
getURL("http://3.htm");
}
function b4()
{ trace("b4 pressed");
getURL("http://3.htm");
}
function b5()
{ trace("b5 pressed");
getURL("http://5.htm");
}
function b6()
{ trace("b6 pressed");
getURL("http://6.htm");
}
function b7()
{ trace("b7 pressed");
getURL("http://7.htm");
}
///////////////////////////////下面是确定菜单的位置及菜单名填写
for (i = 1; i <=7; i++)
{
_root.attachMovie("menu", "menu" + i, i * 10);
_root["menu" + i]._y = 100;
_root["menu" + i]._x = (i - 1) * 70;//菜单项的X轴坐标
_root["menu" + i].label_txt.text= i;//菜单的标签(1~7)
_root["menu" + i].num = i;//菜单中的一个变量
}
//////////////////////////////////////////////////而接着下面是为按钮动态地调用上面的函数添加地址
for (var i = 1;i<=7;i++){
this["menu"+i].onRelease = function(){
_root["b"+this.num]();
/////////////////////////////////////
//也可写成下面这样!
/* s=eval("b"+this.num);
_root.s();*/
///////////////////////////////////
}
}

训练的效果及源文件:

« Full Screen »

点击这里下载源文件

选项的弹性位移:
主场景中有个名为mc的实例: 则在mc上的代码为:

onClipEvent (load) {

前面mc位置 = 240;
this.targetPos=前面位置+min_h;
this._x=前面位置+min_h;
this.vx=0;
var max_h = 120;
//选项最大位置
var min_h = 90;
//选项最小位置
var slow = 1.2;
//弹性缓冲值
var active = false;
//判定是否为激活
}
onClipEvent (enterFrame) {
if (active) {
//mc目标位置=前面mc位置+最大位置
this.targetPos = 前面mc位置+max_h;
this.vx = (this.vx+(this.targetPos-this._x))/slow;
this._x = this._x+this.vx;
} else {
//mc目标位置=前面mc位置+最小位置
this.targetPos = 前面mc位置+min_h;
//与上面讲得弹性运动方法一样,只不过这里是还原!
this.vx = (this.vx+(this.targetPos-this._x))/slow;
this._x = this._x+this.vx;
}
}
on (rollOver, dragOver) {
active = true;
}
on (rollOut, dragOut) {
active = false;
}

« Full Screen »



点击这里下载源文件

可边看源文件边看讲解,下面是小雨A3菜单源文件 

  A3主菜单的AS代码主要放在三个地方:主场景中的第一帧时间轴AS,menuMc实例中的AS,库中的menu影片剪辑中的菜单条上的AS。

  首先说一下 主场景中的第一帧时间轴AS:

function b1() {
getURL("");
}
…… ……
function s7_b7() {
getURL("");
}
/////////////上面全是保存地址用的函数,放在一起方便书写治理,也方便按钮调用!
////////////下面这是这函数是用来确定menuMc中的状态,小雨A3中没有用到,可以删除!注释掉
/*
function checkMc() {
_root.menuMc.line2.active = false;
_root.menuMc.vnum = 1;
_root.menuMc.line2.lineMc._visible = 1;
_root.menuMc.moveM = true;
}
i = 20;
nomal = true;
*/
////////////////////////////////////////////


主场景中menuMc实例中的AS:

//影片剪辑menuMc,点开看里面什么也没有,但是他的作用也仅是为提onClipEvent (load)和onClipEvent (enterFrame)两个事件,其实完全可以将代码写到时间轴上!!
//下面是当menuMc首次被扫描并调用完时执行的命令,主要分为三部分菜单项的 装饰线的运动函数, 菜单条的运动函数,菜单按钮的地址的调用(为方便理解,这个我们在第一步做过训练)

onClipEvent (load) {
//装饰线的运动函数预定义
function lineMove() {

//先判定是否在运动中,moveM为真时,即有菜单被激活运动,运行下面代码
if (moveM) {

i = 2;//i确定为2(我想说初始,又没有这种说法)
//while (i<=menuNum)将每个菜单项的线条都调整一遍
while (i<=menuNum) {
//当这个菜单项的线条为活动时,即这个菜单项在鼠标悬停下激活!
if (this["line"+i].active) {
//这个选项的线条目标位置=上一个选项线条的位置+最大菜单项宽度
this["line"+i].targetPos = this["line"+(i-1)].targetPos+max_h;
}
//没有激活菜单项的宽度将减小
else {
//这个选项的线条目标位置=上一个选项线条的位置+最小菜单项宽度
this["line"+i].targetPos = this["line"+(i-1)].targetPos+min_h;
}
//下面这两行是线条的弹性算法,这种算法大同小异,这里运用到位移的弹性上,还有运用到缩放,透明等上
//线条的运动时的移动量=(线条的运动时的(上一帧)移动量+(线条目标位置-线条当前位置)/位置比例)/缓冲值
this["line"+i].vx = (this["line"+i].vx+((this["line"+i].targetPos-this["line"+i]._x)/accel))/slow;
//线条的位置=线条的(当前)坐标+线条移动量
this["line"+i]._x = this["line"+i]._x+this["line"+i].vx;
//i++换下一个线条,不断地循环,就犹如一个监听函数
i++;
}
}

//moveM为假时,运行下面代码,当鼠标移开菜单项,线条将还原,使菜单变为正常宽度
else {
//依然是进行循环监听
i = 2;
while (i<=menuNum) {
//这个选项的线条目标位置=上一个选项线条的位置+正常宽度
this["line"+i].targetPos = this["line"+(i-1)].targetPos+de_h;

//与上面讲得弹性运动方法一样,只不过这里是还原!
this["line"+i].vx = (this["line"+i].vx+((this["line"+i].targetPos-this["line"+i]._x)/accel))/slow;
this["line"+i]._x = this["line"+i]._x+this["line"+i].vx;
i++;
}
}
}



//菜单选项的运动函数预定义
function menuMove() {

i = 1;
while (i<=menuNum) {
//假如该选项被激活
if (this["line"+(i+1)].active) {

//菜单线条播放效果,即是一条白条划过,且有声响
this["line"+i].image.gotoAndStop(2);
//菜单的标题通过menutitle影片剪辑来动态显示菜单标签
//有点类似第一步中的 _root["menu" + i].label_txt.text= i;只是方式不同
this["line"+i].menutitle.gotoAndStop(i);
//显示子菜单
_root.subMc.gotoAndStop("s"+i);
} else {
//没有动画效果,但还要显示菜单标签
this["line"+i].menutitle.gotoAndStop(i);
}
//菜单的坐标=线条的坐标
this["menu"+i]._x = this["line"+i]._x;
//菜单的宽度比例=选项前后线条的距离/1.2
this["menu"+i]._xscale = (this["line"+(i+1)]._x-this["line"+i]._x)/1.2;
i++;
}
}



fscommand("allowscale", false);


max_h = 120;//选项最大宽度
min_h = 93;//选项最小宽度
de_h = 97;//正常宽度
menuNum = 7;//菜单个数
moveM = false;//判定菜单是否被激活,初始化这假,即没有激活
accel = 5;//位置比例
slow = 1.2;//弹性缓冲值




i = 1;
//将线条和菜单标签项放到主场景上
while (i<=(menuNum+1)) {

this.attachMovie("line", "line"+i, i*1);//复制线条放到场景中
//线条的位置
this["line"+i]._y = 0;
this["line"+i]._x = (i-1)*de_h;//
this["line"+i].active = false;//判定此菜单是否被鼠标悬停,初始为假
//根据菜单选项个数向线条中增加菜单标签和图片动画
if (i<=menuNum) {
this["line"+i].attachMovie("title", "menutitle", 1);
this["line"+i].attachMovie("image", "image", 2);
}
i++;
}


i = 1;
//将菜单条复制到主场景中
while (i<=menuNum) {
this.attachMovie("menu", "menu"+i, i*10);
//菜单条的位置,设置类似前面
this["menu"+i]._y = 0;
this["menu"+i]._x = (i-1)*de_h;
this["menu"+i]._xscale = (this["line"+(i+1)]._x-this["line"+i]._x)/1.2;
this["menu"+i].num = i;
i++;
}
//
//line2.active = false;
//line2.lineMc._visible = 0;
//line1.swapDepths(100);
}
//下面是当menuMc每帧被调用时执行的命令
onClipEvent (enterFrame) {

line8._visible = 0;//会多复制一个线条line8,使最后的line8不可见

//不断地运行lineMove()和menuMove();
lineMove();//装饰线条的运动函数

menuMove();//菜单的运动函数

updateAfterEvent();//刷新播放器
}

//////////////////////////////////////////

库中的menu影片剪辑中的菜单条上的AS:

////////当鼠标鼠标指针滑过按钮或滑过按钮时按下鼠标按钮,然后滑出此按钮,再滑回此按钮时.
on (rollOver, dragOver) {
//线条中的图片效果返回第1帧
_parent["line"+_parent.Vnum].image.gotoAndStop(1);
//判定菜单被激活
_parent.moveM = true;
//判定线条是活动的
_parent["line"+(num+1)].active = true;

_parent["line"+(num+1)].lineMc._visible = 0;
//该项线条将转到第100层
_parent["line"+num].swapDepths(100);
}
//鼠标指针滑出按钮区域或在鼠标指针滑过按钮时

按下鼠标按钮,然后滑出此按钮区域
on (rollOut, dragOut) {
//判定线条不是活动的
_parent["line"+(num+1)].active = false;
//为菜单序号等于前一个线条的序号
_parent.vnum = num;
//_parent["line"+(num+1)].lineMc._visible = 1;
//假如为最后一个线条
if (num == 7) {
//判定菜单是激活的
_parent.moveM = true;
} else {
//否则菜单不是激活的
_parent.moveM = false;
}
}
//在鼠标指针经过按钮时释放鼠标按钮时
on (release) {
//调用最前面时间轴中保存链接地址函数
_root["b"+num]();
}

  再有就有是子菜单,在时间轴sub行上放着subMc剪辑!事先已经将子菜单放好位置!

  链接地址的代码都在按钮上!和普通按钮没什么区别,就没什么讲得了!!

  对于AS初学进阶的朋友,希望能结合源文件细心看注释,你的熟悉一定达到一个新的台阶!




返回类别: Flash教程
上一教程: Flash AS学习:mx.utils包之Delegate类应用
下一教程: FlashMX 视频教程(44)-滚动的小球

您可以阅读与"韩国A3动态弹性菜单分步学"相关的教程:
· Swish打造“仿韩国弹性菜单”
· Flash制作出色点线形弹性菜单
· 仿央视网Flash动态导航菜单
· Flash+XML写了个类似韩国菜单的效果
· Flash制作一款美丽的韩国式下拉菜单
    微笑服务 优质保证 索取样品