china.com
主页
新闻
体育
游戏
文化
教育
健康
财经
科技
旅游
军事
娱乐
商贸
  科技动态 硬件广场 下载基地 网络教室 网络冲浪 科学博览 移动时代 手机上网 桌面壁纸 科技商情  

第四课 预载 Preload 的制作


  你有没有碰到做完一个大作,在本地预览完美流畅,但一传上网络,就断断续续呢?没办法,基于现在的网速,这种问题你不可能碰不到。那么如何解决这个问题呢?答案是做一个Preload预载。这样你的动画就不会断断续续让人看了没有激情,也不会象GIF动画那样杳无音讯,等半天也不出来了,至少你的动画给了观者一个提示——等待。那么在这节课里,我们就来学几种 Preload 的做法。

一、简单的静态Preload
  一个静态的 Preload ,就象右面一样,在载入动画时,在屏幕上显示Loading的字样,待动画载入完毕后,Loading字样消失动画开始正式播放。这是最简单的 Preload 。

     在开始做 Preload 之前,我们先来分析一下 FLASH 动画会出现停顿和制作 Preload 的原理。我们知道,FLASH动画是由帧组成的。在网路上播放FLASH动画的时候,采用了所谓“流(Stream)”的技术,载入一帧,就播放一帧。当某一帧中的内容太多(如有声音、符号过多等)时,载入那一帧就显得非常困难,需要的时间就要长很多,所以就出现了停顿的现象。而我们做 Preload 的目的就是把一些难以载入的帧载入后再播放动画,最简单而安全的方法,就是待所有帧载入后才开始播放动画。所以,制作 Preload 的关键就是判断是否把所有的帧都载入内存了。

  了解了制作 Preload 的原理,我们就可以动手来做了。假设你已经做好了一个动画,那么如何给他来添加一个简单的 Preload 呢?首先,对每一层都进行如下操作:用鼠标选中这一层的所有帧,然后把选中的这些帧向后拖动两格,即在第一帧前空出两个空帧,这样第一帧就变成了第三帧。如下图所示。记住对每一帧都要如此操作。这样,每一层的开始都有了两个空白帧。下面我们就利用这两个空白帧来制作 Preload 。

用鼠标选中这一层的所有帧
把选中的这些帧向后拖动两格

  首先任选一个层(因为开始两帧都是空帧,所以每一层都一样),在第一帧画上“Loading”的字样,就和刚才我们看到的那个静态Preload的画面一样。接着,把第一帧复制到第二帧,使第一和第二帧画面相同,但是,我们在第二帧就要进行判断是否已经把所有帧都载入到内存中了:如果载入完毕,就向下播放动画;如果没有载入完毕,则跳回第一帧。所以我们要在Timeline区的第二帧的方格内单击右键,选择 Properties... -> Action 为这一帧添加Action。点击加号,选择 If,进行判断。在判断的时候,我们就要利用到 _framesloaded 和 _totalframes 两个内部变量了,前者是已经载入内存的帧数,后者是这个动画的总帧数。所以我们只要判断这两个变量的值是否相等就可以了,如果相等则载入完毕,不等则没有载入完毕。所以我们按照下图所示填写条件框。然后点击条件框下的 Add Else/Else If clause 按钮,添加否则语句。最后,我们要在判断中加入跳转的指令了。在 If 和 Else 之间加入 Go to and Play (3),表示载入完毕开始播放动画;在 Else 和 End If 之间加入 Go to and Play (1),表示未载入完毕回到第一帧。这样,第二帧的Action就应该是这样了:
    If (_framesloaded = _totalframes)
      Go to and Play (3)
    Else
      Go to and Play (1)
    End If


    到这里,这个简单的 Preload 就做好了,上传到你的服务器上,看看效果怎么样。

判断的条件
在 If 和 Else 之间加入 Go to and Play (3),表示载入完毕开始播放动画;在 Else 和 End If 之间加入 Go to and Play (1),表示未载入完毕回到第一帧。

二、有进度条的 Preload 的制作

    学过了简单的 Preload 的制作,我们来看看有进度条的 Preload 是如何制作的。有进度条的 Preload (如右图)能让浏览者知道大约需要多少时间才能把动画载入,所以被许多Flasher所采用。别看它好像挺复杂,其实原理和前面所讲的简单的 Preload 是一样的,同样也用了 _framesloaded 和 _totalframes 两个内部变量来作判断。其实做这种 Preload 有很多种实现方法,比如做一个进度条形变的100帧的MC等,但在这里,我给大家介绍的是一种比较简单的利用Action Script做出的能精确到1%的待进度条的 Preload 的做法。

  首先,和前面一样,在动画前也要空出几个空的关键帧,不过,这次要多空出一个,一共空三个空帧。

    接着,在第一帧写上“Loading...”的字样,并画上一个带外框的矩形作为进度条。(如下图)然后用箭头工具(Arrow)选中进度条中的蓝色(内部)部分(即不选外框)。把它转化为MC(Convert to Sybmol)。现在在书签区选择编辑这个MC。我们要做的工作是让这个MC的中心十字对准进度条的左端(这样做的目的有助于编程控制进度条的长度)。具体的做法是,按下Ctrl+K或者在菜单里选择 Modify -> Align ,出现对话框后按照左图选择,别忘了在Align to page上打个勾。点击OK,看到十字中心对准了进度条的左边了吧。好,回到编辑Scene的状态,我们看到进度条中间的蓝色长条的位置已经偏离了,这是因为我们把MC中的内容做了修改的原因。现在我们就选中这个MC,用键盘上的方向键把这个MC的位置进行调整,使进度条在外框之内,就像我们没有编辑这个MC的时候一样。接下来,还是选中这个MC,为了能对进度条的长度进行控制,我们还要给它取一个实体名。在菜单里选择 Modify -> Instance -> Definition ,在 Instance name 相中填入一个实体名,比如 load 。在命名实体名之后,我们要把这个MC的Alpha值设为0,目的是播放第一帧时,进度条的长度是100%,为了不让浏览者看到100%的进度条所以要把Alpha值设成0。在MC上单击右键,选择 Properties... -> Color -> Alpha ,把Alpha值设成0。第一帧就完工了,第一帧的最终状态如下图。

在第一帧写上“Loading...”的字样,并画上一个带外框的矩形作为进度条
按下Ctrl+K或者在菜单里选择 Modify -> Align
第一帧的最终状态,进度条是透明的

  接下来要做第二和第三帧了,我们先来看一下第二和第三帧的作用。在第一帧画好基础图形之后,第二帧要做的是控制进度条的长度,第三帧是判断是否载入完毕。所以,和前面简单的 Preload 相比,这个 Preload 其实只是多了第二帧的内容。

    下面我们就来看一下第二帧的做法。

    先复制第一帧到第二帧,使第二帧的内容和第一帧保持一致。接下来就是编程的工作了。


    在Timeline区第二帧的方格里单击右键,选择 Properties... -> Action ,然后加入下面的程序:

    Set Property ("/Load", X Scale) = _framesloaded / _totalframes * 100
    Set Property ("/Load", Alpha) = "100"

    Set Property这个Action Script语句是设定实体的属性的。第一行中设定的是实体名为Load的实体的X轴宽度,其宽度设为原长的(_framesloaded / _totalframes * 100)%,这样就可以做到精确到1%的效果了;第二行是把这个实体的Alpha值设为100,这样在第一帧里的不可见的进度条就被显示出来了,这一行之所以要放在后面是因为要先设好长度再显示进度条。关于 Set Property 可以是值得属性,参看右面的列表。

    第三帧的做法,和前面的简单的Preload的第二帧的做法基本相同(也要复制第一帧到第三帧),只是程序改为了(注意 Go to and Play 后帧数的变化):

    If (_framesloaded = _totalframes)
      Go to and Play (4)
    Else
      Go to and Play (2)
    End If
属     性
作      用
X Position
设置Movie Clip的X坐标值,坐标值可按Ctrl+Alt+Shift+R来显示。在Value栏填上具体的值
Y Position
设置Movie Clip的Y坐标值。在Value栏填上具体的值
X Scale
设置Movie Clip在水平方向的缩放比例,正常大小的值是100,若在Value栏设为10,则向水平方向缩小十倍
Y Scale
设置Movie Clip在垂直方向的缩放比例
Alpha
设置Movie Clip的透明度。设为100时,则不透明,设为0时,则完全透明
Visibility
设置Movie Clip是否为可见,在Value栏填1时,该Movie Clip为可见,填0时,则为不可见
Rotation
设置Movie Clip的旋转角度。在Value栏中填写要旋转的度数
Name
改变Movie Clip的Instance Name
High Quality
设置Movie Clip为高质量动画

    动画的正式开始是在第四帧。这样这个有进度条的Preload就做好了,一样,上传到你的服务器上,看看能否正常工作。

    好了,下面我们就进入下一课的学习吧——如何制作音乐开关

 

  摘自《你的网》 孤独过客/文

 


科技检索


中华网推荐

  • 1000名医生在线咨询

  • 中国足球队官方网站

  • 鸦片玫瑰(新版)

  • 精选股票天地

  • 闪光的flash教程

  • 中华网汽车世界

  • 为你的爱情出谋划策

  • 网文精选——野百合集

  • 世界文化遗产在中国

  • 历届香港小姐风姿集




  • 网络教室编辑信箱
    版权声明 | 本站检索 | 联系方法 | 刊登广告 | 使用说明 | 关于中华网 | 豁免条款

    版权所有 中华网