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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

對于每個動作，首先要設(shè)置的參數(shù)如下：

Total Times: 當前動作的總時長。數(shù)值越大，動作越慢。

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

Keyframe Ease: 當前動作各關(guān)鍵幀之間的緩動系數(shù)。

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

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

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

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

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

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

我們可以對每個骨骼的運動參數(shù)進行單獨設(shè)置。在Bone Tree面板中選中你需要設(shè)置的骨骼，調(diào)節(jié)下列參數(shù)。

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

Play Delay: 設(shè)置當前骨骼開始運動時間相對所屬動作的延遲或提前。

別小看這2個參數(shù)，各個骨骼通過這2個參數(shù)微調(diào)后，你會發(fā)現(xiàn)角色動作哪怕在時間軸上僅有2個關(guān)鍵幀，也會產(chǎn)生非常復雜的動作。

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

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

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

SWF (XML Merged): 包含骨骼XML數(shù)據(jù)的SWF格式，如果游戲需要矢量的骨骼動畫可以采用此格式導出，當然前提是原始素材都是矢量的。

PNG(XML Merged): 包含骨骼XML數(shù)據(jù)的PNG格式。

Zip(XML and SWF): 分開保存的骨骼XML數(shù)據(jù)和SWF資源。

Zip(XML and PNG): 分開保存的骨骼XML數(shù)據(jù)和PNG圖片。

Zip(XML and PNGs): 分開保存的骨骼XML數(shù)據(jù)和按每個骨骼獨立的PNG圖片包。

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

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

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

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