Category: Adobe AIR

Posted on by

在Windows下產生.p12及.mobileprovision

在 Windows 產生憑證簽名要求

對 Windows 開發人員而言，最簡單的方法是取得 Mac 電腦上的 iPhone 開發人員憑證。不過，他們也可以在 Windows 電腦上取得憑證。首先，使用 OpenSSL 建立憑證簽名要求 (CSR 檔)：

  1. 在 Windows 電腦上安裝 OpenSSL (移至http://www.openssl.org/related/binaries.html，或直接在此下載openssl-0.9.8k_X64)。
    開啟 Windows 命令工作階段，然後使用 CD 命令切換至 OpenSSL bin 目錄 (例如 c:\OpenSSL\bin\)。在命令列輸入以下命令以建立專用密鑰：
    openssl genrsa -out mykey.key 2048
    儲存此專用密鑰。您稍後將會用到它。使用 OpenSSL 時，請勿忽略錯誤訊息。OpenSSL 即使產生錯誤訊息，可能仍會輸出檔案。但這些檔案可能無法使用。如果發生錯誤，請檢查您的語法並重新執行命令。
  2. 在命令列輸入以下命令以建立 CSR 檔：
    openssl req -new -key mykey.key -out CertificateSigningRequest.certSigningRequest -subj “/emailAddress=yourAddress@example.com, CN=John Doe, C=US”
    以您自己的值取代電子郵件地址、CN (憑證名稱) 及 C (國家/地區) 值。

至APPLE申請.cer檔案

  1. 至https://developer.apple.com/membercenter/index.action以開發者身份登入。
  2. 選擇Certificates, Identifiers & Profiles，如下圖
    2014-01-07_153638
  3. 選擇Certificates
    2014-01-07_153659
  4. 接著按右上角的+
    2014-01-07_155542
  5. 身份選【iOS App Development】
    2014-01-07_155602
  6. 在最後會要求上傳.certSigningRequest，選擇剛剛在【在 Windows 產生憑證簽名要求】所產生的檔案，按確認。
    2014-01-07_155713
  7. 下載.cer檔
    2014-01-07_155843

將開發人員憑證轉換成 P12 檔案

  1. 將從 Apple 收到的開發人員憑證檔案轉換成 PEM 憑證檔案。從 OpenSSL bin 目錄執行以下命令列陳述式：
    openssl x509 -in developer_identity.cer -inform DER -out developer_identity.pem -outform PEM
  2. 現在可以根據 iPhone 開發人員憑證的密鑰及 PEM 密鑰，產生有效的 P12 檔案：
    openssl pkcs12 -export -inkey mykey.key -in developer_identity.pem -out iphone_dev.p12

產生.mobileprovision檔案

  1. 首先先產生一個APP的ID(已註冊過1~2項可跳過)，選左側的”Identifier=>App IDs”，註冊一個APP的ID。
    2014-01-07_160759
  2. 填寫你要做的APP的前置字等識別，若是只想練習則選”Wildcard App ID”，然後Bundle ID填入”*”
    2014-01-07_161119
  3. 接著註冊你的測試機(已註冊過3~5項可跳過)，再選左邊側欄的Devices=>All，新增開發機的UUID
    2014-01-07_162122
  4. 打開iTunes，連接iPhone，打開摘要頁，點紅框處的序號一下，會變成顯示UUID，把它記下來。
    2014-01-07_162323
  5. 回到網頁，把上面的UUID填入下面UUID那欄，並且為這隻手機取個名字
    2014-01-07_162508
  6. 現在要去產生.mobileprovision檔案。點選左邊側欄的”Provisioning Profiles”，接著按右上的+號新增一個Profiles
    2014-01-07_160633
  7. 身份選擇【iOS App Development】
    2014-01-07_160650
  8. App ID選擇剛剛所產生的ID
    2014-01-07_161714
  9. 選擇剛剛產生的certificates身份
    2014-01-07_161843
  10. 選擇要測試發佈的手機
    2014-01-07_163645
  11. 為這個發佈設定命名
    2014-01-07_163655
  12. 下載.mobileprovision檔案，完成。

在Flex裡設定發佈檔案

  1. 在專案點右鍵，選Properties，在此選擇要使用的檔案
    2014-01-07_164424
Posted on by

AIR記憶體監控工具 – Scout

記憶體監控相關工具

Scout是一款針對用以監控記憶體狀態的程式，它不但可以監控電腦上面的swf的記憶體狀況，也可以監看使用air開發，運行在手機上的app的記憶體和gpu使用狀況。
在Scout之前，了解swf的記憶體使用狀況有幾個方式

  1. 內建的Profile功能
    2013-10-11_161104
    Profile可以監控現有的FLASH裡每一個CLASS占的記憶體比例，預設的設定會忽略AS內建的類別。如果要打開的話，可以選擇選單列裡的Window=>Preferences=>Flash Builder=>Profiler=>Exclusion Filter或是Inclusion Filters去排除或增加要觀察的class種類。
    這個工具若是用按2013-10-11_171747的方式執行，則只能針對FLEX本身的專案來做觀察。如果專案架構是外部的SWF檔案，則可以先切換到Profile工作模式(如圖:2013-10-11_171854)，然後選擇上方選單列的Profile=>Profile External Application=>New，去選擇要觀察的SWF檔案。
    有關這個工具的介紹請見: Flex記憶體監控程式-Profile
  2. windows的工作管理員
    監控執行緒的執行狀況，缺點是無法仔細的了解是那一個Class造成memory leak。
  3. Hi-ReS-Stats  (https://github.com/mrdoob/Hi-ReS-Stats)
    很常被見到的一個外掛程式碼，可以簡單的使用

    addChild( new Stats() );

    來觀察FPS的運行速度、記憶體的使用狀況是否正常。嵌入後會在畫面上多出如下圖這樣的資訊欄位
    hires_stats

  4. Scout  (http://gaming.adobe.com/technologies/scout/)
    最後就是今天要介紹的Adobe Scout工具，Adobe開發這個，主要是為了當開發者在使用Adobe AIR開發手機APP時，能夠更精準的掌握SWF運行的狀況以及GPU的狀況。因此Adobe官方便提供了這一項免費工具，讓APP開發者可以更仔細的監控效能的狀況。

Scout的優點

上面介紹了這麼多的工具，那麼Scout的優勢為何呢?

  1. 仔細(Details)
    Scout可以提供詳細、階層性的資訊，讓開發者一目了然自己的程式的GPU資訊及記憶體使用狀況。
    除了Profile的記憶體監控功能外，Scout還可以提供GPU運算的相關數字及報表。
    在上面所列的其他三項工具，只有Hi-ReS-Stats有顯示FPS，可以讓開發者了解FPS速度是否正常，可觀察何時影格速度會變慢，並檢查是否有什麼動畫讓畫面停住了。其餘的都只能單純的監控程式使用的記憶體狀況，而無法了解到動畫處理的記憶體使用狀況。
    在flash裡，動畫的運算、圖形處理等，在很多時候其實是造成畫面Lag的主要元兇，因此，或許很多時後我們會發現動畫不知為何播放速度變慢了，但是觀察Profile，記憶體的使用狀況卻很正常，這時很可能便是GPU Memory不足。
    有關要如何做才能提高動畫的效能，相關議題可以參考下面這篇文章:
    http://claire-chang.com/1063-提升Flash效能的幾個注意事項
  2. 可擴展性(Extensible)
    Adobe有提供相關的API，當原本Scout提供的資訊無法滿足需求時，開發者可以在ActionScript裡面寫程式，去自行丟出想觀察的額外資訊，並且只要幾行程式碼就可以做到。(請參見Telemetry類別)
  3. 跨平台(Cross-platform)
    可在Mac及Windows上運行，並能讓開發者開發Andriod及iOS APP時更容易觀察其效能狀況。
  4. 輕量化(Lightweight)
    Scout只有12MB，很輕並且運行的很快，並且可以運行於一般的Flash Player，不用使用Debug版本也可以。

 開始使用Scout

  1.  開啟SWFs的telemetry功能：將Enable detailed telemetry選項勾起來
    2013-10-11_181303
    PS: 此時大家可能會發現，咦~不對呀!我的Flex專案怎麼沒這個選項?
    是的，這個功能只有在AIR專案上才會有，非AIR專案是沒有這個選項的。
    所以，那一般Flash檔案要如何使用Scout呢?
    這時後就需要透過工具去開啟swf的Telemetry功能，詳細方法請見下面的文章：
    Enable Advanced Telemetry on Flex or old SWFs with SWF Scout Enabler
    簡單來說，便是下載SWF Scout Enabler，然後選取要觀察的SWF檔案，把它的Telemetry打開。
  2. 執行Scout，要觀察一個swf，可觀察遠端或在本機的檔案。是用Scout去監控運作在其他台電腦或是手機上的APP上的資訊會需要較多的設定。
    要執行Scout的電腦需要有

    • Flash Player 11.4 (plugin or standalone) or Adobe AIR 3.4.
    • The Adobe Scout desktop application.

    [觀察目標]
    (一) 本機檔案
    只要將Scout打開，就可以看到現在在電腦中正在運行的SWF檔案的相關資訊了。
    (二) 其他台電腦上檔案
    如果要去觀察在其他台電腦上運作的SWF檔案的效能狀況，可以經由.telemetry.cfg檔案的設定去做到(但需要同網域)。
    檔案位置如下:

    • MacOS: ~/.telemetry.cfg
    • Windows: %HOMEDRIVE%%HOMEPATH%\.telemetry.cfg

    在修改之後，.telemetry.cfg可能會長的像這樣
    TelemetryAddress=192.168.1.20:7934
    SamplerEnabled = true
    CPUCapture = true
    DisplayObjectCapture = false
    Stage3DCapture = false
    (三) 手機或移動裝置上的APP

    1. 確定手機與執行Scout的電腦在弄一個WIFI網路下
    2. 手機下載Adobe Scout檔案(iPhone在此下載、Android在此下載)
    3. 打開手機上的Scout應用程式，這時他會搜尋同WIFI下的電腦，選擇我們執行Scout的電腦，然後按連線
    4. 到電腦裡選擇自己想看到的數據資料
    5. 運行有開啟Telemetry的手機APP應用程式
      adobe-scout-getting-started-fig04

    先介紹到這邊，下一篇會再介紹該如何去使用或設定Scout的相關功能。

參考資料：

  1. Getting started with Adobe Scout
  2. Enable Advanced Telemetry on Flex or old SWFs with SWF Scout Enabler
  3. Telemetry – AS3
  4. Adobe Scout
Posted on by — 2 Comments

提升Flash效能的幾個注意事項

本文為看這篇文章之後的重點整理: http://www.adobe.com/devnet/flash/articles/efficiency-tips.html

這篇文章同時會對Flash開發程式師、動畫及美術有幫助。

提升效能

  1. 關掉沒有用到的物件的互動功能：
    減少畫面中active的物件能有效的增加效能，下面這段CODE可以關閉掉MovieClip和其他物件的所有互動關係。

    mouseEnabled = false;
mouseChildren = false;

    如果仍要與其他的元件做互動則使用mouseChildren = false;就好。
    fig01

  2. 判斷何時該用點陣圖(Bitmap)何時該用形狀(Shape)：
    使用Bitmap：當今天圖片有許多漸層、複雜圖案、顏色很多時，用Bitmap較好。
    使用Shape：當今天的圖片是大塊色塊組成，感覺不利於縮放、但卻不需要縮放時，則使用Shape。(點陣圖按CTRL+B)fig02
  3. 將線段轉成色塊：線段所需要耗用的效能較多，因此可將不必要的線段轉換為填色。(在修改>形狀>將線段轉換成填色)
    fig03
  4. 避免使用虛線或點線，因為此種線段很耗費效能。
  5. 避免使用圓角，圓角比起直角的處理上耗效能。
  6. 避免圖像的坐標坐落位置帶有小數點，因為小數點的運算比起整數會耗費更多效能。

向量圖形最佳化

  1. 減少圖形中的節點(按修改>圖像>最佳化)，或使用平滑工具來減少節點。
    fig06
  2. 避免使用漸層：漸層是非常耗效能的，若是必需要使用漸層，可在完成後，將其轉為Bitmap格式，或者以純色去取代。
  3. 不要使用不必要大小的bitmap圖片，或多餘的aplha值=0的透明色塊。因為這樣會增加所耗費的效能。
    fig08
  4. 避免使用遮罩：使用遮罩時，每次進入下一個影格都會重新繪製並產生裡面的元件，因此會耗費大量的效能。所以我們要盡量避免使用遮罩功能，若真的有需要，可以改用程式裡的scrollRect功能來取代遮罩，這樣在實務上會省下許多的資源，缺點是只能做方形遮罩。
    fig09
  5. 靜態物件避免使用濾鏡特效：因為濾鏡特效是每次重繪時都要重新計算一次特效顯示的值，若是今天是靜態物件要做濾鏡效果，可先在PHOTOSHOP內做好，便可節省濾鏡特效的運算時間。
    fig10
  6. 將陰影效果的品質調低
    fig12
  7. 假如圖片要resize，不要直接在flash裡改變圖片大小，而應該在外部先做好resize再loading進來。可以使用mipmapping 來計算圖片的最佳大小。
  8. 降低影格速度
    fig13
  9. 避免MovieClip呈現槽狀結構
    fig14
  10. 動畫目標物件可設置快取為點陣圖以節省效能，但此時要注意不要對該元件設置任何濾鏡，不然他每一個影格都會重新快取一次目標物件，這會耗費非常高的效能。
    2013-08-23_165042
    fig15
  11. 濾鏡特效的設定值設為2的指數(ex: 2 4 8 16….)
    fig16
  12. 如果只是非常簡單的動畫(如單純的位移事件)，可以用程式碼去替代(如TweenLite)，會更高彈性且節省效能。
    fig18
  13. 2.5D的CPU圖像模式的運算會很耗效能，此時可以用”快取為點陣圖”來製作2.5D的圖像。
  14. 觀察重繪區塊，去知道是那邊耗費較多的效能。(在FLASH DEBUG按右鍵=>顯示重繪區域)，盡量讓重繪的區塊降到最低。
  15. 假如要設一個元件為不可視，記得停掉該元件，避免他在背後繼續執行(下stop)。
    fig22
  16. 避免元件出現在可視範圍外，若是需要將元件移除或移入視線，可以使用addChild()及removeChild()
  17. 除非有需要做特殊的文字效果，否則不要使用TLF text Field。

最佳化檔案素材大小

  1. 選擇適當的圖像壓縮比、非必要時，避免勾選”平滑化”的選項。
    2013-08-23_180249
  2. 考慮使用一整張的圖片或是用BITMAP填色：因為若顯示的區塊很小，但我們用一張超大張的圖片來做填色，這一大塊的圖片都會被包在SWF裡，因此若遇到這個狀況，可以用CTRL+B將點陣圖打散成形狀，將其縮小後，再將其轉回點陣圖，直接使用該圖片做為底色。
    但假如現況是某一張小圖片，會重複的出現在眾多區塊做為底色，那這時後就推薦用以BITMAP來填滿區塊的方式。
  3. 盡量避免在畫面中RESIZE圖片的大小
    fig27
  4. 假使是很單純、色塊及線條極少的狀況，可以將點陣圖轉為向量圖，這樣可以縮小SWF的體積。(修改>點陣圖>轉換為向量圖)
    2013-08-23_190251
  5. 一格格的動畫改為移動漸變動畫(這樣是省空間，但會耗效能，所以要取決於現在你是需要效能或者空間，去決定該用那種作法)。
    fig29
  6. 當個向量圖會在很多地方重覆出現時，將其轉換為SYMBOLS(圖像)，這樣會可以在很多地方共用一個資源。
  7. 要嵌入字型時，只嵌入自己所需要的字碼範圍
    fig30
  8. 可在發佈設定的地方建立專案的描述檔去觀察所有元件的大小(右顛齒輪可新增描述檔)
    2013-08-23_190943
  9. 在發佈設定=>SWF=>進階的地方，把”包含XMP中繼資料”選項取消，可以減少一些檔案大小。
    2013-08-23_191205

優雅的開發FLASH(重點整理)

  1. 避免元件的所在位置帶有小數點
    fig32
  2. 考慮現在該用BITMAP或是SHAPE
  3. 文字字型選擇”消除鋸齒增加易讀性”
  4. 除非必要，不要讓文字變成可選擇的
    fig35
  5. 沒有需要移動漸變的影格不要設為移動漸變，可按右鍵的”移除補間動畫”來移除。
    fig36
    2013-08-23_191910
  6. 將元件的APLHA設為0時，他依然會接受滑鼠事件，會耗費處理滑鼠事件的效能。將元件的VISIBLE設為FALSE，元件仍然在畫面上。最好的方式是將其整個圖像完全刪除。
  7. 不要把元件壓在另一個元件之下，因為他還是會耗廢效能，把他的visible設為false或直接移除都可節省效能。
Posted on by

使用Flex編譯出ios的ipa檔案

這邊提供一些我看到的教學影片及連結

1.在Windows上一步步發佈的方式

http://support.brightcove.com/en/docs/step-step-guide-publishing-apple-app-store-using-windows

2. 使用Flex編出ipa的教學

http://tv.adobe.com/watch/adc-presents/build-ios-applications-using-flex-and-flash-builder-45/

3. 怎麼在windows上產生.p12檔案

4. 在Flex裡安裝AIR SDK的方式

http://helpx.adobe.com/flash-builder/kb/error-run-debug-deploy-ios.html

http://www.flashdeveloper.co/post/10985842021/overlay-adobe-air-32-in-flash-builder-46

其實最基本的可以就依照這篇文章去做一步步的發佈設定

如果不想太快買開發者身份 也可以到google 打上fake .p12 ，下載破解檔案

就可以直接做發佈的設定了!

===================================

另外也提供不使用flex去做發佈的方式

1.安裝 adobe AIR SDK，請將以下壓縮檔，解到自己電腦任意目錄中

 http://www.adobe.com/devnet/air/air-sdk-download.html

例如，我電腦中，我解到：E:\software\AdobeAIRSDK

 

2.準備 command line 批次檔 build.bat，檔案內容如下：

 

set SDK_HOME=E:/software/AdobeAIRSDK à 換成你放 air sdk 的位置

set ADT_JAR=%SDK_HOME%/lib/adt.jar

 

set APP_NAME=HorseRacingDemo à 換成你專案的名稱，會用來找對應的 xxx.swf 與 xxx-app.xml，並發布成 xxx.ipa

set APP_ROOT_DIR=C:/Users/ben.chang/Desktop/新增資料夾 à 所有東西放置的資料夾

set BUILD_DIR=%APP_ROOT_DIR%

set APP_ROOT_FILE=%APP_NAME%.swf

set APP_DESCRIPTOR=%APP_NAME%-app.xml

set IPA_NAME=%APP_NAME%.ipa

set STORETYPE=pkcs12

set KEYSTORE=FakeCert.p12

set STOREPASS=1234

set PROVISIONING_PROFILE=Fake.mobileprovision

 

java -jar %ADT_JAR% -package -target ipa-debug -provisioning-profile %APP_ROOT_DIR%/%PROVISIONING_PROFILE% -storetype %STORETYPE% -keystore

 

%APP_ROOT_DIR%/%KEYSTORE% -storepass %STOREPASS% %APP_ROOT_DIR%/%IPA_NAME% %APP_ROOT_DIR%/%APP_DESCRIPTOR% -C %BUILD_DIR% %APP_ROOT_FILE%

 

pause

 

3.準備 xxx-app.xml

 

我的 Flash CS 5.0，設定輸出 ipad 產出的 xml 為：

<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no” ?>

<application xmlns=”http://ns.adobe.com/air/application/2.0“>

<id>no-name</id>

<version>1.0</version>

<filename>?芸??1</filename>

<description/>

<name>?芸??1</name>

<copyright/>

<initialWindow>

<content>?芸??1.swf</content>

<systemChrome>standard</systemChrome>

<transparent>false</transparent>

<visible>true</visible>

<fullScreen>false</fullScreen>

<aspectRatio>portrait</aspectRatio>

<renderMode>auto</renderMode>

<autoOrients>false</autoOrients>

</initialWindow>

<icon/>

<customUpdateUI>false</customUpdateUI>

<allowBrowserInvocation>false</allowBrowserInvocation>

<iPhone>

<InfoAdditions>

      <![CDATA[<key>UIDeviceFamily</key><array><string>2</string></array>]]>

    </InfoAdditions>

</iPhone>

</application>

 

設定輸出 iphone 的 xml 為：

 

<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no” ?>

<application xmlns=”http://ns.adobe.com/air/application/2.0“>

……

……

<iPhone>

 <InfoAdditions>

      <![CDATA[<key>UIDeviceFamily</key><array><string>1</string></array>]]>

    </InfoAdditions>

</iPhone>

</application>

 

設定輸出 iphone 與 ipad 的 xml 為：

<?xml version=”1.0″ encoding=”UTF-8″ standalone=”no” ?>

<application xmlns=”http://ns.adobe.com/air/application/2.0“>

……

……

<iPhone>

 <InfoAdditions>

      <![CDATA[<key>UIDeviceFamily</key><array><string>1</string><string>2</string></array>]]>

    </InfoAdditions>

</iPhone>

</application>

 

4.資料夾中準備好相關檔案：

 

l   xxx.swf

l   xxx-app.xml

l   build.bat

l   FakeCert.p12

l   Fake.mobileprovision

 

譬如，我在自己電腦桌面上開一新資料夾，如下畫面：

執行 build.bat 大約一兩分鐘 就可產出 *.ipa