最近在自学Cocos JS，手上恰巧有一套Flash的动画源文件，打算用这些资源学习下DragonBones(龙骨动画)

流程如下：

用Cocos Creator新建项目，布局如下图：

DBAnimation是个空节点，是用来等下挂载导出的DragonBones动画数据的。等下导出龙骨动画的资源会放在SceneAnim目录下。

下载安装最新版本的DragonBones及Flash Pro插件

现在官网最新版本的DragonBones(简称DB)是5.6的官网直接下就可以，Flash Pro插件的链接指向github上，插件最新版本是V3.0.1也是直接下就可以了。

DB官网地址:http://dragonbones.com/cn/download.html

DB Flash插件地址:https://github.com/DragonBones/DesignPanel/releases

下载安装Adobe Animate及Anastasiy Extension Manager(插件管理器)

这里要说下，网上说Flash CS6也是可以的但是我DB 的Flash插件死活装不上，且Adobe官网也放弃了对Flah项目的维护(改成Animate)，如果有装了Flash CS6且装了DB Flash插件的可以跳过这步。

这里还要说下Animate是要收费的(NND，一年要 888 RMB)。对于一个小程序来说还是有点小贵，被迫无奈装了破解版。

这里只给出软件的官网地址。

Adobe Animate官网地址:https://creativecloud.adobe.com/apps/download/animate?promoid=VY36K4SD&mv=other

Anastasiy Extension Manager官网地址:http://install.anastasiy.com/

Animate 安装 DB 插件

直接将从github下的zxp插件文件拖到Animate插件管理器就可以了，如图

用软件导出程序要用的DB动画文件

工欲善其事必先利其器，通过以上步骤终于把我们需要的准备工作都做好了，下来开始导出我们即将使用的动画数据，在Animate编辑器中效果如图

然后导出成DB所能识别的动画数据，如图

再弹出的DragonBonesDesignPanel界面中点 导入-＞确定，如图

之后会弹出动画数据界面，如图

最后再点导出，导出的数据格式选Json,如图

最终指定导出文件的路径就可以了。然后再用DragonBones工具查看导出的zip包数据，如图

如果一切正常就可以在DragonBones中查看到和在Animate中一样的效果，最后再导出成最终数据如图

最后打开Cocos Creator工程，发现多了3个文件，如图

Cocos Creator编辑器中使用导出的DragonBones动画数据

选中DBAnimation节点，添加DragonBones组件，然后将骨骼数据和贴图数据拖到DB组件上，如图

添加代码根据规则播放动画

代码直接上截图，如图

最终在浏览器里的运行效果运行效果

效果如图

结语

学无止境，记录点滴，记录成长，谢谢观看。