如何自動更新清除使用者的swf檔案

瀏覽器清快取檔案的觸發條件有以下:
1.使用者手動清除
 說明:使用者手動使用瀏覽器的選項做清除動作
 優點:
   1.可以保證ㄧ定清除乾淨!!!
 缺點:
   1.不是每位使用者都懂清快取的指令~Orz
2.網頁宣告不做暫存快取
 說明:在網頁META設定不做快取,每次都會重新讀取檔案
 優點:
   1.可以保證ㄧ定是最新的檔案
 缺點:
   1.每次都重新讀取,如果檔案過大,會造成很大的網路負載=  ="
 code:
  <meta http-equiv="expires" content="0" />
3.關閉瀏覽器
 說明:IE9預設關閉瀏覽器後自動清除快取
 優點:
   1.可以確認有某種程度快取檔案是被清除
 缺點:
   1.如果是舊版的或是不同的瀏覽器這個動作就不見得會發生
  
4.swf檔案連結跟本機的swf檔案的連結不同
 說明:快取的儲存方式是用連結去判斷,所以只要給新的連結,就會重新讀取
 優點:
   1.可以保證ㄧ定是最新的檔案
 缺點:
   1.只能對一個swf檔案有作用,除非每個swf檔案都用新連結去讀取
  
那我用什麼方法?答案是3跟4,因為IE9是沒有4的清快取機制,那我只要處理第4個答案的缺點 解法:
 1.網頁在讀取main.swf的時候,flash url位置設成main.swf?ver=檔案大小或是日期,這樣就會自動更新了
 2.如果讀取main.swf之後,還要再讀取其他的swf檔案要怎麼做? 
   flash有分成本機跟遠端安全沙箱模式,在本機沙箱中loader是不可以設置SecurityDomain.currentDomain做為連接遠端機制,會出現2142安全性違規
   所以我們可以要從目前的沙箱狀態去判斷說現在是本機還是遠端沙箱再來決定要不要在讀取swf的url加上更新連結的動作
  code:
  /*-------------------------------------------------------------
  宣告
  -------------------------------------------------------------*/
  private var appDomain:ApplicationDomain = ApplicationDomain.currentDomain;
 private var context:LoaderContext = new LoaderContext();
 private var loadMode:Boolean = false;//本機沙箱或是網路沙箱 true為本機 false為網路
 private var nowVer:String = '0001';
 private var loader:Loader;
 /*-------------------------------------------------------------
  Main
  -------------------------------------------------------------*/
  private function Main():void{
    setSecuityMode();
    loadSwf('a.swf');
  }
  /*-------------------------------------------------------------
  setSecuityMode
  設定安全沙箱旗標
  -------------------------------------------------------------*/
  private function setSecuityMode():void{
  context.applicationDomain = appDomain;   
  if(Security.sandboxType == Security.LOCAL_TRUSTED)
   loadMode = true;
  else if(Security.sandboxType == Security.REMOTE){
   loadMode = false;
   context.securityDomain = SecurityDomain.currentDomain;
  }
 }
 /*-------------------------------------------------------------
  loadSwf
  讀取swf檔案
  參數:_file:檔案名稱
  -------------------------------------------------------------*/
 private function loadSwf(_file:String):void{
  var url:String;//檔案位置
  if(!loadMode){
   //Url為HTTP才能使用帶參數的方式去讀取
   url = 'http://www.yourdomain.com/' + _file + '?ver=' + nowVer;
  }else
   //本機檔案,使用相對位置讀檔
   url =  _file;
  trace('the url:' + url);
  loader.load(new URLRequest(url), context);
 }
 
 

多個SWF設定字體為外部字體檔,導致重覆讀取字體檔的解決方式

 因為手上的專案需要使用中文字體,所以決定使用字體用匯入的方式處理,來節省讀取資料量,不過因為用匯入的方式,會去讀取外部字體檔,結果就是全部的swf檔都自己去讀字體檔了,導致loading過重~Orz
   讀取流程:
   1.main.swf 讀取完成
   2.main.swf讀取 Font.swf,並存到記憶體內
   3.讀取 a.swf檔案
   4.a.swf讀取 Font.swf,並存到全域字體內
   5.讀取 b.swf檔案
   6.讀取 c.swf檔案
  
  總共讀取資料量:
   1.main.swf 500k
   2.Font.swf 6000k
   3.a.swf 1000k
   4.Font.swf 6000k
   5.b.swf 1000k
   6.c.swf 500k  
   共計: 15000k
  
  
  上面讀取流程會變成Font.swf讀取2次,如果把step 2拿掉,會發生不知道字體檔的讀取進度的問題,這樣會造成無法在main檔內的讀取條中顯示讀取進度的問題
  
解決方式:
  1.在main.swf先用loader載入字體檔(font.swf),然後再載入共享用的字體資源分享檔(shareFont.swf)
  2.所有的swf的字體設定都設定為匯入字體檔並且把匯入的url設定為shareFont.swf
  3.shareFont.swf只做字體定義的動作,實際上還是由main.swf讀取字體檔,所以可以知道讀取進度
  /*---------------------------------------------------------------
  程式碼
  ---------------------------------------------------------------*/
  import flash.system.ApplicationDomain;
 import flash.text.Font;
 var appDomain:ApplicationDomain = ApplicationDomain.currentDomain; 
 if(appDomain.hasDefinition('ArialRegular')){
  var fc:Class = appDomain.getDefinition("ArialRegular") as Class;
  if(fc != null){
   trace('set font:ArialRegular');
   //字體定義
   Font.registerFont(fc);
  }
 }

  讀取流程:
  1.main.swf 讀取完成
  2.main.swf讀取 Font.swf,並存到記憶體內
  3.main.swf讀取 shareFont.swf,存到記憶體內,這樣shareFont.swf才能去使用Font.swf的字體並做定義
  4.main.swf讀取其他swf檔案,因為其他的swf檔案可以找到shareFont.swf的字體,所以就不會又去重新讀取
 
  總共讀取資料量:
   1.main.swf 500k
   2.Font.swf 6000k
   3.shareFont.swf 1k
   4.a.swf 1000k
   5.shareFont.swf 1k  
   5.b.swf 1000k
   6.c.swf 500k  
   共計: 9002k
 
  少讀了5998k~~!!!!
 
備註:中文字體檔是真的很大的,只帶5000中文字而已就有6M的實力了,所以不用想說要把字體檔瘦身~Orz

如何使用FlashCS 5發佈Andorid APK教學

這篇教學是因為我沒有CS5.5可是我又想測試Android,所以自己摸索了一下找出方法~XD
因為Adobe在包裝APK檔不會去確認swf檔的版本,所以可以通通打包起來!!!
首先你必須有以下2個SDK
1.AIR2.6+以上的SDK,請到Adobe下載
2.Andorid SDK

開始重點來了
1.請先把AIR的libs設定到系統環境變數內,這樣可以直接使用bat批次檔操作,省時省力!
2.請用CS5 建立p12金鑰擋
3.bat檔內容:
adt -package -target apk-emulator -storetype pkcs12 -keystore configPK/androidPK.p12 Test.apk Test-app.xml apk/
bat檔說明:
1.adt 為adobe開發的打包工具
2.-package 打包為安裝檔
3.-target 打包為哪種格式,有apk,apk-debug,apk-emulator
4.-storetype pkcs12 金鑰格式
5.-keystore configPK/androidPK.p12 金鑰檔名位置
6.Test.apk 打包出來後的檔名,因為我們是要做成android的,所以副檔名為apk
7.Test-app.xml AIR設定檔
8.apk/ 除了AIR設定檔設定要打包的檔案之外還要額外打包的檔案或是目錄
4.安裝APK檔到Android模擬器
adb install -r Test.apk -r為重新安裝
如果不使用-r,而且你的版本編號都一樣,android會視為已安裝過,就忽略安裝

附1.AIR設定檔參考
我有加入中文說明,供大家參考
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<application xmlns="http://ns.adobe.com/air/application/2.6">
<!-- Adobe AIR Application Descriptor File Template.
 Specifies parameters for identifying, installing, and launching AIR applications.
 xmlns - The Adobe AIR namespace: http://ns.adobe.com/air/application/2.6
   The last segment of the namespace specifies the version
   of the AIR runtime required for this application to run.
  
 minimumPatchLevel - The minimum patch level of the AIR runtime required to run
   the application. Optional.
-->
 <!-- A universally unique application identifier. Must be unique across all AIR applications.
 Using a reverse DNS-style name as the id is recommended. (Eg. com.example.ExampleApplication.) Required. -->
 <!--程式ID-->
 <id>Test</id>
 <!-- Used as the filename for the application. Required. -->
 <!--程式檔名-->
 <filename>Test</filename>
 <!-- The name that is displayed in the AIR application installer.
 May have multiple values for each language. See samples or xsd schema file. Optional. -->
 <!--程式名稱-->
 <name>Test</name>

 <!-- A string value of the format <0-999>.<0-999>.<0-999> that represents application version which can be used to check for application upgrade.
 Values can also be 1-part or 2-part. It is not necessary to have a 3-part value.
 An updated version of application must have a versionNumber value higher than the previous version. Required for namespace >= 2.5 . -->
 <!--程式版本編號,如果跟手機上版本編號一樣則不會安裝程式-->
 <versionNumber>0.1.3</versionNumber>
          
 <!-- A string value (such as "v1", "2.5", or "Alpha 1") that represents the version of the application, as it should be shown to users. Optional. -->
 <!--程式版本名稱-->
 <versionLabel>alpha</versionLabel>
 <!-- Description, displayed in the AIR application installer.
 May have multiple values for each language. See samples or xsd schema file. Optional. -->
 <!--程式描述-->
 <description>LiarsDice</description>
 <!-- Copyright information. Optional -->
 <!--程式版權-->
 <copyright>SNSPlus</copyright>
 <!-- Publisher ID. Used if you're updating an application created prior to 1.5.3 -->
 <!-- <publisherID></publisherID> -->
 <!-- Settings for the application's initial window. Required. -->
 <!--程式初始化設定-->
 <initialWindow>
  <!-- The main SWF or HTML file of the application. Required. -->
  <!-- Note: In Flash Builder, the SWF reference is set automatically.  [This value will be overwritten by Flash Builder in the output app.xml]-->
  <!--程式預設包裝檔案路徑,後續檔案可使用ADT包裝成APK檔一併匯入-->
  <content>apk/main.swf</content>
 
  <!-- The title of the main window. Optional. -->
  <!--程式標題-->
  <title>程式標題</title>
  <!-- The type of system chrome to use (either "standard" or "none"). Optional. Default standard. -->
  <!-- <systemChrome></systemChrome> -->
  <!-- Whether the window is transparent. Only applicable when systemChrome is none. Optional. Default false. -->
  <!--是否設定為透明模式,預設為false-->
  <!-- <transparent></transparent> -->
  <!-- Whether the window is initially visible. Optional. Default false. -->
  <!--程式初始化過程中是否要顯示視窗-->
  <!--<visible>true</visible>-->
  <!-- Whether the user can minimize the window. Optional. Default true. -->
  <!--使用者可不可以最小化程式視窗,預設為true-->
  <!-- <minimizable></minimizable> -->
  <!-- Whether the user can maximize the window. Optional. Default true. -->
  <!--使用者可不可以最大化程式視窗,預設為true-->
  <!-- <maximizable></maximizable> -->
  <!-- Whether the user can resize the window. Optional. Default true. -->
  <!--使用者可不可以改變程式視窗大小,預設為true-->
  <!-- <resizable></resizable> -->
  <!-- The window's initial width in pixels. Optional. -->
  <!--程式視窗寬度-->
  <!-- <width></width> -->
  <!-- The window's initial height in pixels. Optional. -->
  <!--程式視窗高度-->
  <!-- <height></height> -->
  <!-- The window's initial x position. Optional. -->
  <!--程式視窗X座標-->
  <!-- <x></x> -->
  <!-- The window's initial y position. Optional. -->
  <!--程式視窗Y座標-->
  <!-- <y></y> -->
  <!-- The window's minimum size, specified as a width/height pair in pixels, such as "400 200". Optional. -->
  <!--程式視窗最小化後視窗大小 預設為400 200-->
  <!-- <minSize></minSize> -->
  <!-- The window's initial maximum size, specified as a width/height pair in pixels, such as "1600 1200". Optional. -->
  <!--程式視窗最大化後視窗大小 預設為1600 1200-->
  <!-- <maxSize></maxSize> -->
    <!-- The initial aspect ratio of the app when launched (either "portrait" or "landscape"). Optional. Mobile only. Default is the natural orientation of the device -->
  <!--程式是否要因應當手機旋轉做處理,portrait=直立 landscape=橫向,預設為自動旋轉-->
    <!--<aspectRatio>portrait</aspectRatio>-->
    <!-- Whether the app will begin auto-orienting on launch. Optional. Mobile only. Default false -->
  <!--程式是否要因應當手機發生旋轉事件做處理,預設為false-->
    <!-- <autoOrients></autoOrients> -->
 
    <!-- Whether the app launches in full screen. Optional. Mobile only. Default false -->
  <!--程式是否全螢幕,預設為false-->
    <!--<fullScreen>true</fullScreen> -->
    <!-- The render mode for the app (either auto, cpu, or gpu). Optional. Mobile only. Default auto -->
    <!--程式處理圖像方式,自動,CPU處理,GPU處理,預設為自動-->
    <!-- <renderMode></renderMode> -->
  <!-- Whether or not to pan when a soft keyboard is raised or lowered (either "pan" or "none").  Optional.  Defaults "pan." -->
  <!--當出現輸入框時,要使用什麼模式的輸入介面,觸控筆或是預設,預設為觸控筆-->
  <!-- <softKeyboardBehavior></softKeyboardBehavior> -->
 
 
  <!--實際設定-->
  <aspectRatio>landscape</aspectRatio>
  <autoOrients>false</autoOrients>
    <fullScreen>true</fullScreen>
    <visible>true</visible>
    <softKeyboardBehavior>none</softKeyboardBehavior>
    </initialWindow>
 <!-- We recommend omitting the supportedProfiles element, -->
 <!-- which in turn permits your application to be deployed to all -->
 <!-- devices supported by AIR. If you wish to restrict deployment -->
 <!-- (i.e., to only mobile devices) then add this element and list -->
 <!-- only the profiles which your application does support. -->
 <!-- <supportedProfiles>desktop extendedDesktop mobileDevice extendedMobileDevice</supportedProfiles> -->
 <!-- The subpath of the standard default installation location to use. Optional. -->
 <!-- <installFolder></installFolder> -->
 <!-- The subpath of the Programs menu to use. (Ignored on operating systems without a Programs menu.) Optional. -->
 <!-- <programMenuFolder></programMenuFolder> -->
 <!-- The icon the system uses for the application. For at least one resolution,
 specify the path to a PNG file included in the AIR package. Optional. -->
 <!-- <icon>
  <image16x16></image16x16>
  <image32x32></image32x32>
  <image36x36></image36x36>
  <image48x48></image48x48>
  <image72x72></image72x72>
  <image114x114></image114x114>
  <image128x128></image128x128>
 </icon> -->
 <!-- Whether the application handles the update when a user double-clicks an update version
 of the AIR file (true), or the default AIR application installer handles the update (false).
 Optional. Default false. -->
 <!-- <customUpdateUI></customUpdateUI> -->

 <!-- Whether the application can be launched when the user clicks a link in a web browser.
 Optional. Default false. -->
 <!-- <allowBrowserInvocation></allowBrowserInvocation> -->
 <!-- Listing of file types for which the application can register. Optional. -->
 <!-- <fileTypes> -->
  <!-- Defines one file type. Optional. -->
  <!-- <fileType> -->
   <!-- The name that the system displays for the registered file type. Required. -->
   <!-- <name></name> -->
   <!-- The extension to register. Required. -->
   <!-- <extension></extension> -->
  
   <!-- The description of the file type. Optional. -->
   <!-- <description></description> -->
  
   <!-- The MIME content type. -->
   <!-- <contentType></contentType> -->
  
   <!-- The icon to display for the file type. Optional. -->
   <!-- <icon>
    <image16x16></image16x16>
    <image32x32></image32x32>
    <image48x48></image48x48>
    <image128x128></image128x128>
   </icon> -->
  
  <!-- </fileType> -->
 <!-- </fileTypes> -->
    <!-- iOS specific capabilities -->
 <!-- <iPhone> -->
  <!-- A list of plist key/value pairs to be added to the application Info.plist -->
  <!-- <InfoAdditions>
            <![CDATA[
                <key>UIDeviceFamily</key>
                <array>
                    <string>1</string>
                    <string>2</string>
                </array>
                <key>UIStatusBarStyle</key>
                <string>UIStatusBarStyleBlackOpaque</string>
                <key>UIRequiresPersistentWiFi</key>
                <string>YES</string>
            ]]>
        </InfoAdditions> -->
        <!-- <requestedDisplayResolution></requestedDisplayResolution> -->
 <!-- </iPhone> -->
 <!-- Specify Android specific tags that get passed to AndroidManifest.xml file. -->
 <!--<android>
  <manifestAdditions>
  <![CDATA[
   <manifest android:installLocation="auto">
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <uses-configuration android:reqFiveWayNav="true"/>
    <supports-screens android:normalScreens="true"/>
    <uses-feature android:required="true" android:name="android.hardware.touchscreen.multitouch"/>
    <application android:enabled="true">
     <activity android:excludeFromRecents="false">
      <intent-filter>
       <action android:name="android.intent.action.MAIN"/>
       <category android:name="android.intent.category.LAUNCHER"/>
      </intent-filter>
     </activity>
    </application>
   </manifest>
  ]]>
  </manifestAdditions>
 </android> -->
 <!-- End of the schema for adding the android specific tags in AndroidManifest.xml file -->
<android>
        <manifestAdditions><![CDATA[
   <manifest android:installLocation="auto">
       <!--See the Adobe AIR documentation for more information about setting Google Android permissions-->
       <!--Removing the permission android.permission.INTERNET will have the side effect
  of preventing you from debugging your application on your device-->
       <uses-permission android:name="android.permission.INTERNET"/>
       <!--<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>-->
       <!--<uses-permission android:name="android.permission.READ_PHONE_STATE"/>-->
       <!--<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>-->
       <!--The DISABLE_KEYGUARD and WAKE_LOCK permissions should be toggled together
  in order to access AIR's SystemIdleMode APIs-->
       <!--<uses-permission android:name="android.permission.DISABLE_KEYGUARD"/>-->
       <!--<uses-permission android:name="android.permission.WAKE_LOCK"/>-->
       <!--<uses-permission android:name="android.permission.CAMERA"/>-->
       <!--<uses-permission android:name="android.permission.RECORD_AUDIO"/>-->
       <!--The ACCESS_NETWORK_STATE and ACCESS_WIFI_STATE permissions should be toggled
  together in order to use AIR's NetworkInfo APIs-->
       <!--<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>-->
       <!--<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>-->
   </manifest>
  
  ]]></manifestAdditions>
    </android>
</application>

開發Mobile HTML應用程式技巧

下面這個網址說明了開發Mobile HTML應用程式技巧,有META的宣告也有說JS可以監聽到的event有哪些,對於剛要接觸的HTML5 mobile的人很有幫助,不過他是英文的,不過不難就是了
HTML5 mobile

SNS Plus 好玩家徵才

公司最近的職缺:
1.Flash程式
職能:Flash or Flex
2.PHP程式
職能:PHP,JavaScript
3.Java程式
職能:Java
薪資跟業界比起來的話算是中上了,公司預計明後年上市
有興趣的人可以把履歷mail到:matishsiao@snsplus.com

HTML5 phonegap VS. Flash AIR mobile

最近測試了Phonegap 跟 AIR mobile的效能
測試環境:
Android 2.2 Emulator
AIR版本:2.6
phoneGap版本:1.0
測試方式:
只計算FPS不做任何處理
測試結果:
Type FPS
Phonegap 15~18
AIR 60~90

結論:
AIR在效能上的確比PhoneGap好,但是在手機功能支援度上,AIR只有相機跟麥克風可以使用,PhoneGap則有GPS跟加速計等額外的手機功能可以使用,如果在開發遊戲上以AIR來開發,開發速度會比HTML5開發速度快許多,但是在一些創意功能上可能就遜色了,所以目前開發遊戲還是用AIR做好了~O~

更新:AIR已經可以支援GPS等...設備

Flash的優化處理及讀取處理

當專案的swf檔案越來越多,會發現一開始main.swf要讀取太多檔案或是檔案太大導致要讀取很久
通常大家使用的解法如下:
1.要用的時候才讀取swf檔,而不是一開始全部讀出來,讓使用者在一開始的loading等太久,很有可能被按關閉視窗的慘狀
2.當讀取完成後,應該要把讀取完成的swf檔暫存到記憶體內,下次要重新產生物件時,可以直接使用而不是重新再讀取swf檔案
3.在讀取的時候,可能要花點時間讀,這時候就是用一個暫時性的物件先放在要出現的位置上,讓使用者知道這裡有東西正在讀取中,讀取完之後,請記得把暫時性的物件給移除掉,在flash中每個物件都會吃記憶體

效能優化:
1.避免使用向量圖,例如使用flash繪製出來的物件或是美術人員做出來的向量圖直接複製到Flash裡面這些都會讓CPU使用率提高很多
解法:
將向量圖轉存成PNG圖檔,並且在Flash中設定該圖檔使用jpeg壓縮,可以降低編譯完成的swf檔案大小,並且降低CPU使用率
2.避免直接使用var dataArray = new Array(); 改成 var dataArray = [];這樣可以降低CPU使用率跟記憶體用量
3.避免直接使用dataArray.length,宣告一個變數設成 var dataLen:int = dataArray.length這樣也可以降低CPU使用率

參考:
http://help.adobe.com/zh_TW/as3/mobile/index.html

Phonegap 1.0 release出來了

其實這篇應該要早點發的,部過因為最近在測試HTML5在mobile的效能,今天才去測試Phonegap
這次的Phonegap更新內容:
1.更容易安裝平台插件
2.在res/目錄下多了xml/plugins.xml,這個檔案官方是說可以管理插件用的
3.多了通訊錄的API
4.W3C DAB API(沒去查是什麼ˇˇ)

重點:debug!!!
聽說這版有修正開啟連結的bug,有時間再測試!!

線上HTML5編輯器

今天無意間看到的 "Cloud9",它是一套開放原始碼的線上HTML5編輯器

優點:
1.線上協同開發
2.偵錯功能
3.可發佈到專案網站github
缺點:
1.沒有自動顯示可用事件或屬性功能(有這功能才不用記一大堆指令)
2.操作速度上可以感覺到有些延遲(可能有些人不覺得,不過我是覺得有些不順)

如何申請
先到他的網站申請帳戶,通過認證之後,就可以建立專案開發了
網址:http://c9.io/

有興趣的人可以去看看,我還是乖乖的用eclipse做比較實際