作為設計師，妳只需要準備好動畫角色的各個部分，在Flash Pro的時間軸中把他們有序組裝起來、設置好動作關鍵幀並運用DragonBones的骨骼動畫編輯面板搞定壹切。
在下載並安裝完畢骨骼面板的Flash Pro擴展插件後，啟動Flash Pro。打開教程源碼下載包中的DragonBones_tutorial_Start.fla文件。
打開庫面板，妳可以看到此示例的相關資源。
在parts目錄中包含的是組成動畫Dragon的各個元件，從命名可以直觀的了解到它們對應的龍的各個部分。良好的元件命名是個好習慣，不是麽？:)
雙擊庫面板中的MovieClip元件Dragon進入時間軸編輯模式。我們需要詳細了解這個動畫的組成，它有助於後面骨骼動畫編輯。
註意：1，請留意時間軸上的各層的命名，我們是以骨骼各個部分來命名的。骨骼動畫面板將自動根據層的命名來識別組成骨骼的各個部分。
,2，需要註意的是層label，我們添加了標簽“walk”用來說明當前時間軸表示的動作。如果由多個動作，請在對應動作起始位置添加標簽來說明。這壹步非常重要！骨骼動畫面板將按照標簽來讀取並設定動作。
妳發現時間軸上並沒有添加補間？是的，妳僅僅需要在時間軸上設置關鍵幀上各元件的位置，剩下的工作都可以在骨骼面板中完成。
當然，作為設計師的妳，可以按妳的習慣做好完整的補間動畫，骨骼面板同樣可以按照妳的動畫原樣導入。（註：目前版本的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”按鈕導出。
在導出格式選項中，包含多種數據格式供妳實際項目需求。
例如在本例中，我們選擇PNG(XML Merged)，點擊OK導出文件DragonWalk.png到指定的目錄。
妳會發現導出的就壹個PNG文件？是的，我們選擇了合並XML數據的PNG格式，所以此文件中包含了骨骼動畫需要的所有數據。
作為設計師，到此妳的工作圓滿完成。
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圖片包。