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软件内部的音频编 ...
随机推荐
- 160929、各数据库连接配置与maven依赖安装
最近做的项目都是maven的,据说maven是个东西.把依赖的jar文件的事情都委托出去辣!试着用了一下哈,效果还可以! 今天做了数据库配置这一块,特意把相关的东西总结出来,以备不时之需. MySQL ...
- uboot启动参数
bootcmd=nand read.jffs2 0x30007FC0 kernel; bootm 0x30007FC0bootdelay=2baudrate=115200ethaddr=08:00:3 ...
- css 前景色与背景色
前景色:color:#990000; 背景色:background-color:red; 可以用来设置文字的前景色与背景色 <!-- 作者:纤锐出处:http://www.cnblogs.com ...
- Linux hrtimer分析（2）
http://blog.csdn.net/angle_birds/article/details/17375901 本文介绍Linux2.6.29中,配置高精度模式的hrtimer与未配置高精度模式时 ...
- springMVC中传值的时候的乱码问题
springMVC在传值的时候有时候回出现中文乱码的情况.有一种可能就是service的设置的问题. 打开工程中的tomcat中的servers 打开上述文件,找到下面并加上红色字体 <Conn ...
- ASP.NET生成缩略图的代码
01. // <summary> 02. /// 生成缩略图 03. /// </summary> 04. /// &l ...
- River Hopscotch(二分POJ3258)
River Hopscotch Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 9263 Accepted: 3994 Descr ...
- lhgdialog在打开的窗口里点击按钮关闭当前窗口
lhgdialog在打开的窗口里点击按钮关闭当前窗口 var api = frameElement.api, W = api.opener; api.close();
- 2016年10月20日 星期四 --出埃及记 Exodus 19:4
2016年10月20日 星期四 --出埃及记 Exodus 19:4 `You yourselves have seen what I did to Egypt, and how I carried ...
- java解析密钥格式
import java.io.StringReader; import org.bouncycastle.asn1.ASN1Sequence; import org.bouncycastle.asn1 ...