进度条制作 一、“下载进度条”的制作 为了让朋友们收看MTV时了解作品的下载情况,也为了给你的MTV作品平添一道亮丽的风景线,可以为你的MTV增加一个下载进度条。 添加下载进度条前,你得把MTV场景中第1帧上的“stop”帧动作和播放按钮实例先删除。然后按以下步骤操作: 1、新建一个名为“下载条”的影片剪辑元件。选中第1层的第1帧,在舞台中画一个无边线填充为绿、黄、红线性渐变色的矩形,借助属性面板设置其宽和高分别为400、6。选中该矩形,用对齐面板把它“左对齐”、“垂直中齐”。 2、新建一个名为“下载进度条”的影片剪辑元件。选中第1层的第1帧,把库中的“下载条”元件拖入舞台,居中后,在属性面板里输入实例名“mc1”。新建图层2,选中第1帧,用矩形工具画一个无填充色的矩形框,线条粗1,淡黄色。借助属性面板设置其宽和高分别为402、8,居中。 3、回到主场景,在你制作的MTV场景的最上层插入一个图层,命名为“进度条”。选中第1帧,把库里的“下载进度条”元件拖入舞台的底部靠左位置(右侧留出一块放置按钮或下载进度百分数的空间)。选中舞台上的“下载进度条”实例,打开动作面板,输入影片剪辑动作脚本代码: onClipEvent (enterFrame) { mx=_root._framesloaded; max=_root._totalframes; ss1=(mx/max)*100; if (ss1<100) { _root.a=Math.round(ss1)+"%"; } if (ss1>=100) { _root.gotoAndStop(2); } this.mc1._xscale = ss1; } 4、在第2帧插入关键帧,把库里的“播放按钮”元件拖入舞台放置在“下载进度条”右侧位置。删除第2帧上的“下载进度条”实例。选中“按钮”实例,输入按钮动作脚本代码: on (release) { play(); } 5、在第3帧插入空白关键帧。 6、选中第1帧,用文本工具画一个能容纳百分比数字的文本框,放置于“下载进度条”实例右侧,在属性面板选中“动态文本”,输入变量名“a”,字体“黑体”,大小“20”,颜色“白色”。 7、再次选中第1帧,输入帧动作脚本代码: stop(); 8、至此,下载进度条就制作完成了。敲打Ctrl+Enter组合键,等播放文件导出完成后,再敲打一次Ctrl+Enter组合键,稍等片刻,你就可以查看模拟下载效果了。 *9、如果不想用矩形做下载条,而想用更形象更漂亮的曲线作进度条,那么只需按以下操作:
(1)、做一个全长100帧,按曲线运动一周的MC,同时让曲线按mc的运动进程而变色。拖入场景后注册名:jdt (2)、在语句:load = int(_root.getBytesLoaded() / _root.getBytesTotal() * 100);// 取整计算已下载的字节数的百分比并赋值给变量load后面加: _root.jdt.gotoAndStop(load);// 进度条同时按百分比数跳转到相应的帧上去; 二、“播放进度条”的制作
如果你还想添加一个播放进度条,则只须再按以下步骤操作:
1、用上述第1步的方法,制作一个名为“播放条”的影片剪辑元件。不过,最好把播放条的颜色改用单色。 2、用上述第2步的方法,新建一个名为“播放进度条”的影片剪辑元件。所不同的是,拖入“播放条”后,在属性面板里输入的实例应名“mc2”。 3、回到主场景,选中“进度条”图层的第3帧,把库里的“播放进度条”元件拖入舞台,放在底部水平居中的位置。选中舞台上的“播放进度条”实例,打开动作面板,输入影片剪辑动作脚本代码: onClipEvent (enterFrame) { nx=_root._currentframe; max=_root._totalframes; ss2=(nx/max)*100; this.mc2._xscale = ss2; } 4、这样,播放进度条也就制作完成了,你可以用上述第9步同样的方法查看模拟播放效果。 用此方法,可以独立制作播放进度条。 三、不用动作语句制作“播放进度条”
无须用脚本也可以制作播放进度条,而且很简单。操作步骤如下:
1、制作一个名为“播放条”的图形元件,宽400、高3,无边线,填充色自定。用对齐面板把它“左对齐”、“垂直中齐”。 2、在原作品的最上图层插入两个新图层,把下面的一层命名为“播放条”,把上一层命名为“进度框”。 3、选中“播放条”图层上原动画开始播放的那一帧,把库里的“播放条”元件拖入舞台,放在你认为理想的位置,在原作品的最后一帧插入关键帧。 4、选中“进度框”图层上原动画开始播放的那一帧,画一无填充色的线框,线粗0.5,框宽401,框高4,线色自定。调整该框的位置,使其刚好套住“播放条”实例。尔后把此图层加锁。 5、选中舞台中的“播放条”实例,用任意变形工具将其“右边”往左推进,让右边尽量跟左边靠近(为使操作方便,可将舞台比例放大)。最后,创建运动过程。 至此,无须动用脚本的播放进度条制作完成。至于原理嘛,我想你看到这里时肯定早已明白。 一个简单易用的进度条 把下面的代码加到-root第一桢就OK了。
var myLoading:MovieClip;
var loadInfo:MovieClip; var _lineBgcolor = "0x666666"; var _lineColor = "0x0000FF"; var _lineLen:Number = 200; var _lineH:Number = 3; var _txtColor; var _txtAlign:String = "center"; var tb:Number; var txtFormat:TextFormat = new TextFormat("Arial", null, 0x000000, true); myLoading = _root.createEmptyMovieClip("myLoading",10); //进度条 loadInfo = myLoading.createEmptyMovieClip("line", 10); loadInfo.lineStyle(1, _lineColor, 20); loadInfo.moveTo(0, 0); loadInfo.lineTo(_lineLen, 0); loadInfo.lineTo(_lineLen, _lineH); loadInfo.lineTo(0, _lineH); loadInfo.lineTo(0, 0); //进度显示文本 loadInfo.createTextField("txt", 30, 0, 0, _lineLen, 22); loadInfo.txt.autoSize = _txtAlign; //设置进度条的位置(居中于主场景) loadInfo._x = (Stage.width - _lineLen)/2; loadInfo._y = Stage.height/2; //获得影片大小并stop,再onEnterFrame tb = _root.getBytesTotal(); _root.stop(); myLoading.onEnterFrame = function(){ var lb:Number = _root.getBytesLoaded(); var percent:Number = Math.round(lb/tb*100); loadInfo.txt.text = percent+"%"; loadInfo.txt.setTextFormat(txtFormat); loadInfo.lineStyle(_lineH, _lineBgcolor, 10); loadInfo.moveTo(0, _lineH/2); loadInfo.lineTo(percent*_lineLen/100, _lineH/2); if (percent == 100) { _root.play(); delete this.onEnterFrame; loadInfo.clear(); loadInfo.txt.text = ""; } } 在Flash中测试loading的最好方法是: 按下CTRL+Enter键后,选择菜单:“视图”-“模拟下载”,如果选择网速慢一点,任何短小的动画也可以测试。 loading现在是千变万化,但万变不离其宗,就是二、三条指令,搞懂其意思,自己也可来个百变loading。 |
|
来自: st清霜 > 《flash GIF 动画教程》