08
2016
04

AnimateCC实现库链接

利用animatecc的自定义模板实现库链接。


  1. 打开animate cc,新建一个html5 canvas项目;

  2. 画一个圆,转换成影片剪辑;

  3. 打开库面板,双击链接位置,写入链接名"MyCircle";

  4. 打开发布设置,高级,点击导出,导出html模板;

  5. 修改导出的模板;修改后如下:

    <!--
    	NOTES:
    	1. All tokens are represented by '$' sign in the template.
    	2. You can write your code only wherever mentioned.
    	3. "DO NOT" alter the tokens in the template html as they are required during publishing.
    -->
    
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>$TITLE</title>
    <!-- write your code here -->
    <style>
    	*{margin: 0;padding: 0;}
    	body{background-color: #ffffff;}
    </style>
    
    $CREATEJS_SCRIPTS
    <script src="MyCircle.js"></script>
    
    $SCRIPT_START
    var canvas, stage, exportRoot;
    function init() {
    	// --- write your JS code here ---
    	$CJS_INIT
    }
    $PLAYSOUND
    $SCRIPT_END
    
    <!-- write your code here -->
    
    </head>
    <body onload="init();">
    	<canvas id="$CANVAS_ID" width="$WT" height="$HT" style="background-color:$BG"></canvas>
    </body>
    </html>
  6. 点击”导入新模板“导入刚才修改过的模板(每次修改模板之后都要重新导入);

  7. 在fla同级目录新建一个js文件命名为”MyCircle.js“;js内容如下:

    p=lib.MyCircle.prototype;
    p.move=function(speed){ 
    	var speed=speed||1;
    	var s=this;
    	setInterval(function(){ 
    		s.x+=speed;
    		if(s.x>550)s.x-=550;
    	},30);
    }
  8. 回到animatecc,将舞台上MyCircle的实例命名为”circle“,选中第一帧,按”F9“打开动作面板,添加代码:

    this.circle.move(10)
  9. ctrl+enter;不出意外地话,小球会一直从左到右循环移动。



源码打包下载

« 上一篇下一篇 »

相关文章:

密室逃生-animateCC版  (2016-4-26 11:45:49)

AnimateCC实现文档类  (2016-4-11 9:53:36)

AnimateCC使用初体验  (2016-4-8 13:33:15)

评论列表:

1.疑问  2016/8/14 10:41:08 回复该留言
新建的MyCircle.js在哪导入
.hanyeah  2016/8/15 8:18:57 回复该留言
在发布之后的html里边导入。
<script type="text/javascript" src="MyCircle.js"></script>
这是html的基础知识,可以自己百度学习一下。

因为每次发布之后html都会更新,我们每次都需要重新添加一下需要导入的js文件,为了避免这种重复操作,我们可以使用html模板。文章中有介绍。

文章后边有源码,可以下载参考。
2.疑问  2016/8/14 10:41:48 回复该留言
MyCircle.js在哪导入?
.hanyeah  2016/8/15 8:24:37 回复该留言
不好意思,模板html里边漏了一句,已修改。
欢迎学习交流。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。