注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新

AS3的loading一般我们都写在时间轴第一帧,但是FLASH CC CANVAS的导出项目的loading好像有点不一样。

我们来看看导出的文件,其中有个叫 test.js的文件(test名是你fla 的名字,或者你在FLASH IDE中修改过这个导出名字)

我们打开这个test.js 一下就能看到,类似如下的代码:

相信你已经看到了 manifest 这个参数。没错就是他管理着所以需要预加载的内容。这些内容在FLASH CC 发布的时候,会自动写入。

如果manifest没有内容怎么办?那么你肯定没有导入音乐,视频,图片的任意一样。

因为FLASH CC中直接画的矢量图形是以代码的形式存在test.js中,所以他并不会出现在manifest中。(那我怎么做加载?继续往下看)

第二节 文章末尾,我提到了导出的HTML文件中有handleFileLoad 、handleComplete。也基本明白了 loading 应该在这里制作。

loader._numItems       //需要加载的总数量

loader._numItemsLoaded    //当前加载到的数量

这里的_numItems就是 manifest 数组的 length

function handleFileLoad(evt) {
    if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
  //下面,其实就是api了,自己查阅api即可,如果不知道怎么查,还有一个快捷办法就是在flash CC 里面打代码 会有代码提示
  console.log(loader._numItems,loader._numItemsLoaded)
}

=========================希望你看到这里没有疲惫,请打起精神下面是重点========================

loading的问题似乎是解决了,但是这个handleFileLoad和handleComplete 都在html的JS中

问题来了:加载进度可以监测了,但是怎么显示呢?

前端开发者可能很容易就想到了解决办法,我自己在HTML里面加一个层 显示这个加载进度就行了,加载完毕移除这个层。so easy!是的,这是一种非常简单实用又靠谱的解决办法。

那么怎么在FLASH 里面显示呢?

我们先看下面的解决办法

step1: 第一帧留空帧, 写代码this.stop();  场景上再放一个 文件框 命名为 txt

step2:  打开导出的HTML,我们看到加载完成函数如下

 function handleComplete(evt) {
     exportRoot = new lib.test();

     stage = new createjs.Stage(canvas);
     stage.addChild(exportRoot);
     stage.update();

     createjs.Ticker.setFPS(lib.properties.fps);
     createjs.Ticker.addEventListener("tick", stage);
 }

很显然FLASH CC CANVAS的动画是在加载完毕后 才开始进行初始化的。

所以我们就把这段初始化移动到,function inIt(){/*移动到这里*/}。

修改后如下

 function init() {
     canvas = document.getElementById("canvas");
     images = images||{};

     //移动到这里了
     exportRoot = new lib.test();
     stage = new createjs.Stage(canvas);
     stage.addChild(exportRoot);
     stage.update();

     createjs.Ticker.setFPS(lib.properties.fps);
     createjs.Ticker.addEventListener("tick", stage);

     loader = new createjs.LoadQueue(false);//注意loader 我声明到全局去了。
     loader.installPlugin(createjs.Sound);
     loader.addEventListener("fileload", handleFileLoad);
     loader.addEventListener("complete", handleComplete);
     loader.loadManifest(lib.properties.manifest);
 }

然后我们再修改一下 handleFileLoad ,handleComplete

 function handleFileLoad(evt) {
     exportRoot.txt.text=Math.floor((loader._numItemsLoaded/loader._numItems)*100)+"%";//在flash CC中的txt 文本中显示进度
     if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
 }
 function handleComplete(evt) {
     stage.removeChild(exportRoot);//移出我们init时赋值的exporRoot
     exportRoot = new lib.test();//加载完毕后重新声明expotRoot
     stage.addChild(exportRoot);

     exportRoot.gotoAndPlay(1);//跳转到FLASH中的第二帧
 }

这样我们就成功的完成了在FLASH CC CANVAS中显示加载进度显示。

这和直接在HTML页面加一个DIV显示文字进度有何区别呢,还要改来改去。

是的,没有区别反而麻烦,但是想你明白了FLASH CC CANVAS导出动画 初始化的逻辑,这为我们后面的学习打下基础。

有的朋友可能已经在边看边自己做的过程中发现,如果这样在FLASH CC CANVAS里做loading 会有两个问题。

1:如果我的动画都是矢量的,导出的 manifest 中没有内容做不了loading。

因为FLASH CC CANVAS中所画(或导入)的矢量图,文本在发布后都是以代码的形式纯在与你的 项目JS(本教程为test.js)中。所以要做loading,就要监听这个JS的加载(具体的我后面讲解)。

2: 如果我的loading 是一段 非矢量 动画,却无法显示。

例如我在FLASH CC 根时间轴第一帧 写this.stop();同时我在第一帧放一个100帧影片剪辑(这个100影片剪辑是由位图制作的动画)。

那么按上面说的办法做加载。发现没有内容显示出来。

原因也很简单,因为我们在inIt()里就立刻对exportRoot进行了赋值。而这个时候这100帧剪辑里面所用的位图,还没有被我们加载,所以就看不到。

所以如果心急的朋友可以先暂时用矢量的动画来制作loading剪辑。位图的loading剪辑,我会在后面讲解。

好了这篇内容 较多,也比较绕,所以就不再写更多内容。后面会对loading 以及FLASH CC 中 LoadQueue 做进一步讲解

FLASH CC 2015 CANVAS (五)loading的制作的更多相关文章

  1. FLASH CC 2015 CANVAS (四)制作响应式设计(自适应)的项目

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误(如果发现我会更新文章)! 正式教程会在后续开始更新 相信你在看了(第二节)(第三节)之后已经能够满足绝大多数的互动需求了.那么也 ...

  2. FLASH CC 2015 CANVAS (七)总结

    FLASH CC 2015 CANVAS (一至七)确切来说是自己在摸索学习过程中而写.所以定为“开荒教程”. 去年年底转战H5,半年中一直非常忙也不敢用CC来做项目,担心有BUG或者无法实现需求,所 ...

  3. 《FLASH CC 2015 CANVAS 中文教程》——1、导出canvas动画,文件结构浅析

    注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...

  4. 《FLASH CC 2015 CANVAS 中文教程》——3、this关键字 入门

    注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...

  5. 《FLASH CC 2015 CANVAS 中文教程》——2、基本的交互(点击、触摸)事件

    注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...

  6. FLASH CC 2015 CANVAS (六)如何像FLASH那样实现场景(多canvas)

    注意 此系列贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新. swf 项目中,我们可以很容易在一个fla文档里创建多场景.也可以通过多个fla文件发布多个s ...

  7. FLASH CC 2015 CANVAS (二)html中写JS调用flash中的元件、函数、变量

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 当你导出第一个canvas后,你会在保存fla的文件夹里 (每个项目默认位置)看到 如下文件,(请先 ...

  8. FLASH CC 2015 CANVAS (三) flash中写JS调用html中JS的函数,变量

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 首先我们在HTML里的JS里面添加几行代码 我们在FLASH中新建一个元件,并拖入到舞台,在属性面板 ...

  9. FLASH CC 2015 CANVAS 导出音频问题

    1,导入音频无法成功发布(软件假死) 解决办法:先用个格式工厂重新压缩 在导入软件 发布 2, 音频 长度小于1秒(左右)的时候,导出后音频会变成  “哧”的一声,  估计和FLASH软件内部的音频编 ...

随机推荐

  1. 说说DOM的那些事儿

    引子 先来一颗栗子: <img src="/sub/123.jpg" alt="test" /> <script type="tex ...

  2. 移动web开发,12个触摸及多点触摸事件常用Js插件

    如今移动互联网已经占据了主流地位,越来越多的开发者开始从桌面转向移动平台.与桌面开发不同的是,在移动领域中,不同的操作系统.大量不同屏幕尺寸的移动设备.触摸手势操作等,这都给开发者带来了一定的难度和挑 ...

  3. 如何让nodejs同步操作

    众所周知,异步是nodejs中得天独厚的特点和优势,但同时在程序中同步的需求(比如控制程序的执行顺序为:func1 -> func2 ->func3 )也是很常见的.本文就是对这个问题记录 ...

  4. Effective Objective-C 2.0 — 第11条:理解 objc_msgSend 的作用

    消息由接受者.选择子及参数构成.给某对象“发送消息” (invoke a message) 也就相当于在该对象上“调用方法”(call a method) 发给某对象的全部信息都要由“动态消息派发系统 ...

  5. Delphi 如何让程序获取权限结束指定进程?

    比如说让程序结束进程中360sd.exe 获取权限,否则会拒绝访问, 要怎么写?   补充: 这段代码中……点击按钮后结束不了360进程! unit Unit1;interfaceusesWindow ...

  6. Hadoop 2.4.1 设置问题小结【原创】

    先丢点问题小结到这里,免得忘记,有空再弄个详细教程玩,网上的教程要不就是旧版的,要不就是没说到点子上,随便搞搞也能碰上结果是对的时候,但是知其然而不知其所以然,没意思啊.解决问题的方法有很多种,总得找 ...

  7. UIButton的遍历

    for (id obj in self.view.subviews) {                if ([obj isKindOfClass:[UIButton class]]) {      ...

  8. nginx proxy_pass

    在nginx中配置proxy_pass时,如果是按照^~匹配路径时,要注意proxy_pass后的url最后的/,当加上了/,相当于是绝对根路径,则nginx不会把location中匹配的路径部分代理 ...

  9. ss 公共代理的必要设置(转)

    转: https://gist.github.com/fqrouter/95c037f9a3ba196fd4dd 本文只关注于确保ss服务还“活着”,如果你希望让其跑得更快,请参考 https://g ...

  10. collectionView/tableview刷新时关闭动画无效

    collectionView/tableview reloadSections/reloaddata时去掉动画无效时可以尝试使用 [UIView performWithoutAnimation:^{ ...