分享
 
 
 

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

王朝other·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  

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

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

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

他的难度在于是通过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();*/

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

}

}

练习的效果:

选项的弹性位移:

主场景中有个名为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;

}

可边看源文件边看讲解,下面是小雨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剪辑!事先已经将子菜单放好位置!

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有