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

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. spring整合mybatis使用<context:property-placeholder>时的坑

    背景 最近项目要上线,需要开发一个数据迁移程序.程序的主要功能就是将一个数据库里的数据,查询出来经过一系列处理后导入另一个数据库.考虑到开发的方便快捷.自然想到用spring和mybatis整合一下. ...

  2. 实体之间的关系【Entity Relationships】(EF基础系列篇9)

    Here, you will learn how entity framework manages the relationships between entities. Entity framewo ...

  3. 【Android 疑难杂症1】android.content.ActivityNotFoundException: Unable to find explicit activity class

    android.content.ActivityNotFoundException: Unable to find explicit activity class {com.example.cnote ...

  4. jQuery 绑定事件

    $('input').bind('click mouseover', fn); $('input').bind({ mouseover: fn(){}, mouseover:fn(){} }); 删除 ...

  5. WebAPI文件上传与下载

    http://www.cnblogs.com/GarsonZhang/p/5511427.html https://github.com/GarsonZhang/FileUpLoadAPI

  6. Fiddler进行模拟Post提交json数据,总为null解决方式

    Request Headers: User-Agent: FiddlerHost: localhost:3248Content-Type: application/json; charset=utf- ...

  7. 迅为4412开发板Linux驱动教程——总线_设备_驱动注册流程详解

    本文转自:http://www.topeetboard.com 视频下载地址: 驱动注册:http://pan.baidu.com/s/1i34HcDB 设备注册:http://pan.baidu.c ...

  8. OpenFlow Switch学习笔记(四)——Matching

    这次我们着重详述来自于网络中的数据包在OpenFlow Switch中与Flow Entries的具体匹配过程,以及当出现Table Miss时的处理方式,下面就将从这两方面说起. 1.Matchin ...

  9. 借助LVS+Keepalived通过DR模式实现负载均衡

    1.测试环境4台server,全部初始化一下,该关的关了 # vim /etc/hosts 192.168.1.101 lvs-master DIP 192.168.1.102 lvs-slave D ...

  10. Leetcode#108 Convert Sorted Array to Binary Search Tree

    原题地址 对于已排序数组,二分法递归构造BST 代码: TreeNode *buildBST(vector<int> &num, int i, int j) { if (i > ...