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

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. 11 个很少人知道但很有用的 Linux 命令

    Linux命令行吸引了大多数Linux爱好者.一个正常的Linux用户一般掌握大约50-60个命令来处理每日的任务.Linux命令和它们的转换对于Linux用户.Shell脚本程序员和管理员来说是最有 ...

  2. WPF学习系列 简单的窗体设置

    今天要学习的源码是一个窗体设置.效果如下,可拖拽.这让我想起了vs的启动界面 下面是源码的情况 项目结构: 窗体代码: cs代码 1.新建项目 略 2.设置窗体 AllowsTransparency= ...

  3. 关于UIView的显示问题

    今天在倒腾PP助手SDK的接入,游戏框架使用的是cocos2d-x,因为不熟悉iOS的UIKit,所以费了点功夫终于让SDK的登录页面显示出来了,问题来了,在iOS设备landscape显示模式UI显 ...

  4. JMeter 聚合报告之 90% Line 参数说明

    其实要说明这个参数的含义非常简单,可能你早就知道他的含义,但我对这个参数一直有误解,而且还一直以为是"真理",原于一次面试,被问到了这个问题,所以引起我这个参数的重新认识. 先说说 ...

  5. Java可变参数传递中可以接收多个对象

  6. 初探groupcache

    groupcache是用于dl.google.com的一个memcached的替代品,相对于memcached,提供更小的功能集和更高的效率,以第三方库的形式提供服务. groupcache的常见部署 ...

  7. MySQL数据单个数据太大,导入不进去

    mysql导入数据,navicat报错: MySQL server has gone away Table Restored: act_ge_bytearray Rolling back... Fin ...

  8. 城堡 (spfa+cheng)

    [问题描述] 给定一张?个点?条边的无向连通图,每条边有边权.我们需要从?条边中选出? − 1条, 构成一棵树. 记原图中从 1 号点到每个节点的最短路径长度为? ? ,树中从 1 号点到每个节点的最 ...

  9. 纯JS操作服务器绑定控件(Repeat)实现表头升降排序

    JS实现功能 var obj = function (id) { return "string" == typeof id ? document.getElementById(id ...

  10. 2014-02-27WPF学习笔记

    //StackPanel布局 //创建时间:11:33 页面布局:Orientation默认纵向:Vertical水平为:Horizontal <Button> <Button.Co ...