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

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

在parts目錄中包含的是組成動(dòng)畫Dragon的各個(gè)元件，從命名可以直觀的了解到它們對(duì)應(yīng)的龍的各個(gè)部分。良好的元件命名是個(gè)好習(xí)慣，不是么？:)

雙擊庫(kù)面板中的MovieClip元件Dragon進(jìn)入時(shí)間軸編輯模式。我們需要詳細(xì)了解這個(gè)動(dòng)畫的組成，它有助于后面骨骼動(dòng)畫編輯。

請(qǐng)留意時(shí)間軸上的各層的命名，我們是以骨骼各個(gè)部分來(lái)命名的。骨骼動(dòng)畫面板將自動(dòng)根據(jù)層的命名來(lái)識(shí)別組成骨骼的各個(gè)部分。

另外需要注意的是層label，我們添加了標(biāo)簽“walk”用來(lái)說(shuō)明當(dāng)前時(shí)間軸表示的動(dòng)作。如果由多個(gè)動(dòng)作，請(qǐng)?jiān)趯?duì)應(yīng)動(dòng)作起始位置添加標(biāo)簽來(lái)說(shuō)明。標(biāo)簽層必須位于最上層，這一點(diǎn)非常重要！骨骼動(dòng)畫面板將按照標(biāo)簽來(lái)讀取并設(shè)定動(dòng)作。

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

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

當(dāng)你按上述要求準(zhǔn)備好動(dòng)畫，就可以點(diǎn)擊Flash Pro菜單中的Window>Other Panels>DragonBonesDesignPanel打開(kāi)骨骼動(dòng)畫編輯面板，我們將在接下來(lái)的操作中詳細(xì)說(shuō)明骨骼動(dòng)畫編輯面板的使用。

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

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

選中Flash Pro庫(kù)中的MovieClip元件Dragon，然后在骨骼動(dòng)畫編輯面板中選擇導(dǎo)入選中的項(xiàng)目，點(diǎn)擊OK按鈕。

骨骼動(dòng)畫編輯面板導(dǎo)入動(dòng)畫元件Dragon后如下圖：

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

Behavior List: 對(duì)應(yīng)動(dòng)畫對(duì)象的各個(gè)動(dòng)作/行為名稱，與MovieClip中幀標(biāo)簽名稱一致，程序中將以此名稱來(lái)動(dòng)態(tài)播放各種動(dòng)作。

Bone Tree: 動(dòng)畫對(duì)象的各個(gè)骨骼組成部分，與MovieClip中各層名稱一致。

Texture List: 動(dòng)畫對(duì)象中各部分對(duì)應(yīng)的材質(zhì)名稱。

對(duì)于每個(gè)動(dòng)作，首先要設(shè)置的參數(shù)如下：

Total Times: 當(dāng)前動(dòng)作的總時(shí)長(zhǎng)。數(shù)值越大，動(dòng)作越慢。

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

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

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

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

預(yù)覽窗口左下角可以縮放預(yù)覽對(duì)象，便于觀察的動(dòng)作。

OK，接下來(lái)我們?cè)贐one Tree面板中設(shè)置動(dòng)作中各個(gè)骨骼的從屬關(guān)系。下圖可以看到在默認(rèn)導(dǎo)入的動(dòng)畫中，各個(gè)骨骼沒(méi)有關(guān)聯(lián)：

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

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

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

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

Play Delay: 設(shè)置當(dāng)前骨骼開(kāi)始運(yùn)動(dòng)時(shí)間相對(duì)所屬動(dòng)作的延遲或提前。

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

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

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

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

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

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

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

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

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

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

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

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

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