注::如果你对 FLASH 这个软件操作不够熟悉,建议你可以先看看FLASH动画之类的书。

  :FLASH CC  在文中直接简称为CC。 

  :以下所以文章中所说的快捷键 如果你按了不起作用,请检查是否有其他正在运行的软件快捷冲突。  

  :bolg中为了节约篇幅以及阅读体验,不重要的图我就不贴出来了

  :我教程里使用的是 FLASH CC  中文版 (15.0.0.173)

  :强烈建议不要装绿色精简版,因为他可能导致你的软件使用过程出现未知问题

  :速成班 请参看我另一系列教程 FLASH CC  CANVAS (x)这类标题名的文章(不推荐)

-----------------------↑↑↑↑↑↑以上的注意真的很重要哦,真的!↑↑↑↑↑↑-------------------------------

2、基本的点击事件

2.1 点击播放动画

动画中一般都会涉及到,点击xx 播放yy动画或者循环播放一段zz动画这样的需求。所以掌握基本的鼠标点击(手指)代码也是一个动画设计师的基本技能。

我们继续拿第一篇里的例子(可以直接去第一篇末尾下载)

在时间轴新增加一个层,取名为js

选中第一帧,按F9 打开代码面板,写下如下代码

这样我们的动画就会停止在这一帧。发布测试一下。

然后选中舞台上的cow,F8转换为影片剪辑,并在属性面板上命名为cow。如下:

我们再次选中js层的第一帧 F9继续写代码

发布测试,我们点击奶牛,成功播放了动画。

2.2其他的点击事件

added

click

dblclick

mousedown

mouseout

mouseover

pressmove

pressup

removed

rollout

rollover

tick

舞台 stage事件

stagemousedown

stagemousemove

stagemouseup

关于这些事件,建议大家直接去 http://www.createjs.com/#docs熟读API

如果是在移动端使用 click 会有几百毫秒的延迟,当然移动端我们一般不再使用click,而是使用touch事件,当然我们这里使用的是mousedown,pressup(当然你也可以继续使用在CC中使用touch事件,我会在后面的章节中详细说明)

但是你会发现他们无法在正确时间响应。这是需要你在test.html中添加一句代码。如下:

 createjs.Touch.enable(stage);

添加到stage=new createjs.Stage(canvas) 后面一行。如下:

当然你也可以根据你的具体需求自己决定它放在哪。

本文源码下载:

http://pan.baidu.com/s/1i3GSPTz


《FLASH CC 2015 CANVAS 中文教程》——2、基本的交互(点击、触摸)事件的更多相关文章

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

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

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

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

  3. FLASH CC 2015 CANVAS (七)总结

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

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

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

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

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

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

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

  7. FLASH CC 2015 CANVAS (二)html中写JS调用flash中的元件、函数、变量

    注意 此贴 为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新 当你导出第一个canvas后,你会在保存fla的文件夹里 (每个项目默认位置)看到 如下文件,(请先 ...

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

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

  9. FLASH CC 2015 CANVAS (一) 与AS3的写法区别

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

随机推荐

  1. 【python cookbook】【数据结构与算法】2 从任意长度的可迭代对象中分解元素

    从某个可迭代对象中分解出N个元素,但是可迭代对象的长度可能超过N,会出现“分解值过多”的异常: 使用“*表达式”来解决该问题: Python 3.4.3 (v3.4.3:9b73f1c3e601, F ...

  2. lz: linux ls 变种 只显示大小和名称(包括目录)

    本次输入法使用: 手心输入法 for Mac 1.0版 测试环境为:Ubuntu 14.14.2 LTS updates 测试时间为:2015年5月28日,感觉死亡将至的夜晚,独自一人坐在一个角落,戴 ...

  3. windows cmd color setup

    设置颜色的话,一般可定会有foreground和background color设置:(其实color /?直接看一下就好了) Color Background Foreground Black 0 ...

  4. M公司面试

    1.技术面 跟日历相关的,根据你联系人的时间,确定可以安排活动的时间 2.final面 你的项目经历,挑战,解决办法: 判断两个长方形,是否有重叠部分: 你的人生规划[这个很多公司都会问]

  5. struts2上传

    注意事项:文件名必须是:文件域+FileName,如: // 封装上传文件域的属性 private File uploadImage; // 封装上传文件名的属性 private String upl ...

  6. mount/umount系统调用

    转载自:http://blog.sina.com.cn/s/blog_6385c7310100iqmn.html 功能描述: mount挂上文件系统,umount执行相反的操作.    用法:   # ...

  7. MyBatis 判断条件为等于的问题

    在用MyBatis操作数据库的时候相信很多人都用到,当在判断null, 大于,大于等于,小于,小于等于,不等于时估计很多都用到,比较容易实现了,这里就省略了,但唯独判断条件为等于时估计蛮多人遇到坑了, ...

  8. html里文本保留换行格式

    用<pre></pre>把文本包起来

  9. poj1703 Lost Cows

    给定集合{1,2,...,n}的一个置换,指定每个位置上在其左方且比其小的数的个数,求该置换. 这题我目前还只会O(n^2)的做法. 以后再用更高效的算法解决. http://poj.org/prob ...

  10. DP游戏开发随记9-日常,推箱子

    模型只有一个推的动作文件 日常,更新了一下推箱子的测试用例 4个dummy点,点乘判断是在那个面,然后射线检测墙壁.