[JSFL] Flash Keyframe Navigator

前一陣子寫的Script，可在Flash中快速選擇上一個或下一個關鍵影格，參考自Todd Slaughter的Script，做了一些修正與功能新增。

功能說明：

• 主要功能
• 選擇任何圖層上的上一個/下一個關鍵影格
• 選擇當前圖層上的上一個/下一個關鍵影格（可作用於移動補間的關鍵影格）
• 補充說明
• 可以循環選擇關鍵影格（從最後一個關鍵影格跳到第一個關鍵影格）
• 會略過Folder圖層

下載地址：

Flash ZXP檔案下載（Google Drive）

安裝方法：

安裝Extension後再去Flash中為命令設定Hotkey

問題待修：

• 選擇無效影格時無法正確跳至下一個影格

[DragonBones] New Feature - Hit Area

目前DesignPanel v3.01版本在測試新的功能「碰撞範圍」，可以在Flash中直接定義碰撞範圍，輸出到引擎中，讓DragonBones To Engine的流程更加順暢、直覺，不過此功能尚在測試中，所以不確定性非常高，在這邊只是做個紀錄…

實作方法是在Flash中建立導引線圖層並且圖層名稱以@開頭，然後在圖層內用基本形狀工具（矩形或橢圓形皆可）去定義碰撞範圍即可，不過目前的設計是hit area是隸屬於armature，且不具有時間軸，因此限制很大。如果想要不同動作有不同的hit area會不是這麼直覺，如果又想要hit area隨著動作演出而有改變的話，又更是困難了，雖不是完全沒辦法，但會變得頗複雜…很不直覺…

[Flash] Elec­tric Dog Flash Ani­ma­tion Power Tools for Animator

在Flash中製作2D動畫（在此指的是紙片人式2D動畫，類似骨骼動畫之形式）是相當麻煩的，原因之一是操作太過原始、瑣碎，浪費相當多的時間，而Elec­tric Dog Flash Ani­ma­tion Power Tools（以下簡稱EDAPT）這個工具，透過commands及metadata使的操作變得更加簡單快速，並且具有階層性骨架結構的操作功能。這個工具的好處是輕量能簡易上手，功能不龐大，適合單純使用Flash的使用者，唯使用此工具可能會需要一段時間做Setup，因此實際上是否能帶來更有效的製作流程得看製作需求與個人習慣而定。官方網站如下：

Flash Power Tool - Elec­tric Dog Flash Ani­ma­tion Power Tools

要注意這個工具是從強化Flash的操作之角度所設計，而其提供的一些功能（commands）其實都可以手動完成，EDAPT只是幫你做了自動化處理，當然也有手動無法替代的功能，這就是他最重要的部份。

此工具主要的功能是：

1. Magnet Target
   透過預先設置在元件內的Magnet Target（一個作為定位用的元件），別的元件即可吸附到這個位置上（執行指令後，會去尋找最近的有效Magnet Target並將所選元件對齊該位置）。
   ※可以把Magnet Target想成是骨頭的結束點，而起始點就是元件的註冊點。
2. Hierarchy Rig
   能夠定義骨架階層，建立一個骨架結構，再把場景上的元件綁定到骨架結構上，如此就可以達到具有骨架階層關係的操作系統，例如可以自動選擇所有子元件。

EDAPT原本提供的Set Magnet Target command並不是很人性化，因此我修改了一個版本，將該command的運作方式改為：

1. 先選擇場景上想要成為Parent的元件
2. 再選擇要成為Child的元件
3. 執行Command
4. 即可在父元件內的正確位置上產生Magnet Target

日後再將此command share出來。

[Flash]製作Extensions - 封裝ZXP擴充功能

本文寫的是針對Flash CS6版本的Extension製作，在CC版本中Extension的封裝已經改由Extension Packager負責。

製作Extension時必須要先製作一個mxi檔案，用於敘述這個Extension的資訊，而這個mxi檔案最機車的地方就是所有要封裝的檔案都必須要寫在其中…因此如果你有30個檔案就要寫30行…而這個mxi檔案主要需要編寫的地方是…

[Flash]Transformation Matrix

本篇僅做紀錄用

座標系

原點{x:0, y:0}在左上角
+x向右
+y向下

Affine transformation

http://en.wikipedia.org/wiki/Affine_transformation

Flash的Transformation Matrix：

[DragonBones]讓物件隱藏顯示又保有骨架繼承

由於DragonBones的骨架結構是具有繼承效果的（會繼承父骨頭的位置、傾斜），因此當父骨頭（圖層）沒有內容物（空白關鍵影格），而子骨頭又還有內容物時，就會造成子骨頭的位移繼承錯誤，跑出奇怪的動態結果，而這個問題的解決方法就是用隱藏內容物來替代刪除內容物。

隱藏內容物只是將影格中的元件不顯示，元件仍然存在在影格之中，如此可讓內容物不被看到但又不會丟失骨架繼承，但這個技巧只能作用在影片片段元件上，可以透過屬性面板中的顯示頁籤的『可見』參數設定該元件會不會被顯示出來，而DragonBones會把這個參數寫入匯出的資料中，在xml檔案內參數名稱是hide。

可見參數可以控制元件的顯示狀態

可見參數會被DragonBones輸出為hide參數

參考：

• http://dragonbones.effecthub.com/doc/DBSkeletonDataFormatSpec_V2.4_cn.xml
  hide: Slot是否隐藏，与把骨骼从时间轴动画删除不同，控制Slot的visible。

[DragonBones]Texture Atlas Packing功能解說

DragonBones本身就具有Texture Atlas Packing的功能，可將所有使用到的圖片素材拼湊成一張貼圖，使用者不需要再使用額外的軟體製作Atlas，相當便利。在此將分享我對此功能的一些小心得…

首先我會建議所有的素材（點陣圖）一定都要先包成元件，原因是…

• 元件才可以做顏色效果（Alpha、進階）
• 元件做補間才不會意外生成額外的點陣圖資源
• 影片片段元件可以使用隱藏顯示功能

Texture Atlas Packing規則，打包的對象須符合以下條件…

• 元件
• 不含動畫（timeline只有一個frame的長度）
• 不含動作名稱label
• （或者是未包成元件的點陣圖或形狀…）

對於符合打包對象條件的元件，需要注意的是

• 打包的對象是元件，而非元件內的點陣圖
• 只要元件的名稱不相同，就會被視為不同的對象並打包起來
  例如重製了一個元件，儘管重製的元件與原始元件內容物一模一樣，也會因為其元件名稱不同，而被各自打包一次
• 會直接將該元件Pack到Atlas之中
• 元件內的內容會直接被合併成一張圖

  

  符合打包條件的元件的內容會被直接合併成一張圖

  
  若要避免這種狀況發生，可以使用下面兩種方法…
• 添加動作名稱label
• 將timeline長度加長到2個frames以上
  （如此該元件會被視為一個獨立的skeleton（armature））
• 不可對元件內的點陣圖做放大變形
  因為Pack的圖素會是放大後的尺寸，而非點陣圖的原始尺寸

匯出

• 可以設定貼圖的尺寸比例
• 可選擇匯出Atlas或者是各別的png檔案

  

  匯出面板（Design Panel 3.0）

其他需注意的事項

• Flash CS6會無法匯入超過4096*2048的貼圖（Flash CC無此問題）
  會造成無效的BitmapData錯誤訊息

[DragonBones]變換顯示順序 Changeable Z-Order

在製作角色動畫時，時常會有要變換顯示順序的需求，例如原本在身後的武器要移動到身前來，而在Flash要達成這效果，自然就是新增一個同樣也是武器的圖層在想要的順序上，但此時需要注意的是DragonBones對於這點有提供一項功能：Changeable Z-Order，可將這些因變換顯示順序需求而新增的圖層與原始圖層視為同一個骨頭（圖層），利用這點可以有效減少DragonBones角色的骨頭總數，降低進入引擎後的效能消耗。

而要實現這個功能必須要符合規則：

• 這些圖層的名稱需要完全一樣
• 這些圖層的影格不可互相重疊

  

  變換顯示順序時圖層必須同名且影格互不重疊

如此DragonBones才能正確的將這些圖層視為同一個骨頭（圖層），如果在匯入DragonBones之後發現這些圖層被DragonBones自動加上後綴流水號即代表失敗了。另外也可以在Export後的skeleton檔案（在此舉例xml）中進行驗證，檢查frame的z值是否有正確變化。

skeleton.xml內的z值

[DragonBones]事件觸發

DragonBones可利用Flash中所設定的影格標籤來觸發事件，達成Hit frame等目的，而設定的標籤須符合「@事件名稱」的規則，如：@attack。

事件Label

另外標籤所在的圖層也會造成差異，有以下兩種案例：

• label圖層

設定在label圖層中的事件，在API中是屬於AnimationEvent，此種事件只能獲取到骨架（armature）

AnimationEvent

• bone圖層（label圖層之外的圖層都是bone圖層）

設定在bone圖層中的事件，在API中是屬於FrameEvent，此種事件可獲取到所屬的骨頭（bone）

因此將事件設定在bone圖層中時，可以順便獲取所屬影格中的元件位置來做定位，舉例，當事件發生時會呼叫一個分離特效並產生在角色的手上，那就可以把事件種在手的圖層中，或者是額外的定位圖層中。 

FrameEvent

[Flash]製作Extensions - 建立 SWF Panel

Flash Extension的Panel可以用SWF檔案來呈現，先在Flash中把需要的Panel製作出來，並且撰寫ActionScript進行控制，也可與JSFL做溝通，如此就可呈現一個完整的流程。

在此列出幾項重點：

• 可利用組件來製作Panel

  

  Flash組件

• SWF檔案必須置放在Flash Config目錄中的WindowSWF目錄內
  
  如此在Flash啟動時才能正確加載面板到Menu>視窗>擴充功能中。
  
  WindowSWF目錄的所在路徑預設是（Win 7）：
  \\Users\user_name\AppData\Local\Adobe\flash_version\language\Configuration\
  如果不是在此可利用JSFL的fl.configDirectory來查找。
• 讓SWF與JSFL溝通：MMExecute
  
  MMExecute("fl.runScript(fl.configURI + 'WindowSWF/filename.jsfl', 'function_name';)");
  
  fl.runScript(fileURI [, funcName [, arg1, arg2, ...]])
  
  MMExecute可以在ActionScript中實現JSFL指令，再透過JSFL的fl.runScript可以去呼叫指定的JSFL檔案。
  
  第一個引數，是目標JSFL檔案的路徑，為管理方便一般會將該Extension所用到的JSFL統一集中在一個目錄內並置放在WindowSWF目錄中。在此可透過fl.configURI獲取Flash Config目錄路徑。

  

  Flash Config WindowSWF目錄路徑（Win 7）

  第二個選擇性引數，是指定執行該JSFL內特定的Function。
  

  

  MMExecute

• Panel及JSFL的更新不需重新啟動Flash
  
  只有首次的Panel載入需要重新啟動Flash，在這之後只要覆蓋原始檔案即可即時更新。

為組件按鈕增加圖示

預設的組件按鈕只能夠從屬性面板設定Label，想要圖示按鈕的話需要透過Action Script：

 btn.setStyle("icon", as_linkage);

as_linkage為元件庫中Icon元件的AS連結名稱，該元件的註冊點將會對齊按鈕的左上方。

[Flash] JSFL - Convert Symbol to Bitmap in Current Layer

第一次撰寫JSFL，做個紀錄...

目的：

將正在選擇中的唯一圖層中的每個Keyframe中的所有Symbol物件轉為Bitmap

參考：

1. Flash Reference
   http://help.adobe.com/en_US/flash/cs/extend/index.html

Code snippet - [Flash] JSFL - Convert Symbol to Bitmap in Current Layer on Snipplr