您的位置：首页 > 其它

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

2015-08-04 17:52 447 查看

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航