在下載并安裝完畢骨骼面板的Flash Pro擴展插件后，啟動Flash Pro。打開教程源碼下載包中的DragonBones_tutorial_Start.fla文件。

打開庫面板，你可以看到此示例的相關資源。

在parts目錄中包含的是組成動畫Dragon的各個元件，從命名可以直觀的了解到它們對應的龍的各個部分。良好的元件命名是個好習慣，不是么？:)

雙擊庫面板中的MovieClip元件Dragon進入時間軸編輯模式。我們需要詳細了解這個動畫的組成，它有助于后面骨骼動畫編輯。

注意：1，請留意時間軸上的各層的命名，我們是以骨骼各個部分來命名的。骨骼動畫面板將自動根據層的命名來識別組成骨骼的各個部分。

你發現時間軸上并沒有添加補間？是的，你僅僅需要在時間軸上設置關鍵幀上各元件的位置，剩下的工作都可以在骨骼面板中完成。

當然，作為設計師的你，可以按你的習慣做好完整的補間動畫，骨骼面板同樣可以按照你的動畫原樣導入。（注：目前版本的DragonBones僅支持傳統補間，新補間將在后續版本中支持）

當你按上述要求準備好動畫，就可以點擊Flash Pro菜單中的Window>Other Panels>SkeletonAnimationDesignPanel打開骨骼動畫編輯面板。我們將在接下來的操作中詳細說明骨骼動畫編輯面板的使用。

在此面板中點擊“Import”按鈕，此時將出現下圖所示窗口：

在導入面板中你可以設置貼圖排序、貼圖高度及貼圖間距。在導入選項中，你可以導入選中的庫元件、所有庫元件以及通過骨骼面板導出的PNG/SWF/ZIP文件等。

選中Flash Pro庫中的MovieClip元件Dragon，然后在骨骼動畫編輯面板中選擇導入選中的項目，點擊OK按鈕。

骨骼動畫編輯面板導入動畫元件Dragon后如下圖：

Armature List: 導入動畫MovieClip的列表，與MovieClip在庫中的名稱一致，程序中將以此名稱來創建動畫對象。每個包含動作的MovieClip，在DragonBones里我們稱之為“骨架”（Armature）。

Behavior. List: 對應動畫對象的各個動作/行為名稱，與MovieClip中幀標簽名稱一致，程序中將以此名稱來動態播放各種動作。

Bone Tree: 動畫對象的各個骨骼組成部分，與MovieClip中各層名稱一致。

Texture List: 動畫對象中各部分對應的材質名稱。

對于每個動作，首先要設置的參數如下：

Total Frame: 當前動作的總幀數。幀數越大，動作越慢。

Tween Frame: 設置其他動作切換到此動作需要的幀數。比如，你的游戲角色有個動作為蹲下，此動作在時間軸上僅有1幀。假如設置此參數為6，那么當游戲中從其他動作切換到蹲下時候，程序會自動增加6幀的過渡，讓各個動作切換更加自然。

Keyframe. Ease: 當前動作各關鍵幀之間的緩動系數。

Loop: 當前動作是否循環播放。比如角色的走、跑步等。

A當設置好上述參數，你可以在左下方的預覽區域中看到當前編輯動作的動畫。

預覽窗口左上角可以縮放預覽對象，便于觀察的動作。

OK，接下來我們在Bone Tree面板中設置動作中各個骨骼的從屬關系。下圖可以看到在默認導入的動畫中，各個骨骼沒有關聯：

在此面板中右上角的 可以設置在預覽窗口里當前選中骨骼的高亮顏色。

在列表里我們可以拖拽的方式，將子骨骼附著在父骨骼上。如下圖，我們將身體設置為主骨骼，而頭、尾巴、上肢和下肢都為其子骨骼。而上肢中又包含了上臂、下臂和手等。通過樹形結構我們可以非常直觀的看到他們的從屬關系。

我們可以對每個骨骼的運動參數進行單獨設置。在Bone Tree面板中選中你需要設置的骨骼，調節下列參數。

Tween Time Scale: 設置當前骨骼運動時間相對動作總時間（總幀數）的增加或減少。

Tween Time Delay: 設置當前骨骼開始運動時間相對所屬動作的延遲或提前。

別小看這2個參數，各個骨骼通過這2個參數微調后，你會發現角色動作哪怕在時間軸上僅有2個關鍵幀，也會產生非常復雜的動作。

例如本例中，我們把龍的尾巴tail的Tween Delay設置為-10，尾巴尖tailTip的Tween Delay設置為-50，你可以明顯看到尾巴隨著身體的運動甩動起來，非常的生動。;)

當你調整完骨骼動畫，就可以點擊”Export”按鈕導出。

在導出格式選項中，包含多種數據格式供你實際項目需求。

• SWF (XML Merged): 包含骨骼XML數據的SWF格式，如果游戲需要矢量的骨骼動畫可以采用此格式導出，當然前提是原始素材都是矢量的。
• 
  
• PNG(XML Merged): 包含骨骼XML數據的PNG格式。
• 
  
• Zip(XML and SWF): 分開保存的骨骼XML數據和SWF資源。
• 
  
• Zip(XML and PNG): 分開保存的骨骼XML數據和PNG圖片。
• 
  
• Zip(XML and PNGs): 分開保存的骨骼XML數據和按每個骨骼獨立的PNG圖片包。
• 
  

例如在本例中，我們選擇PNG(XML Merged)，點擊OK導出文件DragonWalk.png到指定的目錄。

你會發現導出的就一個PNG文件？是的，我們選擇了合并XML數據的PNG格式，所以此文件中包含了骨骼動畫需要的所有數據。

作為設計師，到此你的工作圓滿完成。

首先，將骨骼面板導出的資源嵌入到項目。

此處嵌入的資源是由Flash Pro骨骼動畫編輯面板導出的合并了XML數據文件的PNG文件或SWF文件。當然，你也可以通過動態加載的方式在項目運行時候實時載入資源。

創建factory，并通過fromRawData方法解析載入的資源格式，當解析完畢后交給對應事件textureCompleteHandler處理。

事件函數textureCompleteHandler中，首先用buildArmature方法構建骨骼動畫容器：

然后將容器的顯示內容armature.display添加到場景：

指定要播放骨骼的某個動作：

最后，為ENTER_FRAME事件函數中添加armature.update()方法，讓SWF每幀渲染時候更新骨骼動畫。

打開文件 DragonBones_Tutorial_MultiBehavior.fla，雙擊庫里的動畫元件Dragon，你可以看到此動畫中有四個動 作：stand，walk，jump和fail。每個動作的起始幀上添加了對應的幀標簽，這也是DragonBones識別不同動作的標識。

打開骨骼動畫編輯面板，你會看到在Behavior. List里面會有多個動作，選擇某個動作就可以為對應動作設置動畫幀數、緩動，設置此動作的某個骨骼的細節參數等。

請留意Behavior編輯里的Tween Frame選項。

這個選項是表明的其他動作切換到當前動作需要的過渡幀數。例如這里設置 的跳躍動作的Tween Frame為3，那么其他動作切換到跳躍需要3幀，DragonBones框架會自動為你添加其中的過渡幀，讓各種動作之間切換變得自然。當然，你可以在 動畫預覽窗口中看到各種動畫的切換效果。

調整完畢各個動作的細節后，點擊“Export”按鈕導出骨骼動畫數據。

打開DBStarlingMultiBehavior.as文件，代碼如下。此示例是在Starling框架中通過鍵盤控制骨骼動畫運動。

通過上面的代碼我們可以發現，我們只需要在程序中需要播放相關骨骼動畫的時候調用函數armature.animation.gotoAndPlay()即可。

除了指定需要播放的動作名稱，你還可以通過此函數來動態指定動作的總幀數、是否循環等。

對于每個動畫，除了指定其播放之外，DragonBones框架提供了動畫播放相關的各種事件。

動作切換事件:

動作開始事件:

動作結束事件

動作循環完畢事件:

通過各種事件與動作的配合，你可以輕松創建具有復雜運動角色的游戲。?

打開本教程的示例文件DragonBones_Tutorial_ChangeClothes.fla 。這個文件中，我們把動畫元件Dragon穿上了一件黃馬褂，將其放在時間軸上名為clothes的層上，并調整符合各種動作。

然后請注意庫中的clothTextureTemp動畫元件，雙擊打開 它，你會發現我們把打算換裝的4件衣服放在時間軸不同層上，并分別將層名稱與其對應。這4件衣服因為大小形狀一樣，所以在層中重合了。不過實際項目中，很 多時候更換的衣服、武器或道具大小不盡相同，所以需要相對于骨骼動畫中原始服飾的位置調整好各自坐標位置。

留意在層label上我們給第一幀的幀標簽取名為temp。因為沒有幀標簽的動畫元件，是不會被骨骼動畫編輯面板識別導入的。

選中庫中的Dragon和clothTextureTemp兩個元件， 打開骨骼動畫編輯面板，點擊“Import”按鈕導入所選的元件，你會發現在面板中Armature List里有了一個名為clothTextureTemp的骨架并且包含clothes1至clothes4的骨骼。不用管它，我們將它們導入面板的目的 不是為了編輯骨骼動畫，僅僅是為了最終導出這些服裝材質與骨骼動畫材質到一個文件中。

接下來你只需對Dragon這個骨架進行相關的骨骼動畫調整，然后點擊”Export”按鈕導出素材資源。這里我們導出為合并XML數據的DragonWithClothes.png 。你會發現導出的材質圖集中包含了我們需要的各自衣服。:)

現在我們看看在程序中如何實現換裝。打開教程3中創建的DBStarlingMultiBehavior.as文件，我們直接在這個文件中添加換裝代碼即可。首先將嵌入的素材更改為DragonWithClothes.png：

然后添加2個變量，數組textures保存了我們要更換服裝材質的名稱，整數textureIndex用來做切換材質時候的索引。

請注意這里寫的是“parts/clothes1”而不是 “clothes1”，原因是Flash Pro的庫中不同目錄的元件名稱可以相同，所以DragonBones在保存資源路徑的時候也包含了目錄結構。打開 DragonBones_Tutorial_ChangeClothes.fla看看庫里的衣服動畫元件所在的目錄你就明白了。:)

在鍵盤響應函數onKeyEventHandler中添加下面代碼，這樣按下鍵盤C鍵的時候調用換裝函數。

創建換裝函數changeClothes()如下：

這里我們用到了 dragonBones.factorys.StarlingFactory.getTextureDisplay(_textureData:TextureData, _fullName:String):Image來獲取由骨骼動畫編輯面板導出的材質數據，然后將對應的材質賦予給骨骼的display對象，實現了換 裝。當然，正如前面所說，換裝的材質可以隨意來自程序中載入的其他圖片資源。

W另外，當你熟悉了DragonBones的開源框架，你會發現可以通過代碼實現更加靈活的變換，除了更換骨骼材質，你還可以在骨骼框架（Armature）中動態的刪除、添加骨骼，改變骨骼的從屬關系等。