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

当你导出第一个canvas后,你会在保存fla的文件夹里 (每个项目默认位置)看到 如下文件,(请先随便导入一些音乐,和图片再发布)

我们打开game.html 代码如下

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>

<script src="http://code.createjs.com/easeljs-0.8.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.8.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.6.1.min.js"></script>
<script src="http://code.createjs.com/soundjs-0.6.1.min.js"></script>
<script src="test.js"></script>

<script>
var canvas, stage, exportRoot;

function init() {
    canvas = document.getElementById("canvas");
    images = images||{};

    var loader = new createjs.LoadQueue(false);
    loader.installPlugin(createjs.Sound);
    loader.addEventListener("fileload", handleFileLoad);
    loader.addEventListener("complete", handleComplete);
    loader.loadManifest(lib.properties.manifest);
}

function handleFileLoad(evt) {
    if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}

function handleComplete(evt) {
    exportRoot = new lib.test();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();

    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);
}

function playSound(id, loop) {
    createjs.Sound.play(id, createjs.Sound.INTERRUPT_EARLY, 0, 0, loop);
}
</script>
</head>

<body onload="init();" style="background-color:#D4D4D4">
    <canvas id="canvas" width="550" height="400" style="background-color:#FFFFFF"></canvas>
</body>
</html>

首先script 可以看到加载了几个js, 如果你不明白可以不用理会。

但是他么都是用的绝对地址,国内使用这个地址 某些时候会比较慢,所以建议在 FLASH软件里面 设置 发布设置

这样发布后 html 文件 的js 引入就变成

<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="libs/soundjs-0.6.1.min.js"></script>
<script src="test.js"></script>

================好了 废话了这么多 下面讲重点==============

导出的 代码中可以看到声明了这3个“东西”

var canvas, stage, exportRoot; 这篇帖子我们先说 exportRoot

大家在FLASH CC CANVAS里面 所有命名过的元件、this.声明的变量、this.声明函数都将“在” exportRoot 里面(不懂什么叫this 声明的 那也继续一步一步往下看)。 这为我们在 html下写js 调用这些"玩意儿"提供了方便。

比如 你在FLASH CC 里面的根时间轴上有一个元件叫 btnKS ,那么你可以在html里面这样写js 来调用它

exportRoot.btnKS

exportRoot.btnKS.on("click", function(e)
    {
        exportRoot.gotoAndStop(2)     //你甚至可以 使用 greensock的 js 版本来控制他们运动
        TweenMax.to(exportRoot.MCA,1,{alpha:0,scaleX:2,scaleY:2,onComplete:function()
            {
                exportRoot.removeChild(exportRoot.btnKS)
            }
        })

    })

又比如 你在FLASH CC 里面的跟时间轴上 写js

this.htmlF=function(_ss)
{
    console.log(_ss)
}

那么你在HTML中执行这个函数。也是这样写

exportRoot.htmlF("这是来自HTML JS的消息")

再比如你在FLASH CC 里面的根时间轴上有元件MCA, MCA内部有元件son0,以及MCA的时间轴上有以下代码

this.mcAF=function(_ss)
{
    console.log(_ss)
}

那么你在HTML中应该这样调用

exportRoot.mcA.son0
//以及
exportRoot.mcA.mcAF("这也是来自HTML的消息")

好了上面讲了调用元件、函数,那么变量的调用在此:

如果FLASH CC里写的JS变量要在HTML中被调用,那么就不能再写 var a=1,应该写成this.a=1

调用方式同上

顺带说下FLASH CC 生成的HTML中JS代码的 两个事件:看函数名就明白了:

handleFileLoad

handleComplete

加载进度 :

function handleFileLoad(evt) {
    if (evt.item.type == "image") { images[evt.item.id] = evt.result; }  //下面,其实就是api了,自己查阅api即可,如果不知道怎么查,还有一个快捷办法就是在flash CC 里面打代码 会有代码提示  console.log(loader._numItems,loader._numItemsLoaded)
}

注意 loader 的声明 在init(),所以要将loader 声明到全局 或者 将 handleFileLoad函数写进init()中 即可。更加详细的加载进程将在后面的章节详细说明

FLASH CC 2015 CANVAS (二)html中写JS调用flash中的元件、函数、变量的更多相关文章

  1. FLASH CC 2015 CANVAS (三) flash中写JS调用html中JS的函数,变量

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

  2. FLASH CC 2015 CANVAS (七)总结

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

  3. FLASH CC 2015 CANVAS (五)loading的制作

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

  4. FLASH CC 2015 CANVAS (四)制作响应式设计(自适应)的项目

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

  5. FLASH CC 2015 CANVAS 中 createjs 移除绑定事件

    myBtn.addEventListener("click", function(evt) { // do stuff... evt.remove(); // removes th ...

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

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

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

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

  8. FLASH CC 2015 CANVAS (六)如何像FLASH那样实现场景(多canvas)

    注意 此系列贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新. swf 项目中,我们可以很容易在一个fla文档里创建多场景.也可以通过多个fla文件发布多个s ...

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

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

随机推荐

  1. 使用boilerplate模版创建解决方案

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 话不多说,让我们开始干吧!对于还没有接触ABP框架或者接触时间还不是很长的小伙伴来说,我建议还是使用官方建议的做法,那就是到ABP ...

  2. K型热电耦高精度分段线性拟合(C语言)

    extern float GetTempOfVolMi(float V){ float K,B; if(0.03947 <= V < 2.02308) //0~50 {  K = 24.7 ...

  3. 安装mysql 5.7+版本缺少data文件夹

    打开cmd命令窗口,并且进入到mysql安装目录的bin目录下.然后输入命令: mysqld --initialize-insecure --user=mysql 然后回车:去目录下查看,已经自动创建 ...

  4. SQL删除约束

    )禁止所有表约束的SQL select 'alter table '+name+' nocheck constraint all' from sysobjects where type='U' )删除 ...

  5. lintcode-【简单题】快乐数

    题目: 写一个算法来判断一个数是不是"快乐数". 一个数是不是快乐是这么定义的:对于一个正整数,每一次将该数替换为他每个位置上的数字的平方和,然后重复这个过程直到这个数变为1,或是 ...

  6. 一种可以避免数据迁移的分库分表scale-out扩容方式

    原文地址:http://jm-blog.aliapp.com/?p=590 目前绝大多数应用采取的两种分库分表规则 mod方式 dayofweek系列日期方式(所有星期1的数据在一个库/表,或所有?月 ...

  7. Requested registry access is not allowed(不允许所请求的注册表访问权)

    尝试创建自定义事件日志时,将会收到“Requested registry access is not allowed(不允许所请求的注册表访问权)”错误消息 EventLog.CreateEventS ...

  8. Linux下FTP服务(一)—— Ubuntu安装

    参考:http://www.cnblogs.com/likwo/p/3154868.html 实验环境:Ubuntu 14.04 VMware虚拟机1. 安装 apt-get install vsft ...

  9. 一道c语言运算符优先级问题

    一道c语言运算符优先级问题 #include <iostream> using namespace std; int main() { char test[] = {"This ...

  10. OpenCV 2.4.11 VS2012 Configuration

    Add in the system Path: C:\opencv\build\x86\vc11\bin; Project->Project Property->Configuration ...