loading的制作实例

闪客沙龙

文/zro 修改/大成

1、源文件下载

2、源代码注释

3、修改补充教程

 

  大家知道一般的大的FLASH作品,如果边下载边播放,由于网速慢的原因,可能会影响播放效果,动画和声音断断续续。因此,要加一个loading动画,先完成电影动画的下载,再进行播放。动态地显示下载的进度和百分比,这是一个MTV作品最常用到的基本功能。

一、影片属性:

二、演示电影(movie)与渐变条(bar):

1、演示电影(movie):(制作该动画是为演示而用,完全可以复制一个原来自己的动画作品来代替它)。

(1)新建图形组件tween 1,将演示图片flashsun.bmp拖拽到该组件,也可以将自己准备的图片文件导入。

(2)新建图形组件Tween 2,将图形组件Tween 1拖拽到该组件。

(3)新建按钮组件replay ,用鼠标单击“反应区”,点鼠标右键“插入空白关键帧”,用矩形工具画一个矩形。

(4)新建电影剪辑组件movie:

在第1帧直第90帧,载入图形组件Tween 2,并创建移动动画。

在第91帧,插入空白关键帧,载入按钮组件replay,双击91帧跳出帧动作面板,输入其代码:

stop();

用鼠标单击矩形按钮,点鼠标右键,选择“动作”,并设置对象动作其代码如下:

on (release) {
gotoAndPlay (1);
}

2、渐变条(bar):

新建电影剪辑组件bar

(1)第一层(渐变层):在这个组件里面建立一个从1到100帧,大小由24*3到24*450的矩形的渐变,颜色就用红白渐变吧!

(2)第二层(矩形层):然后新建一层,用矩形工具画一个黄色矩形线框,框住刚才的红色渐变矩形。

用文本工具在矩形的中央建立一个文本框,设置变量为loaded,中间对齐,拖动它在矩形中央。如下图:

 

三、主场景:

将刚才的bar电影剪辑组件拖到场景中,设定它的“实例”名为bar.

1、在图层1中:

(1)第1帧,导入电影剪辑组件bar ,用字符工具在bar上方画一个字符框,大小为50*150,在“文本选项”里选择“动态文本”,变量名:speed

同样,用字符工具在bar下方画一个字符框,在“文本选项”里选择“动态文本”,变量名:time

(2)第15帧,导入电影剪辑组件movie 。

2、新建图层2 :

(1)第1帧:在“帧面板”中的“帧”里设定标签为loop。

第1帧的Action为:


byteloaded = _root.getBytesLoaded();
bytetotal = _root.getBytesTotal();
loaded = int(byteloaded /bytetotal * 100);t = getTimer ();
speed = "下载速度:" + int(byteloaded/t * 100)/100 + " K/s";
/bar:loaded = loaded+"%";
bar.gotoAndStop( loaded );
timeloaded = int(t/1000);
timeremain = int(timeloaded * (bytetotal- byteloaded) / byteloaded);
timeremain = int(timeremain / 60) + "\'" + int(timeremain % 60) + "\"";
timeloaded = int(timeloaded / 60) + "\'" + int(timeloaded % 60) + "\"";
time = "已用时间:" + timeloaded + "\r" + "估计剩余时间:" + timeremain;

(2)第14帧建立关键帧设置Action为:

if (byteloaded == bytetotal) {
gotoAndPlay ("ok");
}
else { gotoAndPlay ("loop");
}

(3)第15帧建立关键帧设置标签为:ok.此处就是我们要load的东西,可以是一个场景的开头。在此为了看到load的效果,放了一个很大的图片。设置Action为:

stop();

四、测试存盘:

Ctrl+Enter 测试影片,选择“查看”菜单下的“显示数据流”就可以慢慢的欣赏loading的全过程了,导出SWF文件,保存FLA文件。

 

新知识点:

1、除了上个实例我们学的“帧动作”以外,新接触了“对象动作”。

2、除了上个实例我们学的“实例”面板以外,新接触了“帧”面板的“标签”设置,以及“文本选项”面板的“动态文本”和“变量”的设置。

总结:

1、用电影剪辑组件bar完成loading过程,通过Action里的三个“动态文本”变量:loaded speed time 分别显示:百分比、速度和时间。

2、用电影剪辑组件movie完成电影演示过程,通过按钮组件replay完成重新播放。