Flash加载外部文件创建进度条3种方法

所属分类: 媒体动画 / Flash教程 阅读数: 46
收藏 0 赞 0 分享
加载外部文件的进度条(看帮助文档整理),只适合那些不愿看帮助文档的新手。我只不过加了一些注释。
为加载图像文件或 SWF 文件创建进度条
创建一个名为 loadImage.fla 的新 Flash 文档。
选择"修改">"文档",在宽度文本框中键入 700,在高度文本框中键入 500,从而更改文档的尺寸。
在时间轴中选择第 1 帧,然后在"动作"面板中键入下面的代码: // 创建剪辑来承载您的内容
this.createEmptyMovieClip("progressBar_mc", 0);
progressBar_mc.createEmptyMovieClip("bar_mc", 1);
progressBar_mc.createEmptyMovieClip("stroke_mc", 2);
// 创建进度框
with (progressBar_mc.stroke_mc) {
lineStyle(0, 0x000000);
moveTo(0, 0);
lineTo(100, 0);
lineTo(100, 10);
lineTo(0, 10);
lineTo(0, 0);
}
//创建进度条
with (progressBar_mc.bar_mc) {
beginFill(0xFF0000, 100);
moveTo(0, 0);
lineTo(100, 0);
lineTo(100, 10);
lineTo(0, 10);
lineTo(0, 0);
endFill();
_xscale = 0;
}
//进度坐标
progressBar_mc._x = 2;
progressBar_mc._y = 2;
//加载进度
var mclListener:Object = new Object();
//开始加载时进度条缩放为0
mclListener.onLoadStart = function(target_mc:MovieClip) {
progressBar_mc.bar_mc._xscale = 0;
};
//在加载过程中进度条进行缩放
mclListener.onLoadProgress = function(target_mc:MovieClip, bytesLoaded:Number, bytesTotal:Number) {
progressBar_mc.bar_mc._xscale = Math.round(bytesLoaded/bytesTotal*100);
};
//加载完成后进度移除
mclListener.onLoadComplete = function(target_mc:MovieClip) {
progressBar_mc.removeMovieClip();
};
//当执行加载的剪辑的第一帧上的动作时调用(这里设置加载的外部文件的宽高设置)
mclListener.onLoadInit = function(target_mc:MovieClip) {
target_mc._height = 500;
target_mc._width = 700;
};
// 创建一个剪辑来承载图像。
this.createEmptyMovieClip("image_mc", 100);
var image_mcl:MovieClipLoader = new MovieClipLoader();
image_mcl.addListener(mclListener);
image_mcl.loadClip("http://www.helpexamples.com/flash/images/gallery1/images/pic3.jpg", image_mc);
为加载 MP3 文件创建进度条
创建一个名为 loadSound.fla 的新 Flash 文档。
在时间轴中选择第 1 帧,然后在"动作"面板中键入下面的代码:
//设置宽高变量
var pb_height:Number = 10;
var pb_width:Number = 100;
//在影片剪辑pb中创建进度
var pb:MovieClip = this.createEmptyMovieClip("progressBar_mc", this.getNextHighestDepth());
//在影片剪辑pb中创建进度条
pb.createEmptyMovieClip("bar_mc", pb.getNextHighestDepth());
//在影片剪辑pb中创建进度条右边直线
pb.createEmptyMovieClip("vBar_mc", pb.getNextHighestDepth());
//在影片剪辑pb中创建进度框
pb.createEmptyMovieClip("stroke_mc", pb.getNextHighestDepth());
//在影片剪辑pb中创建动态文本
pb.createTextField("pos_txt", pb.getNextHighestDepth(), 0, pb_height, pb_width, 22);
//影片剪辑pb的坐标设置
pb._x = 100;
pb._y = 100;
//画进度条
with (pb.bar_mc) {
beginFill(0x00FF00);
moveTo(0, 0);
lineTo(pb_width, 0);
lineTo(pb_width, pb_height);
lineTo(0, pb_height);
lineTo(0, 0);
endFill();
_xscale = 0;
}
//画进度条右边直线
with (pb.vBar_mc) {
lineStyle(1, 0x000000);
moveTo(0, 0);
lineTo(0, pb_height);
}
//画进度框
with (pb.stroke_mc) {
lineStyle(3, 0x000000);
moveTo(0, 0);
lineTo(pb_width, 0);
lineTo(pb_width, pb_height);
lineTo(0, pb_height);
lineTo(0, 0);
}
//设置一些变量
var my_interval:Number;
var my_sound:Sound = new Sound();
//加载声音自动调用
my_sound.onLoad = function(success:Boolean) {
if (success) {
trace("sound loaded");
}
};
//声音播放完毕时调用
my_sound.onSoundComplete = function() {
clearInterval(my_interval);
trace("Cleared interval");
}
//加载声音路径
my_sound.loadSound("http://www.helpexamples.com/flash/sound/song2.mp3", true);
//每隔一定时间就调用下面的updateProgressBar函数
my_interval = setInterval(updateProgressBar, 100, my_sound);
function updateProgressBar(the_sound:Sound):Void {
//设置声音进度(声音已播放时间除以声音总时间乘以100)
var pos:Number = Math.round(the_sound.position / the_sound.duration * 100);
//进度条进行缩放
pb.bar_mc._xscale = pos;
//进度条右边直线的X坐标等于进度条的宽
pb.vBar_mc._x = pb.bar_mc._width;
//动态文本显示进度
pb.pos_txt.text = pos "%";
}
为加载视频创建进度条
创建一个名为 flvProgress.fla 的新 FLA 文件。
在"库"面板("窗口">"库")中,从"库"弹出菜单中选择"新建视频"。
在"视频属性"对话框中,为视频元件命名并选择"视频"(由 Actionscript 控制)。
单击"确定",创建一个视频对象。
将该视频对象从"库"面板拖动到舞台上,以创建视频对象实例。
使视频对象在舞台上保持选中状态,在属性检查器("窗口">"属性">"属性")中的"实例名称"文本框中键入 my_video。
使视频实例保持选中状态,在宽度文本框中键入 320,在高度文本框中键入 213。
在时间轴中选择第 1 帧,然后在"动作"面板中键入下面的代码:
//创建 NetConnection 对象,您可以将该对象与 NetStream 对象一起使用来播放视频流 (FLV) 文件
var connection_nc:NetConnection = new NetConnection();
对于此参数,必须传递 null
connection_nc.connect(null);
创建可用于通过指定的 NetConnection 对象播放 FLV 文件的流
var stream_ns:NetStream = new NetStream(connection_nc);
//指定将在舞台上的 Video 对象的边界内显示的视频流
my_video.attachVideo(stream_ns);
//播放外部视频 (FLV) 文件
stream_ns.play("http://www.helpexamples.com/flash/video/typing_short.flv");
//创建动态文本(显示进度)
this.createTextField("loaded_txt", this.getNextHighestDepth(), 10, 10, 160, 22);
//创建进度影片剪辑
this.createEmptyMovieClip("progressBar_mc", this.getNextHighestDepth());
//在进度影片剪辑中创建进度条
progressBar_mc.createEmptyMovieClip("bar_mc", progressBar_mc.getNextHighestDepth());
//画进度条
with (progressBar_mc.bar_mc) {
beginFill(0xFF0000);
moveTo(0, 0);
lineTo(100, 0);
lineTo(100, 10);
lineTo(0, 10);
lineTo(0, 0);
endFill();
_xscale = 0;
}
//在进度影片剪辑中创建进度框
progressBar_mc.createEmptyMovieClip("stroke_mc", progressBar_mc.getNextHighestDepth());
//画进度框
with (progressBar_mc.stroke_mc) {
lineStyle(0, 0x000000);
moveTo(0, 0);
lineTo(100, 0);
lineTo(100, 10);
lineTo(0, 10);
lineTo(0, 0);
}
//每隔一定时间就调用下面的checkBytesLoaded函数
var loaded_interval:Number = setInterval(checkBytesLoaded, 500, stream_ns);
function checkBytesLoaded(my_ns:NetStream) {
//进度值设置
var pctLoaded:Number = Math.round(my_ns.bytesLoaded / my_ns.bytesTotal * 100);
//动态文本显示进度
loaded_txt.text = Math.round(my_ns.bytesLoaded / 1000) " of " Math.round(my_ns.bytesTotal / 1000) " KB loaded (" pctLoaded "%)";
//进度条进行缩放
progressBar_mc.bar_mc._xscale = pctLoaded;
//加载完成后清除间隔
if (pctLoaded>=100) {
clearInterval(loaded_interval);
}
}
更多精彩内容其他人还在看

Flash cs3绘制人物高级行走动画教程

本教程向大家介绍Flash cs3绘制人物高级行走动画效果,教程难度不是很大,绘制方法及过程介绍的也非常详细,教程很实用,转发过来,希望大家喜欢
收藏 0 赞 0 分享

Flash CS4来制作漂亮的气泡动画教程

本教程向脚本之家的朋友介绍用Flash CS4来制作漂亮的气泡动画,制作出来气泡真的很好看,制作效果是采用代码形式实现,觉得很不错,转发过来,感兴趣的朋友可以一起来学习
收藏 0 赞 0 分享

flash基础教程:帧、关键帧、空白帧概念及区别介绍

动画的产生是帧来实现的,那什么是帧?帧、关键帧和空白帧之间又有什么区别?本文就为大家介绍一下三者之间的关系
收藏 0 赞 0 分享

Flash教程:动画背景的绘制方法之透视篇(给新手)

Flash动画在网络上的广泛传播,已经成为上网一族喜闻乐见的一种艺术形式。动画背景的绘制方法有很多,也有很多表现方法。这里将结合透视学的基础知识向大家简单的介绍一下动画背景的绘制。
收藏 0 赞 0 分享

Flash AS入门教程:Flash AS3.0制作有年份有日期的时钟

本教程是向大家介绍利用Flash AS3.0制作有年份有日期的时钟,虽然制作时钟老套了点,但它确可以较全面地应用到时间日期和间隔等知识,仍不失为较好的入门练习,转发给大家,希望对大家有所帮助
收藏 0 赞 0 分享

Flash相册制作大师具体该如何使用 Flash相册制作大师使用教程

在本文中我们将会看到的是Flash相册制作大师的具体使用的方法
收藏 0 赞 0 分享

flash基础教程:混色器面板图文介绍

混色器面板是Flash中用于色彩处理的一个重要面板,熟练地使用该面板,可以帮助用户快速地完成色彩的填充,编辑出色彩丰富的图形。本教程为大家详细介绍一下混色器面板,希望对大家有所帮助
收藏 0 赞 0 分享

25个绝对让你应接不暇的Flash网站创意

在Web设计过程中,运用成熟的Flash技术可以把你任意想到的idea表现到产品页面中。这里为你整理发现了25个绝对让你应接不暇的 Flash网站创意,更好地体现网站的互动应用,同时可以让你大饱眼福,一起来欣赏吧
收藏 0 赞 0 分享

教你用Flash制作非常酷的二进制时钟动画

今天在这个教程中我们将学习用Flash做一个不同寻常的,但非常酷的时钟:一个二进制时钟,中间用到了代码,但介绍地很详细,相信很值得大家学习
收藏 0 赞 0 分享

Flash动画特效制作技巧:制作超酷的文字炸开动画效果

本教程向大家介绍Flash动画特效制作技巧,本实例是制作文字炸开的动画效果,制作效果非常酷,制作过程也比较简单,喜欢的朋友可以过来学习一下这种制作方法
收藏 0 赞 0 分享
查看更多