1 / 21

2D 动画脚本语言设计

多媒体设计与制作专业教研室 王正友. 2D 动画脚本语言设计. 模块 03 进阶（情境 07-08 ）. 能力（技能）目标 1 、 掌握影片剪辑加载字节数计算 ； 2 、 掌握 url 文档加载 ； 3 、 掌握缓冲移动公式。 知识目标 1 、 影片剪辑加载（流处理）的字节数 MovieClip.getBytesLoaded() 、指定的影片剪辑的大小 MovieClip.getBytesTotal() ； 2 、 将来自特定 URL 的文档加载到窗口中 getURL() ；

desirae-rodriquez
Download Presentation

2D 动画脚本语言设计

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 多媒体设计与制作专业教研室 王正友 2D动画脚本语言设计

  2. 模块03 进阶（情境07-08） • 能力（技能）目标 1、掌握影片剪辑加载字节数计算； 2、掌握url文档加载； 3、掌握缓冲移动公式。 • 知识目标 1、影片剪辑加载（流处理）的字节数MovieClip.getBytesLoaded()、指定的影片剪辑的大小MovieClip.getBytesTotal()； 2、将来自特定URL的文档加载到窗口中getURL()； 3、缓冲移动公式：this._x=this._x+(_root.newx-this._x)/n。 sppc

  3. 情境07 动画预载—FLASH载入等待Loading—漂亮的“楼顶” 动画演示（源文件3-7.fla） 知识点：①影片剪辑加载（流处理）的字节数 ②影片剪辑的大小 sppc

  4. 脚本语言 使用载入字节数判断 loading 代码： 1、使用格式 b=getBytesTotal(); a=getBytesLoaded(); 参数说明： getBytesTotal()获取总的字节数、getBytesLoaded();已经下载的字节数。 2、用法举例 b=getBytesTotal(); // 获取总的字节数 a=getBytesLoaded(); // 已经下载的字节数 onEnterFrame=function(){ // 进入帧时 , 进行判断 if (a == b) { // 如果载入的字节数等于总的字节数 delete this.onEnterFrame //删除进入帧 gotoAndPlay("frame"); // 转入到你要播放的帧 } else { a=getBytesLoaded(); // 已经下载的字节数 percent=int(a/b*100)+"%"; // 计算已经下载的百分比 } } //把上面方法放入第1帧就可以了。 sppc

  5. 脚本语言 使用载入的帧数判断 用 Action 语法 if frame is loaded 来实现 , 新建一层，这层专门放 Action 第1帧： if FrameLoaded (" 场景 ", frame) { // 假如场景中祯数已经载入 goto and play() // 跳至并播放某某祯 ( 自己设定 ) } 第2帧： gotoand lay(" 场景 1", 1) // 跳至并播放第1祯循环 再加上一个 load MC 循环播放在这两帧的中间，就 OK 了。 此语句的缺点是，它只能判断欲载程序是否到某一帧。可是如果此帧的后面有许多音乐或位图，播放以后还是不流畅的。 sppc

  6. 添加脚本 • ①在播放按钮图标的MC上输入： • onClipEvent(load){ • _root.stop(); • this._visible=0;} • onClipEvent(enterFrame){//影片剪辑与帧频同步触发以下动作 • load=int(_root.getBytesLoaded()/_root.getBytesTotal()*100); • //计算下载字节数的百分比 • _root.xianshi.shuzi="已下载："+load+"%"; //动态显示下载进度 • _root.xianshi.jindutiao._width=2*load;//进度条总长200像素，所以百分数乘２ • if(_root.getBytesLoaded()==_root.getBytesTotal()){//下载的字节数等于文件的字节数时执行后面命令了。 • this._visible=1; • _root.xianshi._visible=0;} • } • on(release){ • _root.play(); • } sppc

  7. 交互分析 ①一个有播放图标的MC写入Loading和play脚本。 ②一个命名为“xianshi”的MC嵌套若干用于辅助显示的元件，此实例有进度条、动态文本、和一个有帧帧动画的MC。 ③以上两个MC单独放在一个图层的第1帧，第2帧加空白关键帧，或将该图层的从第2帧起以后的帧完全删除。 ④令影片开始处于等待状态，检测影片的总长度和下载的长度，并时刻进行比较，当下载完全部或大部后开始播放。 要点分析 ①Loading的核心就是_root.getBytesLoaded()和_root.getBytesTotal()的比较，这个实例是_root.getBytesLoaded()==_root.getBytesTotal()，即下载100%的SWF文件，其实根据网速，可以调整到下载大部分后就可以开始播放，余下部分是在播放过程中继续下载，如：_root.getBytesLoaded()>_root.getBytesTotal()*80/100，这样可以减少下载等待时间又可保证播放的连贯性。 ②在本地机上测试Loading的方法是键入【Ctrl+Enter】。 sppc

  8. 上机实验十七 发挥各自的想象力，制作出漂亮的“楼顶”。 sppc

  9. 情境08 导航条—漂亮的菜单 动画演示（源文件3-8.fla） 知识点：①将来自特定URL的文档加载到窗口中②缓冲移动公式 sppc

  10. 脚本语言 获取超链接命令 1、使用格式 getURL(url,windows) 参数说明： （1）url：是一个字符串，表示文档的URL。 （2）windows：是一个可选的字符串，用来指定应将文档加载到其中的窗口或HTML框架。 2、用法举例 制作一个按钮，并给该按钮添加如下动作代码： on (press) { getURL("http://www.sppc.edu.cn", "_blank"); } 运行结果：单击该按钮会打开一个网页。 sppc

  11. 脚本语言 缓冲移动公式 缓冲公式是在Flash Action Script编程应用中最常用到的一个公式。运用缓冲公式，可以很自然地模拟物体在阻力作用下的运动。许多精美的韩国导航菜单就是用缓冲公式的原理设计的。 1、使用格式 缓冲公式的原理可以用下图表示： |←（目标位置-mc._x）→| ●_____________________| MC 目标 根据牛顿的物体运动定律，在零阻力的情况下物体运动的速度是恒定的，其速度可以表示为v=s/t；缓冲运动是模拟阻力环境下的物体运动，是一种匀减速运动，图中MC向右运动，其离目标位置越来越近，上面公式中的S也越来越小（图中的s的变化是这样的：目标位置-mc._x。当MC向右运动一段，目标位置-mc._x就尖小一段）。 在匀速运动的公式中看来，单位时间不变，s减小，速度v也要跟着减小，直到最后静止下来。 sppc

  12. 脚本语言 mc._x = 50; onEnterFrame = function () { mc._x += 5; if( mc._x > 500){ mc._x = 50; } }; 效果文件 简单匀速.fla 缓冲公式可以这样表示： mc._x += (目标位置-mc._x)*缓冲系数 公式中的缓冲系数就是每次循环靠近给定值或鼠标的系数，而达到缓冲的效果。不同的缓冲系数可以得到不同的运动效果，大家可以自己改动一下这个系数试试运动效果。当然，缓冲系数的值必须小于1，这点很容易在数学上做出解释。 SPPC

  13. 脚本语言 2、用法举例 1)首先在场景上画一个圆或导入一个立体球， 并转换成Movieclip, 命名为 mc。 2)在场景的第一个frame上使用这个代码：(500为目标坐标距离例如：鼠标坐标距离）mc._x = 100;onEnterFrame = function() { mc._x += (500 - mc._x) * .1;}3)测试影片 你应该会看到圆形会从左边开始向右移 动，之后慢慢地停下来。那么原因是什么呢？ 效果文件 简单缓动1.fla 主要的代码为 mc._x += (500 - mc._x) /10; 为了方便大家理解， 我们就把这个代码一步步的分析一下吧。 开始我们设定mc的_x为100，onEnterFrame会让代码不断的循环，那么接下来mc._x就会是： sppc

  14. 脚本语言 mc._x 新位置 = mc._x + (500 - mc._x) /10; mc._x 新位置 = 100 + (500 - 100) /10; mc._x 新位置 = 100 + (400) /10; mc._x 新位置 = 100 + 40; mc._x 新位置 = 140; //第一次圆形移动到的位置 再次循环，把得到的mc._x再次代入： mc._x 新位置 = mc._x + (500 - mc._x) /10; mc._x 新位置 = 140 + (500 - 140)/10; mc._x 新位置 = 140 + (360) /10; mc._x 新位置 = 140 + 36; mc._x 新位置 = 176; //第二次圆形移动到的位置 那么接下来一直不停的循环， mc._x的值一直增加，而运算公式（500 - mc._x)就会越来越少，但（500 - mc._x)永远不会是0，只能无限接近0，到最后移动的距离也会越来越近，直到肉眼看不出在移动，这就是缓冲的公式了。 SPPC

  15. 交互分析 导航条也是菜单的一种，是网页上普遍都用到的一个种便捷的翻阅形式，形式多种多样，我们这里是一个简单的实例。 基本思路 ①制作菜单，类型为MC，上面有文字标识，嵌套在标签剪辑中，鼠标滑过时可以改变字的大小。 ②主场景中水平排开外观一致的标签剪辑MC，嵌套在标签里的文字也是MC，这里分别是：首页、二页、三页、四页。 ③用外形和标签同样大的MC作为光标，内部有形状补间，第1帧要设定stop。 ④作一类型为MC的光标，给其加动作，可以“弹性”地向某点靠近，意思就是移动方式不要一步到位，避免呆板，就是为好看。 ⑤当鼠标滑过某一个标签，光标就以颜色和宽度变化的形态逐步向这点靠近。 ⑥单击标签都有一个链接地址被打开，转向指定的页面。 ⑦设定限制，当鼠标移出范围后，光标以初始形态停在最后滑过的标签上。 sppc

  16. 添加脚本 • ①在标签1，实例b1，上输入：（标签1在MC剪辑的下面） • on (rollOver) {//鼠标滑过 • h = 1; • i = 1; • _root.newx = this._x; //将这MC的坐标X的值赋与_root.newx • } • on (rollOut) {//鼠标滑出 • h = 0; • } • onClipEvent (enterFrame) { //以帧频频率执行以下动作 • if (h == 1) {//当变量h等于1，就是鼠标滑过此MC时，执行以下动作 • if (i>0 && i<21) { //i同时满足大于0，小于21的条件 • this.z._xscale = 100+i*1.8;//嵌套在此MC里的“z”水平比例增加i*1.8 • this.z._yscale = 100+i*1.8;//嵌套在此MC里的“z”垂直比例增加i*1.8 • _root.mc._xscale = 100-i*10;//主场景的“mc”水平比例减少i*10 • _root.mc.play(); • i++; • } sppc

  17. 添加脚本 • } else {//当变量h不等于1，就是鼠标滑出此MC时，执行以下动作 • if (i>1 && i<22) { • this.z._xscale = 100+i*1.8;//嵌套在此MC里的“z”水平比例减少i*1.8 • this.z._yscale = 100+i*1.8;//嵌套在此MC里的“z”垂直比例减少i*1.8 • i--; • } • } • } • on (press) { • getURL("http://bbs.flasher123.com/", "_blank "); • } sppc

  18. 添加脚本 • ②在光标MC上输入：( 此MC叠加在标签1上） • onClipEvent (load) { • root.newx = this._x; // 设一变量取得此 MC 的横坐标点 • } • onClipEvent (enterFrame) { • this._x = this._x+(_root.newx-this._x)/5; • //不断地将变量 newx 与 MC 的横坐标值的差的 1/5 加上 MC 的横坐标值，赋值到新的 MC 的横坐标值，变量 newx 与 MC 的横坐标值的差是在趋于 0 的变化中。 • if (_root._ymouse>75 || _root._ymouse<25 || _root._xmouse<12 || _root._xmouse>534) { • //满足其中的任一条件，就执行后面语句，为的是避免在光标变化过程中鼠标移出后有没展开的状态. • this._xscale = 100; • } • } • ③标签2，3，4实例b2，b3，b4上脚本同标签1，实例b1。 sppc

  19. 要点分析 ①this._x=this._x+(_root.newx-this._x)/5，一个缓冲移动公式，是不断地将变量newx与MC的横坐标值的差的1/5加上MC的横坐标值，赋值到新的MC的横坐标值，变量newx与MC的横坐标值的差是在趋于0的变化中，这样就可实现逐步靠近目标的效果。还可以用具体的数值代入公式中，那样对分析理解其作用，是比较简便的方法，熟练掌握后还可以增加抖动率(一个由大逐渐变小直至0的的一个变量)，会更好看。 ②if(_root._ymouse>75||_root._ymouse<25||_root._xmouse<12||_root._xmouse>534)，“逻辑或”条件判断，满足其中的任一条件，就执行后面语句，这里是为的避免在光标变化过程中鼠标移出后有没展开的状态，因为光标在移动过程中有宽度变化。 sppc

  20. 上机实验十八 动画演示（源文件3-8-1fla） 设计一个纵向排列的菜单。 sppc

  21. Thank you

More Related