Loading制作全接触──精确版本

网络与通信

上一期我们讲了Loading的基础版本,基础版Loading实际是一种模拟的表现方法,而且精度也非常的低,如果影片内容没有大的变化还基本可用,但如果碰到某一帧中出现了大幅画面或者增加了音频效果,那么这一帧的数据量肯定会大于其他帧,碰到这种情况,基础版Loading就无能为力了,那有无解决办法呢?我们可以通过Actions使Loading状态精确起来,这样,无论是进度条或者百分比数字都会非常精确。新版的Actions中用新命令getBytesTotal(捕获字节总数)和getBytesLoaded捕获装载字节数 来替换老代码ifFrameLoaded,通过它们就可以精确获得影片总的大小和当前已下载的大小来进行精确显示了((图1))。

图1
图1

1.编辑必要元素

将基础版本制作的Loading删除,只保留Library中的进度条和进度条边线,或者重新建立一个新文件再次创建,不过要记住进度条要设置为Movie Clip(影片夹子),因为我们要用Actions来控制进度条精确显示,而控制方法只能通过获取对象名称来完成。在Flash MX中,Graphic物件不能命名,因此只能将进度条设置为Movie Clip。完成后跟制作基础版的方法一样,将“进度条边线”从Library面板拖入场景并重新命名所在层,建立一个新层,拖入“进度条”并调整至合适位置,我们这次的Loading依旧是10帧,在两个物件所在层的第10帧位置点右键选择“Insert Frame”,由于Loading占用了前面10帧,那么影片是从第11帧开始正式播放,为了后来测试方便,我们建立一个新层并命名为“影片”,在其Timeline的第11帧位置插入关键帧,然后随意画点东西或做一个简单的Shape变化,总之有点东西就成。
  即便如此,编辑好的影片容量还是非常小,这样对我们下一步的测试会造成困难,所以我们还要想办法增加文件容量,声音文件容量大,呵呵!好办法,我们找一个MP3通过File菜单下的Import命令导入,接着建立新层,命名为“声音”,在其第11帧位置插入关键帧,同时从Library面板中将导入的声音拖进来。

2.编辑Actions

在基本元素建立完成后,便可以开始编辑Actions了,在这之前需要先为“进度条”命名。使用工具栏的光标工具选择场景中的进度条,然后在Properties属性 面板中将它命名为“jindutiao”((图2)) 。

图2
图2

  完成上述操作后建立一个新层,将新层名称改为Actions,并使之处于其他层之上,在第1帧点击右键打开Actions面板,选择“Actions→Movie Control→Play”,接着在第2帧点右键选择“Insert Blank Keyframe”(插入空白关键帧),再点右键打开Actions面板,这一帧中的代码是主要的控制部分,我们通过原代码进行解读:
  首先需要获得总字节(byt)数,那么byt则通过getBytesTotal命令完成,代码为byt=int((_root.getBytesTotal())/1000)。
  总数字获得以后需要知道当前下载(down)数字,使用getBytesLoaded命令。代码为down=int((_root.getBytesLoaded())/1000)。
  这两个关键数据都获得以后就可以计算出当前的百分比数据(shuju),使用标准算法,下载数据除以总数再乘以100,这样就获得百分比数。代码为shuju=int((down/byt)*100)。
  现在大部分工作都已经完成,我们可以对进度条进行控制了,其中用到了一个_xscale函数,这个函数的作用是改变对象的X坐标数,这样可以产生进度条从左至右运动的效果。比如代码:_root.jindutiao._xscale = shuju 通过“shuju”获得的百分比数就可以改变“jindutiao”的X坐标。
  上述操作完成后来到第10帧插入空白关键帧并编辑Actions,这是一个循环控制,代码如下:
  if(shuju == 100){ 
  gotoAndPlay(11); 
  } else {
  gotoAndPlay(2); 
  }
  这非常好理解。如果数据“shuju”完成100,那么gotoAndPlay跳至第11帧开始播放,如果不是else,那么返回播放第2帧。完成以后的Timeline大致如(图3)所示。
图3
图3

  现在尝试着按“Ctrl+Enter”测试效果,没有效果?别急,前面提到过,本地硬盘数据读取很快,Flash MX提供了网络环境模拟,需要再按一次“Ctrl+Enter”,这次看到变化了吧!进度条缓慢地从左至右移动,但是没有数据显示感觉会很模糊,我们可以再增加一个百分比显示。
  回到主场景并打开Actions层第2帧的代码,在里面增加一句baifenbi = shuju+"%"。
  baifenbi(百分比拼音)显示为shuju(百分比数据)加一个%符号。这句表示会将数据显示传送至“baifenbi”中,因此我们需要建立一个用来显示这个数据的环境──文本框。

3.动态数据显示

建立一个新层命名为“百分比”,然后使用文字工具建立一个文本框,在属性面板中设置为“Dynamic Text”(动态文本),并在Var:项输入baifenbi,文字大小为12,颜色为黑((图4))。

图4
图4

  你可以看到文本框以虚线显示,拖动至合适位置,现在按两次“Ctrl+Enter”模拟网络测试,OK!完成了,在进度条缓慢移动的同时,百分比数据也在不断变化,而且绝对精确。稍等片刻,100%装载完成,这时你可能会看到动画不断循环闪动,这是什么原因呢?因为我们没有编辑影片内容,影片完成后跳至第11帧播放,很快放完又开始从第1帧重复,所以造成这种闪动。返回场景在第11帧增加一个Stop; Actions命令。完成后再次进行测试确定无误。
  提示:记得上期卖的关子吗?模拟网络环境里的小秘密,按两次“Ctrl+Enter”进行测试后,你知道Flash MX具体是模拟那种网络速度下载呢?在Debug菜单下Flash MX一共提供了6项选择:14.4Kbps、28.8Kbps、56Kbps和3个用户自定义项,可以通过Customize项进行修改,以适应你的测试要求。