注::如果你对 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. 已安装php 编译安装 gd库拓展模块

    参考资料:http://wenku.baidu.com/link?url=EgXFShYxeJOZSYNQ_7RCBC-6X8OcRRCqVm4qCv49uBk57d6vLBoUpfYdQ-KqJRs ...

  2. python 优矿自动化交易

    一.进入官网,打开notebook 自己新建 notebook 二.在代码中编写自己的交易策略 https://uqer.io/help/faqApi/#account相关属性  在帮助文档中可以找到 ...

  3. 一周试用yii开发一个带各种该有功能的web程序(二)

    上篇随笔写完的是yii能使用简单的命令创建出一个基本的架构,我们只需要在这个架构上进行代码编写,扩展功能.而生成的一个小型系统是可以操作的,但是不是我们想要的,所以,这篇结合源码讲如何创建出我们自己的 ...

  4. Centos7下用命令同步标准时间

    新装的CentO7S系统服务器可能设置了错误的时间,需要调整时区和时间.如下是CentOS7系统使用NTP协议,从一个时间服务器同步标准时间: [root@localhost ~]# cp /usr/ ...

  5. Android Design Support Library使用详解

    Android Design Support Library使用详解 Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的And ...

  6. Unity连Photon服务器入门详解

    Photon是目前比较好用的游戏服务器.目前网上对于Photon的服务器讲解比较少,最近也对Photon做了初步的了解,做一个极其详细的入门. 首先就是得下载Photon咯 https://www.p ...

  7. IIS 7 应用程序池自动回收关闭的解决方案

    如果你正在做ASP.NET,那肯定会用到IIS 如果你想在ASP.NET Application中加入某个定时任务,那想必一定是用一个线程在不停地做定时计算 那假设我们在自己的ASP.NET应用程序中 ...

  8. oracle根据分隔符将字符串分割成数组函数

    --创建表类型 create or replace type mytype as table of number;--如果定义成varchar--CREATE OR REPLACE type myty ...

  9. Could not get BatchedBridge, make sure your bundle is packaged correctly

    react-native 运行android项目的时候运行成功但是模拟器上会提示: Could not get BatchedBridge, make sure your bundle is pack ...

  10. mybatis There is no getter for property named 'xx' in 'class java.lang.String

    转载自://http://www.cnblogs.com/anee/p/3324140.html 用mybatis查询时,传入一个字符串传参数,且进行判断时,会报 There is no getter ...