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

当你导出第一个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. SSH远程会话管理工具 - screen使用教程

    一.screen命令是什么? Screen是一个可以在多个进程之间多路复用一个物理终端的全屏窗口管理器.Screen中有会话的概念,用户可以在一个screen会话中创建多个screen窗口,在每一个s ...

  2. 异步调用window.open时被浏览器阻止新窗口解决方案

    var wyWindow = window.open('_blank');$http.post($rootScope.baseUrl + '/Interface0231A.ashx', { userF ...

  3. 自动化测试工具——JMeter

    Apache JMeter是Apache组织开发的基于Java的压力测试工具.用于对软件做压力测试,它最初被设计用于Web应用测试,但后来扩展到其他测试领域. 它可以用于测试静态和动态资源,例如静态文 ...

  4. Java堆、栈和常量池以及相关String的详细讲解(经典中的经典) (转)

    原文链接 : http://www.cnblogs.com/xiohao/p/4296088.html 一:在JAVA中,有六个不同的地方可以存储数据: 1. 寄存器(register). 这是最快的 ...

  5. [Voice communications] 让音乐响起来

    本系列文章主要是介绍 Web Audio API 的相关知识,由于该技术还处在 web 草案阶段(很多标准被提出来,至于取舍需要等待稳定版文档来确定,草案阶段的文档很多都会被再次编辑甚至重写.全部删除 ...

  6. php批量下载文件

    最近用codeigniter开发一个图片网站,发现单文件下载很容易实现,批量下载的话,就有点麻烦. 普通php下载比较简单,比如我封装的一个函数: function shao_download($fi ...

  7. ConsoleApplication 添加对于 System.ServiceModel.Web 引用失败(出现黄色感叹号)的解决办法

    今天在写一个WebHttpBinding的demo,再创建一个Console应用程序后,发现无法添加System.ServiceModel.Web,如图

  8. python 学习笔记十一 SQLALchemy ORM(进阶篇)

    SqlAlchemy ORM SQLAlchemy是Python编程语言下的一款ORM框架,该框架建立在数据库API之上,使用关系对象映射进行数据库操作,简言之便是:将对象转换成SQL,然后使用数据A ...

  9. ural 1286. Starship Travel

    1286. Starship Travel Time limit: 1.0 secondMemory limit: 64 MB It is well known that a starship equ ...

  10. C++ Primer : 第十二章 : 文本查询程序

    C++ Primer书上这个例子讲的很不错,写写帮助自己理解标准库和智能指针. .h 文件内容 #include <fstream> #include <iostream> # ...