[注] iOS代碼已重構(gòu)，效率提升90%，200層動畫不卡。[2016.10.27]

上一篇 點此閱讀 簡要介紹了FlashToAnimation的功能，也就是將flash動畫無縫導(dǎo)入到Android/iOS及cocos2dx中運行, 這一篇介紹這個庫的使用方法。點此查看源碼。

準(zhǔn)備工作

首先確保系統(tǒng)中安裝了flash，并且flash版本應(yīng)該在cs3或者以上。
然后把"源碼根目錄/tools/flashScript"目錄內(nèi)的所有文件和文件夾copy到如下目錄：

• Mac：~/Library/Application Support/Adobe/[Flash CS+版本號]/[en_US或者zh_CN]/Configuration/Commands
• Windows：C:\Users[用戶名]\AppData\Local\Adobe[Flash CS+版本號][en_US或者zh_CN]\Configuration\Commands

在文件管理器（或Finder）目錄中看起來是這樣的：

--Commands
    -- 1.根據(jù)png創(chuàng)建元件.jsfl
    -- 2.修改fla中元素的名字.jsfl
    -- 3.導(dǎo)出動畫數(shù)據(jù).jsfl
    -- libs/
        --json2.jsfl
    -- ....其他文件

如圖：

這時候打開flash，點擊菜單欄中的 Commands（中文的話應(yīng)該是命令），在下拉菜單中就能看到我們加入的腳本啦。

到此為止準(zhǔn)備工作就緒。

美術(shù)人員制作flash動畫的步驟

下面步驟看起來很長，其實內(nèi)容很簡單，都是大家各自平時使用的經(jīng)驗，在這里寫這么多是為了讓小白用戶不出錯而已。
美術(shù)人員使用步驟：

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

  
  
  

• 保存文檔，請務(wù)必保存文檔，否則腳本不生效，并按照如下規(guī)則命名：
  fla的命名應(yīng)該以 "." 分為3部分：
  測試.test.fla
  第一部分：中文，對本文件的中文描述。（不重要，可以隨意取。）
  第二部分：英文，表示本文件的英文標(biāo)識符。（重要，在代碼中會使用到這個關(guān)鍵字。）
  第三部分：后綴，默認(rèn)即可不用管。（使用.fla即可。）
  其中第一部分中文可忽略。

  
  
  

• 在新建的Flash文件窗口右側(cè)的Library欄中，點擊右鍵，新建一個文件夾名為“pics”(注意，名字不能錯，后面有類似的要求也要遵守)。

• 把制作flash的圖片（png格式）拖入pics文件夾中。[!!!注意，所有的png圖片必須帶后綴.png否則會出錯！]
  

  

• 點擊commands中的腳本“1.根據(jù)png創(chuàng)建元件”。結(jié)果如圖：

  
  
  

• 如果是cocos2dx中使用，為了避免Sprite Frame Cache重名，或者想要為圖片生成跟本動畫相關(guān)的獨一無二的前綴，可以點擊commands中的腳本“2.修改fla中元素的名字”。結(jié)果如下：

  
  
  

• iOS可能也有此問題。因為直接拖入xcode中的文件一般選擇“create groups”，這個只是邏輯文件夾，如果其他文件夾內(nèi)存在同名文件則會沖突。所以最好每次制作動畫，添加png圖片的時候，都執(zhí)行一次腳本“2.修改fla中元素的名字“。

• 新建一個Movie clip（影片剪輯），取一個合適的名字。然后拖入anims文件夾中

  
  
  
  
  
  

• 雙擊該Movie clip，進(jìn)入編輯模式，此時就可以使用eles文件夾中的Movie clip，制作動畫了。制作動畫的具體細(xì)節(jié)要求，見下面的要求。

  
  
  

• 制作完成后，保存，美術(shù)人員的工作就完成了。

  
  
  

美術(shù)人員制作flash動畫完整要求

1. 下面涉及名字的地方可以使用 英文字母，數(shù)字和下劃線，不要用中文。
2. 先制作動畫所需要的圖片，png/jpg格式的，所有的動畫元素需要全部使用圖片，不可以使用矢量圖和文字等等。
3. 圖片命名盡量簡單，以減少程序處理的數(shù)據(jù)量。
4. 建立fla時，使用Action Script 3。
5. 在庫中建立3個文件夾，名字為：pics（圖片），anims（動畫的動作，比如idle, move等），eles（圖片對應(yīng)的元件）。對應(yīng)的資源請在不同的文件夾中建立。
6. 每張圖片（pics）都需要生成一個元件（eles），不要把多張圖片放在一個元件中。所以元件的數(shù)量應(yīng)該同圖片的數(shù)量是相同的。
7. 所有的元件請使用 "影片剪輯"(movie clip), 不要使用 "按鈕" 和 "圖片"。
8. 把制作好的png圖片（只用png，不要用jpg或其它格式圖片）導(dǎo)入到flash中，并拖進(jìn)pics文件夾下面。
9. 依次生成png圖片對應(yīng)的元件（影片剪輯），把圖片拖到元件中。使圖片居中。元件名字應(yīng)該同圖片的名字完全相同。這一步可以使用腳本（“1.根據(jù)png創(chuàng)建元件“）代替這個操作。
10. 建立新的元件，還是使用"影片剪輯"(movie clip)，然后拖進(jìn)anims文件夾中。這就是需要制作的動作了。
11. 這時候，就可以使用eles(不要使用pics中的圖片)中的元件在時間軸中制作動作了。
12. 制作動作，幀的普通操作(關(guān)鍵幀關(guān)鍵幀之間的傳統(tǒng)補間，只能使用傳統(tǒng)補間)都可以使用，但是對關(guān)鍵幀的處理只支持以下幾種：移動，縮放，旋轉(zhuǎn)，傾斜，顏色疊加，透明度的變化 這5種變換。
13. 不要使用除13條中描述的其他任何對關(guān)鍵幀的操作，比如濾鏡，顯示混合等。
14. 不要使用緩動，不要使用補間動畫時元件旋轉(zhuǎn)等高端操作。如果某一幀某個元件不可見，可以通過設(shè)置它的透明度為0，或者插入空白關(guān)鍵幀來實現(xiàn)。
15. 不要使用嵌套動畫：就是說關(guān)鍵幀上最好只用eles中的元素來做，不要做好了一段動畫，把這段動畫作為關(guān)鍵幀使用。。
16. <font color=red>使用eles中的原件制作動畫時，始終保持錨點的位置在原件的中央，否則會出現(xiàn)位置不對的問題。默認(rèn)錨點是在中央的，不要手動去調(diào)整它。</font>
17. 最后，保存成fla就可以了。美術(shù)人員最終輸出就是一個.fla文件。

程序人員使用美術(shù)制作好的動畫

程序拿到美術(shù)人員制作好的fla文件后，首先要進(jìn)行一番檢查，看看是否合格。
所以需要確保程序員熟悉flash的頁面和菜單，并了解一些簡單的flash軟件操作。

• 打開.fla文件。簡單檢查一下文件完成度。

  • 是否3個文件夾都在(anims，pics，eles)。
  • 是否動畫文件都在anims文件夾內(nèi)。
  • 是否pics與eles內(nèi)文件數(shù)量相同，并且一一對應(yīng)，相對應(yīng)的2個組件名字也要完全一致。
  • 是否pics和eles內(nèi)的組件名字都有.png后綴。

• 如果需要給關(guān)鍵幀添加事件，需要選中該關(guān)鍵幀（首先在timeline中選中關(guān)鍵幀，然后在主頁面中選中該幀代表的圖片，過程中最好隱藏timeline中的其它層），然后點擊右側(cè)與library同級的標(biāo)簽頁properties。在第一行標(biāo)有 < Instance Name > 的輸入框，輸入你的事件名，程序能夠在播放到這一幀的時候，觸發(fā)這個事件<font color=red>（在代碼中，事件對應(yīng)的字段為"mark"）</font>。

  
  
  

• 事件添加完成后，選擇菜單：Commands（命令）- “3.導(dǎo)出動畫數(shù)據(jù)”。窗口底部同Timeline（時間軸）同級的Output（輸出）欄中會顯示腳本執(zhí)行過程。

  
  
  

• 成功后，打開.fla文件所在的目錄，即可看到".flajson文件"和.fla同名"圖片文件夾"（里面是圖片）。

  
  
  

• 如果需要使用二進(jìn)制動畫描述文件，則需要把".flajson文件"轉(zhuǎn)為".flabin文件"，這兩個后綴也不能改。
  轉(zhuǎn)換需要使用腳本"源碼根目錄/tools/JsonToBin.py"文件。這是一個python腳本。如果系統(tǒng)內(nèi)沒有python，則需要安裝一個。
  然后打開命令行（mac中使用終端，Windows中可使用cmd）執(zhí)行如下命令，執(zhí)行后的.flabin就是轉(zhuǎn)換成二進(jìn)制后的文件。

    python 源碼根目錄/tools/JsonToBin.py [.flajson文件全路徑] [.flabin文件全路徑]

• 這時候可以把".flajson文件"（或者 ".flabin文件"，二者使用其一即可，代碼庫內(nèi)部處理，無需額外寫代碼判斷）和"圖片文件夾"放入程序指定目錄就可以使用了。
  • cocos2dx可以放在資源目錄中任意位置。代碼初始化時需要指定目錄。
  • Android需要將這2個文件放入 Assets文件夾的子文件夾flashAnims中。
  • iOS拖入xcode中，選擇“copy if need”和“create groups”，點擊確定。

程序員如何在代碼中調(diào)用動畫

//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文件夾內(nèi)的動畫名稱
superNode->addChild(animNode);

<!--Android版本使用方法-->
<!--Android還需要在manifest文件中添加權(quán)限，與demo中相同添加即可。不要忘記res/values目錄中的flashview_attr.xml文件。 -->
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:FlashView="http://schemas.android.com/apk/res-auto" <!--!!!!!!注意這個要加-->
    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" <!--這里的defaultAnim就是flash中anims文件夾內(nèi)的動畫名稱-->
        FlashView:designDPI="326"
        FlashView:loopTimes="0"
        android:id="@+id/flashview"
        />

</RelativeLayout>

//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文件夾內(nèi)的動畫名稱

推薦：

1小時學(xué)會：最簡單的iOS直播推流系列