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

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

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

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

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

另外需要注意的是層label，我們添加了標簽“walk”用來說明當前時間軸表示的動作。如果由多個動作，請在對應動作起始位置添加標簽來說明。標簽層必須位于最上層，這一點非常重要！骨骼動畫面板將按照標簽來讀取并設定動作。

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

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

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

在此面板中點擊“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 Times: 當前動作的總時長。數值越大，動作越慢。

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

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

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

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

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

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

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

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

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

Total Frames Scale: 設置當前骨骼運動時間相對動作總時間（總幀數）的按比例縮放（增加或減少）。

Play 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格式，所以此文件中包含了骨骼動畫需要的所有數據。

在導出縮放比設置項中，你可以設置導出紋理或紋理集的縮放比例，以適應不同分辨率設備上的資源尺寸需求。

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