FlashAnimationToMobile

by hardman

Flash动画导出至iOS/Android/cocos2dx3.x,包含完整工具集,各平台解析代码。一键导出,极简3行代码快速集成!适用秀场动画,游戏特效!

208 Stars 67 Forks Last release: Not found 60 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

在我的博客中,有详细的项目介绍和使用方法(这里的不完整),欢迎点击:

使用本项目的准备工作

首先确保系统中安装了flash,并且flash版本应该在cs3或者以上。 然后把"源码根目录/tools/flashScript"目录内的所有文件和文件夹copy到如下目录:

  • Mac:~/Library/Application Support/Adobe/[Flash CS+版本号]/[enUS或者zhCN]/Configuration/Commands
  • Windows:C:\Users[用户名]\AppData\Local\Adobe[Flash CS+版本号][enUS或者zhCN]\Configuration\Commands

在文件管理器(或Finder)目录中看起来是这样的:

--Commands
    -- 1.根据png创建元件.jsfl
    -- 2.修改fla中元素的名字.jsfl
    -- 3.导出动画数据.jsfl
    -- libs/
        --json2.jsfl
    -- ....其他文件

如图:

这时候打开flash,点击菜单栏中的 Commands(中文的话应该是命令),在下拉菜单中就能看到我们加入的脚本啦。

到此为止准备工作就绪。

美术人员制作flash动画的步骤

下面步骤看起来很长,其实内容很简单,都是大家各自平时使用的经验,在这里写这么多是为了让小白用户不出错而已。 美术人员使用步骤:

  • 新建一个as3.0的Flash Document。

  • 保存文档,请务必保存文档,否则脚本不生效,并按照如下规则命名: fla的命名应该以 "." 分为3部分: 测试.test.fla 第一部分:中文,对本文件的中文描述。(不重要,可以随意取。) 第二部分:英文,表示本文件的英文标识符。(重要,在代码中会使用到这个关键字。) 第三部分:后缀,默认即可不用管。(使用.fla即可。) 其中第一部分中文可忽略。

  • 在新建的Flash文件窗口右侧的Library栏中,点击右键,新建一个文件夹名为“pics”(注意,名字不能错,后面有类似的要求也要遵守)。

  • 把制作flash的图片(png格式)拖入pics文件夹中。[!!!注意,所有的png图片必须带后缀.png否则会出错!]

  • 点击commands中的脚本“1.根据png创建元件”。结果如图:

  • 如果是cocos2dx中使用,为了避免Sprite Frame Cache重名,或者想要为图片生成跟本动画相关的独一无二的前缀,可以点击commands中的脚本“2.修改fla中元素的名字”。结果如下:

  • iOS可能也有此问题。因为直接拖入xcode中的文件一般选择“create groups”,这个只是逻辑文件夹,如果其他文件夹内存在同名文件则会冲突。所以最好每次制作动画,添加png图片的时候,都执行一次脚本“2.修改fla中元素的名字“。

  • 新建一个Movie clip(影片剪辑),取一个合适的名字。然后拖入anims文件夹中

  • 双击该Movie clip,进入编辑模式,此时就可以使用eles文件夹中的Movie clip,制作动画了。制作动画的具体细节要求,见下面的要求。

  • 制作完成后,保存,美术人员的工作就完成了。

美术人员制作flash动画完整要求

  1. 下面涉及名字的地方可以使用 英文字母,数字和下划线,不要用中文。
  2. 先制作动画所需要的图片,png/jpg格式的,所有的动画元素需要全部使用图片,不可以使用矢量图和文字等等。
  3. 图片命名尽量简单,以减少程序处理的数据量。
  4. 建立fla时,使用Action Script 3。
  5. 在库中建立3个文件夹,名字为:pics(图片),anims(动画的动作,比如idle, move等),eles(图片对应的元件)。对应的资源请在不同的文件夹中建立。
  6. 每张图片(pics)都需要生成一个元件(eles),不要把多张图片放在一个元件中。所以元件的数量应该同图片的数量是相同的。
  7. 所有的元件请使用 "影片剪辑"(movie clip), 不要使用 "按钮" 和 "图片"。
  8. 把制作好的png图片(只用png,不要用jpg或其它格式图片)导入到flash中,并拖进pics文件夹下面。
  9. 依次生成png图片对应的元件(影片剪辑),把图片拖到元件中。使图片居中。元件名字应该同图片的名字完全相同。这一步可以使用脚本(“1.根据png创建元件“)代替这个操作。
  10. 建立新的元件,还是使用"影片剪辑"(movie clip),然后拖进anims文件夹中。这就是需要制作的动作了。
  11. 这时候,就可以使用eles(不要使用pics中的图片)中的元件在时间轴中制作动作了。
  12. 制作动作,帧的普通操作(关键帧关键帧之间的传统补间,只能使用传统补间)都可以使用,但是对关键帧的处理只支持以下几种:移动,缩放,旋转,倾斜,颜色叠加,透明度的变化 这5种变换。
  13. 不要使用除13条中描述的其他任何对关键帧的操作,比如滤镜,显示混合等。
  14. 不要使用缓动,不要使用补间动画时元件旋转等高端操作。如果某一帧某个元件不可见,可以通过设置它的透明度为0,或者插入空白关键帧来实现。
  15. 不要使用嵌套动画:就是说关键帧上最好只用eles中的元素来做,不要做好了一段动画,把这段动画作为关键帧使用。。
  16. 使用eles中的原件制作动画时,始终保持锚点的位置在原件的中央,否则会出现位置不对的问题。默认锚点是在中央的,不要手动去调整它。
  17. 最后,保存成fla就可以了。美术人员最终输出就是一个.fla文件。

程序人员使用美术制作好的动画

程序拿到美术人员制作好的fla文件后,首先要进行一番检查,看看是否合格。 所以需要确保程序员熟悉flash的页面和菜单,并了解一些简单的flash软件操作。

  • 打开.fla文件。简单检查一下文件完成度。
    • 是否3个文件夹都在(anims,pics,eles)。
    • 是否动画文件都在anims文件夹内。
    • 是否pics与eles内文件数量相同,并且一一对应,相对应的2个组件名字也要完全一致。
    • 是否pics和eles内的组件名字都有.png后缀。
  • 如果需要给关键帧添加事件,需要选中该关键帧(首先在timeline中选中关键帧,然后在主页面中选中该帧代表的图片,过程中最好隐藏timeline中的其它层),然后点击右侧与library同级的标签页properties。在第一行标有 < Instance Name > 的输入框,输入你的事件名,程序能够在播放到这一帧的时候,触发这个事件。

  • 事件添加完成后,选择菜单:Commands(命令)- “3.导出动画数据”。窗口底部同Timeline(时间轴)同级的Output(输出)栏中会显示脚本执行过程。

  • 成功后,打开.fla文件所在的目录,即可看到".flajson文件"和.fla同名"图片文件夹"(里面是图片)。

  • 如果需要使用二进制动画描述文件,则需要把".flajson文件"转为".flabin文件",这两个后缀也不能改。 转换需要使用脚本"源码根目录/tools/JsonToBin.py"文件。这是一个python脚本。如果系统内没有python,则需要安装一个。 然后打开命令行(mac中使用终端,Windows中可使用cmd)执行如下命令,执行后的.flabin就是转换成二进制后的文件。

    python 源码根目录/tools/JsonToBin.py [.flajson文件全路径] [.flabin文件全路径]
    
  • 这时候可以把".flajson文件"(或者 ".flabin文件",二者使用其一即可,代码库内部处理,无需额外写代码判断)和"图片文件夹"放入程序指定目录就可以使用了。

    • cocos2dx可以放在资源目录中任意位置。代码初始化时需要指定目录。
    • Android需要将这2个文件放入 Assets文件夹的子文件夹flashAnims中。
    • iOS拖入xcode中,选择“copy if need”和“create groups”,点击确定。

程序员如何在代码中调用动画

//cocos2dx版本使用方法
//包含头文件
#include "AnimNode.h"
using namespace windy;

... ...

//使用代码 AnimNode *animNode = AnimNode::create(); animNode->load("xxxx/flashFileName.flajson"); animNode->play("animationName", WINDY_ANIMNODE_LOOP_FOREVER);//这里的animationName就是flash中anims文件夹内的动画名称 superNode->addChild(animNode);

android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.xcyo.yoyo.flashsupport.MainActivity">
<com.flashanimation.view.flashview android:layout_width="match_parent" android:layout_height="match_parent" flashview:flashdir="flashAnims" flashview:flashfilename="callTextAnim" flashview:defaultanim="arriving1">
    FlashView:designDPI="326"
    FlashView:loopTimes="0"
    android:id="@+id/flashview"
    /&gt;

</com.flashanimation.view.flashview>

//iOS版本使用方法
#import "FlashView.h"

... ...

FlashView *flashView = [[FlashView alloc] initWithFlashName:@"flashFileName"]; flashView.frame = self.view.frame;// CGRectMake(100, 100, 200, 500); flashView.backgroundColor = [UIColor clearColor]; [superView addSubview:flashView]; [flashView play:@"animationName" loopTimes:FOREVER];//这里的animationName就是flash中anims文件夹内的动画名称

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.