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