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软件内部的音频编 ...
随机推荐
- linux curl用法详解
linux curl用法详解 curl的应用方式,一是可以直接通过命令行工具,另一种是利用libcurl库做上层的开发.本篇主要总结一下命令行工具的http相关的应用, 尤其是http下载方面 ...
- Could not write metadata for '/taiping-sol-insu-composite'.
Could not write metadata for '/taiping-sol-insu-composite'. 这是由于删除一个项目时,没有同时在硬盘上删除该项目,而后又到硬盘文件系统中删除了 ...
- PG_RMAN备份遇到 domain socket
在用pg_rman做数据全备时:出现异常错误! [postgres@sdserver40_210 run]$ pg_rman backup --backup-mode=full --progress ...
- jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| ）
条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...
- A类地址
一个A类IP地址由1字节(每个字节是8位)的网络地址和3个字节主机地址组成,网络地址的最高位必须是“0”.A类IP的地址第一个字段范围是0~127,但是由于全0和全1的地址用作特殊用途,实际可指派的第 ...
- js中的各种获取日期
JS中获取当前时间点前一天时间 var date=new Date(); var dat_year=date.getYear(); var dat_month=date.getMonth(); var ...
- SlickGrid example 6:Ajax加载
Ajax加载. 代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...
- SlickGrid example 2: 按想要的风格展示列
先上效果图. 代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...
- jquery闭包的使用
<div id="divTest"> Test </div> <br /> <hr /> <div id="divT ...
- Unity安卓上播放视频的问题，暂时无解记录一下
设备联想A7600m,好像是联发科的cpu 先用网上流传很广的这个Unity自带接口试验一下: Handheld.PlayFullScreenMovie(Path.Combine(Applicatio ...