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

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. ArrayList、Vector、LinkedList的区别联系?

    1.ArrayList.Vector.LinkedList类都是java.util包中,均为可伸缩数组. 2.ArrayList和Vector底层都是数组实现的,所以,索引数据快,删除.插入数据慢. ...

  2. etlpy: 并行爬虫和数据清洗工具(开源)

    etlpy是python编写的网页数据抓取和清洗工具,核心文件etl.py不超过500行,具备如下特点 爬虫和清洗逻辑基于xml定义,不需手工编写 基于python生成器,流式处理,对内存无要求 内置 ...

  3. 15.6.6 Configuring Thread Concurrency for InnoDB

    innodb_thread_concurrency 设置inndb线程个数,如果超过则休眠一段时间,时间根据 innodb_thread_sleep_delay 单位为微妙,然后放进队列. innod ...

  4. HTML5所有标签汇总

    来自lampbrother兄弟连HTML5与CSS3教程.<xmp> 结构标签:(块状元素) 有意义的div<article>     标记定义一篇文章<header&g ...

  5. Java final类

    如果说整个类都是final(在它的定义前冠以final关键字),就表明自己不希望从这个类继承,或者不允许其他任何人采取这种操作.换言之,出于这样或那样的原因,我们的类肯定不需要进行任何改变:或者出于安 ...

  6. 编译C#代码

    using Microsoft.CSharp; using System.CodeDom.Compiler; using System.Reflection; using System.Text; n ...

  7. JS 功能弹框封装

    // 功能提示弹框 function messageBox ( option ) { var html = ''; html += '<div class="message-box-h ...

  8. UI Automator Viewer获取手机镜像时报错

    使用UI Automator Viewer获取手机镜像时报错,具体信息如下: Error while obtaining UI hierarchy XML file: com.android.ddml ...

  9. ORA-12154: TNS:could not resolve the connect identifier specified

    场景: .Net程序无法连接到数据库 现象: 2015/8/26 11:02:03 ORA-12154: TNS:could not resolve the connect identifier sp ...

  10. bzoj4705: 棋盘游戏

    Description 有一个N*M的棋盘,初始每个格子都是白色的. 行操作是指选定某一行,将这行所有格子的颜色取反(黑白互换). 列操作是指选定某一列,将这列所有格子的颜色取反. XX进行了R次行操 ...