使用Adobe Flash CS6 新功能——幀序列圖生成器

翻譯：lucy_100

     Adobe Flash CS6專業版，介紹了一個新工具，叫作幀序列圖生成器。這個特點工具能夠方便地將在舞臺上或庫中的任意元件或導入的圖像生成一個序列圖。這個序列圖由CPU渲染，遊戲中須要添加循環動畫時使用這個工具生成的序列圖，圖形顯示會變得很是有效率。

     本文會演示如何使用針序列圖生成器將一個循環動畫轉換成序列圖，進行高效率的渲染。

Flash是建立交互設計最好的工具之一，能夠將動畫和交互完美地結合在一塊兒。去年，若是咱們要公告一件事什麼事，不能否認要經過web技術手段。關於HTML5的消息滿天飛，關於Flash的消息卻沒有多少。我甚至聽到有人說HTML5將取代Flash。做爲一個動畫師，使用Flash超過十年，對Flash很是滿意，可是這些問題會讓我產生疑問擔憂Flash的將來？徹底不是。沒有一個技術能永遠火下去，可是Flash如今還存在，至少在比較長的一段時間內不會過期，很明顯Adobe也在朝着這個目標努力着。

建立一個動畫

在生成序列圖以前，須要先建立一個用於生成序列圖的動畫。我選擇的是以前爲Starling 框架設計的一個角色，將它作成動畫。

這隻鳥是爲Starling框架構思的角色，使用的工具是Adobe Photoshop，上傳到了Adobe Creative Cloud，如今使用Adobe Flash CS6重畫。使用Flash的鋼筆工具，將每一部分拆分紅獨立的元件（見下圖）。

下面製做翅膀的飛翔動畫。雙擊翅膀元件而且使用逐幀的方式繪製動畫，每個關鍵幀都包含不一樣的動做。這是一隻右翅膀。

在放置鳥身體的層下，建立新層，複製右翅膀動畫元件粘貼到這個新層裏。使用水平翻轉並擺放對位置，這是鳥的左翅膀。爲左翅膀作一個簡單的透視效果，選擇這個元件，爲這個元件設置顏色效果（color effect），讓左翅膀顏色稍暗一些，突出身體部分。

而後調節鳥飛翔的動畫。要注意兩個翅膀上下襬動的同步。

生成序列圖

到這裏，須要的動畫已經完成了，可使用Flash生成序列圖了。首先將鳥飛翔的元件拖拽到場景中，右擊出現快捷菜單，選擇菜單中的」Generate Sprite Sheet…」項。

還有一個方法是，在庫中右擊鳥飛翔動畫元件，快捷菜單中也有」Generate Sprite Sheet…」項。

選擇」Generate Sprite Sheet…」項後會打開它的設置參數面板。

設置「image dimensions」圖像尺寸，設置適合這個動畫的尺寸。

生成序列圖的設置

Image format：圖像格式的下拉菜單有PNG 8 bit, PNG 24 bit, PNG 32 bit 和 JPEG 格式可供選擇。若是你須要進行最大的優化，那麼能夠選擇帶透明通道的PNG 8 bit，這個格式對文件的大小壓縮至關大。

Background color：背景顏色：這個選項能夠自定義背景顏色。提供了不少示例顏色，能夠直接拿來用，或者點擊右上角的調色板圖標，本身配製須要的顏色。

我將背景顏色設置爲黑色，面板中的預覽已經更新了設置的背景顏色。

Algorithm計算方法:這裏提供了兩個可供選項。

Basic：默認設置，最大程度還原動畫。圖像是按行統一安排計算渲染。

MaxRects:最大壓縮。這個設置是將全部的幀最大化地壓縮。

在遊戲中動態地使用序列圖

準備將序列圖合併到遊戲中，選擇Data format數據格式。數據格式爲針序列圖的每一幀都記錄了X值,y值，寬，高和其餘信息，這些信息都是可調節的屬性參數。開發者使用這些參數能夠在使用的任意場合調節改變它們，會產生不一樣的動畫。更強大的是，若是現有的這些參數不能知足你的須要，可使用JSFL建立一個本身的數據格式，配備更多的你須要的參數。

點擊動畫預覽窗口上方的Preview預覽按鈕，能夠進行效果預覽。

下一步作些什麼

若是你想了解更多，能夠去訪問

Adobe的Flash動畫學習組

，那裏有更多的使用Flash CS6製做和輸出各類動畫類型的教程。

安裝Starling框架，若是你沒有文件包，請在這裏

下載

。更多的關於Starling框架的信息和特色、如何將sprite sheet應用到遊戲中，能夠去看看Thibault Imbert的Adobe開發者相關文章

Introducing the Starling 2D framework

（Starling 2D框架介紹）.

資訊做者:Chris Georgenes
來源頁面:http://www.adobe.com/devnet/flash/articles/using-sprite-sheet-generator.html