|
首页 | 名片设计 CorelDRAW Illustrator AuotoCAD Painter 其他软件 Photoshop Fireworks Flash |
|
由于本人没有写过很长的教程的经验,而且还是这种大量抽像的代码性的东东!假如发现什么问题,希望能您客气的指出来:) A3菜单有不少翻版或改进,虽然出来了好长一段时间,但依然可谓经典的AS菜单之作!我们以小雨翻版的A3菜单为例!先看一下A3菜单的效果。
下面是通过训练为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();*/ /////////////////////////////////// } } 训练的效果及源文件:
选项的弹性位移: 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; */ ////////////////////////////////////////////
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+XML写了个类似韩国菜单的效果 · 仿央视网Flash动态导航菜单 · Flash制作一款美丽的韩国式下拉菜单 |
快精灵印艺坊 版权所有 | 首页会员中心在线印刷在线编辑付款方式索取样品设计指南连锁门店 |