注::如果你对 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. mysql字段varchar区分大小写utf8_bin、utf8_general_ci编码区别

    mysql字段varchar区分大小写utf8_bin.utf8_general_ci编码区别 在mysql中存在着各种utf8编码格式:utf8_bin将字符串中的每一个字符用二进制数据存储,区分大 ...

  2. [ Laravel 5.3 文档 ] 安全 ―― API认证(Passport)保障安全性。

    1.简介 Laravel通过传统的登录表单已经让用户认证变得很简单,但是API怎么办?API通常使用token进行认证并且在请求之间不维护session状态.Laravel使用LaravelPassp ...

  3. shell小细节

    1.使用变量的时候无需首先声明其类型 2 cut 剪切数据 3.sed 定址 4.read 读取文件(管道) 5 expr 整值计算 6 lp 打印

  4. 24、jQuery常用AJAX-API/Java调用MySQL / Oracle过程与函数

      1)掌握jQuery常用AJAX-API 2)掌握Java调用MySQL / Oracle过程与函数 一)jQuery常用AJAX-API 目的:简化客户端与服务端进行局部刷新的异步通讯 (1)取 ...

  5. hdu4935 Prime Tree(2014多校联合第七场)

    首先这是一道dp题,对题意的把握和对状态的处理是解题关键. 题目给出的范围是n在1到1e11之间,由于在裂变过称中左儿子总是父亲节点的一个非平凡约数,容易看出裂变过程只与 素数幂有关,并且显然有素数不 ...

  6. Unity-Animator深入系列---StateMachineBehaviour初始化时间测试

    回到 Animator深入系列总目录 结果和想的有点出入 测试结果: 1.SMB初始化会被调用多次,次数不可控,当Animator组件重复开关则重复初始化. 2.SMB支持构造函数 MyClass p ...

  7. jquery的ajax向ashx传值,中文乱码问题

    从网上查找了很多资料: 有在配置文件里面加如下配置 <globalization responseEncoding="utf-8" requestEncoding=" ...

  8. SQL Server中常用的SQL语句

    1.概述 名词 笛卡尔积.主键.外键 数据完整性 实体完整性:主属性不能为空值,例如选课表中学号和课程号不能为空 参照完整性:表中的外键取值为空或参照表中的主键 用户定义完整性:取值范围或非空限制,例 ...

  9. 多条件查询(php+mysql) 租房子例子

    <body> <?php //多条件 $tiaojian2= " 2=2 "; $attr2 = ""; //判断区域 if(!empty($ ...

  10. shell脚本之lnmp的搭建

    !/bin/bash #this script is source packages installed lnmp .xmal yum -y install wget #"========= ...