FLASH CC 2015 CANVAS （六）如何像FLASH那样实现场景(多canvas)
注意 此系列贴 为个人边“开荒”边写，所以不保证就是最佳做法，也难免有错误！ 正式教程会在后续开始更新。
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)的更多相关文章
- FLASH CC 2015 CANVAS （七）总结
FLASH CC 2015 CANVAS (一至七)确切来说是自己在摸索学习过程中而写.所以定为“开荒教程”. 去年年底转战H5,半年中一直非常忙也不敢用CC来做项目,担心有BUG或者无法实现需求,所 ...
- 《FLASH CC 2015 CANVAS 中文教程》——3、this关键字 入门
注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...
- 《FLASH CC 2015 CANVAS 中文教程》——2、基本的交互（点击、触摸）事件
注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...
- 《FLASH CC 2015 CANVAS 中文教程》——1、导出canvas动画，文件结构浅析
注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...
- FLASH CC 2015 CANVAS （五）loading的制作
注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 AS3的loading一般我们都写在时间轴第一帧,但是FLASH CC CANVAS的导出项目的lo ...
- FLASH CC 2015 CANVAS （四）制作响应式设计（自适应）的项目
注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误(如果发现我会更新文章)! 正式教程会在后续开始更新 相信你在看了(第二节)(第三节)之后已经能够满足绝大多数的互动需求了.那么也 ...
- FLASH CC 2015 CANVAS （二）html中写JS调用flash中的元件、函数、变量
注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 当你导出第一个canvas后,你会在保存fla的文件夹里 (每个项目默认位置)看到 如下文件,(请先 ...
- FLASH CC 2015 CANVAS （三） flash中写JS调用html中JS的函数，变量
注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 首先我们在HTML里的JS里面添加几行代码 我们在FLASH中新建一个元件,并拖入到舞台,在属性面板 ...
- FLASH CC 2015 CANVAS 导出音频问题
1,导入音频无法成功发布(软件假死) 解决办法:先用个格式工厂重新压缩 在导入软件 发布 2, 音频 长度小于1秒(左右)的时候,导出后音频会变成 “哧”的一声, 估计和FLASH软件内部的音频编 ...
随机推荐
- 学习Perl6: slice fastq file
需求: 只获取 ath 物种的 hairpin 序列 文件格式如下所示,以>打头的为 header,紧跟的为序列[AUCG]+ (Perl5 regexp 格式) #!/usr/bin/env ...
- mysql-5.5.28源码安装过程中错误总结
介绍一下关于mysql-5.5.28源码安装过程中几大错误总结,希望此文章对各位同学有所帮助.系统centOS 6.3 mini (没有任何编译环境)预编译环境首先装了众所周知的 cmake(yum ...
- flex 右键连接
var menuItem:ContextMenuItem = new ContextMenuItem("技术支持:中科天宇软件有限公司", true, true); menuIte ...
- grads 读取浓度值
- html5 canvas 笔记三（绘制文本和图片）
绘制文本 fillText(text, x, y [, maxWidth]) 在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的. strokeText(text, x, y [, ma ...
- java 堆栈 静态
所以静态变量和非静态变量的区别就在于静态变量可以用来计数,而非静态变量则不行. 理解了内存,就理解了一切,就理解了各种各样的语言.所有的语言无非都是这样:局部变量分配内存永远在栈里面,new出来的东西 ...
- 鼠标放上去，div高度随文字增加，并显示剩余的文字。
/*这里是鼠标放上去显示全名 */ .kb2wText{display:block; height:20px; width:150px; line-height:20px; color:#0 ...
- 类型解释器——C专家编程读书笔记
对于声明,应该按下面的步骤来进行解释: 1) 声明从它的名字开始读取,然后按照优先级顺序依次读取 2) 优先级顺序 a) 括号括起来的部分 b) 后缀操作符,()表示函数,[]表示数组 c) 前缀操作 ...
- 设计模式之——单例模式(Singleton)的常见应用场景
单例模式(Singleton)也叫单态模式,是设计模式中最为简单的一种模式,甚至有些模式大师都不称其为模式,称其为一种实现技巧,因为设计模式讲究对象之间的关系的抽象,而单例模式只有自己一个对象,也因此 ...
- 解决CentOS下man 命令，没有帮助信息
Cannot open the message catalog "man" for locale "zh_CN.UTF-8" (NLSPATH="/u ...