Adobe Animate CC 在图形中添加交互性代码

最近在研究HTML Canvas，涉及到Adobe Animate CC的使用，看了一下官方文档，很繁琐，下面简单的总结了一下在图形中添加交互性代码的方法。

AnimateCC在图形中添加交互性代码的方式有两种：

1. 通过对图层中的任意帧添加动作实现交互。

2. 通过添加代码片段实现交互。

 

通过添加动作实现交互：

通过添加动作实现交互很简单，以下面的现有canvas绘图为例：

 

场景1中的绘图通过新建图层添加图形组合而成，红色框住部分为图层列表，右侧蓝色框住的部分为相应图层的动画帧，24帧为一秒。

上图为静态图，所以默认第一帧为关键帧，也可以自定义动画播放帧数，并在任意帧数插入关键帧。

添加动作时，需要先选择相应图层的关键帧，然后右键关键帧选择动作，或点击上方菜单中的窗口->动作进行动作添加。

添加动作如下：

 

在名为coffee aroma的图层的第一帧上面添加一个动作，保存，运行项目，浏览器打开绘图时会弹出上面的提示框内容。

 

通过添加代码片段添加实现交互：

代码片段就是选择舞台中的对象，然后选择相应的动作可以自动生成该动作的调用和方法代码，并且如果选中的对象没有实例名称，会自动生成对象名称。

点击上方菜单的窗口->代码片段打开代码片段窗口，如下图：

 

根目录为：ActionScript、HTML5 Canvas、WebGL。

通过当前项目文件类型选择相应的目录。如当前项目文件类型为canvas项目，那么只能选择HTML5 Canvas目录中的代码片段，选择其他目录中的代码片段会报错。

根目录下面的二级目录为片段分类，打开事件处理函数，并在舞台中选择一个对象，双击Mouse Click事件即可生成相应对象的代码片段，如下图所示：

 

在方法中可以添加任意功能代码，如上图中的代码，将在点击图中之前选择的对象时弹出提示框。

添加代码片段后，会在图层列表中自动生成一个Actions图层，此图层为动作图层，清除后会清除之前添加的代码片段。