第十讲：flash导航菜单 课程设计

计算机动画设计第十讲：flash导航菜单 一、getURL()函数 二、一级菜单的制作原理 三、二级菜单的制作原理 四、缓冲效果 五、弹性效果作业评讲：用键盘控制物体的运动1、四个方向的运动z共两个图层。在图层一上建立影片剪辑实例，取名为obj。z主场景，在图层二上写代码。第1帧：dirx=1;diry=1;dis=10;第2帧：obj._x+=dirx*dis;obj._y+=diry*dis;第3帧：gotoAndPlay(2);z 在图层二上插入一个空的影片剪辑实例，为其添加代码：onClipEvent(keyDown)if(Key.getCode()=37)_root.dirx=-1;_root.diry=0;if(Key.getCode()=38)_root.dirx=0;_root.diry=-1;if(Key.getCode()=39)_root.dirx=1;_root.diry=0;if(Key.getCode()=40)_root.dirx=0;_root.diry=1;if(Key.getCode()=90)_root.dis-;/按z减速if(Key.getCode()=88)_root.dis+;/按x加速关于“把所有的代码都写在帧上”zonKeyDown是Object类的事件。因此要专门指定一个Object对象来监测KeyDown事件的发生。z第一帧：dis=5;dirx=1;diry=0;var lsn:Object=new Object();Key.addListener(lsn);lsn.onKeyDown=function()if(Key.getCode()=Key.LEFT)dirx=-1;diry=0;if(Key.getCode()=Key.RIGHT)dirx=1;diry=0;if(Key.getCode()=Key.UP)dirx=0;diry=-1;if(Key.getCode()=Key.DOWN)dirx=0;diry=1;if(Key.getCode()=90)dis+;if(Key.getCode()=88&dis0)dis-;2、八个方向的运动另一种响应键盘操作的方式以以“按键运动，放开停止按键运动，放开停止”的情况为例。的情况为例。用用onClipEvent(keyUp)无法捕获第二个按无法捕获第二个按键的放开。键的放开。可以使用可以使用Key.isDown()函数来判断某个按函数来判断某个按键是否被按下。将键是否被按下。将Key.isDown()放在放在onEnterFrame=function()函数中，实现在每帧都对按键状况做检测。z 共两个图层。在第一层上创建影片剪辑实例，取名为obj。z 在第二层上写代码。第1帧：dirx=0;diry=0;dis=5;onEnterFrame=function()if(Key.isDown(37)dirx=-1;else dirx=0;if(Key.isDown(38)diry=-1;else diry=0;if(Key.isDown(39)dirx=1;if(Key.isDown(40)diry=1;z第2帧：obj._x+=dirx*dis;obj._y+=diry*dis;第3帧：gotoAndPlay(2);一、getURL()函数zgetURL()函数将来自特定 URL 的文档加载到窗口中，我们可以将它放在一个按钮或影片剪辑的on(release)函数中，以实现给该按钮或影片剪辑添加链接。z 例例1：用：用flash实现的一个静态菜单。实现的一个静态菜单。二、一级菜单的基本制作原理z制作一级菜单应包括以下元件的制作：z1、入场动画；z2、菜单项上的鼠标悬停动画；z3、菜单项上的单击动画。z以下例说明制作flash动态一级菜单的基本原理：z 例例2：一个简单动态一级菜单的制作：一个简单动态一级菜单的制作插入5个新建影片剪辑元件，在每个元件名上双击进入元件编辑界面，进行以下编辑：1、以一个长方形作为背景；2、在背景上以静态文本添加菜单选项名；3、在第5帧和第10帧分别插入关键帧，并创建补间动画；在第1、5、10帧添加代码：stop();4、在第5帧改变影片剪辑的大小、色调、亮度、位置等等任何将作为动态变化的内容。动态一级菜单的基本原理5、退回到主场景，将5个元件分别拖入舞台以生成其实例。为每个实例添加代码：on(rollOver)gotoAndPlay(2);on(rollOut)gotoAndPlay(6);on(release)getURL(http:/);动态一级菜单的常见问题：z因为图形形变而引起的RollOver与RollOut的发生，会产生抖动。z解决办法：在元件中增加看不见的图层，扩大元件范围。三、二级菜单的基本制作原理z后面的二级菜单均以下列结构为例：风景长廊主要景点特色旅游景点介绍精品路线精品路线公司新闻聚焦动态行业新闻二级菜单：包含两级菜单项：一级和二级。在无鼠标事件的情况下，二级菜单隐藏。当鼠标移动到一级菜单的某项上时（有的也做成单击一级菜单某项时），二级菜单出现。鼠标悬停到一级菜单项、二级菜单出现、二级菜单隐藏等事件，可以安排各种动画效果，从而使整个菜单显得生动活泼，富有创造性。下面用一个实例说明二级导航菜单的基本原理。例例3：二级导航菜单实例：二级导航菜单实例z1、制作二级菜单的图形1）新建元件，取名为sub1，对该元件进行编辑：将第一个二级菜单的所有选项安排在一个文本框内；2）新建图层，制作文本的背景；3）在第5帧添加关键帧。创建第1帧和第5帧之间的补间动画，第1帧alpha为0，文本框靠右，背景靠左；第5帧alpha为100，文本框和背景重合在坐标（0，0）处；4）在第1帧和第5帧添加代码：stop();z2、为二级菜单添加链接新建一个矩形按钮元件。在sub1元件内新建一层，在该层第5帧插入关键帧。在该帧拖入一按钮元件的实例，调整大小，覆盖在第一个选项上，并将其alpha设为0。为该按钮元件添加代码：on(release)getURL(http:/);用相同的方法为其他选项添加链接。z3、制作一级选项退回主场景。在舞台上用文本框写出第一个一级菜单名，将该文本框转换为影片剪辑元件。将刚才制作的sub1元件拖入舞台生成实例，放置在一级菜单项下，取名为s1。z重复以上3个步骤，即能完成其他菜单项的制作。下面为各一级菜单项添加代码。以4个一级菜单项为例，各个一级菜单项的代码如下：z 第一个一级选项：on(rollOver)_root.s1.gotoAndPlay(2);_root.s2.gotoAndStop(1);_root.s3.gotoAndStop(1);_root.s4.gotoAndStop(1);z 第二个一级选项：on(rollOver)_root.s1.gotoAndStop(1);_root.s2.gotoAndPlay(2);_root.s3.gotoAndStop(1);_root.s4.gotoAndStop(1);z 第三个一级选项：on(rollOver)_root.s1.gotoAndStop(1);_root.s2.gotoAndStop(1);_root.s3.gotoAndPlay(2);_root.s4.gotoAndStop(1);z 第四个一级选项：on(rollOver)_root.s1.gotoAndStop(1);_root.s2.gotoAndStop(1);_root.s3.gotoAndStop(1);_root.s4.gotoAndPlay(2);动态二级菜单的常见问题：z子菜单应该在什么时候消失。z解决办法：根据不同的设计方法而不同。例如，增加一个围绕菜单四周的看不见的元件。典型二级导航菜单的制作例典型二级导航菜单的制作例z 1、新建一个叫“一级”的元件，在该元件上的不同关键帧上安排不同的一级菜单项文字。如有4个一级菜单项，就有4帧。z 2、用同样的方法制作相应的二级菜单项，元件名“二级”。z 3、新建元件，取名“菜单项”。为该元件安排3个图层。第一层：将“一级”元件拖入“菜单项”元件中，实例名mt。第二层：将“二级”元件拖入“菜单项”元件中，实例名sub。第三层：背景方框。宽度84，高度任意。将三层中的元件组合。动画效果：二级菜单项从无到有地出现。z 4、将“菜单项”元件4次拖入主场景中，生成4个实例，实例名为一序列，如m1，m2，m3，m4则我们可以用代码for(i=1;i5;i+)thism+i.mt.gotoAndStop(i);thism+i.sub.gotoAndStop(i);实现一级菜单项名和二级菜单项名的正确显示。z 动态效果设计为鼠标悬停在一级菜单项上时，一级菜单项向左移动，移出来的空间里显示二级菜单项的内容。下面用代码完成4个二级菜单项的鼠标悬停显示与恢复功能：m1.onRollOver=function()m1._x-=54;m1.gotoAndPlay(8);m1.onRollOut=function()m1._x+=54;m1.gotoAndStop(1);m2.onRollOver=function()m1._x-=54;m2._x-=54;m2.gotoAndPlay(8);m2.onRollOut=function()m1._x+=54;m2._x+=54;m2.gotoAndStop(1);m3.onRollOver=function()m1._x-=54;m2._x-=54;m3._x-=54;m3.gotoAndPlay(8);m3.onRollOut=function()m1._x+=54;m2._x+=54;m3._x+=54;m3.gotoAndStop(1);m4.onRollOver=function()m1._x-=54;m2._x-=54;m3._x-=54;m4._x-=54;m4.gotoAndPlay(8);m4.onRollOut=function()m1._x+=54;m2._x+=54;m3._x+=54;m4._x+=54;m4.gotoAndStop(1);四、缓冲效果及其在菜单动画中的应用z 1、什么是缓冲效果缓冲效果，即随着运动物体向目标的靠近，运动速度逐渐减小。是flash的一种常见特效。如果是补间动画的缓冲，可以通过“属性”面板中的“缓动”对话框来进行设置。但是用代码实现的动画，其缓冲效果只能靠代码来实现。z 2、缓冲效果实现的一般方法随着mc实例向目标的靠拢，向mc坐标上加上的增量逐渐变小。通常用(mc坐标-目标坐标)/n来构造这个逐渐变小的量。例例4：跟随鼠标移动的一串图形。：跟随鼠标移动的一串图形。1新建flash文档。插入影片剪辑类型元件。在该元件中绘制一个宽、高为40左右的简单图形，如圆圈。向主场景中添加这个元件的一个实例。取名为“mc0”。2用代码实现mc1的复制。所有实例成横排排列，高和宽逐个缩小，alpha逐个降低。3用代码实现缓冲的跟随效果。Mouse.hide();for(var i=1;i7;i+)duplicateMovieClip(mc0,mc+i,i);thismc+i._alpha=thismc+(i-1)._alpha-15;thismc+i._xscale=thismc+(i-1)._xscale-15;thismc+i._yscale=thismc+(i-1)._yscale-15;onEnterFrame=function()mc0._x=_root._xmouse;mc0._y=_root._ymouse;for(i=1;i7;i+)thismc+i._x+=(thismc+(i-1)._x-thismc+i._x)/(5+i);thismc+i._y+=(thismc+(i-1)._y-thismc+i._y)/(5+i);3用代码实现缓冲的跟随效果。第二帧：mc1._x+=(_root._xmouse-mc1._x)/adis;mc1._y+=(_root._ymouse-mc1._y)/adis;for(i=1;in+1;i+)thismc+(i+1)._x+=(thismc+i._x-thismc+(i+1)._x)/adis;thismc+(i+1)._y+=(thismc+i._y-thismc+(i+1)._y)/adis;第三帧：gotoAndPlay(2);z 3、缓冲效果在菜单动画中的应用：承接上面“典型二级导航菜单的制作例”，将第一帧代码改为：for(i=1;i5;i+)thism+i.mt.gotoAndStop(i);thism+i.sub.gotoAndStop(i);thism+i.targetx=thism+i._x;thism+i.obj1=thism+i._x-54;thism+i.obj2=thism+i._x;thism+i.onEnterFrame=function()this._x+=(this.targetx-this._x)/4;m1.onRollOver=function()m1.targetx=m1.obj1;m1.gotoAndPlay(8);m1.onRollOut=function()m1.targetx=m1.obj2;m1.gotoAndStop(1);m2.onRollOver=function()m1.targetx=m1.obj1;m2.targetx=m2.obj1;m2.gotoAndPlay(8);m2.onRollOut=function()m1.targetx=m1.obj2;m2.targetx=m2.obj2;m2.gotoAndStop(1);m3.onRollOver=function()m1.targetx=m1.obj1;m2.targetx=m2.obj1;m3.targetx=m3.obj1;m3.gotoAndPlay(8);m3.onRollOut=function()m1.targetx=m1.obj2;m2.targetx=m2.obj2;m3.targetx=m3.obj2;m3.gotoAndStop(1);m4.onRollOver=function()m1.targetx=m1.obj1;m2.targetx=m2.obj1;m3.targetx=m3.obj1;m4.targetx=m4.obj1;m4.gotoAndPlay(8);m4.onRollOut=function()m1.targetx=m1.obj2;m2.targetx=m2.obj2;m3.targetx=m3.obj2;m4.targetx=m4.obj2;m4.gotoAndStop(1);五、弹性效果及其在菜单动画中的应用z 1、什么是弹性效果：弹性效果，即运动物体围绕目标来回做速度渐慢的运动，直至最后停下。其视觉效果活泼生动，是flash中的常见运动特效之一。逼真的弹性效果只能用代码实现。z 2、弹性效果的原理弹性效果模拟拉伸弹簧再放开时的情景。弹簧对运动物体的作用力，随物体离平衡位置（也是运动的目标）距离的增大而变大，减小而变小。物体做加速度不断变化的变速运动。当前加速度由物体与目标的距离决定。决定当前速度的就会有4个量：原速度、物体与目标当前的距离、弹簧的弹性系数和阻力系数。用公式表达：当前速度=(原速度+(物体坐标-目标坐标)*(-弹性系数)*阻力系数其中，“阻力系数”取在0.70.9之间，效果比较理想。该值越小物体停得越快。z 例例5：弹性特效：弹性特效模拟模拟新建flash文档。插入两个影片剪辑实例，一个取名obj，一个取名mc。让二者重合。在第一帧添加代码：var spx:Number=0;var spy:Number=0;var draging:Number=0;mc.onPress=function()draging=1;startDrag(mc);mc.onRelease=function()draging=0;stopDrag();mc.onEnterFrame=function()if(draging=0)spx=(spx-(mc._x-obj._x)*0.4)*0.7;mc._x+=spx;spy=(spy-(mc._y-obj._y)*0.4)*0.7;mc._y+=spy;z 3、弹性效果在菜单动画中的运用：承接上面“典型二级导航菜单的制作例”，将this“m”+i.onEnterFrame=function()事件响应函数的代码改为：thism+i.onEnterFrame=function()this.sp=(this.sp+(this.targetx-this._x)/3)*0.8;this._x+=this.sp;本课程的考查：本课程的考查：z http:/ 要求：1、所有要展示的文本信息从外部文本中读来；2、除背景图片外，所有要展示的图片从外部加载；3、舞台宽度为800，高度自定。4、背景图片：自定（动态或静态）版面布局：自定 入场动画：自定 菜单外观、鼠标响应效果、音效（如果有的话）：自定 所有的切换效果（如果有的话）：自定5、以一个二级动态导航菜单导航，至少展示出以下栏目的信息：一、学院简介 1、学院简介（文本）2、学院校徽（图片）3、联系我们（文本+图片，文本和图片不混排）二、机构设置 1、机构设置一览表（文本）三、教学系部 1.基础教学部（文本）2.文化装饰与制作系（文本）3.卡通艺术系（文本）四、联系方式 1、联系方式（QQ，msn，电话，邮箱，通信地址及邮编）6、完成制作后用word编写制作说明文档，尽可能详细地说明制作过程，列出关键as代码并添加注释。7、请将最后的swf、fla源文件、所有的素材（图片、声音等）及说明文档打包（大小不要超过20m），在十二月十四日之前上传到张睿老师课件空间相应文件夹下。评分标准：z 一、导航功能：一、导航功能：20分分1、版块结构完整，内容充实：5分2、二级导航菜单能正确导航各版块的内容：5分3、二级导航菜单有鼠标悬停与移开动画：5分4、版面布局合理：5分z 二、背景图片：二、背景图片：10分分有契合主题、美观自然的静态背景图片：5分。有适合整个版面的动态背景：+25分。z 三、入场动画：三、入场动画：10分：分：导航选项等的进入场景动画。z 四、背景音乐与事件音效：四、背景音乐与事件音效：10分分有背景音乐：5分。鼠标悬停、单击等有能配合动画效果的音效：+05分。z 五、图片切换效果：五、图片切换效果：10分分有多幅图片在同一位置上的切换：4分。有平滑流畅的图片切换效果：+06分。z 六、六、LOADING：5分分z 七、说明文档：七、说明文档：35分分能基本说明制作过程：20分。过程描述清晰完整，语句简练流畅：+05分。所给代码完整准确，解释正确无误：+010分。