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

当你导出第一个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. 前端面霸系列(1):doctype 、Quirks Mode &amp; Standards Mode 、document.compatMode

    近几日,气压猛降,雾霾铺天盖地,眼看一场腥风血雨就要在前端江湖爆发,这场战争不仅是百度.腾讯.阿狸.搜狐网易新浪等江湖豪门抢夺人才的大战,也是诸位江湖人士重新洗牌的好时机.每年10月,江湖的波动胜过华 ...

  2. 03-树1 树的同构 (C语言链表实现)

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <stdbool.h& ...

  3. 解决IIS上无法添加.NET用户的问题

    最近开发了一个简单的管理后台,后台用户管理都用的是AspNetSqlMembershipProvider这一套框架,添加和删除用户的功能在开发阶段通过ASP.NET网站管理工具完成. 部署到服务器上时 ...

  4. SQL Server 2005 Service Broker

    一.引言 SQL Server 2005 的一个主要成就是可以实现可靠.可扩展且功能完善的数据库应用程序.与 .NET Framework 2.0 公共语言运行库 (CLR) 的集成使开发人员可以将重 ...

  5. hud1166 敌兵布阵

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  6. html页面元素加载顺序

    一般来说,添加背景图片有三种办法: 直接写在标签的style里面,如: <div style="background-image:url('images/Css.JPG')" ...

  7. JMeter学习-001-JMeter初识

    Apache JMeter是Apache组织开发的基于Java的开源压力测试工具(个人发现也可用于接口测试).用于对软件做压力测试,它最初被设计用于Web应用测试但后来扩展到其他测试领域. 它可以用于 ...

  8. c++中的243、251、250错误原因

    c++中的243.251.250错误,原因可能是不小心输入了中文符号.

  9. cookie 内容的获取

    NSMutableArray *cookiesStoreAll = [[NSMutableArray alloc]init]; NSUInteger totalNumberOfCookies;     ...

  10. 软件工程 speedsnail 第二次冲刺4

    20150521 完成任务:划线第四天,能蜗牛遇到线能反弹,加了障碍物: 遇到问题: 问题1 有一个方向碰到线没有反弹 解决1 没有解决 明日任务: 完善问题1