tag:blogger.com,1999:blog-71882904871589615382024-03-05T15:49:52.628+08:00Water and BreadFlex, Flash, AIR, RIA, GameGDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.comBlogger102125tag:blogger.com,1999:blog-7188290487158961538.post-86804725156033523442011-10-23T21:09:00.001+08:002011-10-23T21:35:33.747+08:00[教學]使用FlashDevelop4開發AIR3專案<p>筆者最近在開發AIR專案,趁這個機會把用FlashDevelop4(以下簡稱FD4) 開發AIR3的心得整理上來,希望對大家有所幫助</p>
<a name='more'></a>
<p><strong>一、安裝開發環境</strong></p>
<p>1. 下載 FlashDevelop4</p>
<p>筆者試的是4.0.0RC1,在官網可下載最新版,安裝時可不要勾選Flex SDK及AIR SDK,FD4預設提供的AIR是2.7,我們將以手動方式更新到3.0</p>
<p>FlashDevelop 4下載:<a href="http://www.flashdevelop.org/community/viewforum.php?f=11">http://www.flashdevelop.org/community/viewforum.php?f=11</a></p>
<p>2. Flex SDK、AIR3 SDK下載</p>
<p>請到官網下載最新版SDK,筆者用的是FlexSDK是4.5.1、AIR SDK 3,下載完解壓縮後請把AIR SDK下所有檔案拷到FlexSDK底下</p>
<p>Flex SDK下載:<a href="http://opensource.adobe.com/wiki/display/flexsdk/Downloads">http://opensource.adobe.com/wiki/display/flexsdk/Downloads</a></p>
<p>AIR SDK下載:<a href="http://www.adobe.com/special/products/air/sdk/">http://www.adobe.com/special/products/air/sdk/</a></p>
<p>3.下載AIR3 Runtime</p>
<p>發佈好的程式當然要用AIR3來測看看,下載位置在<a href="http://get.adobe.com/tw/air/">http://get.adobe.com/tw/air/</a></p>
<p><strong>二、設定SDK</strong></p>
<p>打開FD4,點選上方選單的Tools -> Program Settings,找到AS3Context下的Installed Flex SDK,把剛下好的SDK設定上去</p>
<p><img src="http://farm7.static.flickr.com/6114/6272094273_e0af38d953.jpg" alt="selectSDK2_1.png" height="442" width="581"/></p>
<p><img src="http://farm7.static.flickr.com/6045/6272094533_774cc20eaa.jpg" alt="installedSDK_1.PNG" height="346" width="507"/></p>
<p>開啟一個AIR AS3 Project,打開專案的屬性視窗,在Output頁籤上把Platform改成AIR 3.0,並在SDK頁籤選擇剛設定的SDK</p>
<p>接著在專案目錄下打開應用程式描述檔,預設是application.xml,把第二句xmlns=<a href="http://ns.adobe.com/air/application/2.7">http://ns.adobe.com/air/application/2.7</a>改成xmlns=<a href="http://ns.adobe.com/air/application/3.0">http://ns.adobe.com/air/application/3.0</a>,也可以拷貝範例的描述檔,位置在FlexSDK/samples/descriptor-sample.xml</p>
<p>如果有要使用FlashPlayer11的API,請在編譯器參數中加入-swf-version=13</p>
<p><img src="http://farm7.static.flickr.com/6230/6272621946_f3034e16be.jpg" alt="compilerParam_1.PNG" height="494" width="484"/></p>
<p>接著按下F5就可以測試了,如果發生SDK錯誤,請打開專案下的SetupSDK.bat(bat目錄下),修改FLEX_SDK變數為正確的SDK路徑即可</p>
<p><strong>三、發佈AIR</strong></p>
<p>請先打開SetupApplication.bat(bat目錄下),找到CERT_NAME、CERT_PASS及CERT_FILE並設成自已的認證檔設定,沒有認證檔的人可不必修改,直接執行CreateCertificate.bat以產生預設的認證檔</p>
<p>準備好認證檔後,執行專案底下的PackageApp.bat即可,發佈檔案會放在air的資料夾中,如果想要發佈AIR3的Captive Runtime,可在SetupApplication.bat的SIGNING_OPTIONS後加上 -target bundle,發佈出來的AIR可直接執行不用安裝</p>
<pre class="brush:as3;">
-storetype pkcs12 -keystore %CERT_FILE% -storepass %CERT_PASS% -target bundle
</pre>
<p>補充一點,如果要使用AIR的更新功能,不能發佈成native及bundle,且更新XML的namespace需改成http://ns.adobe.com/air/framework/update/description/2.5</p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com3tag:blogger.com,1999:blog-7188290487158961538.post-71475502113448955722011-06-25T14:58:00.001+08:002011-06-25T15:27:22.067+08:00[推薦]經營公司的策略遊戲:Corporation Inc<p>非常有趣的策略遊戲,透過雇員及增加設備來擴大自己的公司,喜歡這類型的網友可以參考看看</p>
<p><img src="http://lh3.ggpht.com/-ZOquRgbjWe8/TgWJTKfFFTI/AAAAAAAAAP4/hhh88MlNLVs/corporation-inc3.png?imgmax=640" alt="corporation-inc3.png" height="141" width="638"/></p>
<p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5-wQkRPPF2-qfIUQYLE9XNXm1WgTh5ch_zJhcH4tgIEJZFBfkulQHiJpWdklTJDJhgghGYzft2l_fiip0CSD0EBJNFRFdxltYtak44nyQIRRtdY3-eClGjW6fqkjHQo88u2wyvKHpKMs/?imgmax=640" alt="corporation-inc_room.jpg" height="311" width="579"/></p>
<p>遊戲連結:<a href="http://armorgames.com/play/7348/corporation-inc">http://armorgames.com/play/7348/corporation-inc</a></p>
<p>該網站還有些多不錯的遊戲,每個都很有參考價值</p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-48492291262707369252011-06-15T23:30:00.001+08:002011-06-15T23:45:16.792+08:00[心得]在Flash中寫入UTF-8格式<p>筆者最近試著把文字用writeUTFBytes的方式寫成檔案,雖然用文字編輯器讀取不會有問題,但如果再以Flash的URLLoader方式載入,文字會變成亂碼,且無法轉成XML物件,找了半天才發現問題出在BOM上</p>
<a name='more'></a>
<p>BOM(Byte Order Mark)簡單來說就是unicode的簽名檔,表明該文件是以什麼方式編碼的,由於Flash的writeUTFBytes並不會寫入BOM,所以在讀取時就很容易變成亂碼,為了避免這點,只要在寫入檔案時自行加上BOM即可,目前可加入的BOM類型如下:</p>
<table cellpadding="2" border="1" cellspacing="0">
<tbody>
<tr>
<th width="50%">Bytes</th>
<th width="50%">編碼</th>
</tr>
<tr>
<td width="50%">00 00 FE FF</td>
<td width="50%">UTF-32, big-endian</td>
</tr>
<tr>
<td width="50%">FF FE 00 00</td>
<td width="50%">UTF-32, little-endian</td>
</tr>
<tr>
<td width="50%">FE FF</td>
<td width="50%">UTF-16, big-endian</td>
</tr>
<tr>
<td width="50%">FF FE</td>
<td width="50%">UTF-16, little-endian</td>
</tr>
<tr>
<td width="50%">EF BB BF</td>
<td width="50%">UTF-8</td>
</tr>
</tbody>
</table>
<p><br/>
寫個簡單範例,UTF-8</p>
<pre class="brush:as3;">
//UTF-8 BOM
byteArray.writeByte(0xEF);
byteArray.writeByte(0xBB);
byteArray.writeByte(0xBF);
//文字
byteArray.writeUTFBytes(message);
</pre>
<p>也可以寫成UTF-16,但要注意endian格式應對應</p>
<pre class="brush:as3;">
//UTF-16 BOM big-endian
byteArray.writeByte(0xFE);
byteArray.writeByte(0xFF);
byteArray.endian = Endian.BIG_ENDIAN;
//文字
var messageNum:uint = message.length;
for (var i:int = 0; i < messageNum; i++)
{
byteArray.writeShort(message.charCodeAt(i));
}
</pre>
<p>參考文章:</p>
<p><a href="http://www.websina.com/bugzero/kb/unicode-bom.html">http://www.websina.com/bugzero/kb/unicode-bom.html</a></p>
<p><a href="http://zh.wikipedia.org/wiki/UTF-8">http://zh.wikipedia.org/wiki/UTF-8</a></p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-3220390498497220352011-06-07T21:25:00.001+08:002011-06-07T21:27:34.323+08:00[教學]在FlashDevelop中使用條件編譯<p>最近因為工作的關係,又把FlashDevelop裝起來了,雖然以前只拿來寫AS2,很少用來開發專案,不過裝完後才發現竟然新增了這麼多功能,且Plugin也很多,有許多FlashBuilder沒有的便利功能,雖然還用不習慣(快速鍵又要重背了...),但有機會筆者再介紹幾個不錯的Plugin。</p>
<a name='more'></a>
<p>言歸正傳,之前有介紹過在Flex及Flash中使用條件編譯,對條件編譯有疑問的網友,可參考之前寫的"<a href="http://waterxbread.blogspot.com/2010/01/flexconditional-compiling.html" target="_blank">[教學]使用Flash的conditional compiling</a>"一文,這次要介紹的是在FlashDevelop中使用條件編譯,其實很簡單,由於FlashDevelop跟FlashBuilder都是用Flex SDK編譯,所以條件編譯用法也相同,只要下Compile參數即可</p>
<p>首先要設定FlexSDK</p>
<p><img src="http://lh4.ggpht.com/-HAfrCcwudi0/Tee85ReXvlI/AAAAAAAAAPM/_4Geh3Hm8Lo/flashDevelop1.png?imgmax=640" alt="flashDevelop1.png" height="443" width="581"/></p>
<p>設定完SDK後,所有的AS及Flex專案都會使用該SDK編譯,接下來我們可依專案設定條件編譯</p>
<p>在專案上點右鍵 ─> Properties 及點選Compiler Options標籤,找到Compiler Constants中加入 ${NAME_SPACE}::${KEY},${VALUE}</p>
<p><img src="https://sites.google.com/site/waterxbread/files/flashDevelop4.png" alt="flashDevelop4.png" height="494" width="484"/></p>
<p>上例是加了isMobile及useTestData兩個參數,值的話其實不一定要布林,也可設數字或字串,另一種做法是使用config檔,在Load Configuration File欄位可以設定自定義的組態檔,格式如下:</p>
<pre class="brush:xml;">
<?xml version="1.0"?>
<flex-config>
<compiler>
<define>
<name>CONFIG::isMobile</name>
<value>true</value>
</define>
<define>
<name>CONFIG::useTestData</name>
<value>true</value>
</define>
</compiler>
</flex-config>
</pre>
<p>兩種方法的效果都一樣,值得注意的是,FlashDevelop預設已幫我們定義好了CONFIG::debug及CONFIG::release,這也是我覺得FlashDevelop不錯的地方,有些很感心的設計</p>
<p>參考文章:</p>
<p><a href="http://www.flashdevelop.org/wikidocs/index.php?title=AS3_Conditional_Compilation">http://www.flashdevelop.org/wikidocs/index.php?title=AS3_Conditional_Compilation</a></p>
<p><a href="http://livedocs.adobe.com/flex/3/html/help.html?content=compilers_21.html">http://livedocs.adobe.com/flex/3/html/help.html?content=compilers_21.html</a></p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-82805767496536118562011-05-26T21:28:00.001+08:002011-05-26T21:29:25.634+08:00[心得]將Unity log顯示在Firebug上<p>之前有介紹過把Flex log顯示在Firebug上,這次改寫一個給Unity用的版本,之所以使用Firebug是因為Firebug在顯示上很清楚,且如果把顯示寫在onGUI上,onGUI錯掉也是不能顯示log,所以把log切出是比較理想的</p>
<a name='more'></a>
<p>由於筆者學的Unity語法是C#,所以以下的範例都是用C#寫的,其它語言版本請再參考相關API,概念都相同。</p>
<p>Unity本身是使用Debug類別做log訊息,預設會顯示在編輯器的log視窗及產出log文件,如果要加一個新的輸出方式,可使用Application.RegisterLogCallback,該方法可設定一個Delegate做為輸出處理,整個程式看起來如下:</p>
<pre class="brush:as3;">
void OnEnable()
{
Application.RegisterLogCallback(fireBugLogHandler);
}
private void fireBugLogHandler(string logString, string stackTrace, LogType logType)
{
string callString = null;
switch (logType)
{
case LogType.Assert:
case LogType.Log:
callString = "console.info";
break;
case LogType.Exception:
case LogType.Error:
callString = "console.error";
break;
case LogType.Warning:
callString = "console.warn";
break;
}
Application.ExternalEval(callString + "('" + logString + "');");
}
</pre>
<p>輸出是使用Application.ExternalEval來執行javascript,只要瀏覽器是firefox且有裝Firebug的話,unity裝會把log顯示在Firebug上了,有興趣的網友可以試試</p>
<p>相關文章:<a href="http://waterxbread.blogspot.com/2009/11/flex-loggerfirebug-target_11.html" target="_blank">Flex Logger的Firebug target</a></p>
<p>Firebug:<a href="https://addons.mozilla.org/en-US/firefox/addon/firebug/">https://addons.mozilla.org/en-US/firefox/addon/firebug/</a></p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-53604111394704256932011-05-26T18:41:00.002+08:002011-06-03T01:09:59.781+08:00ProtocolBuffer VS AMF3(fixed)<p>感謝Atry的指導,筆者修改了一下範例,以求更客觀的比較結果,順便也比較一下修改前及修改後的效能差異</p>
<p>主要修改的有兩部分:</p>
<p>1. 使用optional取代required</p>
<p>2. scalar最佳化</p>
<a name='more'></a>
<p>proto文件如下</p>
<pre class="brush:js;">
message BigData {
repeated MediumData mediumDatas = 1;
}
message MediumData {
repeated SmallData smallDatas = 1;
}
message SmallData {
optional sfixed32 intValue = 1;
optional fixed32 uintValue = 2;
optional bool booleanValue = 3;
optional float numberField = 4;
}
</pre>
<p>proto文件記載了BigData、MediumData及SmallData,SmallData只有基本資料型別,而MediumData及BigData則是用巢狀方式讓資料格式更大,repeated屬性可以讓欄位變成陣列(Array)或清單(List),由於直接使用ProtocolBuffer轉出來的類別轉AMF3的話,AMF3會把繼承的Message類一起寫入,為了避免這點,範例再寫一組同樣格式但沒有繼承的資料物件給AMF3使用,以求更客觀的比較結果</p>
<p>範例為測試AMF3及ProtocolBuffer的序列化及反序列化速度,結果如下</p>
<p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWQqM94Impr07QimealSLIv5oX8lZ9FGOZg0GO51YoSE5RiYbYcN3e3T321vezVd_DL_qwbsJVAJvqtHSqMO_Od-ORlWZB8wqA7it_5EqzcAZv8GkqexHigY50YErRCoiSyOjOMCRopF4/?imgmax=720" alt="protoBuff_benchmark1.png" height="718" width="616"/></p>
<p>以大小來看,Protocol Buffer比較小,即使是巢狀資料也比AMF小一點,但速度方面是AMF3較好,原因可能是AMF3的序列化及反序列化為底層API,效能可能有被優化,不過以實用上來看Protocl Buffer的速度是可接受的,畢竟平常的封包也不會太大。</p>
<p>再來比較一下proto文件的required及optional差異,required是指示欄位一定要有值,而optional是可有可無,以官網的說法 ,required欄位如果之後要改成optional會有讀取問題,建議是使用optional,為了試驗,筆者把上述的smallData所有欄位改成required,比較一下效能,結果如下</p>
<p><img src="http://lh3.ggpht.com/-C71qrgV4krA/TeaHzsN-UrI/AAAAAAAAAPU/Rz-RZkJQJow/protoBuff_benchmark1_2.png?imgmax=720" alt="protoBuff_benchmark1_2.png" height="718" width="616"/></p>
<p>如果是使用required,Protocol buffer的變化不大,筆者之前有試過optional加default的話,會比required欄位小很多,但如果都使用賦值,差異就看不出來了</p>
<p>另一個要測的是scalar,也就是欄位宣告的類型,Protocol Buffer跟AMF不同,即使類型同樣為正負號整數,必須依使用情況宣告成不同的scalar才能發揮Protocol Buffer最大功效,可參考 <span style="WIDOWS: 2; TEXT-TRANSFORM: none; TEXT-INDENT: 0px; BORDER-COLLAPSE: separate; FONT: medium 'Times New Roman'; WHITE-SPACE: normal; ORPHANS: 2; LETTER-SPACING: normal; COLOR: rgb(0,0,0); WORD-SPACING: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" class="Apple-style-span"><span style="TEXT-ALIGN: justify; LINE-HEIGHT: 20px; FONT-FAMILY: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, sans-serif; COLOR: rgb(34,34,34); FONT-SIZE: 12px" class="Apple-style-span"><a href="http://code.google.com/apis/protocolbuffers/docs/proto.html#scalar">http://code.google.com/apis/protocolbuffers/docs/proto.html#scalar</a></span></span></p>
<p>也就是當使用整數時,如果是小值,可宣告成int,如果值常超過2<sup>28</sup>,要用fixed32,或是整數常出現負號,應使用sint32,針對不同需求應宣告成對應類型,這部分就要看實例時,欄位要怎麼設計,筆者把範例修改成只宣告uint及int,比較一下兩者的差異</p>
<p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiet_ioDo8N0B63hf865nVkR-1B4qBMBtbL6hQJuudYqu6zpzVqtPamV37dBZWWhxZYTeT4b8lfV5Ryfqtpg8u57UhJ68jBEgUQHpO9QA6iw1owdETaNumbfB3Nwxu36VLRLlwbYYpoiIA/?imgmax=720" alt="protoBuff_benchmark1_3.png" height="718" width="616"/></p>
<p>出乎意料的是差異不大,只有大小有明顯的變化,或許是筆者範例的欄位太少,只有一點的差異讓我有點意外。</p>
<p>最後做個總結,Protocol Buffer的測試似乎依實例來測會比較準,筆者目前寫的測試方法還是無法比較出差異,主要應該是值都是重覆使用,無法發揮封包特性,或許還要再想一個比較好的實例來測會比較準</p>
<p><a href="https://sites.google.com/site/waterxbread/files/FlashProtocolBuffers.zip" target="_blank">原始檔下載</a></p>
<p>如果有網友測出不同結果,或覺得範例測試方法有誤,歡迎留言討論。</p>
<p>測試環境為: ProtocolBuffer 2.4.0a、Flex 4.0 SDK、Protoc-gen-as3 0.9.0、FlashPlayer 10.3 Release</p>
<p>相關文章: <a href="http://waterxbread.blogspot.com/2011/05/flashgoogle-protocol-buffer.html" target="_blank">[教學]在Flash中使用Google Protocol Buffers</a></p>
<p>轉載請註明出處</p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com11tag:blogger.com,1999:blog-7188290487158961538.post-90391429485049606102011-05-19T14:48:00.005+08:002011-05-19T16:15:17.820+08:00[教學]在Flash中使用Google Protocol Buffers<p><img src="http://lh3.ggpht.com/_eS2OCKZxelI/TdS9TEeuOgI/AAAAAAAAAOQ/OPSaxXKMVWc/protocolBuffer.png?imgmax=512" alt="protocolBuffer.png" height="68" width="437"/></p><p>Protocol Buffer是Google所提供的一種結構化資料的編碼方式,俱備高效的序列化速度且支援格式擴充。以Flash來說就是類似AMF的資料傳輸格式,由於Protocol Buffer有支援多種語言版本,這次就來介紹Flash版的Protocol Buffer。</p><a name='more'></a> <p>請先至http://code.google.com/p/protobuf/下載對應語言的Library,目前官方僅支援C++、Java及Python,如果要使用其它語言,可透過第三方支援外掛 <a href="http://code.google.com/p/protobuf/wiki/ThirdPartyAddOns">http://code.google.com/p/protobuf/wiki/ThirdPartyAddOns</a></p><p>範例是採用protoc-gen-as3(<a href="https://code.google.com/p/protoc-gen-as3/">https://code.google.com/p/protoc-gen-as3/</a>),這是由一位大陸高手寫的Library,有更新到最新版本,支援度較高</p><p>下載好Library後,在專案內設置Library路徑,接下來就可以試用Protocol Buffer了。Protocol Buffer是使用proto文件來產生對應類別,簡單來說,文件格式只定義在proto文件,在不同平台,不同語言時只要用讓編譯器執行proto文件就可產出對應語言的類別,且該類別也會封裝序列化及反序列化方法,開發者只要知道該類別的格式即可。</p><p>寫一個簡單的程式範例,記一個旗標值,如果登人了就送出登出結果,反之登出就送出登入結果,<a href="https://sites.google.com/site/waterxbread/files/ExtensionTest.swf?attredirects=0" target="_blank" rel="shadowbox;width=760;height=660" title="ExtensionTest">觀看範例</a></p><p>範例的proto文件格式:</p><pre class="brush:as3;">package protobuf;
message ResultMessage {
extensions 100 to max;
}
message LoginResult {
extend ResultMessage {
optional LoginResult loginExt = 100;
}
required string name = 1;
required string data = 2;
}
message LogoutResult {
extend ResultMessage {
optional LogoutResult logoutExt = 101;
}
}
</pre><p>範例的proto記述了LoginResult、LogoutResult 、ResultMessage等傳輸資料格式,比較特殊的是每個欄位後都要加一個Assigning Tag,該Tag在類別定義內不可重覆,這個Tag是Protobufer用來識別資料欄位的,除了Tag外,範例還有使用extend,extend是Prootocol Buffer用來擴充資料用,該用途會在之後的文章提到。定義好的文件可用Protoc編譯器產生實體類別:</p><pre class="brush:js;">protoc --as3_out=輸出位置 --plugin=AS3 Plugin位置 -I=檔案根位置 descriptor.proto路徑
</pre><p>也可使用Ant來執行:</p><pre class="brush:xml;"><project name="protocol buffer" default="protoc">
<target name="protoc">
<exec executable="${basedir}/compiler/protoc">
<arg line="-I=${basedir}/src" />
<arg line="--plugin=protoc-gen-as3=${basedir}/compiler/protoc-gen-as3.bat"/>
<arg value="--as3_out=${basedir}/src" />
<arg value="${basedir}/src/test.proto" />
</exec>
</target>
</project>
</pre><p>執行完後protobuf資料夾下會產生LoginResult、LogoutResult 等類別,透過此類別我們可以寫入及讀取ProtocolBuffer資料,先示範一下如何寫入</p><pre class="brush:as3;">private function writeResult():ByteArray
{
var resultWrapper:ResultMessage = new ResultMessage();
if (!isLogin)
{
var loginResult:LoginResult = new LoginResult();
loginResult.name = "test";
loginResult.data = "success";
resultWrapper[LoginResult.loginExt] = loginResult;
}
else
{
resultWrapper[LogoutResult.logoutExt] = new LogoutResult();
}
var resultStream:ByteArray = new ByteArray();
resultWrapper.writeExternal(resultStream);
return resultStream;
}
</pre><p>上面程式展示Flash物件轉成Protocol Buffer資料,使用的Flash物件是由Protoc編譯產生,繼承Message類,該類別實作序列化及反序列化方法,只要使用writeExternal()即可寫成Protobuffer資料,其格式為ByteArray。</p><p>而要讀取時,只需調用readExternal</p><pre class="brush:as3;">private function readResult(stream:ByteArray):void
{
stream.position = 0;
var result:ResultMessage = new ResultMessage();
result.readExternal(stream);
for (var key:* in result)
{
var id:uint = key;
resultHandler(id, result[key]);
}
}
private function resultHandler(id:uint, data:Message):void
{
switch (id)
{
case LoginResult.loginExt:
{
println("login success");
println("data = " + LoginResult(data).toString());
isLogin = true;
break;
}
case LogoutResult.logoutExt:
{
println("logout");
isLogin = false;
break;
}
}
}
</pre><p>資料的反解一樣可使用物件的反序列化方法,調用Message的readExternal()可把Protocol Buffer資料轉成Flash物件,但一種物件只能轉一種格式,所以以資料傳輸來說是很不方便,Google會提供二種做法來解決這個問題,一種是使用Wrapper類,在Wrapper中加入類型及所有可能傳遞的資料欄位,程式可依類型來判斷所取得的資料,而另一種做法就是使用extend,extend像是類別的額外資料,以列表方式附屬在類別之中,程式可以在列表中找出想要的資料,以使用上來說,extend在擴充資料上比Wrapper容易,所以範例是使用extend的方式來反解回傳資料。</p><p>備註:本地讀取ByteArray資料時記得要把位置還原到0,否則無法正常讀取</p><p>ProtocolBuffer的基本操作介紹的差不多了,雖然使用上很簡單,但還是比AMF稍嫌難用,下一篇我再來比較兩者格式的差異,包括效能及大小。</p><p><a href="https://sites.google.com/site/waterxbread/files/ProtocolBuffers_example1.zip?attredirects=0&d=1" target="_blank">原始檔下載(包含所需Library)</a></p><p>參考文件:</p><p>protocolBuffer:<a href="http://code.google.com/p/protobuf/">http://code.google.com/p/protobuf/</a></p><p>protoc-gen-as3:<a href="https://code.google.com/p/protoc-gen-as3/">https://code.google.com/p/protoc-gen-as3/</a></p><p>Union Type:<span style="WIDOWS: 2; TEXT-TRANSFORM: none; TEXT-INDENT: 0px; BORDER-COLLAPSE: separate; FONT: medium 'Times New Roman'; WHITE-SPACE: normal; ORPHANS: 2; LETTER-SPACING: normal; COLOR: rgb(0,0,0); WORD-SPACING: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px" class="Apple-style-span"><span style="FONT-FAMILY: arial, sans-serif; FONT-SIZE: 13px" class="Apple-style-span"><a style="COLOR: rgb(0,0,204)" href="http://code.google.com/apis/protocolbuffers/docs/techniques.html#union" rel="nofollow">http://code.google.com/apis/protocolbuffers/docs/techniques.html#union</a></span></span></p><p>寫的很辛苦,如果要轉載請註明出處,謝謝</p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com1tag:blogger.com,1999:blog-7188290487158961538.post-6895455526949300232011-05-19T00:08:00.003+08:002011-05-19T13:18:47.610+08:00[推薦]The Fancy Pants Adventures<p style="TEXT-ALIGN: center"><a href="http://www.fancypantsadventures.com/" target="_blank"><br />
<img src="http://lh4.ggpht.com/_eS2OCKZxelI/TdPu5HeEsPI/AAAAAAAAAOM/naoKqy2mnw0/fancyPants.png?imgmax=640" alt="fancyPants.png" height="365" width="631"/></a></p><p>對於想開發動作遊戲的開發者來說,這款是一定要來玩玩看的,整體動作非常流暢,有點像是音速小子加洛克人X的感覺,可以飛岩走壁,也可以攀牆。</p><p>官網:<a href="http://www.fancypantsadventures.com/" target="_blank">http://www.fancypantsadventures.com/</a></p><p>World 1, World 2:<a href="http://www.fancypantsadventures.com/games/index.php" target="_blank">http://www.fancypantsadventures.com/games/index.php</a></p><p>由於官網上的lightbox似乎有問題,沒辦法使用方向鍵,我把swf的連結貼給大家,如果上面的連結不行,可以試試看下面的</p><p>World 1:<a href="http://www.fancypantsadventures.com/flash/fpaworld1.swf" target="_blank">http://www.fancypantsadventures.com/flash/fpaworld1.swf</a></p><p>World 2:<a href="http://www.fancypantsadventures.com/flash/fpaworld2.swf" target="_blank">http://www.fancypantsadventures.com/flash/fpaworld2.swf</a></p><p>除了官網外,在Google Chrome Store也可以下載App版的fancy pants</p><p>World 2:<a href="https://chrome.google.com/webstore/detail/loamdenijebhollnjgehcfbnpeelfhlk?hl=zh-TW" target="_blank">https://chrome.google.com/webstore/detail/loamdenijebhollnjgehcfbnpeelfhlk?hl=zh-TW</a></p><p>Sneak Peek版本:<a href="https://chrome.google.com/webstore/detail/bbkegjmflkgobogelkobmmdeddkclooc?hl=zh-TW" target="_blank">https://chrome.google.com/webstore/detail/bbkegjmflkgobogelkobmmdeddkclooc?hl=zh-TW</a></p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-80619168456905118322011-05-18T19:32:00.002+08:002011-05-19T13:13:22.310+08:00[練習]Flash亂數迷宮<p>之前有在研究地下城類型的遊戲,所以做了一個亂數迷宮的產生器,算法是使用單次深入的概念,也就是迷宮會一直往下尋路,直到不能走為止,不能走後會在往回推一格繼續尋路,最後檢查完所有節點都不能走時,迷宮就完成了,用說的有點模糊,先看範例吧</p><p align="center"><a href="https://sites.google.com/site/waterxbread/files/FlashMaze.swf" target="_blank" rel="shadowbox;width=800;height=660" title="Maze"><img src="http://lh4.ggpht.com/_eS2OCKZxelI/TdOvZz9lIEI/AAAAAAAAAOI/f5BCQKdawgc/maze.png?imgmax=640" alt="maze.png" height="141" width="600"/></a></p><a name='more'></a><br />
<p><a href="https://sites.google.com/site/waterxbread/files/FlashMaze.swf" target="_blank" rel="shadowbox;width=800;height=660" title="Maze">觀看範例</a></p><p>主要的運算寫在generateMaze,可設定牆的厚度,有興趣的人可以參考</p><pre class="brush:as3;">private static function generateMaze(map:Map, startX:int, startY:int, wallWeight:int):void
{
var nextNodeDistance:int = wallWeight + 1;
//追蹤路徑,用來倒回用
var tracePaths:Vector.<Node> = new Vector.<Node>();
//更新起始點
map.updateStartNode(startX, startY);
var node:Node = map.startNode;
node.startNodeDistance = 0;
//終點
var endNode:Node = node;
do
{
node.isWalkable = true;
//可能的下個節點列表
var posableNextNodes:Vector.<Node> = new Vector.<Node>();
var checkNode:Node;
//四方向
for (var i:int = -nextNodeDistance; i <= nextNodeDistance; i += nextNodeDistance * 2)
{
checkNode = map.getNode(node.x + i, node.y);
if (checkNode && !checkNode.isWalkable)
posableNextNodes.push(checkNode);
checkNode = map.getNode(node.x, node.y + i);
if (checkNode && !checkNode.isWalkable)
posableNextNodes.push(checkNode);
}
var posableNodeCount:int = posableNextNodes.length;
if (posableNodeCount > 0)
{
//亂數決定前進方向
var index:int = int(Math.random() * posableNodeCount);
var nextNode:Node = posableNextNodes[index];
nextNode.isWalkable = true;
nextNode.startNodeDistance = node.startNodeDistance + nextNodeDistance;
var offsetX:int = (nextNode.x - node.x) / nextNodeDistance;
var offsetY:int = (nextNode.y - node.y) / nextNodeDistance;
var pathX:int = node.x;
var pathY:int = node.y;
var pathDistance:int = node.startNodeDistance;
//打通牆壁
while (pathX != nextNode.x || pathY != nextNode.y)
{
pathX += offsetX;
pathY += offsetY;
var pathNode:Node = map.getNode(pathX, pathY);
if (pathNode)
{
pathDistance++;
pathNode.startNodeDistance = pathDistance;
pathNode.isWalkable = true;
}
}
tracePaths.push(nextNode);
node = nextNode;
}
else
{
node = tracePaths.pop();
if (node.startNodeDistance > endNode.startNodeDistance)
endNode = node;
}
}
while (tracePaths.length > 0)
map.updateEndNode(endNode.x, endNode.y);
}
</pre><p><a href="https://sites.google.com/site/waterxbread/files/FlashMaze.zip?attredirects=0&d=1">原始檔下載</a></p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-11605079270241827712011-05-18T00:13:00.001+08:002011-05-18T00:20:01.014+08:00[教學]在AS3中使用列舉<p>Actionscript 3本身沒有列舉,所以在開發Flash專案時大都以常數宣告成整數或字串的方式來區分類別,雖然不會有問題,但在開發大型專案時,常數的宣告方法反而會成為維護上的大問題。</p>
<a name='more'></a>
<p>舉例來說,一般Flash中重覆使用變數會宣告成:</p>
<pre class="brush:as3;">
public class MoveDirection
{
public static const UP:int = 0;
public static const DOWN:int = 1;
public static const LEFT:int = 2;
public static const RIGHT:int = 3;
public function MoveDirection()
{
}
}
</pre>
<p>假設在使用時以 function changeDirection(directionType:int):void 的方式調用,雖然使用上沒問題,但如果今天把程式碼交接給別人,在交接不清楚的情況下,directionType到底要填什麼才好,因為型態是int,所以只要是整數都可以填,在求快的情況下,有人可能就會直接填入1, 2, 3, 4,程式碼最後就充滿了魔術數字,愈來愈難維護。</p>
<p>為了避免上述問題,Adobe在文件上有提出一個簡單的作法,使用宣告自己的方式來固定型別,上面的程式可改寫成:</p>
<pre class="brush:as3;">
public class MoveDirection
{
public static const UP:MoveDirection = new MoveDirection();
public static const DOWN:MoveDirection = new MoveDirection();
public static const LEFT:MoveDirection = new MoveDirection();
public static const RIGHT:MoveDirection = new MoveDirection();
public function MoveDirection()
{
}
}
</pre>
<p>在使用時會變成 function changeDirection(directionType:MoveDirection):void ,型態固定了,即使沒有說清楚也可以知道要填入什麼,也不必憺心會被順便亂填, 但這方法還是有問題,如果今天我的directionType是Server告訴我,而類型是以整數方式記載,那我要怎麼換成Client看得懂的列舉,這個方法沒有處理資料轉換的問題,在溝通上還是很難用,所幸網路上還是有不錯的第三方可用,<a href="http://code.google.com/p/as3-commons/" target="_blank">as3Commons</a>就有提供更完整的列舉類。</p>
<p>筆者自已也寫了一個簡單的列舉類別,功能簡單但有實作自動遞增</p>
<pre class="brush:as3;">
package idv.gd.utils
{
import flash.utils.Dictionary;
import flash.utils.getQualifiedClassName;
import flashx.textLayout.formats.Direction;
public class Enum
{
private static var _enums:Dictionary = new Dictionary();;
private var _id:Object;
public function Enum(id:Object = null)
{
var className:String = getQualifiedClassName(this);
if (!_enums[className])
_enums[className] = new Dictionary();
if (id == null)
{
id = largestID + 1;
if (id > uint.MAX_VALUE)
throw new Error("id超過最大值");
}
_id = id;
if (!_enums[className][id])
_enums[className][id] = this;
else
throw new Error("id值已存在");
}
/**
* 取得目前最大值索引
* @return
*
*/
private function get largestID():uint
{
var className:String = getQualifiedClassName(this);
var maxValue:uint = 0;
var values:Dictionary = _enums[className];
if (values)
{
for each (var enum:Enum in values)
{
var enumID:uint = enum.idToUint();
if (enumID > maxValue)
maxValue = enumID;
}
}
return maxValue;
}
/**
* 取得id物件
* @return
*
*/
public function get id():Object
{
return _id;
}
/**
* 依id取得列舉實體
* @param enumClass 要轉換的列舉類別
* @param id 識別id
* @return
*
*/
public static function getEnumByID(enumClass:Class, id:Object):*
{
var className:String = getQualifiedClassName(enumClass);
var currentValues:Dictionary = _enums[className];
return (currentValues) ? currentValues[id] : null;
}
/**
* id轉字串
* @return
*
*/
public function idToString():String
{
return String(_id);
}
/**
* id轉正整數
* @return
*
*/
public function idToUint():uint
{
return uint(_id);
}
}
}
</pre>
<p>使用上可以寫成:</p>
<pre class="brush:as3;">
public class MoveDirection extends Enum
{
public static const UP:MoveDirection = new MoveDirection();//1
public static const DOWN:MoveDirection = new MoveDirection();//2
public static const LEFT:MoveDirection = new MoveDirection();//3
public static const RIGHT:MoveDirection = new MoveDirection();//4
public static const UP_LEFT:MoveDirection = new MoveDirection(1000);//1000
public static const UP_RIGHT:MoveDirection = new MoveDirection();//1001
public static const DOWN_LEFT:MoveDirection = new MoveDirection();//1002
public static const DOWN_RIGHT:MoveDirection = new MoveDirection();//1003
public function MoveDirection(id:Object=null)
{
super(id);
}
}
</pre>
<p>索引也可為字串,但最好不要把數字跟字串混在同一類別,底層有實作轉換,可使用getEnumByID將識別索引轉成列舉實體,在溝通上會方便許多</p>
<p><a href="https://sites.google.com/site/waterxbread/files/TestEnum.fxp?attredirects=0&d=1" target="_blank">下載原始碼</a></p>
<p>參考文章</p>
<p>Flash Help <a href="http://help.adobe.com/zh_TW/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7f2f.html">http://help.adobe.com/zh_TW/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7f2f.html</a></p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-38043554162515141752011-05-17T21:30:00.001+08:002011-05-17T21:30:30.404+08:00要換工作了<p>雖然換來換去還是待在遊戲業,但難得有閒餘可以更新一下Blog了,版面換成精簡的配置,希望大家會喜歡。</p>
<p>之前有人說無法存取網站上的範例,那是因為Google Page已關閉,檔案只限本人存取的關係,目前會將已知的檔案改到Google 協作平台,如果還有發現問題還煩請告知一下,感恩</p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-23366028814367539662010-06-24T13:13:00.000+08:002010-06-24T13:13:52.311+08:00網站資源問題<p>由於好用的google page已關閉,目前正在找新的空間放置,如果期間有連結不正常,還請多多包涵</p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-31857393394764688642010-01-22T12:56:00.001+08:002010-01-22T12:56:38.438+08:00[網站推薦]花蟲<p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiq_-gF0fwh7G_2PiH85dS6b-BNXGy1yAwgUEdEaoyv1d_H5jQWGAi9Q0aAEfrC6V8RQXPiSou0LDpSXK7Nc69J7W1n2TbQ97OjGGRIQbXUmVgo7euYLLMPotM38-v1WtBRlY-9BGT4CA/?imgmax=400" alt="2010-01-19_184829.png" height="349" width="400"/></p> <p>找道具解迷遊戲,玩起來有點像Amanita Design出品的<a href="http://gnn.gamer.com.tw/2/40132.html" target="_blank">機械迷城</a>,風格很不錯,喜歡這類型遊戲的人可以玩玩看</p> <p>網站連結:<a href="http://hanamushi.jp/index2.htm">http://hanamushi.jp/index2.htm</a></p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com1tag:blogger.com,1999:blog-7188290487158961538.post-76908782689031208502010-01-18T20:52:00.007+08:002011-05-17T21:36:07.340+08:00[練習]在Flash中使用Plurk API雖然Plurk API早已不是新聞,但由於Plurk沒設Flash的存取策略檔(crossdomain.xml),所以Flash一直無法在網路上調用API,只能使用較低安全性的本機版,所幸最近Plurk終於更新crossdomain,現在Flash已可發佈網路版跟Plurk溝通,趁這個機會寫個簡單的練習:<br />
<img alt="2010-01-18_202934.png" height="344" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgfksaYqyVTUJ-pb8qNe4aBRxiphRyGd-wrOmcim2bxtUimAHduj6cyOHIs3ec88-5ogQCuYqhSeHkz4HGq0mOAlUnuQuz3AhHnt6HTOyZQ6iWeyij8m4C_Y6_bD4iIrxUsuAytIX3FjM/?imgmax=400" width="400" /><br />
<a href="http://sites.google.com/site/waterxbread/files/facebook/Practice_PlurkAPI.swf" target="_blank">程式範例</a><br />
範例測試了Plurk的基礎功能,包括讀取文章及噗文,也能透過API擷取使用者的基本資料(姓名、karma)<br />
由於Plurk還沒有Flash API版本,所以一切的溝通可使用一般網頁的request及respond方式,透過Flash本身的URLLoader讀取遠端本文,使用get傳值並接收JSON資料 <br />
<pre class="brush: js; toolbar: true;">private function plurkGet():void
{
var request:URLRequest = new URLRequest();
request.method = URLRequestMethod.GET;
request.url = PLURL_API_URL + "/Timeline/getPlurks";
var variables:URLVariables = new URLVariables();
variables.api_key = API_KEY;
request.data = variables;
var urlLoader:URLLoader = new URLLoader();
urlLoader.addEventListener(Event.COMPLETE, plurkGetCompleteHandler);
urlLoader.addEventListener(IOErrorEvent.IO_ERROR, plurkErrorHandler);
urlLoader.dataFormat = URLLoaderDataFormat.TEXT;
urlLoader.load(request);
}
</pre><pre class="brush: js; toolbar: true;">private function plurkGetCompleteHandler(event:Event):void
{
var loader:URLLoader = URLLoader(event.currentTarget);
var jsonDecoder:* = new JSONDecoder(String(loader.data));
var obj:Object = jsonDecoder.getValue();
var plurkList:Array = obj.plurks as Array;
userPlurks = new ArrayCollection(plurkList);
showMsg("取回Plurk文章成功");
}
</pre>Plurk的溝通很簡單,不過他的登入驗證令人不敢恭維,在寫習慣Facebook API後,就覺得Plurk API實在太危險,任何第三方網站只要有帳號跟密碼就可登入,到底要由誰來確保第三方網站不會搞鬼?這點應該是Plurk要再改進的地方<br />
<a href="http://sites.google.com/site/waterxbread/files/Practice_PlurkAPI.zip" target="_blank">程式原始碼下載</a><br />
<br />
Plurk API:<a href="http://www.plurk.com/API">http://www.plurk.com/API</a>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-5650705542179019442010-01-18T20:09:00.005+08:002010-02-02T20:03:55.798+08:00[教學]使用Flash的conditional compiling<p>條件式編譯(conditional compiling)簡單來說是可透過參數決定程式區段是否要編譯,舉個簡單例子,在程式開發時的debug code,這些code在發佈時用不到,多了只會佔資源,這時就可用條件式編譯做個開關,在發佈時排除程式碼,且這些code也不會編至swf,所以即使反編譯也看不到,算是簡單的防護,重點是在管理專案上很方便。</p> <p>寫些簡單範例</p> <p><strong>在Flash使用conditional compiling</strong></p> <p>首先在要加條件的區段上加入</p><pre class="brush: js; toolbar: true;">function showMsg():void
{
CONFIG::TEST
{
trace("test is true");
return;
}
trace("test is false");
}
showMsg();
</pre>然後在Flash CS4的發佈設定->Actionscript 3設定->組態常數中加入CONFIG::TEST <p><img src="http://lh5.ggpht.com/_eS2OCKZxelI/S1RPhU2fMDI/AAAAAAAAAMc/x9Tc39sIm4k/2010_01_18_193901.png?imgmax=320" alt="2010-01-18_193901.png" height="233" width="300" /></p> <p>這段程式碼的意思為當CONFIG::TEST為true時,執行區段下的程式碼,所以範例的結果為test is true,由於有下return所以後面的程式都不會執行</p> <p><strong>在Flex下使用conditional compiling</strong></p> <p>Main.mxml
</p><pre class="brush: js; toolbar: true;"><?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:applicationComplete>
<![CDATA[
function showMsg():void
{
CONFIG::TEST
{
trace("test is true");
return;
}
trace("test is false");
}
showMsg();
]]>
</mx:applicationComplete>
</mx:Application>
</pre>到project Properties ->Flex Compiler中加入參數 -define=CONFIG::TEST,true <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoI8FjjoX1jamD7_TzTWqAEpXeJcp20zrgiBzp4v5VbDROWkFlXyeE0TpngKeX3_jnspQ2cRMgYBW7KERYMKg-MSEOH_peBHeVj1WRlQK-Vq4C0KQJ7kZydhum8tK5A8tlqk9A4tRHDls/?imgmax=400" alt="2010-01-18_195616.png" height="284" width="400" /></p> <p>輸出結果一樣為test is true</p> <p>最後反編譯檔案看一下結果,先把CONFIG::TEST設為false,讓區段的程式碼不編譯,用SWF Decompiler觀看反編譯後的結果</p><pre class="brush: js; toolbar: true;"> public function showMsg() : void
{
trace("test is false");
return;
}// end function
</pre>trace("test is true"); 確實沒有被編進去,這樣就能控管專案的程式了。 <p>參考文章:</p> <p>Flex Help:<a href="http://livedocs.adobe.com/flex/3/html/help.html?content=compilers_21.html">http://livedocs.adobe.com/flex/3/html/help.html?content=compilers_21.html</a></p> <p>Inside RIA:<a href="http://www.insideria.com/2009/10/create-cleaner-actionscript-wi.html">http://www.insideria.com/2009/10/create-cleaner-actionscript-wi.html</a></p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-84846172513774740162009-12-29T13:37:00.004+08:002009-12-29T13:47:20.299+08:00[心得]Mate的ListenerInjector<p>之前有介紹過Mate 的Event map及Model map架構,這次來講Mate的ListenerInjector 。</p> <p>同之前的 Model Map的概念,PropertyInjector能為 View注入資料,顧名思義,ListenerInjector則可為View注入監聽,在設計專案的時候,可用ListenerInjector把View的互動建立起來,建立一張 Listener Map表,明確指出事件跟View的關連,方便後期維護,且透過EventAnnouncer,在Event Map也能調用View的變化,使用起來很方便</p> <p>簡單的ListenerInjector 寫法如下</p> <p>ListenerMap.mxml</p><pre class="brush: xml; toolbar: true;">
<?xml version="1.0" encoding="utf-8"?>
<EventMap xmlns="http://mate.asfusion.com/" xmlns:mx="http://www.adobe.com/2006/mxml" >
<Injectors target="{Main}" debug="true">
<ListenerInjector eventType="{NavigateEvent.GOTO_HOME}" method="navigateStateHandler" />
<ListenerInjector eventType="{NavigateEvent.GOTO_MUSIC}" method="navigateStateHandler"/>
<ListenerInjector eventType="{NavigateEvent.GOTO_MOVIE}" method="navigateStateHandler"/>
<ListenerInjector eventType="{NavigateEvent.GOTO_PROFILE}" method="navigateStateHandler" />
</Injectors>
</EventMap>
</pre>上面的程式讓Main的View監聽導覽事件(NavigateEvent)的變化,所以在Main裡要寫一個public 的方法來接收事件,範例是用navigateStateHandler <p>Main.mxml
</p><pre class="brush: xml; toolbar: true;">
public function navigateStateHandler(event:NavigateEvent):void
{
var type:String = event.type;
switchMainState(type);
}
</pre>在設計上,如果僅是view的變化其實就可以用Listener Map來對應,如果以之前<a href="http://opensource.adobe.com/wiki/display/cairngorm/Cairngorm" target="_blank">Cairngorm</a> 的概念,View的變化要透過model的值改變,反查比較不易,用Listener Map一下就能知道那些View對應那些事件,這也是Mate依賴注入的好處 <p>Blog參照:<a href="http://waterxbread.blogspot.com/2009/06/mate-framework-part1.html" target="_blank">Mate Framework Part1</a>, <a href="http://waterxbread.blogspot.com/2009/06/mate-framework-part2.html" target="_blank">Mate Framework Part2</a></p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-47520487712085012922009-12-23T13:34:00.000+08:002009-12-23T13:34:00.779+08:00使用unity開發的 LEGO STAR WARS<p>樂高版的星際大戰,由LEGO及Three Melons所開發,整體畫面不錯,光劍也能反彈子彈,有興趣的玩家可以玩玩看</p> <p><img src="http://lh3.ggpht.com/_eS2OCKZxelI/SzGrsuhzeTI/AAAAAAAAAMA/NZO3_0NcfUo/2009_12_23_131455.png?imgmax=640" alt="2009-12-23_131455.png" height="398" width="600"/></p> <p>網址:<a href="http://starwars.lego.com/en-us/FunAndGames/CloneWars-Quest-For-R2D2.aspx">http://starwars.lego.com/en-us/FunAndGames/CloneWars-Quest-For-R2D2.aspx</a></p> <p>Three Melons:<a href="http://www.threemelons.com/">http://www.threemelons.com/</a></p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-26786630534659911662009-12-02T12:46:00.001+08:002009-12-02T12:46:52.560+08:00Flash CS5 的物理引擎<p><object xmlns="" width="425" height="344"><param name="movie" value="http://www.youtube.com/v/x9y-KIu69dc&color1=0xb1b1b1&color2=0xcfcfcf&hl=ru_RU&feature=player_embedded&fs=1"/><param name="wmode"/><embed xmlns="http://www.w3.org/1999/xhtml" src="http://www.youtube.com/v/x9y-KIu69dc&color1=0xb1b1b1&color2=0xcfcfcf&hl=ru_RU&feature=player_embedded&fs=1" width="425" height="344" allowscriptaccess="always" allowfullscreen="true" type="application/x-shockwave-flash"/></object></p> <p>Adobe MAX 2009中展示了CS5的物理引擎功能,相信未來的Flash動畫將更真實</p> <p>原文:<a href="http://cs5.org/?p=408">http://cs5.org/?p=408</a></p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-46327807570737204722009-11-19T13:14:00.000+08:002009-11-19T13:16:29.651+08:00在Flash中使用滑鼠右鍵<p>就結論來說,Flash 沒有任何方法可阻擋滑鼠右鍵,除了AIR可自訂右鍵外,在一般瀏覽器中的Flash右鍵一定會出現Flash選單,即使把content menu關掉。</p> <p>即然Flash Player不能阻擋右鍵,那麼換個想法,瀏覽器是否可擋滑鼠右鍵?,答案當然可行,簡單的想法就是給Flash蓋上一層看不見的元件擋掉右鍵操作,並透過Javascript把右鍵行為傳給Flash</p> <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizFQfdaZe30ef2Xi3BOIN_MzrmNCkKJ8r01IxTGGVCPDw_AkyMILf7zejhMyV9AlhHhka2Jxk7Rps-3m0MSMRuSWVVqHBkK5Aal_iqqLmGOb7yvUu5Tm92pa2hl7HGgjrl6H1XjdbZUos/?imgmax=400" alt="fig_01.jpg" height="266" width="382"/></p> <p>這個做法雖然簡單,但每個Flash都要準備一個覆蓋元件就很麻煩,另一個比較好的做法是直接監聽Flash元件,當有右鍵行為發生時,阻擋瀏覽器事件並改成Flash事件,這種做法簡潔且方便,重點是網路上已有現成的Library可用,<a href="http://www.uza.lt">www.uza.lt</a>所提供的<a href="http://code.google.com/p/custom-context-menu/" target="_blank">RightClick Library</a>就可解決這個問題,值得一提的是RightClick使用前必需把wmode改成transparent或opaque,且RightClick只會觸發右鍵行為給Flash,如果要操作Flash內的元件,可搭配MouseRollOver、stage.mouseX、stage.mouseY。</p> <p>補上一些demo:</p> <p>UZA demo:<a href="http://uza.lt/rightclick/">http://uza.lt/rightclick/</a></p> <p>Adobe captivate demo: <span style="TEXT-DECORATION: underline"><span style="COLOR: #0000ff"><a href="http://blogs.adobe.com/captivate/2009/01/Right-Click-BlogDemo.htm">http://blogs.adobe.com/captivate/2009/01/Right-Click-BlogDemo.htm</a></span></span></p> <p>Flash遊戲─快樂神仙:可使用右鍵使用道具 <a href="http://kl.linekong.com/">http://kl.linekong.com/</a></p> <p><img src="http://lh5.ggpht.com/_eS2OCKZxelI/SwTUrKM0HQI/AAAAAAAAAK8/OQ2AO_oMtLg/item_0001.JPG" alt="item.JPG" height="251" width="282"/></p> <p><br/><br/>RightClick下載:<a href="http://code.google.com/p/custom-context-menu/">http://code.google.com/p/custom-context-menu/</a></p> <p>Uza's Blog:<a href="http://www.uza.lt/">http://www.uza.lt/</a></p> <p>參考文章:<a href="http://www.adobe.com/devnet/captivate/articles/rightclick.html">http://www.adobe.com/devnet/captivate/articles/rightclick.html</a></p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-29937169573685364142009-11-19T11:45:00.000+08:002009-11-19T11:48:41.838+08:00Adobe 發佈 Flash Player 10.1 測試版,修正wmode輸入問題<p>目前Player10.1已可在<a href="http://labs.adobe.com/technologies/flashplayer10/" target="_blank">Adobe Lab</a>下載,這個版本增加了些多功能,包含Microphone的存取、多點觸碰,文字的改善等...,更多的細即可見<a href="http://www.adobe.com/devnet/logged_in/jchurch_flashplayer10.1.html">http://www.adobe.com/devnet/logged_in/jchurch_flashplayer10.1.html</a></p> <p>回到wmode,wmode輸入問題是player 9.0.124一直有的問題,在wmode設為transparent或opaque的情況下,Firefox會無法輸入中文,所幸在10.1終於修正,目前輸入法文字框雖然還不在正確的位置,但已可輸入中文了,有興趣的網友可安裝10.1後到<a href="http://www.5etdemi.com/blog/archives/2005/06/firefox-wmodetransparent-is-completely-screwy-and-breaks-textfields/" target="_blank">這頁</a>進行測試</p> <p>FF womode issue:<a href="http://bugs.adobe.com/jira/browse/FP-501?actionOrder=desc">http://bugs.adobe.com/jira/browse/FP-501?actionOrder=desc</a></p> <p>Flash 10.1介紹:<a href="http://www.adobe.com/devnet/logged_in/jchurch_flashplayer10.1.html">http://www.adobe.com/devnet/logged_in/jchurch_flashplayer10.1.html</a></p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-20736900346737738712009-11-11T13:35:00.000+08:002011-05-24T04:25:24.660+08:00Flex Logger的Firebug target<p>之前有介紹過Flex Logger跟<a href="http://code.google.com/p/flash-thunderbolt/" target="_parent">ThunderBolt</a> 這兩個Logging Framework,雖然Flex原生的就很好用,但Flex只提供trace Target,不像Thoundbolt有Firebug支援,為了開發方便,筆者寫了一個Flex Logger用的Firebug Target,有興趣可以參考</p>
<p><br/></p>
<pre class="brush:as3;">
package idv.gd.utils.logging
{
import flash.external.ExternalInterface;
import flash.system.Capabilities;
import mx.core.mx_internal;
import mx.logging.LogEvent;
import mx.logging.LogEventLevel;
import mx.logging.targets.LineFormattedTarget;
use namespace mx_internal;
/**
* firebug專用 log target
* @author GD
*
*/
public class FirebugTarget extends LineFormattedTarget
{
private var formattedMessage:String;
public function FirebugTarget()
{
super();
}
/**
* 取得格式化後的lineFormatted message (內部method)
* @param message
*
*/
override mx_internal function internalLog(message:String):void
{
formattedMessage = message;
}
/**
* 送出訊息給Firebug
* @param event
*
*/
override public function logEvent(event:LogEvent):void
{
super.logEvent(event);
var message:String = formattedMessage;
if (ExternalInterface.available)
{
var level:int = event.level;
switch (level)
{
case LogEventLevel.DEBUG:
{
ExternalInterface.call("console.debug", message);
break;
}
case LogEventLevel.ERROR:
case LogEventLevel.FATAL:
{
ExternalInterface.call("console.error", message);
break;
}
case LogEventLevel.INFO:
{
ExternalInterface.call("console.info", message);
break;
}
case LogEventLevel.WARN:
{
ExternalInterface.call("console.warn", message);
break;
}
default:
{
ExternalInterface.call("console.log", message);
break;
}
}
}
//保留trace
trace(message);
}
</pre>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-19568798649561850842009-10-15T13:15:00.000+08:002009-11-11T13:34:26.813+08:00[推薦] 一些好用的Flash Library<p>先整理上來,持續更新</p> <table cellpadding="5" width="680" cellspacing="0" border="1"> <tbody> <tr> <td width="117" style="TEXT-ALIGN: center"><strong>分類</strong></td> <td width="133" style="TEXT-ALIGN: center"><strong>名稱</strong></td> <td width="257" style="TEXT-ALIGN: center"><strong>說明</strong></td> <td width="163" style="TEXT-ALIGN: center"><strong>Blog</strong> <strong>文章</strong></td> </tr> <tr> <td rowspan="2" valign="top">Tweener引擎</td> <td valign="top"><a href="http://blog.greensock.com/tweenmaxas3" target="_parent">TweenMax</a></td> <td valign="top">Tweener工具,支援貝茲</td> <td valign="top"/> </tr> <tr> <td valign="top"><a href="http://gskinner.com/libraries/gtween/" target="_parent">gTween</a></td> <td valign="top">Tweener工具,用法同AS3事件驅動,有Proxy等好用屬性</td> <td valign="top"/> </tr> <tr> <td rowspan="3" valign="top">物理引擎</td> <td valign="top"><a href="http://box2dflash.sourceforge.net/" target="_parent">Box2DFlashAS3</a></td> <td valign="top">非常強大的2D物理引擎,支援IK</td> <td valign="top"><a href="http://waterxbread.blogspot.com/2009/04/pv3d-box2d-ik.html" target="_blank">[練習]PV3D + BOX2D + IK</a></td> </tr> <tr> <td valign="top"><a href="http://www.cove.org/ape/" target="_parent">APE</a></td> <td valign="top">簡易的2D物理引擎,有限的形狀</td> <td valign="top"/> </tr> <tr> <td valign="top"><a href="http://code.google.com/p/jiglibflash/" target="_parent">jiglibflash</a></td> <td valign="top">3D物理引擎,支援不規則mesh</td> <td valign="top"><a href="http://waterxbread.blogspot.com/2009/04/3d-jiglibflash.html" target="_blank">[練習]3D物理引擎jiglibflash</a></td> </tr> <tr> <td valign="top">增強現實</td> <td valign="top"><a href="http://saqoosha.net/en/" target="_parent">FLART Toolkit</a></td> <td valign="top">增強現實(AR)工具,可透過Camera及圖標計算3D物件位置</td> <td valign="top"/> </tr> <tr> <td rowspan="2" valign="top">粒子引擎</td> <td valign="top"><a href="http://code.google.com/p/emitter/" target="_parent">Emitter</a></td> <td valign="top">粒子特效引擎</td> <td valign="top"/> </tr> <tr> <td valign="top"><a href="http://code.google.com/p/flint-particle-system/" target="_parent">Flint</a></td> <td valign="top">開源的粒子引擎</td> <td valign="top"/> </tr> <tr> <td rowspan="6" valign="top">除錯工具</td> <td valign="top"><a href="http://code.google.com/p/as3flexunitlib/" target="_parent">as3flexunit</a></td> <td valign="top">Flex Framework 單元測試工具</td> <td valign="top"/> </tr> <tr> <td valign="top"><a href="http://asunit.org/" target="_parent">asunit</a></td> <td valign="top">Flash 單元測試工具</td> <td valign="top"/> </tr> <tr> <td valign="top"><a href="http://code.google.com/p/flexcover/" target="_parent">FlexCover</a></td> <td valign="top">Flex的程式碼覆蓋率工具,搭配unit test使用</td> <td valign="top"/> </tr> <tr> <td valign="top"><a href="http://code.google.com/p/flexmonkey/" target="_parent">flexMonkey</a></td> <td valign="top">Flex UI測試工具</td> <td valign="top"><a href="http://waterxbread.blogspot.com/2009/09/flex-uiflexmonkey.html" target="_blank">Flex UI測試工具</a></td> </tr> <tr> <td valign="top"><a href="http://code.google.com/p/flash-thunderbolt/" target="_parent">ThunderBolt</a></td> <td valign="top">輕量的Logging Framework</td> <td valign="top"><a href="http://waterxbread.blogspot.com/2009/05/thunderbolt-logging-framework.html" target="_blank">輕量級的Logging Framework</a></td> </tr> <tr> <td valign="top"><a href="http://demonsterdebugger.com/" target="_parent">monsterdebugger</a></td> <td valign="top">Flash-debug工具</td> <td valign="top"/> </tr> <tr> <td rowspan="2" valign="top">PDF</td> <td valign="top"><a href="http://www.alivepdf.org/" target="_parent">alivepdf</a></td> <td valign="top">PDF文件產生工具</td> <td valign="top"><a href="http://waterxbread.blogspot.com/2009/07/flash-pdf.html" target="_blank">[心得]使用Flash 操作PDF</a></td> </tr> <tr> <td valign="top"><a href="http://code.google.com/p/pavo/" target="_parent">pavo</a></td> <td valign="top">PDF文件解析,能取出PDF內的文字</td> <td valign="top"><a href="http://waterxbread.blogspot.com/2009/07/flash-pdf.html" target="_blank">[心得]使用Flash 操作PDF</a></td> </tr> <tr> <td rowspan="2" valign="top">網路服務</td> <td valign="top"><a href="http://code.google.com/p/facebook-actionscript-api/" target="_parent">FacebookASAPI</a></td> <td valign="top">Facebook API的Actionscript版本</td> <td valign="top"/> </tr> <tr> <td valign="top"><a href="http://code.google.com/intl/zh-TW/apis/maps/documentation/flash/" target="_parent">GoogleMap</a></td> <td valign="top">GoogleMap的Actionscript版本</td> <td valign="top"><a href="http://waterxbread.blogspot.com/2009/04/google-map-api_29.html" target="_blank">[練習] Google Map API</a></td> </tr> <tr> <td valign="top">網路相關</td> <td valign="top"><a href="http://code.google.com/p/bulk-loader/" target="_parent">bulk-loader</a></td> <td valign="top">多重載入工具</td> <td valign="top"/> </tr> <tr> <td rowspan="3" valign="top">其它</td> <td valign="top"><a href="http://www.asual.com/swfaddress/" target="_parent">SWFAddress</a></td> <td valign="top">Flash Deep link工具,可讓Flash做出網址切換</td> <td valign="top"/> </tr> <tr> <td valign="top"><a href="http://code.google.com/p/swfobject/" target="_parent">SWFObject</a></td> <td valign="top">Flash網頁嵌入用工具,這個工具在新版的FlashBuilder取代了Adobe原本的嵌入機制</td> <td valign="top"/> </tr> <tr> <td valign="top"><a href="http://code.google.com/p/as3corelib/" target="_parent">as3corelib</a></td> <td valign="top">Adobe開發人員所釋出的一些utils,可用來彌補Flash API的不足</td> <td valign="top"/> </tr> <tr> <td rowspan="2" valign="top">JPEGEncoder</td> <td valign="top"><a href="http://www.bytearray.org/wp-content/projects/fastjpeg/JPEGEncoder.as" target="_blank">Flash10 JPEGEncoder</a></td> <td valign="top"><a href="http://www.bytearray.org/?p=775" target="_blank">ByteArray.org</a>所釋出的Flash10 JPEGEncoder,有利用Flash10的語法做最佳化</td> <td valign="top"/> </tr> <tr> <td valign="top"><a href="http://segfaultlabs.com/swf/alchemy/alchemyJpegUpdate_sv/source/libs/jpegencoder.swc" target="_blank">Achemy JPEGEncoder</a></td> <td valign="top"> <p>利用Achemy編譯的JPEGEncoder,這也是筆者目前看到最快的JPEGEncoder,可參考原作者的<a href="http://segfaultlabs.com/blog/post/asynchronous-jpeg-encoding" target="_blank">比較</a></p> </td> <td valign="top"/> </tr> </tbody> </table>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-73469595902585758412009-10-06T10:34:00.000+08:002009-10-06T10:36:33.787+08:00手機上的Flash 10<p>Adobe目前已把手機上的Flash版本推向第10版,跟桌上的Flash版本相同,以後PC上開發的Flash程式手機將都可支援(包括Flex、Papervision3D等...),當然效能會是個問題,不過Adobe有持續在改善</p> <p>另外iPhone不是以Flash Player的方式支援,Apple似乎還是不讓Flash上iPhone,所以Adobe目前是改用Standalone Application的方式來支援,簡單來說每個SWF會被編譯成iPhone native application,使Flash可放在iPhone的app store。</p> <p><strong>Flash10 on iPhone:</strong> <br/><a href="http://www.youtube.com/watch?v=kusXgPAmMLw" onclick="return false;" title="http://www.youtube.com/watch?v=kusXgPAmMLw">http://www.youtube.com/watch?v=kusXgPAmMLw</a></p> <p><strong>Flash10 on palm pre:</strong> <br/><a href="http://www.youtube.com/watch?v=V0RoQ6t1g9c" onclick="return false;" title="http://www.youtube.com/watch?v=V0RoQ6t1g9c">http://www.youtube.com/watch?v=V0RoQ6t1g9c</a></p> <p><strong>Flash10 on windows mobile:</strong> <br/><a href="http://www.youtube.com/watch?v=i2RqQMzobsI" onclick="return false;" title="http://www.youtube.com/watch?v=i2RqQMzobsI">http://www.youtube.com/watch?v=i2RqQMzobsI</a></p> <p><strong>Flash10 on Android phone:</strong> <br/><a href="http://www.youtube.com/watch?v=xuTQD08hYFs" onclick="return false;" title="http://www.youtube.com/watch?v=xuTQD08hYFs">http://www.youtube.com/watch?v=xuTQD08hYFs</a></p> <p><strong>Flash10 on Skyfire browser for Nokia Symbian OS:</strong> <br/><a href="http://www.youtube.com/watch?v=kESdESjyOdA" onclick="return false;" title="http://www.youtube.com/watch?v=kESdESjyOdA">http://www.youtube.com/watch?v=kESdESjyOdA</a></p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-91310866953148260732009-09-22T19:11:00.000+08:002009-10-06T10:39:32.637+08:00Adobe Flash CS5現身<p>Adobe的更新速度愈來愈快了,CS4還沒用熟CS5的消息就出來了,雖然這也是好事,不過對企業來說又是一筆升級費...。</p> <p>這次Flash CS5加強了程式編輯,加了code hit及Snippet,這真的是早該加的,以後在Flash寫程式就不會那麼痛苦,另外FlashCS5又整合了FlashBuilder,加強了程式的開發。</p> <p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE0m2x3wmobg4g1mCkzyLH6HmeH6IJ5sAx6IoF-cGWNH9xtOP9VxSpbPNbVWyTdKe_gDwGYi1Peyaipm7q1n3wEILUWc0nv7yekcKq9q5Eo4jbeqbOvgXM8pFnNsOjPQxluVvdmz55134/?imgmax=640" alt="2009-09-22_191017.png" height="339" width="600"/></p> <p>Flash CS5 Beta將在今年年底前發佈,期待CS5的新功能</p> <p>相關網站:</p> <p><a href="http://cs5.org/">http://cs5.org/</a></p> <p><a href="http://www.flashmagazine.com/news/detail/adobe_flash_cs5_sneaks_from_fotb09/">http://www.flashmagazine.com/news/detail/adobe_flash_cs5_sneaks_from_fotb09/</a></p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0tag:blogger.com,1999:blog-7188290487158961538.post-86395441254368540712009-09-21T19:40:00.000+08:002009-09-21T19:40:00.131+08:00Flex UI測試工具:FlexMonkey<p><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh16oqGqgmWEO4laKVNJB3sGICVCy98kc-fxBmxUkyCc0vXAf-6mwmqwudOxVg1pji6zvsxiyaa1xTAzw6SbRVGj0ffR_L6h2JAzVty-gljvxrzCEnZ_l6-KOlxmQI1HF4vPkk_7GN_-ok/?imgmax=640" alt="2009-09-21_185920.png" height="210" width="600"/></p> <p>FlexMonkey是專門給Flex的UI測試工具(AIR),他可記錄Flex的元件操作,並像播放的方式重播,這可用在冗長的UI操作、Click等動作,最後再驗證結果是否符合預期。</p> <p>雖然FlexMonkey非常好用但在複雜的事件機置似乎仍有問題,像是Mate Framework,可能FlexMonkey也是用Describetype等方式反監聽Flex元件,但在Mate由於多了EventMap介入,FlexMonkey一直不能正常運行,即使簡單的Mate專案也會有問題,這點是比較令人覺得可惜的</p> <p>Google Code:<a href="http://code.google.com/p/flexmonkey/">http://code.google.com/p/flexmonkey/</a></p> <p>網站:<a href="http://flexmonkey.gorillalogic.com/gl/stuff.flexmonkey.html">http://flexmonkey.gorillalogic.com/gl/stuff.flexmonkey.html</a></p>GDhttp://www.blogger.com/profile/01802338680303841518noreply@blogger.com0