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软件内部的音频编 ...
随机推荐
- 【python cookbook】【字符串与文本】1.针对任意多的分隔符拆分字符串
问题:将分隔符(以及分隔符之间的空格)不一致的字符串拆分为不同的字段: 解决方案:使用更为灵活的re.split()方法,该方法可以为分隔符指定多个模式. 说明:字符串对象的split()只能处理简单 ...
- 161130、Dubbo+SpringMVC工程创建详解
Dubbo出现的目的是为了应对现在高并发,高数据量请求的问题.目前的垂直应用架构已经无法满足现在大数据的冲击,SOA就应运而生,而Dubbo在国内使用的还是比较多,稳定性也比较不错. 架构 节点角色说 ...
- HTML5 拖拽复制功能的实现方法
Internet Explorer 9FirefoxOpera 12ChromeSafari 5 v1.0代码部分 <!DOCTYPE html><html><head& ...
- OC基础数据类型-NSData
1.NSData,数据,当我们需要把一些信息写入到文件里或发送到网络上,我们需要把这些数据转换下,变成纯粹的0.1字符流 1 NSString * str = @"hello, world! ...
- PHP过滤评论关键词
<?php /** * PHP中屏蔽过滤指定关键字实现方法总结 * http://www.111cn.net/phper/phpanqn/46225.htm * * 思路: * 一.把关键字专门 ...
- Unix/Linux编程实践教程（二：socket、多线程、进程间通信）
同一接口不同的数据源: 协同进程: fdopen以文件描述符为参数: fopen和popen: 为了实现popen,必须在子进程中调用sh,因为只有shell本身即/bin/sh可以运行任意shell ...
- coco2dx服务器简单例子
实现的单个socket例子,了解socket原理. 先创建一个win32的项目(命令行的),作为服务端 // SocketServer.cpp : 定义控制台应用程序的入口点.// #include ...
- 单利 复利计算器程序1.0 2.0 3.0 [ 合 ] 之 WEB
对单复利计算器程序进行改进 更新为网页版的. 界面不太美观 请谅解 由于时间问题暂未完善好! 计算部分的主要源代码:
- CSS select样式列表-------美化列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- WITH (NOLOCK)
缺点: 1.会产生脏读 2.只适用与select查询语句 优点: 1.有些文件说,加了WITH (NOLOCK)的SQL查询效率可以增加33%. 2.可以用于inner join 语句 脏读: 一个用 ...