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

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)的更多相关文章

  1. FLASH CC 2015 CANVAS （七）总结

    FLASH CC 2015 CANVAS (一至七)确切来说是自己在摸索学习过程中而写.所以定为“开荒教程”. 去年年底转战H5,半年中一直非常忙也不敢用CC来做项目,担心有BUG或者无法实现需求,所 ...

  2. 《FLASH CC 2015 CANVAS 中文教程》——3、this关键字 入门

    注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...

  3. 《FLASH CC 2015 CANVAS 中文教程》——2、基本的交互（点击、触摸）事件

    注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...

  4. 《FLASH CC 2015 CANVAS 中文教程》——1、导出canvas动画，文件结构浅析

    注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书. :FLASH CC 在文中直接简称为CC. :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其 ...

  5. FLASH CC 2015 CANVAS （五）loading的制作

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 AS3的loading一般我们都写在时间轴第一帧,但是FLASH CC CANVAS的导出项目的lo ...

  6. FLASH CC 2015 CANVAS （四）制作响应式设计（自适应）的项目

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误(如果发现我会更新文章)! 正式教程会在后续开始更新 相信你在看了(第二节)(第三节)之后已经能够满足绝大多数的互动需求了.那么也 ...

  7. FLASH CC 2015 CANVAS （二）html中写JS调用flash中的元件、函数、变量

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 当你导出第一个canvas后,你会在保存fla的文件夹里 (每个项目默认位置)看到 如下文件,(请先 ...

  8. FLASH CC 2015 CANVAS （三） flash中写JS调用html中JS的函数，变量

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 首先我们在HTML里的JS里面添加几行代码 我们在FLASH中新建一个元件,并拖入到舞台,在属性面板 ...

  9. FLASH CC 2015 CANVAS 导出音频问题

    1,导入音频无法成功发布(软件假死) 解决办法:先用个格式工厂重新压缩 在导入软件 发布 2, 音频 长度小于1秒(左右)的时候,导出后音频会变成  “哧”的一声,  估计和FLASH软件内部的音频编 ...

随机推荐

  1. 【Pro ASP.NET MVC 3 Framework】.学习笔记.6.SportsStore：导航

    在之前的章节,偶们设置了核心的基础设施,现在我们将使用基础设计添加关键特性,你将会看到投资是如何回报的.我们能够很简单很容易地添加重要的面向客户的特性.沿途,你也会看到一些MVC框架提供的附加的特性. ...

  2. office 2016 专业增强版 和 visio 2016 专业版 下载安装（附带激活工

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://babyshen.blog.51cto.com/8405584/1697910 o ...

  3. export

    export export PATH=$PATH:/ROOT

  4. Hive与数据库的异同

    一.Hive简介 Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供完整的sql查询功能,可以将sql语句转换为MapReduce任务进行运行.其优点是学习 ...

  5. HDU 2222：Keywords Search（AC自动机模板）

    http://acm.hdu.edu.cn/showproblem.php?pid=2222 KMP是单模式串匹配的算法,而AC自动机是用于多模式串匹配的算法.主要由Trie和KMP的思想构成. 题意 ...

  6. cocos2dx lua bug之module 'lsqlite3' not found

    05-27 15:41:01.360: D/cocos2d-x debug info(7261): [LUA-print] -------------------------------------- ...

  7. TelephonyManager类：Android手机及Sim卡状态的获取

    TelephonyManager这个类很有用,可以得到很多关于手机和Sim卡的信息. 直接上注释后的代码,请享用 package net.sunniwell.app;import android.ap ...

  8. POJ 2001：Shortest Prefixes

    Shortest Prefixes Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 16782   Accepted: 728 ...

  9. c#多播委托

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  10. Ajax中GET和POST的区别

    Get方式: 用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的 ...