Flash CS6 iOS/Andoird Simulator (CS6 新功能)

Flash CS6 支援Simulator 這個新功能, 不用發佈至iOS 或Android 裝置, 加速計(Accelerometer), 多點觸控(Touch and Gesture) 和地理位置(Geolocation) 給開發者利用Simulator 介面輸入所需數據, 模擬在裝置產生的數據.

Flash 內建的Accelerometer 範例

Flash 內建的Swipe Gallery 範例

大家在Flash 內建的New -> Templates -> AIR for Android 可以找到一些簡單範例作測試.

Generate Sprite Sheet (CS6 新功能)

較早之為大家介紹的TexturePacker, 為Starling 圖像引擎提供播放連續動作的Sprite Sheets 格式檔案. 現在的Flash CS6 中, 直接支援這個功能, 在Library 選擇所需的MovieClip, 然後按滑鼠右鍵, 點選Generate Sprite Sheet 便能產生Sprite Sheets 格式檔案.

Library 選擇MovieCLip

Generate Sprite Sheet 設定

若有興趣Starling 播放Sprite Sheets 檔案, 請瀏覽這個範例.

參考資料: http://www.adobe.com/devnet/flash/articles/using-sprite-sheet-generator.html

注意事項: 使用Starling 的getTextures 時, 請注意文字的大小階與Library 中MovieClip 的名字相同.

Starling 粒子特效

Starling 圖像引擎可以播放連續動作, 還可以製作粒子(Particle). 我們可以引入Starling-Extension-Particle-System 元件, 它是一個基於Starling 上擴充功能(Extension).

請按 [觀看] 範例

國外的ONEBYONE, 提供一個免費線上Particle Editor. 我們設定粒子特效後, 按輸出(Export) 會下載一個particle.zip 檔案. 這個壓縮檔包含:

• particle.pex - XML 格式內容, 是一些粒子特效的設定值
• texture.png - 粒子的圖案, 可在Particle Editor 自行設定

ONEBYONE  的線上Particle Editor

定義載入檔案:

[Embed(source="../embed/particle.pex", mimeType="application/octet-stream")]
private var ParticlePEX:Class;

[Embed(source="../embed/texture.png")]
private var ParticleTexture:Class;

private var _pd:ParticleDesignerPS;

建立粒子:

_pd = new ParticleDesignerPS(
      XML(new ParticlePEX()), 
      Texture.fromBitmap(new ParticleTexture())
    );
addChild(_pd);
_pd.emitterX = stage.stageWidth >> 1; 
_pd.emitterY = stage.stageHeight >> 1;
_pd.start();
_pd.startSize = 70;

Starling.juggler.add(_pd);

stage.addEventListener(TouchEvent.TOUCH, touchHandler);

用戶按下螢幕, 移動特效:

private function touchHandler(event:TouchEvent):void{
  var touch:Touch = event.getTouch(stage);
  var tween:Tween = new Tween(_pd, 1.5, Transitions.EASE_OUT_BACK);
  tween.animate("emitterX", touch.globalX);
  tween.animate("emitterY", touch.globalY);
  Starling.juggler.add(tween);
}

這個Particle Editor 製作粒子特效十分方便, 當然我們還可以在Action Script 設定和改變其值, 達至互動效果. 作者在iOS 和Android 測試運行, 效果相當理想. 大家可以 [下載] 範例試試看.

參考資料: http://www.ashan.org/?post=295

TexturePacker 介紹

在2D 遊戲的製作中, 為了要表現出連續動作, 通常會在短時間內持續地更新畫面圖案, 使其產生動畫的效果. 在Starling 圖像引擎的MovieClip 類別, 支援以Sprite Sheets 格式播放連續動作. 現為大家介紹TexturePacker, 把SWF 自動切割與合成.

請按 [觀看] 範例

我們在Flash IDE 中製作動畫, 然後產生SWF 檔.

在Flash 製作動畫

把SWF 檔放入TexturePacker, 在Data Format 選擇Sparrow 格式, 最後按Publish 完成.

將SWF 檔轉為Sprite Sheets

Sparrow 格式是相容Starling 圖像引擎, 產生一個PNG 與XML 檔, 在Adobe AIR 中載入相關檔案.

[Embed(source="assets/penguin.xml", mimeType="application/octet-stream")]
var AtlasXML:Class;

[Embed(source="assets/penguin.png")]
var AtlasTexture:Class;

// <----- create texture
var texture:Texture = Texture.fromBitmap(new AtlasTexture());
var xml:XML = XML(new AtlasXML());
var atlas:TextureAtlas = new TextureAtlas(texture, xml);

// <----- create MovieClip
var mc:MovieClip = new MovieClip(atlas.getTextures("penguin"), 30);
addChild(mc);

// <----- activate MovieClip
Starling.juggler.add(mc);

對於製作遊戲的朋友, 這個TexturePacker 是一個十分實用的工具.
大家可以 [下載] 範例試試看.

參考資料: http://www.gotoandlearn.com/play.php?id=147

注意事項: 關於SWF 動畫製作, 必需在時間主軸上製作, TexturePacker 不能把主軸之內的動作一同產生.

Flash XML 元件集介紹

Flash XML 提供實用元件, 可於在線設定, 然後產生所需的檔案, 給用戶免費下載. 包括Slideshows, Galleries, Image Menus 等等... 美觀的元件使用. 提供General website, Wordpress, Facebook, Joomla 及Flash 使用方案.

Page Flip FX [觀看]

Cover Flow FX [觀看]

Customizable Grid Gallery FX [觀看]

若移除水印 (Watermark) 或在Flash 中使用ActionScript 3.0 控制, 大家需要花點錢購買許可證 (License). 但以參考角度看, 它是一個十分有價值的網頁, 給開發者一個靈感.

Poster 手動呼叫伺服器

製作伺服器程序完成後, 我們可以使用模擬http 請求, 測試伺服器提供正確資訊, 有效減少開發用戶端時的問題. 手動呼叫伺服器, 我們使用FireFox 瀏覽器的免費擴充套件Poster.

Poster 能模擬各種http請求, 可以用來發出GET, POST等八種請求, 並詳細設置請求參數, 比如http header, parameter等.

HttpFox 檢視用戶端與伺服器之間內容

對於Flash 或AJAX  開發人員, 我們有需要向伺服器請求內容, 或傳送用戶資訊給伺服器. 透過Web Service, Servlet 或動態網頁語言(ASP, PHP...) 等方式作溝道橋樑. 過程往往在背後運作, 判定是否正確, 我們可以利用FireFox 瀏覽器中的免費擴充套件HttpFox.

啟動HttpFox 後, 瀏覽器所載入的內容, 一目了然的顯示出來, 包括Flash 所傳送的POST Data 內容.

伺服器回傳的內容, 同樣可以在當中清楚顯示.

若發佈後, 不幸遇到錯誤, 大家可以冷靜地, 打開HttpFox, 必定會給你一個答案.

SWF Decompiler vs. SWF Protection

作為Flash 開發者, 大家一定要知道反編譯軟件(Decompiler) 與加密軟件(Encrypt) 的存在. 以下兩個為較多人所認識的軟件:

• Sothink SWF Decompiler
  它可以輕鬆的將Flash 影片中所有元件都分組顯示, 包括圖片, 向量圖, 變形向量圖, 聲音, 字體, 視訊,文字, 按鈕, 片段動畫, 影格等基本元件, 還可以完整的解析有關動作腳本Action Script 的代碼.
  
  
  
  
• Magic HTML SWFProtection
  是一款SWF 文件加密工具，可以阻止市場上大多數已知的SWF 反編譯工具. 保護你的Action Script 腳本語言，阻止SWF 的反編譯.
  
  
  
  

加密後的Action Script 腳本:

private function _17bddb918917() : void
{
  if (false)
  {
  }
  this._aadd1b171b181b18b9 = ByteArray(new (getDefinitionByName("\n\x0b\t\x18\x17\x18\r\r\x18\x17") as Class)());
  this._aadd1b171b181b18b9.endian = "littleEndian";
  this._aadd1b171b181b18b9.position = 0;
  this._9ba17ab171717 = new Loader();
  this.addChildAt(this._9ba17ab171717, 0);
  this._1ba181791b1bd179d = new LoaderContext();
  this._1ba181791b1bd179d.applicationDomain = new ApplicationDomain();
  this._9ba17ab171717.loadBytes(this._aadd1b171b181b18b9, this._1ba181791b1bd179d);
  ;
  if (false)
  {
  }
  return;
}// end function

加密後的結構:

我們可以使用反編譯軟件來看看別人的作品, 了解個中的技術細節, 但請不要作為己用. 對原創者和自己不會是一件好事.
若明白原創的重要性, 我們更應該懂得保護自己的作品. 雖然沒有一個完美的保護方案, 但我們可以提升門檻, 使有心人卻步.

在Flash Builder 中編寫Flash Media Server (FMS) 程式

安裝Flash Media Server (FMS), 我們可到Adobe 官方網頁, 下載試用版. 試用版可作無限期使用, 只有連線上限設定, 實在是開發者喜訊. 我們還可選擇Flash Builder 作為編寫FMS 程式的工具, 由於Flash Builder 是基於Eclipse 所建構, 可給與空間安裝插件, 作為不同語言的開發環境.

以下為大家介紹坊間流傳的插件:

1. 請下載FMSPluginEclipse.zip 插件
2. 解壓後, 把FMSProject_1.1.0.0.jar 檔案, 放入C:\Program Files\Adobe\Adobe Flash Builder 4.5\eclipse\plugins\
   
   
   
   
3. 重新啟動Flash Builder 後, 在File -> New -> Other -> Flash Media Server -> Serverside Application 找到新專案
   
   
   
   
4. 在Project -> Properties -> FMS Settings 中, 設定:
   
   
   
    - Configure Servers 設定:
         Host - 填寫連接的FMS 位置 (若FMS 與Flash Builder 為同一電腦, 請填寫localhost )
         Username 與Password - 在安裝FMS 過程時所設定的
    - Configure Publish Settings 設定:
         Path - 填寫為C:\Program Files\Adobe\Flash Media Server 4.5\applications\{Application Name}
   
   
5. 在Window -> Open Perspective -> Other 選擇Flash Media Server 模樣
   
   
   
   
6. 完成以上設定, 按下Publish and reload application 會看到Flash Builder 成功連接FMS 進行發佈
   
   
   簡單試驗:
   

   application.onAppStart = function(){ 
       trace("onAppStart");
   }
   application.onConnect = function(client){ 
       trace("onConnect: " + client.ip);
   }
   application.onDisconnect = function(client){ 
       trace("onDisconnect: " + client.ip);
   }
   application.onAppStop = function(){ 
       trace("onAppStop");
   }
   

   
   
7. 在Administration Console 同樣可觀察到發佈過程
   
   
   
   

Flash 除蟲的好幫手

De MonsterDebugger 由荷蘭設計工作室De Monsters維護. Monster Debugger 是一個免費Adobe AIR 軟件, 開發者只需在電腦安裝, 在其電腦運行中的Flash 便能連接溝通. 可在PC, MAC, 任何瀏覽器和流動電話平台連接, 是一個十分強勁的Debug 工具.

設定Monster Debugger 程序:

1. 在Monster Debugger 產生Client SWC
   
   
   
   
2. 在Flash Professional 或Flash Builder 中設定SWC 位置
   
   
   
3. 定義MonsterDebugger 類別, 起始初次值, 然後便可以使用

   import com.demonsters.debugger.MonsterDebugger;
   
   MonsterDebugger.initialize(this);
   MonsterDebugger.trace(this, "Hello World!");
   

   
   
4. 使用方法與Adobe 原生trace(); 相似, 在MonsterDebugger 會看到trace 的內容和環境中的變數值
   

小記:

• 過去Flash 在瀏覽器上出現錯誤, 又不能使用Adobe 原生的trace(); 方法.很多朋友會在Flash 中, 畫一個Dynamic Text, 然後把所有文字放進去看看.除蟲後, 把這個Dynamic Text 設為Guide Layer, 方便日後重複使用.

在iPhone/ iPad 測試Adobe AIR (不需花錢方法)

對於很多開發者, 要在iOS 上純粹測試運作效能, 編寫一個小程式試試看, 發佈至iPhone/ iPad 上執行, 但因為沒有開發者帳號而苦惱. 在Adobe AIR 發佈時, 輸出成ipa 檔案, 需要有以下兩個認證檔案:

• p12 -  認證檔 iOS Certificate
• mobileprovision - 描述檔 Provisioning Profile

若大家不希望花費US$ 99 於開發者帳號, 但又想作一個小小的嘗試, 大家可以選擇暫時使用假的認證檔(p12) 和描述檔(mobileprovision). 但使用時, 必需有以下的設備:

• Adobe Flash Professional CS5.5 或Adobe Flash Builder 4.5
• 一個裝有iOS 3 或以上版本的系統, 以下任何一種裝置:
     - iPhone 3GS 和 iPhone 4
     - iPod Touch (第三代或第四代皆可)
     - iPad
• 裝置必須JB (Jail break)
• 傳送ipa 檔案至iOS 工具

發佈選擇以下設定:

• 下載 p12.zip 後, 設定p12.p12 和mobileprovision.mobileprovision 檔案作為認證
• 設定密碼為 1234
• 描述檔預設 App ID 為 com.gamevil.zenonia2

當完成發佈後, 會生成一個ipa 檔案, 是一個iOS 程式的安裝檔案, 我們可以透過以下其中一個方法, 安裝至iOS 系統 (兩個方法首要條件必須JB):

• iFile 與Installous - 利用iFile 分享iOS 裝置檔案, 在電腦瀏覽器上載ipa 檔案至iOS 裝置內的/User/Documents/Installous/Downloads/ 路徑. 然後使用Installous 安裝上載後的ipa. 
• iFunBox - 下載 iFunBox 並且執行(請確定電腦已安裝iTunes), 把PC 與iOS 裝置連線後, 然後按Install App, 選擇合適ipa 檔案, 完成後便可在iOS 裝置內找到程式
  

參考資料: http://blog.lamb-mei.com/2011/08/compile-ios-app-without-developer.html