Flash脚本基础实例(导航条及MC).ppt

1、FLASH脚本基础 及实例,FLASH脚本特效,常用脚本特效欣赏 萤火虫 雪花 弹性跟随 网页导航条 黑客帝国数字流,学习内容,脚本基础知识 按钮元件的使用 导航菜单的制作 控制影片剪辑的脚本,FLASH脚本_AS,Action Script是Flash的脚本语言, 具有强大的交互功能，通过脚本应用，用户对动画元件的控制得到加强。目前提供了AS2.0和AS3.0两个版本。 动作面板是Flash提供的运行编程的专用环境F9打开动作面板； 使用ActionScript的目的： 交互式网站的开发； 课件制作； 小游戏开发、MTV、电子贺卡制作,AS可添加在哪些对象上(AS2.0,帧Frame必须是关

2、键帧 写在关键帧上面的AS，当时间轴上的指针走到这个关键帧的时候，就写在这个帧上面的AS就被触发执行了。 操作方法：点选关键帧，然后打开AS面板 ，写入语句；或新建一层插入空白关键帧，然后打开AS面板 ，写入语句。 按钮Button 影片剪辑Movie Clip,AS2和AS3的主要区别,在AS2中，ActionScript代码可以添加到关键帧（Keyframe）、按钮（Button）或影片剪辑（Movie Clips）中，并分别称之为帧动作、按钮动作及影片剪辑动作。 在AS3中，ActionScript代码只能添加到关键帧（Keyframe），是面向对象的编程语言，而不是一个简简单单的控制影

3、片播放的东西. 某种角度上说,随着FLASH的功能变的越来越强大,AS变的越来越复杂几乎是不可避免的,Action Script的相关术语 Action Script的语法 脚本的控制结构,AS基础知识,Action Script相关术语,事件：起触发作用的事情。如鼠标的移动、按下或释放等； 如:按钮常见事件： release、 dragOut、rollOut 关键字：AS中有16个关键字 break continue delete else for function if in new return this tupeof var void while with 帧标签:即关键帧的名字(在时

4、间轴上显示小红旗); 元件实例名称: “元件”从【库】中进入“舞台”就被称为该“元件”的“实例”；有名称的影片剪辑实例才能在动作面板中调用,Action Script的语法,点语法：a1.gotoAndPlay(2); 括号：定义函数中的相关参数； 大括号： 形成一个完整的语句块； 分号：每条语句以;结束； 注释：/后可跟上注释; 字母大小写:关键字要区分大小写,脚本的控制结构,Flash的脚本控制结构有三种：顺序结构、分支结构、循环结构,一、分支结构,1、单分支 格式: if (条件) 要执行的代码; 功能:如果条件满足，执行相应语句;如果条件不满足,程序继续,2、双分支 格式: if (条

5、件) 代码 1 /条件满足执行这里的代码 1 else 代码 2 /条件不满足执行这里的代码 2 功能:如果条件满足，执行相应语句1;如果条件不满足, 执行相应语句2,3、多分支 格式： switch(变量) case 值1:语句1;break; case 值2:语句2;break; case 值3:语句3;break; default:语句4,for(初值；条件；下一个) 循环体语句 /执行这里的代码N次 while(条件) 循环体语句 /当条件满足时一直执行这里的代码,二、循环结构,按钮元件的使用,按钮的定义： 按钮实际上是包含四帧的交互式影片剪辑 当创建按钮元件时,Flash就会自动创建

6、包括四帧的时间轴,按钮的状态,弹起”当鼠标指针不接触按钮时,按钮处于弹起状态; “指针经过”当鼠标移动到按钮上面,但没有按下时,按钮所处的状态; “按下”当鼠标左键按下时,按钮所处的状态.如果鼠标右键按下时,将会弹出关联菜单; “点击”在该状态下可以定义响应鼠标的区域,此区域在影片中是不可见的,6.3 Action行为实例,给按钮添加动作,按钮动作是按钮的灵魂，若不给按钮添加动作，按钮就毫无用处。使用给按钮添加动作的语法是： On(Event) /执行的动作 其中Event（事件）是指鼠标的各种动作，主要有： Press（点击） Release（释放） ReleaseOutside（释放离开）

7、 RollOver（指针经过） RollOut（指针离开） DragOver（拖放经过,给按钮加动作,给按钮加动作 实例：播放、重播、停止按钮 从公用库中导入按钮； 回到场景中，拖入按钮，给按钮实例加动作 on (release) gotoAndplay( 1);/重播 给按钮加动作脚本,必须添加事件on on(release) stop( );,2、简单图片浏览器制作,Flash中制作按钮元件,可任意发挥;新建图层“按钮”,放置制作好的按钮(如上一页、下一页); 新建图层”图片”,导入四幅图片(4个关键帧);并将此层拖入最底层;其它图层延续到第4帧; 在“图片”上又新建图层,命名为”图片序号

8、”,画白色无边线矩形做为背景;左边是一个动态文本,将其变量名设为” b”,中间画一条斜线,右边是一个静态文本”4,在最上层新建图层,命名为”脚本”;在第一帧添加如下脚本: stop(); b=“1”; 上一页按钮添加如下脚本: on(release)prevFrame(); if(b1)b-; 下一页按钮添加如下脚本: on(release) nextFrame(); if(b4)b+;,2、简单图片浏览器制作,时间轴控制动作,12.2 动作运用,gotoAndPlay：从当前帧转到目标帧开始播放动画。 gotoAndStop：从当前帧转到目标帧并停止播放动画。 play：开始播放已停止了的动

9、画。 stop：从该帧停止当前正在播放的动画。 nextFrame：从当前帧转到下一帧。 nextScene：从当前场景转到下一场景。 prevFrame：从当前帧转到前一帧。 prevScene：从当前场景转到前一场景。 stopAllSounds：停止正在播放的所有声音,按钮在图片浏览中的应用举例,例一 例二 例三,原理分析：通过按钮来控制图片切换，并且图片切换时有过渡效果,例1、2主要步骤讲解,1.制作控制图片切换的按钮（用直接复制方法）； 2.把每张图片制作成含切换效果的影片剪辑，并在最后一个 关键帧加stop语句； 3.新建一个影片剪辑，把第二步制作的每张图片的剪辑放入该 影片剪辑的

10、时间轴上，并在第一帧加stop语句 （如右图，一帧放一个图片剪辑） 4.回到主场景，将第三步制作的影片剪辑拖放到场景中所需位 置，输入影片剪辑的实例名称，并设置其Alpha值为0； 5.新建图层，将第一步制作好的按钮拖放到场景中所需位置并 摆放整齐，然后分别选择按钮打开动作面板，写入代码,例1、2主要步骤讲解,根据需要，按钮上写入的代码主要有以下几种,滚动效果主要原理,滚动的小图片上有透明按钮，当鼠标移动到小图上的透明按钮时，触发了两个动作：一是当前滚动的小图停止；二是播放鼠标所指图片的大图,1.制作以下元件 （1）把每张图片制作成含切换效果的影片剪辑，并在最后一个关键帧加stop语句； （2

11、）新建一个影片剪辑，把每张图片的剪辑放入该影片剪辑的时间轴上，并在第一帧加stop语句。 （3）新建一个图形元件，在元件中把每张图缩小，摆放整齐，并复制一份并列摆放。如下图所示。该元件用于制作图片滚动剪辑,滚动效果主要步骤,4）制作一个透明按钮元件，按钮大小与缩小图片相同。 （5）制作一个影片剪辑，剪辑第一图层放第（3）步制作 的图形元件；第二图层将透明按钮覆盖在图层一上的每张 小图上，几个小图就有几个按钮。选择每个按钮，打开动 作面板分别添加如下代码,on(rollOver) _root.gundongmc.stop( ); _root.picmc._alpha=100; _root.pic

12、mc.gotoAndStop(fzl); on(rollOut) _root.gundongmc.play(); _root.picmc._alpha=0;,滚动效果主要步骤,滚动效果主要步骤,6）制作一个图片滚动效果的剪辑。将第（5）步制作的 含按钮的剪辑拖放到场景中，制作图片从右向左移动的补 间动画。 2.回到主场景，将第（6）步制作的滚动效果剪辑拖放到 场景中所需位置，并将在属性面板中输入其实例名称为： gundongmc;将第（2）步制作的含多张图片切换的剪辑 拖放到场景中所需的位置（注意不要覆盖滚动剪辑），在 并属性面板中修改剪辑的透明度为0，输入其实例名 为：picmc 。 3.测

13、试动画,goto语句详解,语句包括:gotoAndPlay(scene,frame) gotoAndStop(scene,frame) nextFrame( ) prevFrame( ) 通过时间跳转到某一位置播放，即播放到该帧时直接跳转到某一指定帧； 通过交互进行跳转，即当有一个事件发生后，才跳转，所以此类跳转必须写在相关事件内，on内，此on又必须添加到某对象内； goto语句可以添加在主时间轴，影片剪辑，按钮中,例： gotoAndPlay（5） 由目前播放的帧直接跳到同一场景内第5帧，由第5帧继续播放影片。 gotoAndStop（5） 由目前播放的帧直接跳到同一场景内第5帧，停止播放

14、影片。 gotoAndStop（“场景2”,5） 由目前播放的帧直接跳到Scene2场景内的第5帧继续播放影片,如何在FLASH中插入声音和视频,使用菜单栏中的“文件导入导入到库”命令，可以将声音导入到库中。 一般在Flash中使用的声音格式是MP3和WAV,在时间轴中，可以设置声音的4种同步方式。在实际制作的时候，要根据不同的实际情况来选择合适的同步方式,1事件,即使SWF文件已经停止，声音播放也会继续。 事件声音的一个示例就是当用户单击一个按钮时播放的声音,开始”方式与“事件”方式的功能相近，但是如果声音已经在播放，则新声音实例不会播放,2开始,3停止,停止”方式的作用，是使指定的声音静音

15、,数据流”方式的声音将会严格与时间轴同步如果影片在播放，就播放声音；如果影片暂停，声音就会停止。 数据流的一个示例就是MV的制作。 如果不使用“数据流”方式，那么音乐很容易在播放过程中与动画、台词脱节,4数据流,如何制作简单的MTV,1.选择好音乐和图片素材，导入到flash库里。 2.在主场景中的一个层上起名：“music”，打开库将音乐文件从库中拖到场景中，这时，在时间轴的帧上，音乐只是一条短直线。在时间轴的音乐结束那帧处按F5键将影帧延长。 3.再建一个层，起名：“Label”（标签）。将时间轴的指针移动到头帧处，插入一个帧标签：“start 01”，之后，按Enter键，听音乐（数据流

16、同步方式），当音乐中的第一句歌词刚结束时，马上再按一次Enter键，确保音乐会停止。在音乐停止的这一帧处按F7键，插入一个空白关键帧，再书写帧标签：“end 01”。接着，紧随在这一帧的后面再按F7键再插入一个空白关键帧，再写上帧标签：“start 02”，再按Enter键，开始听下一句歌词，同样，当第二句歌词结束时，马上按Enter键，音乐停止，按F7键标注帧标签：“end 02”.依次类推，一直到整首音乐的歌词都标注完成。 4.以上的步骤完成之后，就可以在每句歌词的“start 01”和“end 01”之间做你要的动画（影片剪辑）了。 5、加上播放与重播按钮,口型动画,要制作人物的口型动画

17、，随着声音可以看到适当的口型变化。 绘制5种最基本的口型，然后将这5种基本口型和闭口时的口型放置在图形元件中，在舞台中根据每一帧上的声音的韵母设置每一帧上的口型最后再编辑声音封套,a”音的口型,O”音的口型,使用loadMovie动态加载外部图片,作用:将SWF、JPEG、GIF或PNG从URL加载到影片剪辑中; 语法:loadMovie(url,目标,方法) 加载的对象与源文件最好在同一目录下 例:个人主页中导航按钮中用到了加载SWF; 实例01在影片剪辑中加载图片.fla 制作一空影片剪辑元件，拖入场景图层1的第1帧中，实例名称取为mc 在第1帧加脚本 后四帧添加关键帧加相同脚本，更换图片

18、名称 新建图层2，添加两个按钮，控制上一帧，下一帧的跳转（略,stop(); loadMovie(“001.jpg”,mc,举例,目的：制作加载外部图片的过程，并有淡入淡出的效果； 制作一空影片剪辑元件”载入图片”，拖入场景图层1的第1帧中，实例名称取为 mc 在第1帧加脚本loadMovie(“1.jpg”,mc); 分别在第15、25、35帧中添加关键帧，再将第1帧和第35帧中的实例的透明度改为0%，第1-15帧，第25-35帧之间加动作补间； 其它三幅图片载入效果类同，做在同一层 ； 新建图层2，添加四个按钮，控制四幅图片的显示，每个按钮上的动作如下（每个按钮对应一行脚本,on (rel

19、ease) gotoAndPlay(1); on (release) gotoAndPlay(36); on (release) gotoAndPlay(71); on (release) gotoAndPlay(106,unloadMovie详解 作用：卸载影片剪辑中的对象； 语法：unloadMovie(目标) 如：unloadMovie(mc); mc为影片剪辑的实例名称,用按钮制作简单横向FLASH导航菜单,动作分析： 当鼠标点击导航栏中一个栏目A时相应的子栏目按扭出现；点击另一个栏目B时相应的子栏目按扭出现，同时A的子栏目消失,横向导航栏制作步骤,1.制作好主栏目和相应子栏目的按钮元

20、件； 2.把每个子栏目做成一个影片剪辑，以“特色美景”栏目为例：就是把“特色美景”栏目下的“景点介绍”和“线路推荐”做在一个影片剪辑里。其它栏目的子栏目与此类似。 3.在主场景中第一个图层放置背景图，第二个图层适当位置放置主栏目按钮，每个子栏目的影片剪辑依次各放一个图层，并给每个子栏目剪辑实例命名。 4.给有子栏目的主栏目按钮添加代码,1.若主栏目下无子栏目，则直接添加如下代码： on(press) getURL(“你要打开的网页地址”，“_self”) /self表示在当前网页中打开，用_blank则表示在新窗口中打开。/ 2.若子栏目有子栏目，以“特色美景”按钮为例， 添加代码如下 on(

21、press) a.gotoAndPlay(2);/a为特色美景子栏目的影片剪辑实例名/ b.gotoAndStop(1); /b为其它子栏目的影片剪辑实例名,横向导航栏制作步骤,注意若还有其他子栏目c,d ,e,f也要写相应c.gotoAndStop(1),意思是当前子栏目播放，其他子栏目都停止,当鼠标移动到导航栏之外如何让子栏目消失,解决办法：制作一个透明按钮，只在点击帧绘制一透明矩形，其大小如下红色区域（能覆盖除导航栏目以外的区域,将透明按钮拖入场景中，单独放在一个图层中，并给按钮添加如下代码： on(rollOver) a.gotoAndStop(1); b.gotoAndStop(1)

22、; /意思是指当鼠标移动到该透明按钮上时，所有的子 栏目影片剪辑都停止播放。,用flash按钮制作简单的鼠标跟随效果,动画原理分析：利用按钮的 rollOver（指针经过）事件来触发一个影片剪辑（你要的跟随效果）。在场景中铺满透明度为0的按钮时，我们只要把鼠标放到场景中移动（rollover)，就会触发跟随效果的剪辑，这样就得到了鼠标跟随的动态效果,1、制作要跟随的图形或图片，例如：新建一个元件命名为ball，画一个圆即可。（画泡泡放射状填充#FFFFFF 15% #FFFFFF 45%，第二图层画高光，效果如图： 2、新建一个按钮，只需要在第一帧处画上一个任意形状的按钮（圆、方）就可以。 3

23、、新建一个影片剪辑，在第一图层第一帧处插入第2步制作的按钮元件，中心对齐到图层，在第二层第一帧处的动作里面加入stop()；在第二帧处插入ball元件，中心对齐，在第15帧处插入关键帧。并用任意变形工具将15帧处的图形变小，并且在属性栏中将其透明度调整为0，从2-15帧处补间设置动画，选中第一层的第一帧中的按钮单击右键，选择动作，在其中输入on(rollOver)gotoAndPlay(2);， 再次选中后打开属性栏中将其透明度调整为0，如图,用flash按钮制作简单的鼠标跟随效果,操作步骤,回到场景1中将剪辑拖到场景中，按住alt键复制多个剪辑，直到覆盖整个场景即可，如图。最后测试动画,控制

24、影片剪辑的脚本,把AS写在影片剪辑本身上，选中影片剪辑,必须添加事件onClipEvent onClipEvent (事件) /需要执行的脚本程序 括号里的“事件”其实是个触发器，当事件发生时，执行该事件后面花括号中的语句,onClipEvent触发事件,onClipEvent(load) : 当影片片断第一次加载到时间轴时，会触发本事件一次 onClipEvent(enterFrame) : 当影片片断加载时间轴时，不论是放映或停止状态或显示与否，都会不断触发本事件。所以只要此片断被加载后，此事件会一直不断地执行，直到影片片断被删除为止。,onClipEvent(mouseDown) 当鼠标

25、左键被按下时，会触发本事件一次。onClipEvent(mouseUp) 当被按下的鼠标左键被放开时，会触发本事件一次。 onClipEvent(mouseMove) 只要在场景中移动鼠标，就会不断触发本事件,onClipEvent触发事件,纵向导航栏实例,_root是根路径，_this指元件本身，_parent是指该元件的父元件,控制影片剪辑属性,1、影片剪辑在场景中的位置（效果） 由“_x”和“_y”属性决定的。 若每播放一帧，影片剪辑向右和向下移动10像素的位置： onClipEvent(enterFrame) this._x+=10; this. _y+=10;,2、控制影片剪辑的旋转

26、(效果) 使用“_rotation”属性，-180180 度之间，如：_rotation+=10； 3、控制影片剪辑的透明度和可见性 使用“_alpha”属性，0100 之间，如：mc. _alpha=50；_alpha+=10； 使用“_visible”属性，true或false之间,4、控制影片剪辑的大小（效果） 使用“_width”和“_height”属性，及表示纵、横向缩放百分比的“_xscale”和“_yscale”属性，如： onClipEvent(enterFrame) _width =_ width /2; _height =_ height /2; onClipEvent(e

27、nterFrame) _xscale =100*（_root._xmouse-_x）/100; _yscale =100*（_root._ymouse-_y）/100;,影片剪辑属性,setProperty详解,setProperty详解 作用：设置影片剪辑的属性； 语法：setProperty(“目标”，属性，“值”)； 属性包括,_alpha透明度 _focusrect显示聚焦框 _height高度 _highquality高品质 _name名称 _quality品质 _rotation旋转,_soundbuftime声音缓冲时间 _visible可见 _width宽度 _x水平位置 _x

28、scale水平缩放 _y垂直位置 _yscale垂直缩放,实例: setProperty(mc,_alpha,50); setProperty(mc,_rotation,200); setProperty(mc,_visible,false); getProperty详解 作用：返回指定影片剪辑的属性； 语法：setProperty(“目标”，属性)； 实例： getProperty(mc,_x,动态控制影片剪辑,1、影片剪辑的深度级别 表示影片剪辑在SWF文件中的堆叠次序。每个影片剪辑都有唯一的一个深度级别值，值越大将排在越前面。每一个深度级别只能容纳一个影片剪辑，如果分配了相同的深度级别，

29、将替换了以前的影片剪辑。如：mc.duplicateMovieClip(“mc1”,5)，即复制了一个与mc相同的影片剪辑，深度值为5。 深度值可选：-163841048575,2、影片剪辑的动态复制,duplicateMovieClip(“要被复制的影片剪辑的实例名称”, “为复制得到的影片剪辑指定名称”， 深度值)； 如：on(release) for(i=1;I10;i+) duplicateMovieClip(“mc”,”mc”+i,i); setproperty(”mc”+i,_x,random(550); setproperty(”mc”+i,_y,random(400); 复制出

30、来的影片剪辑与原来的影片剪辑在同一位置，属性也相同，利用setproperty命令修改之。实例的名称为mc+i，如mc+2,飞越星空效果实例,1、新建一长和宽为420PX；帧频：25；背景色为黑色的影片； 2、先建一影片剪辑；共30帧；是一个白色的圆从大到小水平运动的动画；及第一帧是长和宽为10的大圆；透明度为100；第30帧是一个长和宽为1PX的小圆；透明度为0；如下图,3、回到主场景；将刚刚制作好的MC；拖到主场景一帧，并命名为：ball;然后在第二帧插入帧； 4、新建一层；在第一帧加入如下AS； setProperty(ball, _alpha, random(100); setProp

31、erty(ball, _rotation, random(360); duplicateMovieClip(ball, random(100), random(100); 5、测试影片,波浪线条具体步骤,先做一影片剪辑(曲线段,颜色,形状变化),拖入场景中,实例名称取为0; 新建一层,在第一帧加动作: 第二帧,F7,加动作: 第三帧,F7,加动作,i=1; max=50; setProperty(“0”,_alpha,0); setProperty(“0”,_visible,false,duplicateMovieClip(i-1,i,i); setProperty(i,_alpha,getP

32、roperty(i-1,_alpha)+3); setProperty(i,_y,getProperty(i-1,_y)+i/10); setProperty(i,_xscale,getProperty(i-1,_xscale)+4); i=i+1,if(i=max)gotoAndPlay(2); else stop(,removeMovieClip详解,作用：删除用duplicateMovieClip创建的影片剪辑 语法：removeMovieClip(目标)； 实例： 制作一影片剪辑元件，拖入场景中，实例名称取为mc; 从公用库中拖入两个按钮，起复制和删除作用,on (release) d

33、uplicateMovieClip(mc, mc1, 1); setProperty(mc1, _x, 500,on (release) removeMovieClip(“mc1);,复制按钮中的代码表示：复制mc为mc1,删除按钮中的代码表示：删除mc1,startDrag详解,作用:在影片剪辑中开始拖放动作; 语法: startDrag(目标) 例:startDrag(_root.mc,true,0,0,200,200,限制影片剪辑拖放的范围 左、右、顶、底,锁定鼠标到中央 否则取false,提示：上面代码加在影片剪辑中,stopDrag详解 作用：停止当前正在进行的拖放动作； 语法：st

34、opDrag(); 没有参数 实例： 制作一影片剪辑元件，拖入场景中，实例名称取为mc; 选中此实例，加代码,onClipEvent (mouseDown) startDrag(_root.mc, true, 1, 1, 500, 400); onClipEvent (mouseUp) stopDrag(,表示：鼠标按下时可以拖动对象，弹起时停止拖动,自定义鼠标实例,制作一影片剪辑元件 (第1帧,制作鼠标箭头;第2帧,F6,换颜色;第1帧上加 stop();)，拖入场景中，实例名称取为mc; 给mc加代码,onClipEvent (load) Mouse.hide(); startDrag(_

35、root.mc, true); onClipEvent (mouseDown) _root.mc.gotoAndStop(2); onClipEvent (mouseUp) _root.mc.gotoAndStop(1);,表示:影片剪辑mc载入后,系统原 有鼠标隐藏,mc可以任意拖动; 鼠标按下时,跳转并停止到mc的 第二帧,弹起时,跳转并停止到mc 的第一帧,鼠标跟随实例,一、ctrl+F8新建一个影片剪辑圆2“ 二、第20帧按F6插入关键帧，做到圆从左到右并变小消失的动画.缓动调至-100,(缓动这里可以根据你的要求来设制,出来的效果也不同,三、ctrl+F8新建影片剪辑圆1.ctrl+L将圆2放入圆1对齐中心.并在属性内给影片剪辑命名为dot1“ 四、最关键的一步，新建层在第一帧右键-动作. 先定义变量，并鼠标拖拽 i = 2; startDrag(dot1, true); 按F6第2帧，随机复制影片剪辑“dot1”,代码如下： if (i40) i = 1;duplicateMovie