项目七 脚本的应用
DESCRIPTION
项目七 脚本的应用. 《FLASH 动画设计 》 精品课程组. 1. 控制影片播放. 2. 制作 LOADING. 3. 制作下雨效果. 4. 制作下雪效果. 1 、控制影片播放. 开一个已经完成的动画源文件,如图所示。. 1 、控制影片播放. 制作按钮元素。建立一个“播放”按钮元件,选择矩形工具,将笔触颜色设置为黑色,线条粗细设置为 3 ,填充颜色设置为 #FF9900 ,在图层 1 的“弹起”帧绘制一个矩形,如图所示。. 1 、控制影片播放. - PowerPoint PPT PresentationTRANSCRIPT
项目七 项目七 脚本的应用脚本的应用
《《 FLASHFLASH 动画设计》精品课程组动画设计》精品课程组
控制影片播放 1
制作 LOADING2
制作下雨效果 3
制作下雪效果 4
11 、控制影片播放、控制影片播放
开一个已经完成的动画源文件,开一个已经完成的动画源文件,如图所示。如图所示。
11 、控制影片播放、控制影片播放
制作按钮元素。建立一个“播制作按钮元素。建立一个“播放”按钮元件,选择矩形工具,将笔触放”按钮元件,选择矩形工具,将笔触颜色设置为黑色,线条粗细设置为颜色设置为黑色,线条粗细设置为 33 ,,填充颜色设置为填充颜色设置为 #FF9900#FF9900 ,在图层,在图层 11的“弹起”帧绘制一个矩形,如图所示。的“弹起”帧绘制一个矩形,如图所示。
11 、控制影片播放、控制影片播放
在“指针经过”处按在“指针经过”处按 F6F6 插入关插入关键帧,将填充颜色改为#键帧,将填充颜色改为# 669900669900 ,在,在“按下”处插入关键帧,颜色改为#“按下”处插入关键帧,颜色改为# 66699CC 699CC ,在“点击”处插入帧,在图,在“点击”处插入帧,在图层层 11 上方插入一个新的图层,在“弹上方插入一个新的图层,在“弹起”状态下输入文字“播放”,如图所起”状态下输入文字“播放”,如图所示。示。
11 、控制影片播放、控制影片播放
在库面板中,重制“播放”按钮,在库面板中,重制“播放”按钮,在打开的复制元件对话框中,将元件名在打开的复制元件对话框中,将元件名称改为“停止” 。在库面板中双击称改为“停止” 。在库面板中双击“停止”按钮的元件,将文字“播放”“停止”按钮的元件,将文字“播放”改为“停止”,如图所示。用同样的方改为“停止”,如图所示。用同样的方法“重制” 按钮元件,制作出“上一法“重制” 按钮元件,制作出“上一帧”“下一帧”“返回”三个按钮元件。帧”“下一帧”“返回”三个按钮元件。
11 、控制影片播放、控制影片播放
回到场景回到场景 11 ,在主时间轴上插入,在主时间轴上插入新的图层,命名为“按钮”,并将所有新的图层,命名为“按钮”,并将所有按钮元件拖放到舞台上,如图所示。按钮元件拖放到舞台上,如图所示。
11 、控制影片播放、控制影片播放
在“按钮”图层上方插入一个新在“按钮”图层上方插入一个新的图层命名为“的图层命名为“ AS”AS” 用于编写帧脚本,用于编写帧脚本,选中第一帧,按选中第一帧,按 F9F9 打开动作面板,在打开动作面板,在脚本区域插入脚本区域插入 stop();stop(); 命令 ,该命令主命令 ,该命令主要是停止帧的播放,如图所示。要是停止帧的播放,如图所示。
11 、控制影片播放、控制影片播放
选择“播放”按钮,在动作面板选择“播放”按钮,在动作面板的脚本区插入代码:的脚本区插入代码: on (release) {playon (release) {play();}();} ,设置当按下播放按钮时开始播放,设置当按下播放按钮时开始播放动画,如图所示。动画,如图所示。
11 、控制影片播放、控制影片播放
选择“停止”按钮,在动作面板选择“停止”按钮,在动作面板的脚本区插入代码:的脚本区插入代码: on (release) {stopon (release) {stop();}();} ,设置当按下播放按钮时停止播放,设置当按下播放按钮时停止播放动画,如图所示。动画,如图所示。
11 、控制影片播放、控制影片播放
选择“上一帧”按钮,在动作面选择“上一帧”按钮,在动作面板的脚本区插入代码:板的脚本区插入代码:
on (release) {gotoAndPlay(prevFrameon (release) {gotoAndPlay(prevFrame());}());}
设置当按下上一帧按钮时播放上设置当按下上一帧按钮时播放上一帧动画,如图所示。一帧动画,如图所示。
11 、控制影片播放、控制影片播放
选择“下一帧”按钮,在动作面选择“下一帧”按钮,在动作面板的脚本区插入代码:板的脚本区插入代码:
on (release) {gotoAndPlay(nextFrameon (release) {gotoAndPlay(nextFrame());}());}
设置当按下下一帧按钮时播放下设置当按下下一帧按钮时播放下一帧动画,如图所示。一帧动画,如图所示。
11 、控制影片播放、控制影片播放
选择“返回”按钮,在动作面板选择“返回”按钮,在动作面板的脚本区插入代码:的脚本区插入代码:
on (release) {gotoAndPlay(1);}on (release) {gotoAndPlay(1);}
设置当按下返回按钮时播放下一设置当按下返回按钮时播放下一帧动画,如图所示,保存并测试影片。帧动画,如图所示,保存并测试影片。
22 、制作、制作 LOADINGLOADING
打开上一个实例的源文件,选择打开上一个实例的源文件,选择窗口-设计面板-场景,打开场景面板,窗口-设计面板-场景,打开场景面板,增加一个“场景增加一个“场景 2”2” ,我们用它来做,我们用它来做 loaloaddingdding 的场景。拖动“场景的场景。拖动“场景 2”2” 的到“场的到“场景景 1”“1”“ 上面。 上面。
在“场景在“场景 2”2” 中新建立中新建立 44 个图层, 个图层, 从上到下分别命名为:从上到下分别命名为: ASAS 层、进度条层、进度条层、按钮层、动画层。层、按钮层、动画层。
22 、制作、制作 LOADINGLOADING
给给 ASAS 图层第一帧加上帧标签图层第一帧加上帧标签 playplay ,,然后打开动作面板,复制下面的代码并粘贴。然后打开动作面板,复制下面的代码并粘贴。// // 将电影总字节数赋值给将电影总字节数赋值给 totaltotal 变量变量total = _root.getBytesTotal();total = _root.getBytesTotal();// // 将已经下载的字节数赋值给将已经下载的字节数赋值给 loadedloaded 变量变量loaded = _root.getBytesLoaded();loaded = _root.getBytesLoaded();// // 取整计算已下载的字节数的百分比并赋值取整计算已下载的字节数的百分比并赋值给变量给变量 loadloadload = int(loaded/total*100);load = int(loaded/total*100);// // 把已下载的字节数赋值给动态文本变量把已下载的字节数赋值给动态文本变量 loaloadtxtdtxtloadtxt = "loading"+load+"%";loadtxt = "loading"+load+"%";// // 进度条同时按百分比数跳转到相应的帧上进度条同时按百分比数跳转到相应的帧上去去 ;;_root._root. 进度条进度条 .gotoAndStop(load);.gotoAndStop(load);
22 、制作、制作 LOADINGLOADING
在第在第 66 帧(帧( F7F7 )插入一个关空)插入一个关空白关键帧,复制下面的代码并粘贴:白关键帧,复制下面的代码并粘贴:
//// 如果下载字节数如果下载字节数 == 总字节数,跳转到总字节数,跳转到66 帧停止帧停止if (loaded == total) { if (loaded == total) { gotoAndStop(6);gotoAndStop(6);//// 否则跳转到标签名否则跳转到标签名 "play""play" 的帧的帧 ,, 继续继续下载下载} else {} else {gotoAndPlay("play");gotoAndPlay("play");}}
22 、制作、制作 LOADINGLOADING
创建进度条影片剪辑,命名为创建进度条影片剪辑,命名为“进度条。在这个影片剪辑上,建立“进度条。在这个影片剪辑上,建立分别为“边框线”层和 “填充色”层。分别为“边框线”层和 “填充色”层。在“边框线”层,绘制一个矩形,在在“边框线”层,绘制一个矩形,在属性面板设置:宽:属性面板设置:宽: 300300 ;高:;高: 2424 ;;XX :: -150-150 ,, YY :: -12-12 。。
22 、制作、制作 LOADINGLOADING
在在 100100 帧处帧处 F5F5 插入普通帧。选插入普通帧。选中矩形里面的填充色(中矩形里面的填充色( Ctrl+XCtrl+X )剪切,)剪切,粘贴到“填充色”层第一帧(粘贴到“填充色”层第一帧( Ctrl+ShiCtrl+Shift+Vft+V 或选择编辑菜单下的粘贴到当前或选择编辑菜单下的粘贴到当前位置),调整填充色颜色,在位置),调整填充色颜色,在 100100 帧帧处处 F6F6 插入关键帧,选中第一帧创建插入关键帧,选中第一帧创建“形状”动画,在第一帧将矩形宽改“形状”动画,在第一帧将矩形宽改为为 33 。双击矩形框在属性面板把笔触。双击矩形框在属性面板把笔触调整为调整为 22 ,颜色自定义。,颜色自定义。
22 、制作、制作 LOADINGLOADING
进度条层设置进度条及动态文本。进度条层设置进度条及动态文本。回到场景回到场景 22 中把刚做好的“进度条”中把刚做好的“进度条”元件从库中拖放到“进度条”这一图元件从库中拖放到“进度条”这一图层的第一帧上,调整位置。然后选中层的第一帧上,调整位置。然后选中舞台中的“进度条”元件,在属性面舞台中的“进度条”元件,在属性面板上写上实例名“进度条”,在第板上写上实例名“进度条”,在第 66帧插入普通帧。帧插入普通帧。
22 、制作、制作 LOADINGLOADING
选中“进度条”层,在舞台合适选中“进度条”层,在舞台合适的位置加入一个动态文本框,在属性的位置加入一个动态文本框,在属性面板上设置文本类型:动态文本,字面板上设置文本类型:动态文本,字体:体: ArialArial ,变量名:,变量名: loadtxtloadtxt ,单行,,单行,字体大小颜色自定义,相关参数如图字体大小颜色自定义,相关参数如图所示。所示。
22 、制作、制作 LOADINGLOADING
在“按钮层”第在“按钮层”第 66 帧插入一个空帧插入一个空白关键帧,选择窗口菜单下公用库,白关键帧,选择窗口菜单下公用库,打开按钮库,挑出一个自己喜欢的播打开按钮库,挑出一个自己喜欢的播放按钮, 摆放到舞台合适位置并调整放按钮, 摆放到舞台合适位置并调整大小(本例中选择的是:大小(本例中选择的是: playback---pplayback---playback-playlayback-play ) 。) 。
22 、制作、制作 LOADINGLOADING
选中舞台上的按钮元件给按钮加选中舞台上的按钮元件给按钮加上下面的代码:上下面的代码:on (release) {//on (release) {// 释放按钮释放按钮gotoAndPlay("gotoAndPlay(" 场景 场景 1", 1);//1", 1);// 跳转并播跳转并播放场景放场景 11 的第的第 11 帧帧}}
现在现在 loadingloading 就能用了,可以在就能用了,可以在“动画层”再加入一些动画影片剪辑。“动画层”再加入一些动画影片剪辑。
22 、制作、制作 LOADINGLOADING
测试影片。如果作品比较小,在测试影片。如果作品比较小,在测试的时候测试的时候 loadingloading 会瞬间就过去了,会瞬间就过去了,可以在测试影片的时候,选择“视可以在测试影片的时候,选择“视图”菜单下的“模拟下载”就可以慢图”菜单下的“模拟下载”就可以慢慢的欣赏慢的欣赏 loadingloading 的全过程了。的全过程了。
33 、制作下雨效果、制作下雨效果
思路:先做一滴雨的效果,然后思路:先做一滴雨的效果,然后复制一定数量的雨滴,这样就出现了复制一定数量的雨滴,这样就出现了许多雨了。需要说明的一点就是利用许多雨了。需要说明的一点就是利用影片的坐标属性让复制出来的雨滴从影片的坐标属性让复制出来的雨滴从不同的地方落下,这样就显得杂乱,不同的地方落下,这样就显得杂乱,真实。真实。
33 、制作下雨效果、制作下雨效果
新建文档,把素材文件夹中的图新建文档,把素材文件夹中的图片“菏塘”导入到舞台中,并调整图片“菏塘”导入到舞台中,并调整图片的大小使其与舞台的大小一致,设片的大小使其与舞台的大小一致,设置图片相对于舞台居中对齐。置图片相对于舞台居中对齐。
33 、制作下雨效果、制作下雨效果
新建名为“下雨”的影片剪辑,新建名为“下雨”的影片剪辑,在影片剪辑中选择线条工具,将笔触在影片剪辑中选择线条工具,将笔触的颜色设置为“的颜色设置为“ #CCCCCC”#CCCCCC” ,在舞台,在舞台上绘制一条斜线,选中绘制的线条按上绘制一条斜线,选中绘制的线条按 FF88 将其转换为图形元件“雨”,如图所将其转换为图形元件“雨”,如图所示。示。
33 、制作下雨效果、制作下雨效果
在图层在图层 11 的第的第 2020 帧插入关键帧,帧插入关键帧,设置元件“雨”完全透明,并移动一设置元件“雨”完全透明,并移动一定的位置,制作动画。新建图层定的位置,制作动画。新建图层 22 置置于图层于图层 11 下,在第下,在第 1515 帧插入关键帧,帧插入关键帧,绘制一个圆圈,调整位置使其中心在绘制一个圆圈,调整位置使其中心在线条“雨”的末端。将圆圈转换为图线条“雨”的末端。将圆圈转换为图形元件“涟漪”,如图所示。形元件“涟漪”,如图所示。
33 、制作下雨效果、制作下雨效果
在图层在图层 22 的第的第 2525 帧插入关键帧,帧插入关键帧,将 “涟漪” 放大(中心位置不变),将 “涟漪” 放大(中心位置不变),并设置为完全透明,创建补间动画。并设置为完全透明,创建补间动画。
33 、制作下雨效果、制作下雨效果
回到场景回到场景 11 ,将图层,将图层 11 命名为命名为“背景”,插入图层“背景”,插入图层 22 命名为“雨”。命名为“雨”。把元件“下雨”从库中拖放到图层把元件“下雨”从库中拖放到图层“雨” ,将其实例名称改为““雨” ,将其实例名称改为“ rain” rain” 。。在两个图层的第在两个图层的第 22 帧插入普通帧,如帧插入普通帧,如图所示。图所示。
33 、制作下雨效果、制作下雨效果
插入图层插入图层 33 命名为“命名为“ AS”AS” ,该层,该层用来添加脚本。选中第用来添加脚本。选中第 11 帧,在动作帧,在动作面板中输入以下脚本。面板中输入以下脚本。i=random(100);//i=random(100);// 产生随机数产生随机数duplicateMovieClip("rain","rain"+i,i);//duplicateMovieClip("rain","rain"+i,i);//复制影片复制影片setProperty("rain"+i,_x,random(550));/setProperty("rain"+i,_x,random(550));///摄制影片属性摄制影片属性setProperty("rain"+i,_y,random(400));setProperty("rain"+i,_y,random(400));
33 、制作下雨效果、制作下雨效果
选中图层“选中图层“ AS”AS” 的第的第 22 帧插入关帧插入关键帧,在动作面板中输入以下脚本。键帧,在动作面板中输入以下脚本。
gotoAndPlay(1);gotoAndPlay(1);
保存并测试影片。保存并测试影片。
44 、、制作下雪效果制作下雪效果
下雪的效果和下雨的效果制作方下雪的效果和下雨的效果制作方法是一样的,只需要把“下雨”的影法是一样的,只需要把“下雨”的影片剪辑改为“下雪”动画效果。片剪辑改为“下雪”动画效果。
新建文档,将舞台大小设置为宽新建文档,将舞台大小设置为宽650px650px 高高 320px320px ,背景为黑色。将素,背景为黑色。将素材文件夹中的图片“雪景”导入到舞材文件夹中的图片“雪景”导入到舞台上,并设置为相对于舞台居中对齐,台上,并设置为相对于舞台居中对齐,将图层将图层 11 命名为“背景”。命名为“背景”。
44 、、制作下雪效果制作下雪效果
新建图形元件 “雪花” ,用白新建图形元件 “雪花” ,用白色线条工具和椭圆工具配合绘制雪花,色线条工具和椭圆工具配合绘制雪花,如下图所示。如下图所示。
44 、、制作下雪效果制作下雪效果
新建影片剪辑“下雪”,将图形新建影片剪辑“下雪”,将图形元件“雪花”拖放到“下雪”影片剪元件“雪花”拖放到“下雪”影片剪辑的舞台上,给图层辑的舞台上,给图层 11 插入一个引导插入一个引导层,绘制一条曲线作为雪花飘落的路层,绘制一条曲线作为雪花飘落的路径,如图所示。径,如图所示。
44 、、制作下雪效果制作下雪效果
回到场景回到场景 11 ,新建“下雪”图层,,新建“下雪”图层,将影片剪辑“下雪”拖放到舞台上方,将影片剪辑“下雪”拖放到舞台上方,并影片剪辑“下雪”设置实例名为“并影片剪辑“下雪”设置实例名为“ ssnow”now” ,新建“,新建“ AS”AS” 图层,在所有图层图层,在所有图层的第的第 22 帧插入普通帧,如下图所示。帧插入普通帧,如下图所示。
44 、、制作下雪效果制作下雪效果
选择“选择“ AS”AS” 的第一帧,在脚本区的第一帧,在脚本区输入以下代码:输入以下代码:
i=random(100);//i=random(100);// 产生随机数产生随机数duplicateMovieClip("snow","snow"+i,i);//duplicateMovieClip("snow","snow"+i,i);//
复制影片复制影片setProperty("snow"+i,_x,random(550));//setProperty("snow"+i,_x,random(550));//摄制影片属性摄制影片属性
setProperty("snow"+i,_y,random(400));setProperty("snow"+i,_y,random(400));
44 、、制作下雪效果制作下雪效果
在图层“在图层“ AS”AS” 的第的第 22 帧插入关键帧插入关键帧,在该帧的行为面板中输入以下代帧,在该帧的行为面板中输入以下代码:码:
gotoAndPlay(1);gotoAndPlay(1);
保存并测试影片。保存并测试影片。