createjs与animateCC协作教程6

  • 内容
  • 评论
  • 相关

此教程针对animateCC2015,如果你是animateCC2018或者苹果系统,请先阅读这篇文章。

animateCC2018及苹果使用animateCC使用须知

今天的教程非常简单,就是讲一下如果animateCC动画里面有图片的代码写法。

首先我们随便打开一个fla动画

选择主动画,发布类链接

然后发布设置:文件》发布设置》Sprite表

下面是2种设置方案:

第一种是最简单的不整合sprite的设置,优点是避免菜鸟因为设置问题造成程序卡顿,加载时间过长的问题。缺点是,加载文件过多会导致加载时间慢,当然比起不懂的人乱设置还不如多加载些文件快一些。

第二种这个就是老鸟设置sprite的方法了,我来讲解一下

1.两者兼有:大家都知道png非常大,会比jpg大3倍左右,所以如果jpg和png和在一起,会导致jpg跟png一样的大,最终导致加载慢。

2.png品质32位:8位太模糊,24位不能透明,所以32位。

3.大小2000*2000:这里某些浏览器如果sprite图片设置太大会导致运行起来很卡,所以尽量不要超过2000*2000

4.背景:不解释png透明

5.jpg品质:默认不要改80挺好的

6.最大大小1*1:这里涉及到一个bug,1*1是为了不让jpg变成sprite,animateCC的JPG sprite表会默认加边框,createjs切图片的时候有时候会有像素黏连,这就会导致有时候把边框切进去了。

好了我们选择发布。

我们打开发布好的html

第一种设置方法的导出代码是这样的

第二种是这样的

大家可以看到用了sprite合并功能的文件多了加载json文件和设置ss的代码

那我们考部分代码进来,有能力自己写当然更好,我这里教你们偷懒办法。

注意:animateCC2018和苹果会有设置lib和comp的代码,也是要考进去的。

说到考进来,最好是自己另起一个js考进来,比如我另起一个js,main.js(因为前面说道的2种方法导出来的代码差不多,那我就用第二种做演示)

/**
 * Created by ajex on 2018/1/29.
 */
var canvas, stage
function init() {
    // --- write your JS code here ---

    canvas = document.getElementById("canvas");

    var loader = new createjs.LoadQueue(false);
    loader.addEventListener("fileload", handleFileLoad);
    loader.addEventListener("complete", handleComplete);
    loader.loadFile({src:"images/assets_atlas_P_.json", type:"spritesheet", id:"assets_atlas_P_"}, true);
    loader.loadManifest(lib.properties.manifest);
}

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

function handleComplete(evt) {
    var queue = evt.target;
    ss["assets_atlas_P_"] = queue.getResult("assets_atlas_P_");

    stage = new createjs.Stage(canvas);

    var view = new lib.view1();//这部分是自己加的
    stage.addChild(view);
    view.gotoAndPlay(1)

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

大家可以看到我对代码进行了删减,并加入了几条自己的代码(上面例子是animate2015,如果是animate2018创建comb lib images ss的方法等不能删

然后我们创建index,基本代码如下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0}
    </style>
</head>
<body  onload="init();" >
<canvas id="canvas" width="750" height="1206"  style="position:absolute;"></canvas>
<script src="js/createjs-2015.11.26.min.js"></script>
<script src="js/assets.js"></script>
<script src="js/main.js"></script>
</body>
</html>

最后不要忘了把资源,也就是images文件夹考进项目里,然后项目就可以顺利运行了。

如果还看不懂的可以下载我的源文件。

源文件下载:https://pan.baidu.com/s/1drIObG

评论

10条评论
  1. Gravatar 头像

    魏伟明 回复

    js控制Animate时间轴可以吗
    例如跳转到第二针

  2. Gravatar 头像

    匿名 回复

    楼主的demo打开,网页上什么也没有,不知道是怎么回事

      • Gravatar 头像

        ajex 回复

        @匿名 忘记登入账号了 上面那个是本人回复

  3. Gravatar 头像

    小桥 回复

    我想问问加载很慢怎么办,

    • Gravatar 头像

      匿名 回复

      @小桥 压缩图片 打开多线程 不要把png和jpg合并

      • Gravatar 头像

        ajex 回复

        @匿名 忘记登入账号了 上面那个是本人回复

  4. Gravatar 头像

    Well 回复

    楼主,有几个这方面的问题,方便给一个联系方式啊?

    • Gravatar 头像

      ajex 回复

      @Well 网站最右下角有我QQ

发表评论

电子邮件地址不会被公开。