本页主题: 网页中flash下载进度条制作的原理以及示例..... 打印 | 加为IE收藏 | 收藏主题 | 上一主题 | 下一主题

jacking

该用户目前不在线
级别: 论坛版主
精华: 2
发帖: 294
威望: 299 点
金钱: 2980 RMB
贡献值: 0 点
注册时间:2007-05-17
最后登录:2008-08-07

网页中flash下载进度条制作的原理以及示例.....


---- Flash动画作品以其高清晰度的画质和小巧的体积,受到了越来越多网页设计者的青睐,也越来越成为网页动画和网页图片设计制作的主流。但是从目前的网络带宽水平来看,无论是国内还是国外,网页中Flash动画的下载过程仍旧需要用上一段时间,这段时间短则几秒钟,长则数分钟,有的数十分钟也下载不完。考虑到这些,Flash动画的设计者们才不得不设计了各种各样的“动画下载进度显示”部分的动画,使得在电脑前焦急等待的人们能清楚地了解到动画下载的进度情况,而不至于面对一动不动的屏幕,苦苦等上半天。

---- 虽然设计者们想尽了无数的办法去设计这部分的动画效果,但归根结底,无外乎归为这样2种方案:一种是粗略的进度显示方案;另一种是精确的进度显示方案。然而在实际的设计过程中,无论是“粗略的进度显示”还是“精确的进度显示”,都是利用了Flash自身所带的几个功能较为完善的动作(Actions)和属性(Properties)。在此我们将为您介绍这些动作和属性的功能和用法,并结合实例,分析“网页中Flash动画下载进度显示”的制作思路和基本的制作过程。

一、常用动作(Actions)

---- Play:用于控制电影或电影夹(movie clip)的播放“开始”动作,无特别参数。

---- Stop:用于控制电影或电影夹的播放“停止”动作,无特别参数。

---- Go to:用于电影的跳转和交互动作,分为Go to and Play () 和Go to and Stop ()两种。

---- If Frame Is Loaded:用于判断是否各个帧全部下载完毕。如果下载完毕,则转向动画的正式演示;否则继续“正在下载时刻”的动画循环。

---- Set Property:用于设置电影夹的各种属性,例如_Alpha、_Xscale、_Yscale、_Visible等等。

---- Set Variable:用于设置程序中的变量值,具体请参见下面的实例分析。

二、常用属性(Properties)

---- X Position:指的是电影夹的横向位置属性。

---- Y Position:指的是电影夹的纵向位置属性。(注意:以上2个位置属性值都是相对于上一级的电影夹而言的)

---- X Scale:指的是电影夹的横向缩放比例属性。

---- Y Scale:指的是电影夹的纵向缩放比例属性。

---- (注意:以上的2个缩放比例属性值是以百分比为单位的,默认值为100)

---- _framesloaded:指的是已经加载的帧数。

---- _totalframes:指的是电影动画的总帧数。

---- 以上是在制作“Flash下载进度显示动画”时我们可能用到的一些动作和属性,下面我就按照“粗略的进度显示”和“精确的进度显示”2个方面,各举1~2个实例,分别向大家讲述一下“Flash下载进度显示动画”的具体制作过程。

三、实例

---- 例1:粗略的动画下载进度显示制作
---- (1)选取一个要加入下载进度显示的Flash电影,并在其第一个场景中的第一帧开始插入n个空白帧(快捷键F7)。在动画的开始帧中加入Label值为“start”,在动画的结束帧中加入Label值为“end”,并且应保证新插入的n个空白帧的第n帧在动画开始帧“start”之前。

---- (2)建立一个电影夹,作为在“下载时刻”的循环动画,并将其命名为“lpmovie”。动画的帧数应小于等于n,这样做是为了保证在下载时能显示完整的动画。

---- (3)在插入的空白帧中的第一帧加入如下的Actions代码:

If Frame Is Loaded ("end")
Go to and Play ("start")
End Frame Loaded


---- 在插入的空白帧的第n帧加入如下的Actions代码:
---- Go to and Play (1)
---- (4)运行动画(Ctrl+Enter)。由于是在PC机上运行,所以速度很快,不可能看到“下载时刻”的循环动画。必须在Test Movie 模式下,选菜单“Control”*“Show Streaming”,才可以看到下载的效果。并且可以模拟调制解调器的传输速率,可自行选择菜单“Control”*“14.4(1.2KB/s)”或“28.8(2.3KB/s)”、“56(4.7KB/s)”等等,也可以自行定义调制解调器的传输速率。

---- 到这里,您应该已经看到“粗略的动画下载进度显示”效果了。简单易做是“粗略的动画下载进度显示”的特点,但是这样的效果只能让您知道下载的状态,而无法了解到动画下载的进度。如果要像Windows的标准进度条那样,很直观、精确地反映出下载进度,就必须用“精确的动画下载进度显示”了。

---- 例2:精确的动画下载进度显示制作(方法一)
---- 讲“精确”无非是在Actions编程上下一些功夫,我们的目的是用“进度显示动画”显示出已下载动画帧数占总电影帧数的百分比来。具体做法如下:

---- (1)与“粗略的动画下载进度显示制作”的第(1)步相同。

---- (2)建立一个进度条形状的Graphic,但在其属性里将其Behavior改为“movie clip”。必须注意的是这个Graphic的中心十字必须放在进度条的左方,否则就不会产生向右方的推进效果了。

---- (3)在插入的空白帧中的第一帧加入如下的Actions代码:

If (_framesloaded >= _totalframes)
Go to and Play (Scene 1, "start")

---- Comment: 如果已经全部下载完毕,则开始演示动画。
Else
Set Property ("/loader", X Scale)
= (_framesloaded / _totalframes)*100
End If
---- Comment: 如果正在下载,则使进度条的横向缩放比等于“已加载帧占总帧数的百分比”。
---- 在插入的空白帧的第n帧加入如下的Actions代码:
---- Go to and Play (1)

---- (4)同“粗略的动画下载进度显示制作”第(4)步,运行动画。

---- 现在,您所看到的是很精确地按照“下载的百分比率”来显示的进度动画,这种效果不但使您能清楚的知道目前的下载状态,而且能精确地告诉您动画电影下载的进度。是不是一个很好的办法呢?

---- 但这并不是惟一的“精确”办法,编程的思路是十分灵活的,下面我再介绍一种“精确的动画下载进度显示”的例子。

---- 例3:精确的动画下载进度显示制作(方法二)

---- (1)、(2)与“精确的动画下载进度显示制作”(方法一)的第(1)、(2)步相同。

---- (3)在插入的空白帧中的第一帧加入如下的Actions代码:

If Frame Is Loaded ("end")
Go to and Play ("start")
End Frame Loaded


---- 在插入的空白帧的第n帧加入如下的Actions代码:
Set Variable: "x" = _framesloaded
Set Variable: "y" = _totalframes
Set Variable: "x" = x/y
Set Variable: "x" = x * 100

---- Comment:以上的代码与上例类似,其间的100可根据实际情况自由改变。
Set Property ("/bar", X Scale) = x * 100
Set Property ("/bar", X Position) = 50 + x/2
Go to and Play (2)

---- Comment:通过2个Set Property动作,动态地设置了bar的缩放度和左边界,从而实现了进度的精确显示效果。
---- (4)同“粗略的动画下载进度显示制作”第(4)步,运行动画。

顶端 Posted: 2007-10-06 15:49 | [楼 主]
开源嘛论坛 » Dreamweaver梦幻制作

Guest cache page, Update at 2008-12-04 09:55 桂ICP备07006725号
Powered by PHPWind v6.0 Certificate Code © 2003-07 PHPWind.com Corporation