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

swf 项目中，我们可以很容易在一个fla文档里创建多场景。也可以通过多个fla文件发布多个swf项目调用形成一个多场景动画（网站）

但是在CANVAS 项目中，却发现无法插入场景。（如果你是通过swf 项目转换成canvas 项目，在转换的时候会发现每个场景都自动转换成了一个canvas文档）。所以场景我们目前看来是用不了，那就只剩一条路：多个canvas文档相互调用。

swf项目中 多个场景调用我们一般都会有一个主swf用来管理 所有子swf、管理全局参数、函数。

canvas项目 我们管理所有canvas、全局参数、函数应该在html文件里面。

我们在FLASH CC里每个发布的canvas项目 都会有一个html文件。那么我们应将这些html"合并"成一个。

最近几天有项目做，所以这篇只能抽空写大家见谅

我们看到每个html的js中 都包含：

canvas,stage,exportRoot

canvas 、stage 很好理解，也就不再多说。exportRoot通过前面的文章中你应该也明白了他是管理我们FLASH中所有 函数，元件的地方，方便我们调用，

其次在html的js中你们还能看到:

images= images||{};

//

loader.loadManifest(lib.properties.manifest);

这里的images 对应着你fla 文档发布设置中的①，lib对应着你fla文件发布设置中的② 如下图

通过前面的几篇开荒教程你已经发现每个FLASH CC导出的动画中，canvsa 和 stage 并不会发生改变，只有exportRoot 会根据每个fla文件而不一样。那么我们可不可以使用一个canvas, 和stage 来完成多个FLASH CC 导出的canvas动画呢？

我们先改变一下：上图中 lib名字改为 lib0 ，上图中 imgages名字改为 img0

发布测试，发现html中js 代码有变化：img0,和 lib0

img0 = img0||{};

//

loader.loadManifest(lib0.properties.manifest);

想信你看到这里，都已经能够将多个FLASH CC导出的canvas动画放到一个HTML页面了。

但是这样会放入很多canvas，这并不是我想要的，我只想使用一个canvas。

那么就需要一点代码基础了，这里我就不将代码逻辑，直接上代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>main</title>

<style>

body{margin:0px;}

</style>

<script src="js/jquery-1.11.1.min.js"></script>

<script src="libs/easeljs-0.8.1.min.js"></script>

<script src="libs/tweenjs-0.6.1.min.js"></script>

<script src="libs/movieclip-0.8.1.min.js"></script>

<script src="libs/preloadjs-0.6.1.min.js"></script>

<script src="s0.js"></script>

<script src="s1.js"></script>

<script>

var onPage=0,totalPage=2,ldPage=0

var canvas,stage,exportRoot=[],ld,S=this

$(document).ready(function(e) {

    canvas = document.getElementById("canvas");

    //

    stage = new createjs.Stage(canvas);

    createjs.Ticker.setFPS(24);

    createjs.Ticker.addEventListener("tick", stage);

});

window.onload=function()

{

    inIt()

    loadPage(0)

}

function inIt()

{

    ld = new createjs.LoadQueue(false);

    ld.addEventListener("fileload", loaded);

    ld.addEventListener("complete", loadComplete);

}

function loadPage()

{

    console.log(ldPage)

    $["img"+ldPage] = $["img"+ldPage]||{};

    ld.loadManifest(S["lib"+ldPage].properties.manifest);

}

function loaded(e)

{

    if (e.item.type == "image") { S["img"+ldPage][e.item.id] = e.result; }

}

function loadComplete(e)

{

    exportRoot[ldPage] = new S["lib"+ldPage]["s"+ldPage]();//s+ldPage是fla名字

    stage.addChild(exportRoot[ldPage]);

    exportRoot[ldPage].gotoAndStop(2);

    if(ldPage<totalPage-1)

    {

        ldPage++;

        loadPage(ldPage);

    }

    else

    {

        ld.removeEventListener("fileload", loaded);

        ld.removeEventListener("complete", loadComplete);

        ld=null;

        console.log("Load finish!")

    }

}

</script>

</head>

<body>

    <canvas id="canvas" width="640" height="1136" style="background-color:#333333"></canvas>

</body>

</html>

说明：

1） 自己修改JQuery的路径

2） 我用FLASH CC发布了2个canvas动画，fla分别命名为s0,s1

3）我每个动画 是从第3帧开始的（js 是第二帧）

4）发布设置中 分别设置了 lib0,img0 和 lib1,img1

5）将导出的js都引入到这文件里面

大功告成，2个动画（场景）成功的利用一个canvas 展现了出来。

PS:这样的做法我到目前没有发现冲突以及因为这样做的BUG,如果 有朋友发现。请回帖 3Q

FLASH CC 2015 CANVAS （六）如何像FLASH那样实现场景(多canvas)的更多相关文章

  1. FLASH CC 2015 CANVAS （七）总结

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

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

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

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

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

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

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

  5. FLASH CC 2015 CANVAS （五）loading的制作

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 AS3的loading一般我们都写在时间轴第一帧,但是FLASH CC CANVAS的导出项目的lo ...

  6. FLASH CC 2015 CANVAS （四）制作响应式设计（自适应）的项目

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

  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. linux配置java环境变量(详细)【转】

    转自:http://www.cnblogs.com/samcn/archive/2011/03/16/1986248.html 一. 解压安装jdk 在shell终端下进入jdk-6u14-linux ...

  2. MySQL 获得当前日期时间 函数

    获得当前日期+时间(date + time)函数:now() mysql> select now(); +---------------------+ | now() | +---------- ...

  3. 自定义Exception

    本文改编自http://blog.csdn.net/stellaah/article/details/6738424 [总结] 1.自定义异常: class 异常类名 extends Exceptio ...

  4. Hadoop Balance

    一.hadoop balance工具的用法: 启动balance: bin/start-balancer.sh -threshold 5 停止balance: bin/stop-balancer.sh ...

  5. Oracle之虚拟索引

    一.引言 DBA在日常维护管理数据库进行低性能SQL分析时,有时候需要通过创建索引对SQL进行优化,但有些时候我们创建的索引是否能用到?这个只能创建以后才能看出效果,但是在实际工作中,特别是对大表创建 ...

  6. Oracle：Authid Current_User使用

    由于用户拥有的role权限在存储过程是不可用的.遇到这种情况,我们一般需要显示授权,如grant create table to user;但这种方法太麻烦,有时候可能需要进行非常多的授权才能执行存储 ...

  7. Objective-C占位符

    %@ 对象 %d, %i 整数 %li 长整型 %u 无符号整形 %f 浮点/双字 %x, %X 二进制整数 %o 八进制整数 %zu size_t %p 指针 %e 浮点/ 双字 (科学计算) (d ...

  8. js中字符串转换为数字的方法

    parseInt; parseFload; +; parseInt() 和 parseFloat() 函数会尝试逐个解析字符串中的字符,直到遇上一个无法被解析成数字的字符,然后返回该字符前所有数字字符 ...

  9. java 面试每日一题3

    题目:求s=a+aa+aaa+aaaa+aa...a的值,其中a是一个数字.例如2+22+222+2222+22222(此时共有5个数相加),几个数相加有键盘控制. import java.io.Bu ...

  10. PMO到底什么样？

    PMO到底什么样? 当将来项目办理单位彻底健全了,达到最老练的程度的时分项目办理单位应当干哪些活,有哪些大块功能,也即是关于一个全部的PMO它的功能跟人物都包含啥? 下面这个模型精确的说是英国的项目办 ...