2011年12月26日 星期一

PhoneGap 1.3版更新內容

1.3版主要是針對win phone做基本支援更新,其他的os則是小修正,下面是android的更新內容,可以看出來都是小更新= =||

-------------------------------------------------------------------------------------------------------------
Android

  • Added download method to filetransfer
  • made getEntry of FileUtils public in order to avoid duplicate code in FileTransfer
  • FileTransfer returns JSONObject with code, source and target for upload and download
  • Fix for CB-17: WebView caching resized pictures
  • Fix for issue #281 of phonegap/phonegap-android: Detect for localStorage if Java has disabled it
  • Fix for phonegap-android issue #261: Wrong application scale
  • Fix for Issue #33: onReceivedError incorrectly sets openExternal to true
  • Remove addWhiteList from public API
  • Remove WebViewReflect.java from Android
  • Fix for CB-104: Capture not returning an error code on cancel
  • Changed createCaptureFile to explicitly check for PNG and to throw an IllegalArgumentException if it is not a JPEG nor a PNG
  • Add support for future menu plugin
  • Remove PhoneGap.stringify, replace with JSON.stringify
  • Fixed: Don’t fire resume upon init – only when returning from background
  • Fixed: Backbutton should go back in appview history before going back in our history stack
  • Added onMessage(id, data) to the plugin API
  • Deprecated addService().
  • Refactored the backHistory() code so calling navigator.app.backHistory() has consistent behavior with the backbutton
  • Added onload attribute to plugin in plugins.xml to create the plugin at load time instead of lazy loading
  • Fixed bug with showing loadingDialog property
  • Fixed Issue #23 – Crash when using splash screen
  • Changed API to postMessage() to call a plugin’s onMessage() method
  • Optimized enumerations

2011年12月7日 星期三

PhoneGap 1.2版

這2天到PhoneGap官網上看到PhoneGap已經更新到了1.2
還把之前還沒開發完成的功能都開發完了~~~(讚)
基本上,現在用PhoneGap開發可以把他視為完整Mobile APP 的開發SDK
因為之前的功能不完整,所以不可以視為完整的APP
看了API doc,支援Mango了~!!!不過有些功能還是要看手機有沒有支援,所以不見得全部功能都可以用~Orz

2011年11月29日 星期二

Flash CS5 Pro 匯入匯出SWC檔

Flash CS5 Pro 匯入匯出SWC檔
匯出swc到組件庫:
   1.選擇元件庫
   2.選擇要匯出的元件,右鍵選擇組件定義
   3.在組件定義中的類別輸入要使用的類別名稱
   4.選擇確定
   5.在選擇要匯出的元件,右鍵選擇匯出SWC檔案
   6.儲存位置請選擇Flash CS5的安裝目錄\Common\Configuration\Components\  ,可以自己建立目錄跟預設組件作區分
   sample:
   C:\Program Files (x86)\Adobe\Adobe Flash CS5\Common\Configuration\Components\Matis
匯入組件庫:
 1.選擇組件庫,點選組件庫右上的項目設定,選擇重新載入組件
 2.選擇檔案->ActionScript設定,選擇要使用的SWC檔案,匯入SWC,即可呼叫使用


 import com.test;
 var Test:TestA = new TestA();
 Test.test = true;

2011年11月9日 星期三

Adobe將不支援Flash for mobile plugin

Adobe將不支援Flash for mobile plugin的功能,會專注在用AIR開發出來的Flash App

網址:http://www.theverge.com/2011/11/9/2548802/adobe-killing-mobile-flash-plugin-android-playbook

2011年11月4日 星期五

Flash Web Game使用CE軟體修改Client端記憶體之安全設計

最近公司的專案被玩家使用CE軟體修改Flash Player記憶體影響遊戲平衡性
其實這件事早就會發生,只是發生的時間點早晚而已
在Flash Game Design時就要認清一個問題,Flash Client是一個不安全的Client
所以在設計資料流的交換模式的時候就要以這個前提做為開發,而不是事後補救
如果發生大規模的影響平衡性的hacking,造成的影響除了對玩家的不公平性,也影響了這套遊戲的信譽以及營收的損失

結論就是Server端不能相信Client端送的資料,雖然我是寫Client端的,還真的很諷刺~Orz

2011年10月20日 星期四

PhoneGap OpenBeta

今天收到PhoneGap的新聞稿,主要還是說他們被Adobe買走的事情,另外就是Open Beta了!!!!
最近比較少去follow他們的更新進度,不過到了Open Beta應該也完成很多新功能了八= =??
要是要用PhoneGap開發手機App,我還是建議開發比較靜態的App,過於動態的App
可能會遇到效能瓶頸~Orz

補充:PhoneGap要收費了,不過開發者is Free!!!!

2011年10月4日 星期二

2011年9月27日 星期二

Flash GC,值得仔細閱讀

http://wiki.blueidea.com/index.php?title=FlashPlatform_GC

GC重點在於清除所有引用的Event跟清除不需要的Object,這樣可以讓GC自動幫我們清理
當你使用一個影片元件內含大量的png圖檔或是元件,你要release(釋放)它的時候,要記得清除乾淨
可以用這個方法:
this.addEventListener(Event.REMOVE_FROM_STAGE,releaseEvent);
當物件被移除的時候就會呼叫你自己設定的release 清除事件

ActionScript3的垃圾回收機制使用兩種方式。

1.reference count 如果一個對象的引用次數為0,那麼會自動回收。
2.mark and sweep 標記並清除,在DOM從root向下探詢並標記。如果有沒標記的則會自動清除
GC方式:
System.gc();

2011年8月26日 星期五

如何自動更新清除使用者的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);
 }
 
 

2011年8月24日 星期三

多個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

2011年8月19日 星期五

如何使用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

2011年8月16日 星期二

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等...設備

2011年8月12日 星期五

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

2011年8月9日 星期二

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做比較實際

2011年7月28日 星期四

HTML5 in mobile

紀錄一下有關HTML5 在行動平台上的滑鼠監聽事件
web mobile
onmousemove touchmove
onmousedown touchstart
onmouseup touchend

/**************************************************************************
程式碼
/**************************************************************************
window.addEventListener("touchmove", this, false);
this.stage.onmousemove = stageMouseEvent;
}
}
Stage.prototype.handleEvent = function (event)
{
switch(event.type)
{
case "touchstart" :
this.onTouchStart(event);
break;
case "touchmove" :
this.onTouchMove(event);
break;
case "touchend" :
this.onTouchEnd(event);
break;
}
}
Stage.prototype.onTouchMove = function(e)
{
e.preventDefault();
/* Stop tracking if targetTouches contains multiple touches (this means that a gesture event has occurred)*/
if (e.targetTouches.length != 1)
{
return false;
}
/* trace x,y */
mouseXY("Stage:" + e.targetTouches[0].clientX + ',' + e.targetTouches[0].clientY);
return false;
}

2011年7月26日 星期二

PhoneGap學習文件

PhoneGap是一套可以用HTML5 + JavaScript開發手機應用程式的開放原始碼SDK,以下是如何開發Android APP的安裝設定及基礎使用

/********************************************************************************************************/
//    Android PhoneGap安裝設定說明文件
//    撰寫人:Matis Hsiao
//    撰寫日期:2011/07/14
//
/********************************************************************************************************/
1.Android開發環境設定:
    1.下載安裝最新版JAVA JDK,安裝Android SDK會先確認電腦的JavaSDK是不是符合需求
    2.下載最新版Google android開發SDK:
        2-1.安裝android SDK請注意安裝目錄不能有空白及中文或特殊符號   
        2-2.安裝完成後,開啟Android SDK and AVD Manager(SDK setup.exe),選擇Setting勾選Force https://…sources to be fetched using http://….
        2-3.SDK Manager可以做SDK更新或是下載新版的SDK
    3.下載安裝Eclipse:
        3-1.開啟Eclipse,選擇工具列Help中的Install New Software
        3-2.選擇Add,Name的欄位可自行輸入,該欄位是做為辨識Software用,Location請輸入http://dl-ssl.google.com/android/eclipse,選擇OK
        3-3.Eclipse會自動跟http://dl-ssl.google.com/android/eclipse取得工具目錄清單,可能會花1~2分鐘
        3-4.接著會出現Developer Tools的清單,把所有Checkbox都打勾後按下Next,之後只需一直按Next再來按Accept再按下Select All最後按下OK,便會開始自動下載更新
        3-5.選擇工具列Window-> Preferences
        3-6.打開Android標籤,在SDK Location中輸入你剛剛解壓縮Android SDK的位置後按下OK
        3-7.選擇工具列Window-> Android SDK and AVD Manager
        3-8.選擇Installed Packages標籤接著按下 Update All
        3-9.按下Accept後就可以Install,此時會花一點時間下載更新SDK
    4.建立模擬器環境:
        4-1.開啟Eclipse,選擇工具列Window-> Android SDK and AVD Manager,選擇Virtual Devices標籤,按下New建立模擬器
        4-2.Name欄位可以任意輸入英文的模擬器名稱
        4-3.Target欄位是選擇你需要的Android版本
        4-4.可以設定SD Card和螢幕外觀等詳細設定,接著按下Create AVD
        4-5.建立完成後,可以點選你剛才設定好的模擬器,按下Start->Launch,測試模擬器是否可以運作
   
2.PhoneGap開發設定:
    1.建立Android專案
    2.設定PhoneGap函式庫及網頁根目錄
      2-1.在Android專案下建立libs目錄及在assets目錄下建立www作為網頁根目錄         
        2-2.解開PhoneGap函式庫壓縮檔,選擇Android目錄,並做以下複製動作
            2-2-1.將phonegap.js複製到/assets/www/下 ,原檔名可能為phonegap.x.x.x.js,請把它改名為phonegap.js
            2-2-2.將phonegap.jar複製到/libs/下
            2-2-3.[匯入函式庫]:從Eclipse點選專案目錄右鍵更新目錄,再右鍵點選libs/phonegap.jar,選擇[Build Path」-> [Add to Bulid Path]
    3.設定Android專案使用PhoneGap為主要開發設定
        3-1.開啟android專案內的src/專案package/app.java檔案
          3-1-1.在程式碼上方加入 import com.phonegap.*; //匯入phoneGap函式庫
          3-1-2.將程式碼第7行 Class extends 名稱從Activity 改成 DroidGap
        3-1-3.將程式碼第12行 setContentView(R.layout.main);改成 super.loadUrl("file:///android_asset/www/index.html");
    4.設定AndroidMainifest.xml檔,加入欲使用的硬體功能
      4-1.右鍵點選專案中的AndroidManifest.xml,並選擇Open With -> Text Editor
      4-2.將以下的XML參數複製到<manifest xmlns:android="http://schemas.android.com/apk/res/android" .... android:versionName="1.0">之後
      <supports-screens
      android:largeScreens="true"
      android:normalScreens="true"
      android:smallScreens="true"
      android:resizeable="true"
      android:anyDensity="true"
      />
      <uses-permission android:name="android.permission.CAMERA" />
      <uses-permission android:name="android.permission.VIBRATE" />
      <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
      <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
      <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
      <uses-permission android:name="android.permission.READ_PHONE_STATE" />
      <uses-permission android:name="android.permission.INTERNET" />
      <uses-permission android:name="android.permission.RECEIVE_SMS" />
      <uses-permission android:name="android.permission.RECORD_AUDIO" />
      <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
      <uses-permission android:name="android.permission.READ_CONTACTS" />
      <uses-permission android:name="android.permission.WRITE_CONTACTS" />
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
      4-3.將android:configChanges="orientation|keyboardHidden"加到activity屬性內的android:label="@string/app_name"之後,如以下xml設定
          <activity android:name=".AppActivity"
       android:label="@string/app_name"
       android:configChanges="orientation|keyboardHidden">
3.PhoneGap開發:
        1.網頁存放位置為/assets/www/ 可將該目錄視為網頁根目錄
        2.Hello World範例:
            <!DOCTYPE HTML>
            <html>
            <head>
            <title>Hello Inside</title>
            <script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
            </head>
            <body>
            <h1>Hello World</h1>
            </body>
            </html>
        3.執行模擬器操作,右鍵點選專案選擇Run As ->Android Application,就可模擬程式           
Q&A:
        Q1.如何使用Android手機實際操作?
            A:只要電腦可以抓到Android手機驅動,則Eclipse執行模擬器時會自動將App.apk安裝到你的手機裡
        Q2.為什麼模擬器效能不好?
            A:由於模擬器是依存在Eclipse,而Eclipse本身會吃記憶體,所以模擬器模擬出來的效能會比一般Android手機來的差,建議使用Android手機實際操作
        Q3.執行模擬器發生錯誤訊息
            A:請確認Android SDK是否有設定完成
           
           
           
參考網址:
        1.Android環境建置: http://www.inside.com.tw/2010/06/17/android-setup
        2.PhoneGap環境建置:http://www.inside.com.tw/2011/01/29/hello-inside-phonegap
          備註:PhoneGap環境建置的設定參數請注意"符號,該作者的參數是用”符號,或造成設定錯誤
   
 

SmartFoxServer 2X開發文件

前一陣子因為公司專案順便學的Java Server framework,以下是如何安裝跟如何使用一些內建framework API

/*******************************************************************************************************
SmartFox安裝
    到官方下載SmartFox安裝檔,安裝即可,免費上線人數為100人,如果要公開使用要在畫面show Power by SmartFox Server 2X

SmartFox更新
    下載SmartFox更新檔,並將檔案放置到SmartFox安裝的目錄執行install.bat進行安裝
   
SmartFox Extension更新
  使用eclipse:
          1.匯出Jar:使用Export功能匯出jar檔,並將檔案放置到 SmartFox安裝的目錄/SFS2X/extensions/zone name/
          2.設定SmartFox Extensions:
              1.開啟SmartFox admin tool,並登入admin tool
              2.選擇zone configurator分頁,並選擇要加入extension的zone選擇編輯功能
              3.選擇Zone Extension分頁
                  1.選擇Name選項,選取要使用的extension name
                  2.選擇Main class選項,選取要設定為Main class的class name             
          3.重新啟動smartfox server
         
SmartFox 設定:
  1.socket allow ip address:
    設定允許IP名單:
    開啟 SmartFox安裝的目錄/SFS2X/config/server.xml
    以下為允許清單,IP address ,port ,type = TCP or UDP
    <socketAddresses>
        <socket address="127.0.0.1" port="9933" type="TCP"/>
        <socket address="127.0.0.1" port="18881" type="TCP"/>
        <socket address="127.0.0.1" port="18881" type="UDP"/>
        <socket address="192.168.1.42" port="9933" type="TCP"/>
        <socket address="192.168.1.42" port="9933" type="UDP"/>
        <socket address="192.168.1.42" port="18881" type="UDP"/>
      </socketAddresses>
SmartFox Room Variables設定
    1.GroupID必須設定成預設跟公開
    2.Variables必須設定成global
    code:
        //宣告roomVarList
        List<RoomVariable> roomVarList = new ArrayList<RoomVariable>();
        //設定roomVar參數       
        SFSRoomVariable roomVar = new SFSRoomVariable("Test", "Test",false, true, true);
        //新增至roomVarList陣列
        roomVarList.add(roomVar);           
        //將Room variables 加入Room settings參數
    roomSettings.setRoomVariables(roomVarList);
SmartFox User Variables設定
    1.設定User variables必須使用getApi().setUserVariables,才能觸發USER_VARIABLES_UPDATE SFSEvent事件
    2.admin tool可設定user variables的數量,預設為5
    code:
        //宣告userVarList
        List<UserVariable> userVarList = new ArrayList<UserVariable>();
        //設定userVar參數   
        UserVariable userVar = new SFSUserVariable("TestUserVar", "userVars");
        //新增至userVarList陣列
        userVarList.add(userVar);       
        //更新使用者variables           
        getApi().setUserVariables(user, userVarList, true, true);
SmartFox DataBase 設定
    1.admin tool設定使用Database manager,選擇Database manager分頁
        //啟動Database manager
            1.Activate = true
        //設定Database Driver
            2.Database driver class = org.gjt.mm.mysql.Driver
        //Database IP及要使用的database name
            3.connection string = jdbc:mysql://localhost:3306/db name
        //Database user name
            4.username = dbUser
        //Database user password
            5.password = dbPassword
        //測試Database Server的Test SQL
            7.Test SQL = SELECT COUNT(*) FROM members
        //最多可以使用的連線數
            8.Maximun # of active connections
        //最多可以失效的連線數
            9.Maximun # of idle connections
        //當可用連線都用完的處理方式
            10.Exhausted pool action
                1.FAIL  傳送連線失敗
                2.BLOCK    直接阻擋
                3.GROW    追加新連線到連線池
        //阻檔連線時間
            11.Block time
    code:
        //建立連線及取得資訊
        try {
            //建立IDBManager
         IDBManager dbManager = getParentExtension().getParentZone().getDBManager();
        
         //建立連線資源
      Connection connection = dbManager.getConnection();
     
         //建立靜態SQL
         PreparedStatement stmt = connection.prepareStatement("SELECT * FROM members WHERE name = ?");
         //設定SQL name = String(name)
         stmt.setString(1, name);
                
         //執行SQL查詢
         ResultSet res = stmt.executeQuery();
        
         //如果查詢資源沒有資料,輸出例外
         if (!res.first()){
            //對Client發出例外錯誤
            SFSErrorData errData = new SFSErrorData(SFSErrorCode.LOGIN_BAD_USERNAME);
            errData.addParameter(name);                   
           
            //記錄錯誤情況到 Server Log
            throw new SFSLoginException("Bad user name: " + name, errData);
        }
        //輸出UID欄位資訊
         trace("RES:" + res.getString("uid"));                
        
    } catch (SQLException e) {
         // TODO Auto-generated catch block
         e.printStackTrace();
    }
   
    Sample 2 code:
     IDBManager dbManager = getParentExtension().getParentZone().getDBManager();
        String sql = "SELECT * FROM people";
        
        try
        {
            // Obtain a resultset
            ISFSArray res = dbManager.executeQuery(sql);
            
            // Populate the response parameters
            ISFSObject response = new SFSObject();
            response.putSFSArray("people", res);
            
            // Send back to requester
            send("getPeople", response, sender);
        }
        catch (SQLException e)
        {
            trace(ExtensionLogLevel.WARN, "SQL Failed: " + e.toString());
        }
SmartFox buddy 設定
        1.使用admin tool,進入zone 設定,選擇buddy list 分頁
        2.Activate = true
        3.Maximum # of buddyies per user
        4.Maximum # of Buddy Variables
        5.Allow offline Buddy Variables
        6.Offline Budy variables cache size
        7.Custom Buddy List storage class
        8.Custom states
        9.Allow temportary buddies
        10.Enables bad words filter
       
        要設定成可下線依然可以取得資訊的buddy variables的話,必須在variable name前面加上$號
        code:
            SFSBuddyVariable buddyVar = new SFSBuddyVariable("$TestBuddyVars","Buddy " + buddyObj.getName());
       
        設定Buddy variables方式:
        code:
            //當A玩家對另一線上玩家B,加入buddy時,寫入buddy variables
            Buddy buddy = (Buddy) event.getParameter(SFSBuddyEventParam.BUDDY);       
            User AddUser = this.getParentExtension().getParentZone().getUserByName(buddy.getName());
            ISFSBuddyApi buddyApi = SmartFoxServer.getInstance().getAPIManager().getBuddyApi();       
            List<BuddyVariable> buddyVars = new ArrayList<BuddyVariable>();
            SFSBuddyVariable buddyVar = new SFSBuddyVariable("$OffLineVars","BuddyOffTest");
            buddyVars.add(buddyVar);
            buddyApi.setBuddyVariables(AddUser, buddyVars, true, true);

SmartFox 使用Invitation邀請API
        1.邀請的玩家跟被邀請的玩家必須在同一個room下
        2.Invitation必須額外用一支ExtensionAPI做觸發事件
            like:
            addRequestHandler("User.inviteUser",InviteUserHandler.class);
        3.Extension API要處理以下事情
            1.建立新的Invitation
            2.要設定Invitation返回類別
            3.使用GameAPI送出Invitation
        4.Client會收到SFSEvent.INVITATION的Event,然後再由Client發送answer
       
        備註:Invitation可以攜帶SFSObject傳送
       
        code:
            /*----------------------------------
            InviteUserHandler.class
            ----------------------------------*/
            User buddy = getParentExtension().getParentZone().getUserByName(params.getUtfString("buddyName"));
        if(buddy != null){
            trace("send invite request" + sender.getName() + ',' + buddy.getName());
            ISFSObject SFSObj = SFSObject.newInstance();
            SFSObj.putUtfString("Test",sender.getName());
            //建立新的Invitation
            Invitation invitation = new SFSInvitation(sender, buddy, (int) 30, SFSObj);
            //設定Invitation返回類別
                InvitationCallback cb = new InviteSensor();
                //使用GameAPI送出Invitation
                SmartFoxServer.getInstance().getAPIManager().getGameApi().sendInvitation(invitation, cb);
        }
        /*----------------------------------
            InviteSensor.class
            ----------------------------------*/
            public class InviteSensor implements InvitationCallback {
                @Override
                public void onAccepted(Invitation arg0, ISFSObject arg1) {
                    // TODO Auto-generated method stub
                    //玩家接受
                    System.out.println("onAccepted");
                }           
                @Override
                public void onExpired(Invitation arg0) {
                    // TODO Auto-generated method stub
                    //過期沒回應或是玩家斷線
                    System.out.println("onExpired");
                }           
                @Override
                public void onRefused(Invitation arg0, ISFSObject arg1) {
                    // TODO Auto-generated method stub
                    //玩家拒絕
                    System.out.println("onRefused");
                }           
            }

web 3D學習

在網路上有HTML5 webGL跟Unity 3D還有Flash 3D可以開發3D遊戲

不過因為自己是在開發flash遊戲,所以就先找了一套Papervision3D來玩看看

PV3D網路上的資原其實中文的不多,也有人提到PV3D很久沒更新了,不過也許哪天還會再更新也說不一定

 二話不說,直接貼原始碼這樣比較快~XD

 以下原始碼部份轉載自http://milkmidi.blogspot.com/ 奶綠茶大的原始碼
/*******************************************************************************************************

 package{
    //Flash類別
    import flash.display.*;   
    import flash.events.*;
    import flash.utils.getTimer;
    //PV3D類別
    import org.papervision3d.cameras.Camera3D;
    import org.papervision3d.scenes.Scene3D;
    import org.papervision3d.objects.*;
    import org.papervision3d.materials.*;
    import org.papervision3d.objects.DisplayObject3D;   
    //匯入材質色彩材質
    import org.papervision3d.materials.ColorMaterial;
    //容器類別
    import org.papervision3d.objects.primitives.Plane;
    //匯入BasicView類別,PV3D的整合型視窗類別,包含(scene)場景,(camera)攝影機,(Render)3D算圖引擎,(viewport3D)目前可視視窗
    import org.papervision3d.view.BasicView;   

    public class Pv3dTest1 extends MovieClip {
        //Pv3dTest1類別, 繼承MovieClip。
        private var view:BasicView;
        /**
        * 宣告view變數為BasicView物件。
        * BasicView是繼承Sprite物件,可被加入至顯示物件容器裡。
                */   
                /**
                * 建構函式  
                */
        public function Pv3dTest1():void{                     
            //執行PV3D baseView初始化
            init3D();
            //執行PV3D物件初始化
            init3DObject();           
        }
        /**
        *init3D函式,建構BasicView物件、設定Camera參數
        */
        private function init3D():void{          
            /**
            * 建構BasicView物件
            * 參數值(viewport寬度, viewport高度, 是否自動對齊場景中間, 是否開啟滑鼠感應功能,camera類別)
            * PV3D的Camera有二種,
            * Target:目標Camera,不論鏡頭怎麼移動,永遠看著目標點。
            * Free:自由Camera,可以任意的移動和旋轉鏡頭。
            * viewport寬度和viewport高度設定為0的話,表示寬高是跟著整個場景的大小。
            */
            view = new BasicView(0, 0, true, true, "Target");    
           
            /**           
            * 設定攝影機Y坐標
            */
            view.camera.y = 100;
           
            //將view加入至目前的顯示物件容器
            this.addChild(view); 
           //監聽ENTER_FRAME事件,PV3D是靠ENTER_FRAME事件作3D算圖計算
            this.addEventListener(Event.ENTER_FRAME, onEventRender3D);
           
        }
        /**
        *init3DObject函式,用來建立PV3D物件、材質及偵聽事件
        */
        private function init3DObject():void{
            //建立色彩材質
            var colorMat:ColorMaterial = new ColorMaterial(0x223344);
            //建立Plane平面物件
            for (var i:int = 0; i < 5; i++) {
                    /**
                    * 建立Plane平面物件
                    * 參數說明:Plane(色彩材質,寬,高)
                    */
                var plane:Plane = new Plane(colorMat, 200, 200);
                plane.x = (i - 2) * 250;
                //將物件加入場景
                view.scene.addChild(plane);
            }
        }
        /**
        *onEventRender3D函式,偵聽影格事件
        */
        private function onEventRender3D(e:Event):void { 
                //將攝影機X坐標左右擺動
            view.camera.x = Math.sin(getTimer() / 1000) * 500;
            //Render view物件
            view.singleRender();
           
        }       
    }
}