邦邦的部落格

Flash 匯出連續 PNG 圖檔

2012-01-04T18:35:00.001+08:00

需要將 MovieClip 的影格，以連續圖檔的方式匯出使用，懶得自己寫 JSFL，找了幾篇文章：

Batch image exporting from .fla
http://journal.reallyenglish.com/2010/01/30/batch-image-exporting-from-fla.html

JSFL for Exporting Layers as Individual PNGs
http://summitprojectsflashblog.wordpress.com/2008/11/03/jsfl-for-exporting-layers-as-individual-pngs/

Export Flash library items as PNG’s with JSFL
http://abitofcode.com/2011/11/export-flash-library-items-as-pngs-with-jsfl/

最後組出以下程式，
將主時間軸上，每個 layer 的每個 frame 都會獨自輸出一張 png 圖檔，輸出檔名是由 layer.name 與 frame 組合而成。

var doc = fl.getDocumentDOM();
var lyrs = doc.getTimeline().layers;

var len = lyrs.length;
var lyr;
var originalType;
var i;

// Get a save location.
var saveDir = fl.browseForFolderURL("Choose a folder in which to save your exported PNGs:");
if (saveDir) {
 // Get the Flash document's name, and strip off the final ".fla", and build a base name for the exported files.
 fl.outputPanel.clear();
 var docName = doc.name;
 var extensionIndex = docName.lastIndexOf(".fla");
 if (extensionIndex == docName.length - 4) {
  docName = docName.substring(0, extensionIndex);
 }
 
 // Acceptable values are "normal", "guide", "guided", "mask", "masked", and "folder".
 var originalTypes = new Array();

 // Grab all original layer types.  Need to do this before setting to guide, because otherwise a mask layer turned
 // to guide would would turn a masked layer into a normal layer.
 for (i=0; i < len; i++) {
  lyr = lyrs[i];
  originalTypes[i] = lyr.layerType;
 };

 // Guide all layers.
 for (i=0; i < len; i++) {
  lyr = lyrs[i];
  lyr.layerType = "guide";
  lyr.visible = false;
 };

 var tl = doc.getTimeline();
 var frameCount = tl.frameCount;

 // Save layers that were originally "normal" as PNGs, one-by-one.
 for (i=0; i < len; i++) {
  lyr = lyrs[i];
  originalType = originalTypes[i]
  if (originalType == "normal" || originalType == "guided") {
   lyr.layerType = "normal";
   lyr.visible = true;
   for(var k=0; k<frameCount; k++){
    tl.currentFrame = k;
    exportPng(lyr.name + "_" + k);
   }
   lyr.layerType = "guide";
   lyr.visible = false;
  }

  // In this case, we need to loop backwards until we find the mask layer, then re-mask this layer, before we export.
  if (originalType == "masked") {
   for (var j=i; j >= 0; j--) {
    if (originalTypes[j] == "mask") {
     var maskLyrSearch = lyrs[j];
     maskLyrSearch.layerType = "mask";
     lyr.layerType = "masked";
     maskLyrSearch.visible = true;
     lyr.visible = true;
     for(var k=0; k<frameCount; k++){
      tl.currentFrame = k;
      exportPng(lyr.name + "_" + k);
     }
     maskLyrSearch.layerType = "guide";
     lyr.layerType = "guide";
     maskLyrSearch.visible = false;
     lyr.visible = false;
     break;
    }
   };
  }

 };

 // Reset all layers to their original types.
 for (i=0; i < len; i++) {
  lyr = lyrs[i];
  lyr.layerType = originalTypes[i];
  lyr.visible = true;
 };

}

function exportPng(fn) {
 var pngName = saveDir + "/" + fn + ".png";
 doc.exportPNG(pngName, true, true);
 fl.trace("Exported: " + pngName);
}

初探 Unity3D

2011-11-29T13:58:00.001+08:00

最近開始看 Unity3D，原因：

未來的藍圖中，預計會支援可輸出 Flash
開發工具，免費，除非你要用到 Pro 級功能，版本比較：http://unity3d.com/unity/licenses.html
有了視覺化開發工具，至少調整物體座標、貼圖、增加粒子引擎、設定物理碰撞...都可以輕易的達成
若要自己寫 Script，它支援 JavaScript、C#、Boo Script，雖然第三種聽都沒聽過，不過能 google 到的範例大多以 JS 寫成，上手不難
若有天想發佈到 iOS / Android 平台
Web Player 很小，就算未來對 Flash 輸出的支援程度有限制，也可考慮直接輸出 Unity3D 自己的版本，安裝 plug-in 時不用重新啟動瀏覽器，無痛

使用 SecureSocket 連接 Socket Server - Part 2

2011-11-14T18:10:00.000+08:00

繼上一篇使用 SecureSocket 連接 Socket Server 後，實際放到網路環境測試時，這才發現到，透過 SecureSocket 向 Socket Server 索取 policy file 時，也會經過編碼，所以 Socket Server 必須做些調整以支援此機制。
閱讀更多 »

FMS Stream live media over HTTP

2011-11-03T15:41:00.003+08:00

這兩天在研究 FMS 4.5，透過 HTTP 看 live stream 的作法。
閱讀更多 »

使用 SecureSocket 連接 Socket Server

2011-11-01T15:15:00.001+08:00

繼上一篇使用 SecureSocket 連接 HTTPS 後，接下來要測試的是連接 SSL Socket Server。
閱讀更多 »

使用 SecureSocket 連接 HTTPS

2011-10-31T14:43:00.000+08:00

為了研究 FP11 的 SecureSocket 功能，作了以下的測試。
閱讀更多 »

使用 Adobe AIR 2 開發 Socket Server 應用

2011-10-28T12:52:00.000+08:00

曾有一個機會，去參觀了某科大的畢展，看到學生使用 Flash 作多人連線遊戲時，使用的技術仍是透過 web server 來廣播訊息，然而 http 是 stateless，並不是真正的即時廣播，而是需要仰賴每個 flash client "定期" 向 web server 撈更新的資料來呈現。

這類的應用通常 server 端都是以 socket server 實作，你可以找 open source 的 java server，或是 Adobe Flash Media Server (FMS) 皆可，然後就可以自己撰寫 server 端的商業邏輯、遊戲引擎。然而若是你不想多學一套程式語言 (通常是 Java 或 .NET)，只想使用 ActionScript 的話，而 FMS 的 Server 開發使用 AS2 又令你覺得很不習慣的話，可以嘗試使用 Adobe AIR 2 自己寫一個 socket server。
閱讀更多 »

Flash 相關工具的開發流程

2011-10-21T07:28:00.002+08:00

提一下 Flash 相關的開發工具與搭配方式。
閱讀更多 »

初探 Robotlegs

2011-10-19T20:34:00.001+08:00

最近看了一下 robotlegs 的電子書，有興趣學習這項 framework 的人可以參考官網的資源：
http://www.robotlegs.org/

或以下這本電子書：
http://www.wowebook.pro/book/actionscript-developers-guide-to-robotlegs/

閱讀更多 »

動態切換負責廣播的 Local Connection 角色，避免受到 FPS 降低的影響

2011-10-14T01:48:00.002+08:00

前年底，曾寫了這麼一篇文章：

多 Local Connection 彼此維護名單的機制

當時的想法是，在 "一個遊戲大廳" 負責廣播訊息給 "多個遊戲桌" 的系統中，嘗試做到每個遊戲桌都可以成為替代遊戲大廳負責廣播的角色，使得遊戲大廳不必要存在。

然而，實務上，遊戲大廳通常不會只具有廣播、控管中心...的角色，有可能在視覺上仍提供其他功能給玩家，譬如遊戲列表、會員帳戶管理、其它服務...，所以沒有 "移除遊戲大廳" 的需要。

而，這兩天我正在思考一個新的 "策略"，不再考慮沒有遊戲大廳的情況，但可以考慮 "主訊息廣播者" 這個角色是否可以被變更？！

閱讀更多 »

使用 embed text 保護敏感字串

2011-10-05T18:17:00.001+08:00

若有段敏感字串，不希望當 swf 被反組譯之後被看到，可透過 embed text 的作法將之編為 ByteArray，就不是明碼了，可增加被破解的困難度。

閱讀更多 »

Obfuscate 兩個主從 SWF 後如何使用 Singleton

2011-10-03T17:59:00.000+08:00

基本上，這篇只是上一篇的延伸，最後一樣是透過 metadata 去尋找指定 method name。只不過這篇的情況又更複雜一點，當 main.swf 與 external.swf 欲使用同一個 class 的 singleton 物件時，該如何達到。

閱讀更多 »

Obfuscate 兩個主從 SWF 後，如何仍能正確執行 method

2011-09-28T08:43:00.002+08:00

在 PTT 看到一些人問起，Main.swf 載入 External.swf 後，如何呼叫 External.swf 提供的 method；或是載入之後，如何使用 External.swf 中所包含的 Class 建立物件，並且呼叫該物件所提供的 method。

閱讀更多 »

Flash Builder 4 使用 Ant 遇到 JRE heap memory 不足的處理方法

2011-09-23T11:34:00.000+08:00

若使用 Flash Builder 4.x 整合 Ant 工具，使用 flexTasks.jar 提供的 task 要編譯 Flex / AS 專案時，遇到記憶體不足的情況，只要提供 JVM 多一點 heap memory 即可。

閱讀更多 »

Robotleg 與 Obfuscator

2011-09-15T07:54:00.002+08:00

在 ActionScript Developer's Guide to Robotlegs 書中，看到一段話，Robotleg 中只要求 Custom Command 具有 execute() 方法，除非為了便利性才需要繼承自 Robotleg 的 Command 類別，Robotleg 會透過映射去執行 execute() 方法。這件事情讓我小小擔心是否 "SWF 混淆" 會造成影響。

閱讀更多 »

FlexMonkey 與 Hudson 整合進行 UI 測試

2011-08-08T02:10:00.004+08:00

這是一個複雜的演練，花了約四個小時的嘗試，得到的結果卻還有一些問題，總之先介紹今晚的過程。

FlexMonkey 我不多作介紹，它定位在為 Flex App 或 AIR App 進行 UI 測試，可進行自動化測試，觀念是先將 UI 操作錄製下來，FlexMonkey 可將一系列的動作轉成 FlexUnit AS3 code，然後就可以被 Ant 執行測試了。閱讀更多 »

Hudson 建置多專案

2011-08-05T01:29:00.001+08:00

遇到切專案、或是共用 Library 的情況，自動建置就必須由 SCM 下載多份專案後，才依照順序或依賴關係先後 build code，若是某人改壞了共用元件庫的程式，這時候就會使得其他人的專案建置失敗，CI-Server 便可以於 Daily Build 發現這個問題並通知相關 RD，隔天早上負責人便可第一時間解決，而非等其他專案負責人下次從 SCM update 共用元件庫的 code 時，才發現自己專案無法編譯。

閱讀更多 »

徵才

2011-08-02T15:32:00.002+08:00

Flash Programmer

1. 兩年以上 Flash Game 經驗
2. 熟悉 ActionScript3 語法、物件導向
3. 熟悉時間軸觀念，能與設計師討論與程式有關的動畫架構
4. 略懂 Flash 特效所需之 Open Source Libs，如 TweenLite、Box2D、Away3D…等

Flex Programmer

1. 兩年以上 Flex UI Component 客製化經驗
2. MX / Spark Component 的 Skin 開發
3. 熟悉 PureMVC

Apple App Developer

1. 熟悉 iOS SDK、Cocoa Touch Framework，並具備一年以上 iPhone/iPad 遊戲開發經驗
2. 熟悉 cocos2d
3. 有 Corona + Lua 或 Unity + C# 或 Adobe AIR + ActionScript 等相關手機遊戲開發經驗者尤佳

FlexPMD 與 Hudson

2011-08-02T00:35:00.006+08:00

Adobe Open Source 有提供 FlexPMD，它可用來檢查 AS3-base 的專案原始碼，是否存在一些潛在問題、或壞習慣。閱讀更多 »

Flash 與 Hudson

2011-07-31T23:44:00.006+08:00

7/29 剛參加完 2011 JavaTwo 活動，這次活動吸引我去聽的講題是 Hudson CI Server；今晚趁夜深人靜、沒有小孩在旁邊跑來跑去的時候，練習了一下整個環境建置過程。閱讀更多 »

使用 AS3DMod Bend Modifier 搭配 Away3D 作翻頁效果

2011-07-04T10:37:00.005+08:00

古老的翻書效果，使用三角函數硬算，決定遮罩角度，以陰影輔助產生立體感。

另一種翻書效果，使用 3D 模型、貼圖，透過 AS3DMod 來改變此模型的彎曲程度。閱讀更多 »

Binding 到 Function

2011-06-24T16:06:00.004+08:00

被問到，當 Binding 的 function 不是設計成 setter 時，當該 function 發生 change 事件時，純 AS 的程式碼該如何監聽並作反應。閱讀更多 »

自訂 Spark 版 DataGrid 的表頭外框

2011-05-11T15:49:00.007+08:00

這兩天在研究使用 Spark 版 DataGrid 換 skin 的作法，目標是 "自定表頭背景外框造型"，簡單來說就是要將表頭第一欄與最後一欄作導圓角的動作。閱讀更多 »

使用擾亂器 (ActionScript obfuscator) 要注意的事情

2011-04-08T12:12:00.003+08:00

使用擾亂器 (ActionScript obfuscator) 要注意的事情：

因為：
* package、class 名稱會被改變
* 屬性、變數、函式名稱會被改變

所以：
* 小心使用映射 Reflection
* 小心使用字串找物件的作法
* 小心 E4X 的語法
* 盡量使用強型別，避免擾亂不一致的情況閱讀更多 »

給 Flash / Flex / AS3 讀書會的 PureMVC 範例

2011-01-31T18:10:00.011+08:00

上週五，參加 PTT Flash 版版主舉辦的 Flash / Flex / AS3 讀書會，並訂定了下次聚會要討論的主題：PureMVC。

以下，我寫一個範例來概略說明 PureMVC 的用途，這個範例提供了一個 Login 輸入介面，以及成功失敗的處理。閱讀更多 »

近幾年翻過的書

2011-01-28T16:09:00.006+08:00

剛在 Amazon 上偶然發現購買紀錄，以下是我這幾年買過的 Flash / Flex / AS3 書籍：閱讀更多 »

客製化 Component 的 Skin 切換

2011-01-18T20:38:00.009+08:00

需求：
1. 有一 Component，具有兩種狀態，不同狀態下會有不同的視覺效果，
2. 可以設定此 Component 要使用的 Skin，Skin 是由美術設計提供的客製化介面，只規範了必要的 instance name，
3. 切換狀態、切換 Skin 後，同一用途的 UI 都要保持原功能，
閱讀更多 »

與 FMIS、FMLE 有關的資源

2010-07-06T17:15:00.002+08:00

記錄幾個與 Flash Media Interactive Server 錄影技術相關的連結

[自動化控制 Flash Media Live Encoder]

How to pragrammatically control Flash Encod
http://forums.adobe.com/thread/27425

How to Programmatically Control Adobe Flash Media Encoder
http://flex.sys-con.com/node/388456

Start Flash Media Live Encoder in command-line mode
http://help.adobe.com/en_US/FlashMediaLiveEncoder/3.0/Using/WS5b3ccc516d4fbf351e63e3d11c104babd5-7ffc.html

[讓 FMIS 支援 Digital Video Recorder]

Create server-side DVR application to be able to record DVR in FMS
http://stackoverflow.com/questions/805897/create-server-side-dvr-application-to-be-able-to-record-dvr-in-fms

既有的 FLA 專案改成動態載入畫面元素

2010-07-02T17:50:00.010+08:00

如果有一天，上面說，希望將現有的 Flash 介面，換掉部分元素後，賣給其他客戶。

這裡指的 "換掉部分元素"，是在不變更設計、或不影響原程式座標邏輯之下，改變顏色、風格的需求。

作法一，將整份 FLA 複製一份，改完 UI 設計，輸出！
優：最快
缺：每份 FLA 都有程式邏輯，每次異動，都要重新發佈所有 FLA

作法二，調整一些程式，動態載入要更換的元素，放在與原設計相同的座標、縮放、旋轉角度、層級中。
優：邏輯只有一份，不同的 UI 可被動態載入
缺：有一堆苦工要作，可大可小
閱讀更多 »

透過 FluorineFx 使用 Flex Remoting 與 .NET 溝通

2010-06-07T19:35:00.004+08:00

今天研究了一下透過 FluorineFx 讓 Flex 與 .NET 溝通，並找出最基本需要佈署的 FluorineFx 檔案有哪些，以下是簡單的步驟記錄：
閱讀更多 »

當然，Flex Remoting 是 Call by Value

2010-06-04T15:35:00.010+08:00

最近測試 WebORB，發現一個問題，若是 .NET 程式中，A.dll 中的 PackageA.ClassA，提供了 getB() 的 method，但是回傳物件是屬於 B.dll 中的 PackageB.ClassB 的話，當 invoke getB() 時便會發生 gateway 解析不出自定類別物件 ClassB 的情況。
閱讀更多 »

透過 WebORB 使用 Flex Remoting 與 .NET 溝通

2010-06-04T02:07:00.008+08:00

今天研究了一下透過 WebORB 讓 Flex 與 .NET 溝通，並找出最基本需要佈署的 WebORB 檔案有哪些，以下是簡單的步驟記錄：
閱讀更多 »

製作動態載入 Theme，Part 2

2010-05-05T16:38:00.005+08:00

上一篇介紹，以 Flash IDE 製作的 swf，被當作 Flex 的素材，以 css 的方式定義，並將 css 轉成 swf 讓 Flex 應用程式動態載入，程式可透過 css 取得 Class，動態建立視覺物件。
http://blog.ben.idv.tw/2010/05/flex-flash-theme.html

這篇，少掉 Flex 的架構 (雖然我是用 Flex Builder 的 ActionScript 專案在開發)，以 Flash IDE 製作的 swf 直接被當作動態載入的 Theme 資源，載入後直接由其中取出 Class，動態建立視覺物件。
閱讀更多 »

於 Flex 使用 Flash 素材，與製作動態載入 Theme

2010-05-04T02:12:00.006+08:00

最近工作上，花了很多時間在處理 Flash 與 Flex 之間的合作。

目標是，美術製作的 Flash 素材，Flex 可以直接使用，不用重新依照 Flash 的設計而在 Flex 中重新以 MXML 組合 layout；並且要能支援動態載入外部 *.swf 素材，達到切換 theme 的機制。
閱讀更多 »

XMLListCollection 的異動對於 DataGrid 的 selectedIndex 的影響

2010-04-08T19:49:00.004+08:00

今天花了很多時間在研究 "XMLListCollection 的異動對於 DataGrid 的 selectedIndex 的影響" ，寫了以下的範例程式來說明這一切，區分新增、刪除、修改資料的情況，有空想了解的人，看程式碼註解吧～
閱讀更多 »

使用 Flash CS4 製作含有 3D 座標的 swc 給 Flex Builder 3 當作素材的問題

2010-03-25T19:47:00.010+08:00

使用 Flash CS4 製作 *.swc 給 Flex Builder 3 當作素材時，遇到一個有趣的現象。
閱讀更多 »

擾亂器與 ApplicationDomain

2009-12-23T16:48:00.008+08:00

遇到一個擾亂器與 ApplicationDomain 的問題。

以下是測試程式的步驟：

1. ApplicationDomainTest.swf 載入 ExternalSWF.swf
2. 取得 ExternalSWF.swf 中的 ExternalSWF 類別
3. 因為 ExternalSWF 實作 ISwf2 介面，所以 ApplicationDomainTest 可以透過對 ISwf2 的認識，而執行 doA(ISwf1) 將自己當作參數帶入。
4. 當 ExternalSWF 的 doA(ISwf1) 被執行時，可以透過對 ISwf1 的認識，而執行 ApplicationDomainTest 的 doA(ISwf2)。
5. ApplicationDomainTest 的 doA(ISwf2) 被執行時，會在畫面上顯示 "success" 文字。
閱讀更多 »

多 Local Connection 彼此維護名單的機制

2009-12-22T11:33:00.006+08:00

有時候我們作 Local Connection 的應用時，都需要一個 "主 Flash" 負責管理有多少個 Flash 端點，我這裡說的不是只有兩個 Flash 在互相連線而已，而是多個 Flash 需要互相連線、交換資訊的情況。

這個情況可以想像是 "遊戲大廳" 與 "各遊戲" 之間的關係，不管各遊戲開開關關，只要遊戲大廳還存在，就可以負責為各遊戲之間作資料交換的工作。但假使遊戲大廳不存在呢？那麼各遊戲就都必須充當遊戲大廳的角色去認識所有其他遊戲才行。
閱讀更多 »

Away3DLite 使用 Collada

2009-11-11T19:05:00.005+08:00

Away3DLite 1.0 出一陣子了：
http://away3d.com/away3d-lite-v1-0-fastest-and-smallest-3d-engine-in-flash

號稱很小、很快，因為使用了 Flash Player 10 提供的 3D 語法，所以限制一定要使用 FP10 瀏覽才行。

以下，我作一個簡單的範例，載入一個 Collada 格式的 *.dae 模型檔案，這個 *.dae 可由各種 3D 建模軟體加上外掛輸出而成，或是像我偷懶去網路上找現成的借用一下。

Collada Test Model Bank: https://collada.org/owl/
我沒研究這個地方的版權說明，總之，借用者別用作營利用途就好～

範例原始碼：


package
{
 import away3dlite.core.base.Object3D;
 import away3dlite.loaders.Collada;
 import away3dlite.materials.WireframeMaterial;
 import away3dlite.templates.BasicTemplate;
 
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.net.URLLoader;
 import flash.net.URLRequest;

 [SWF(width=640, height=480)]
 public class Away3DLite_TestCollada extends BasicTemplate
 {
  public function Away3DLite_TestCollada()
  {
   super();
  }
  
  private const ROTATION_DY_MAX:Number = 5;
  private var rotation_dy:Number = 0;
  
  private const ROTATION_DX_MAX:Number = 5;
  private var rotation_dx:Number = 0;
  
  private var _myCollada:Object3D

  override protected function onInit():void{
   camera.z = 0;
   camera.zoom = 300;
   
   view.mouseEnabled3D = false;
   
   var loader:URLLoader = new URLLoader();
   loader.addEventListener(Event.COMPLETE, onColladaLoaded);
   loader.load(new URLRequest("collada.dae"));
  }  
  
  private function onColladaLoaded(e:Event):void{
   addColladaObj((e.currentTarget as URLLoader).data);
   
   stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
   stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel);
  }
  
  private function addColladaObj(data:*):void{
   var collada:Collada = new Collada();
   collada.material = new WireframeMaterial();
   _myCollada = collada.parseGeometry(data);
   
   scene.addChild(_myCollada);
  }
  
  private function onMouseMove(e:MouseEvent):void{
   var dmx:Number = mouseX - width/2;
   dmx = Math.min(Math.max(dmx, -width/2), width/2);
   rotation_dy = ROTATION_DY_MAX * (dmx / (width/2));
   
   var dmy:Number = mouseY - height/2;
   dmy = Math.min(Math.max(dmy, -height/2), height/2);
   rotation_dx = ROTATION_DX_MAX * (dmy / (height/2));
  }
  
  private function onMouseWheel(e:MouseEvent):void{
   camera.z += (10 * e.delta);
   camera.z = Math.min(camera.z, 0);
  }
  
  override protected function onPreRender():void{
   if(_myCollada!=null){
    _myCollada.rotationY += rotation_dy;
    _myCollada.rotationX += rotation_dx;
   }
  }
  
 }
}

載入 *.dae 後，可用滑鼠在畫面上移動，根據滑鼠 x, y 座標來使模型沿著 y 軸旋轉、x 軸旋轉，另外可用滑鼠滾輪控制 camera 的前進後退。

看效果：
http://sites.google.com/site/benrbchang/Away3DLite-Collada

Flash IDE 的遮罩在 reparentting 後的問題

2009-10-01T10:24:00.003+08:00

遇到一個問題，在 Flash IDE 中的時間軸上所設計的遮罩，若是用程式將他 reparentting 後，會導致在新的 container(該遮罩的parent) 中，所有 child index 在該遮罩之上的 display object，都會被該遮罩所遮到。

下圖是 UI 的配置，mask_mc 遮 contain_mc，在這組遮罩的上下各有一個 green_mc 與 blue_mc：

以下是程式碼，主要工作是建立一個新的 mc1 放到 MainTimeline 上，然後將 MainTimeline 上的所有 DisplayObject 都移進 mc1 中，並在動作前後都作一些 trace：


var mc1:MovieClip = new MovieClip();
mc1.name = "NewContainer";
addChild(mc1);

function traceInfo(container:DisplayObjectContainer):void{
 trace("traceInfo()", container.name);
 for(var i:int=0; i  trace(i, container.getChildAt(i).name);
 }
 trace("");
}

trace("初始時的 MainTimeline");
traceInfo(this);

for(var i:int = numChildren-1; i>=0; i--){
 var obj:DisplayObject = getChildAt(i);
 if(obj!=mc1){
  mc1.addChildAt(obj, 0);
 }
}
_mc.getC
trace("reparentting 後的 MainTimeline");
traceInfo(this);

trace("reparentting 後的 NewContainer");
traceInfo(mc1);

var yellowLine:MovieClip = new YellowLine();
yellowLine.name = "yellowLine";
mc1.addChild(yellowLine);

trace("在 NewContainer 新加入 DisplayObject 後");
traceInfo(mc1);

執行後的畫面：

從第一段 trace 可以看出，在 Flash IDE 中所設計的遮罩，從 child index 來說，mask_mc (index=1) 會在 content_mc (index=2) 的下面。

第三、四段 trace 可以看出，所有 DisplayObject 在移動前後的 child index 都是沒有改變的，但是從畫面上來看，除了 blueLine (index=0) 之外的所有 DisplayObject 都會被 mask_mc 所遮蔽，即使是最後用程式加入的 yellowLine (index=4) 也不例外。

感覺上，Flash IDE 設計的遮罩，會將 child index 在其上面的 DisplayObject 都遮蔽，或許還會有一個變數來定義遮多少個(亂猜的)，而當 reparentting 後為何會影響到所有在其上的物件，這點我還沒想出來。

正在研究 DisplayObject.mask 的相關說明，不過有可能 Flash IDE 設計的遮罩有不同的實作方式也說不一定。

酷炫新SHOW開發創意大賽

2009-09-18T15:10:00.000+08:00

Show出創意打造夢想豐富人生
酷炫新Show開發創意大賽是針對手機娛樂領域開發者所舉辦的大賽，由Sony Ericsson 開發者世界主辦，大會宗旨在提升在校大學生手機領域學習者和廣大在校手機玩家的創新性與積極性，提供展現自我的創意舞台，打造參賽者未來職場生涯之路。

見證奇蹟由此開始
Sony Ericsson開發者世界尊重每位參賽者的原創性，更重視每份參賽作品的用心﹔
獲獎者即可優先獲得Sony Ericsson北京總部研發中心的實習機會；
只是參賽”入圍者”皆可獲得Sony Ericsson開發者世界的榮譽證書；
所有入圍作品皆有機會與Sony Ericsson PlaynowTM合作，打造屬於自已的酷炫手機!

參賽得獎者皆可得到優渥的獎學金和Sony Ericsson的手機
誘人的大獎正在向你招手還在等什麼加快腳步動起來吧！

詳情請參閱活動網站
http://developer.sonyericsson.com/universityawards

活動專線：02-2516-1255#108
作品繳交期間： 2009年7月－10月20日

ActionScript 3.0 Image Effects

2009-08-07T16:07:00.006+08:00

颱風天在家裡，甚麼事情也不能做，更扯的是餐城也進不去，詭異的是我老婆可以...$%&@#，這時候只能暗自猜想 playfish 該不會將我的電腦變成拒絕往來戶了吧。既然沒有遊戲可以玩，只好趁機花點時間再繼續看看之前買的書：

ActionScript 3.0 Image Effects
http://tlsj.tenlong.com.tw/WebModule/BookSearch/bookSearchViewAction.do?isbn=1430218711&sid=50458

本書的章節如下：

1. The Drawing API

無廢話，直接快速帶過常用的 API 語法。甚至會提到 Flash Player 10 才支援的語法，譬如 Graphics 的：

copyFrom(sourceGraphics:Graphics):void

Copies all of drawing commands from the source Graphics object into the calling Graphics object.

lineBitmapStyle(bitmap:BitmapData, matrix:Matrix = null, repeat:Boolean = true, smooth:Boolean = false):void

Specifies a bitmap to use for the line stroke when drawing lines.

drawTriangles(vertices:Vector.<Number>, indices:Vector.<int> = null, uvtData:Vector.<Number> = null, culling:String = "none"):void

Renders a set of triangles, typically to distort bitmaps and give them a three-dimensional appearance.

"繪製命令" 本身也可以被當作物件來操作、管理，那要做 undo 應該就會更容易些。還有像是使用 BitmapData 當作畫線的素材，這也是之前所沒有的。至於繪製三角形組的語法，若是搭配 BitmapData 填圖的話，那就可以用來實作 3D 貼圖的效果。

2. Filters and Blend Modes

介紹大部分的 Filter 與 Blend Modes，與其他書本類似。

會提到類似這篇文章的內容：http://blog.ben.idv.tw/2008/09/convolutionfilter.html

3. Bitmaps and BitmapData

談到點陣圖、像素、位元等等的基本知識。加上搭配 ColorTransform 做一些特效變化。

4. Advanced Bitmap Manipulation

談到 BitmapData.noise()、perlinNoise()、copyChannel()，還有像是數位相機常會提供影像光譜資訊的功能：

histogram(hRect:Rectangle = null):Vector.<Vector>

Computes a 256-value binary number histogram of a BitmapData object.

接著會提到 threshold()，也就是我們會用來做 webcam 動態偵測時所需要的功能：http://blog.ben.idv.tw/2008/08/webcam.html

甚至可以用來做動態去背的機制。

另外也會再多談到幾個 photoshop 中所提供的功能要如何用 AS3 做到。

5. Pixel Bender and Shaders

帶過 Pixel Bender Toolkit 的使用，想當然不會離題太遠而提到 Pixel Bender language 的語法，然後接著就是在 AS3 中如何使用 Shader 載入 *.pbj，以及如何在 AS3 中提供 kernel 所需的參數。

6. ActionScript in the Third Dimension

很有用的章節，會先將 2.5D 解釋完，然後用一點點簡單的範例說明。

談到用 Vector3D、Matrix3D 來對每個 3D 座標作位移、距離計算等等。

因為 3D 的 z，跟實際上每個 DisplayObject 被加進 Display List 的順序所造成的 Depth 不同，所以需要 Transform 類別新加的方法來處理以計算每個 3D 的 z 換成 2D 後的大小：

getRelativeMatrix3D(relativeTo:DisplayObject):Matrix3D

Returns a Matrix3D object, which can transform the space of a specified display object in relation to the current display object's space.

然後再進行排序，以決定重新加入 Display List 的順序。

最後會提到以 BitmapData 進行 3D 貼圖的做法，也會用到 drawTriangles() 來完成。

這章節，提到不少小型 3D Engine 原理。

7. Using an Animation and Effect Library

使用以下兩組 library：

http://code.google.com/p/aeon-animation/

http://code.google.com/p/aether-effects/

比較特別的是，他有支援複合式動畫、特效的機制，使用了 Composite 設計模式，可用來製作連續動畫，將多個動畫組合起來做連續或同時播放。

以下章節還沒閱讀到，不過相信也會很精彩

8. Elemental Animation Effects

9. Text Effects

10. Video Effects

11. Sound Visualization Effects

12. Interactive Effects

非常值得推薦給需要做影像處理、特效的開發者閱讀，或是一些網路活動要針對 webcam 拍照後做特效的機制，也都可以參考本書的範例程式。

最後，補充一點，以上我貼的語法說明，是從 adobe 官網貼來的，若你手邊的 Help 檔是 Flash CS3 的話，那是不夠的，因為只支援到 Flash Player 9，一定要找有支援到 Flash Player 10 的新版 Help 才行，譬如 Flex 3.3 的 Help：

http://livedocs.adobe.com/flex/3/langref/

初探 pureMVC

2009-08-06T16:22:00.006+08:00

最近突然感覺身邊的人都在談 pureMVC，這個 framework 的目的是為了讓我們的程式功能切分乾淨：

Model 儲存資料
View 視覺、畫面
Controller 邏輯、流程控制

配合這三個基本元素，有著以下三個負責 "做事情" 的傢伙：

Proxy 負責存取 Model 的資料、取得外部資料...等
Mediator 負責對 View 作改變，以及監聽 View 的事件
Command 在 Controller 中的角色，是實作你商業邏輯的地方

而要讓這三方能 "認識" 彼此，就靠唯一的 Facade；若想要 "通知" 彼此的話，就必須送出 Notification，會由有興趣的人收到通知後進行後續的工作。

以上的概念，只要認識下面這張圖就可以了：

先對每個角色的 "位置" 有個瞭解，至於它們之間的那些 "箭頭" 表示著互通有無的關係，那就看不同的專案、每個人的經驗，來決定實務上的作法(誰可以與誰有互動)，當然最好是越單純越好，別因為大家都可以透過 Facade 取得彼此而亂來。

以下，我作一個超陽春簡單的範例：

pureMVC_Test1.as

程式進入點，在這個程式中，我進行 UI 的建立，若是你的 UI 是 Flash(*.fla) 製作，或是 Flex Builder(*.mxml) 的話，就不用像我這樣寫一堆瑣碎的程式碼。

取得 ApplicationFacade 後，透過 init() 開始進行一連串的工作。


package {
 import flash.display.SimpleButton;
 import flash.display.Sprite;
 import flash.text.TextField;
 import flash.text.TextFieldType;
 
 import idv.ben.test1.ApplicationFacade;

 public class pureMVC_Test1 extends Sprite
 {
  public var txtSearch:TextField; //輸入搜尋字串的文字欄位
  public var btnSearch:SimpleButton; //搜尋按鈕
  public var txtResult:TextField; //顯示搜尋結果的文字欄位
  
  public function pureMVC_Test1()
  {
   //初始化 UI
   initComponents();
   
   //開始叫 pureMVC 工作了
   ApplicationFacade.getInstance().init(this);
  }
  
  /**
   * 本範例的 UI 完全由程式產生，所以以下會有比較瑣碎的 UI 建立
   * 
   */  
  private function initComponents():void{
   txtSearch = new TextField();
   txtSearch.type = TextFieldType.INPUT;
   txtSearch.border = true;
   txtSearch.x = 100;
   txtSearch.y = 50;
   txtSearch.width = 200;
   txtSearch.height = 20;
   this.addChild(txtSearch);
   
   var spriteBtn:Sprite = new Sprite();
   spriteBtn.graphics.beginFill(0x999999);
   spriteBtn.graphics.drawRect(0, 0, 100, 20);
   spriteBtn.graphics.endFill();
   var txtBtn:TextField = new TextField();
   txtBtn.text = "SEARCH";
   txtBtn.width = 100;
   txtBtn.height = 20;
   spriteBtn.addChild(txtBtn);
   btnSearch = new SimpleButton(spriteBtn, spriteBtn, spriteBtn, spriteBtn);
   btnSearch.x = 100;
   btnSearch.y = 100;
   this.addChild(btnSearch);
   
   txtResult = new TextField();
   txtResult.type = TextFieldType.DYNAMIC;
   txtResult.border = true;
   txtResult.x = 100;
   txtResult.y = 150;
   txtResult.width = 200;
   txtResult.height = 20;
   this.addChild(txtResult);
  }
 }
}

ApplicationFacade.as

定義了一堆 Notification 名稱。

註冊第一個 Command，以及送出 Notification 以觸發該 Command 執行。(其實背後還包含了 Facade 去 View 中，用 Notification 找是否有對應的 Observer，才找到事先註冊的 Command)


package idv.ben.test1
{
 import idv.ben.test1.controller.InitCommand;
 
 import org.puremvc.as3.interfaces.IFacade;
 import org.puremvc.as3.patterns.facade.Facade;

 public class ApplicationFacade extends Facade implements IFacade
 {
  static public const NOTIFICATION_INIT:String = "NOTIFICATION_INIT";
  static public const NOTIFICATION_INITED:String = "NOTIFICATION_INITED";
  
  static public const NOTIFICATION_SEARCH:String = "NOTIFICATION_SEARCH";
  static public const NOTIFICATION_RESULT:String = "NOTIFICATION_RESULT";
  
  static public function getInstance():ApplicationFacade{
   if(instance==null)
    instance = new ApplicationFacade();
   return ApplicationFacade(instance);
  }
  
  /**
   * 當建立 Facade 過程中，要取得 Controller 時，會有機會讓開發者可以定義一些有的沒的
   * 
   */  
  override protected function initializeController():void{
   super.initializeController();
   
   //註冊 當 NOTIFICATION_INIT 發生時，由 InitCommand 類別來處理
   this.registerCommand(NOTIFICATION_INIT, InitCommand);
  }
  
  /**
   * 開始工作
   * @param app
   * 
   */  
  public function init(app:pureMVC_Test1):void{
   //通知 發生 NOTIFICATION_INIT
   this.sendNotification(NOTIFICATION_INIT, app);
  }
 }
}

InitCommand.as

被通知而執行 execute() 後，可以作一些其他初始化的工作，像是設定哪些 View 要由哪些 Mediator 來管理，又有哪些 Notification 可能發生，發生時要由哪個 Command 處理...等等。

作完後，再送一個 Notification 出來，這裡我用的是 NOTIFICATION_INITED。


package idv.ben.test1.controller
{
 import idv.ben.test1.ApplicationFacade;
 import idv.ben.test1.model.DataProxy;
 import idv.ben.test1.view.MainMediator;
 
 import org.puremvc.as3.interfaces.ICommand;
 import org.puremvc.as3.interfaces.INotification;
 import org.puremvc.as3.patterns.command.SimpleCommand;

 public class InitCommand extends SimpleCommand implements ICommand
 {
  public function InitCommand()
  {
   super();
  }
  
  override public function execute(notification:INotification):void
  {
   //註冊 儲存資料的物件
   this.facade.registerProxy(new DataProxy());
   
   //註冊 指定的UI 是由哪個 Mediator 負責管理
   var app:pureMVC_Test1 = pureMVC_Test1(notification.getBody());
   this.facade.registerMediator(new MainMediator(app));
   
   //註冊 當 NOTIFICATION_SEARCH 發生時，由 SearchCommand 類別來處理
   this.facade.registerCommand(ApplicationFacade.NOTIFICATION_SEARCH, SearchCommand);
   
   //通知 發生 NOTIFICATION_INITED
   this.facade.sendNotification(ApplicationFacade.NOTIFICATION_INITED);
  }
  
 }
}

若是你這時候發現，在 InitCommand 中，沒有看到我註冊負責處理 NOTIFICATION_INITED 這個 Notification 的 Command，在 ApplicationFacade 中也沒，那是誰會做對應的動作？那就繼續來看看 MainMediator.as 吧！

MainMediator.as

會 override listNotificationInterests()，目的是當他被註冊時，會要告訴 View 自己關心哪些 Notification，這樣一來當 View 要分派 Notification 時就會通知道這個 Mediator 了。

於是在 handleNotification() 中，就可以收到 NOTIFICATION_INITED 並進行一些作業。這裡我會進行畫面 UI 元素的事件監聽程式，當按下搜尋按鈕時要送出 NOTIFICATION_SEARCH 通知，將欲搜尋的關鍵字一同送出。


package idv.ben.test1.view
{
 import flash.events.MouseEvent;
 
 import idv.ben.test1.ApplicationFacade;
 import idv.ben.test1.model.DataProxy;
 
 import org.puremvc.as3.interfaces.IMediator;
 import org.puremvc.as3.interfaces.INotification;
 import org.puremvc.as3.patterns.mediator.Mediator;

 public class MainMediator extends Mediator implements IMediator
 {
  static private const MEDIATOR_NAME:String = "MainMediator";
  
  private var dataProxy:DataProxy;
  
  private function get app():pureMVC_Test1{
   return pureMVC_Test1(this.viewComponent);
  }
  
  public function MainMediator(viewComponent:Object=null)
  {
   super(MEDIATOR_NAME, viewComponent);
   
   //記住負責儲存資料的物件是誰
   dataProxy = DataProxy(this.facade.retrieveProxy(DataProxy.PROXY_NAME));
  }
  
  /**
   * 此 Mediator 關心哪些 Notification
   * @return 
   * 
   */  
  override public function listNotificationInterests():Array{
   return [ApplicationFacade.NOTIFICATION_INITED
     , ApplicationFacade.NOTIFICATION_RESULT];
  }
  
  /**
   * 當此 Mediator 關心的 Notification 發生時，分別要做哪些工作
   * @param notification
   * 
   */  
  override public function handleNotification(notification:INotification):void{
   switch(notification.getName()){
    case ApplicationFacade.NOTIFICATION_INITED:
     onNotify_inited(notification);
     break;
    case ApplicationFacade.NOTIFICATION_RESULT:
     onNotify_result(notification);
     break;
   }
  }
  
  /**
   * Facade 初始化完成時
   * 
   */  
  private function onNotify_inited(notification:INotification):void{
   setListener(true);
  }
  
  /**
   * 搜尋得到結果時
   * 
   */  
  private function onNotify_result(notification:INotification):void{
   //從 Notification 中取得搜尋結果
   app.txtResult.text = notification.getBody()["result"];
  }
  
  /**
   * 設定UI的事件處理
   * @param tf
   * 
   */  
  private function setListener(tf:Boolean):void{
   if(tf){
    app.btnSearch.addEventListener(MouseEvent.CLICK, onBtnSearchClick);
   }else{
    app.btnSearch.removeEventListener(MouseEvent.CLICK, onBtnSearchClick);
   }
  }
  
  /**
   * 按下搜尋按鈕時
   * @param e
   * 
   */  
  private function onBtnSearchClick(e:MouseEvent):void{
   var body:Object = {};
   body["keyword"] = app.txtSearch.text;
   
   //通知 發生 NOTIFICATION_SEARCH，並且將搜尋字串夾帶在 Notification 中
   this.facade.sendNotification(ApplicationFacade.NOTIFICATION_SEARCH, body);
  }
  
 }
}

回頭看看 InitCommand 中所設定的，當 NOTIFICATION_SEARCH 發生時，會由 SearchCommand 來負責處理。

SearchCommand.as

負責請 DataProxy 進行資料存取，不管該資料是來自內部或外部，反正 DataProxy 會負責搞定。


package idv.ben.test1.controller
{
 import idv.ben.test1.model.DataProxy;
 
 import org.puremvc.as3.interfaces.ICommand;
 import org.puremvc.as3.interfaces.INotification;
 import org.puremvc.as3.patterns.command.SimpleCommand;

 public class SearchCommand extends SimpleCommand implements ICommand
 {
  public function SearchCommand()
  {
   super();
  }
  
  override public function execute(notification:INotification):void
  {
   //由 Notification 中可以取得搜尋字串
   var searchString:String = notification.getBody()["keyword"];
   
   //開始搜尋
   search(searchString);
  }
  
  private function search(searchString:String):void{
   
   //透過 DataProxy 進行查詢
   var dataProxy:DataProxy = DataProxy(this.facade.retrieveProxy(DataProxy.PROXY_NAME));
   dataProxy.search(searchString);
  }
 }
}

DataProxy.as

可針對寫在程式碼中的資料作一些存取，或是向外部資源要求資料。這裡我為了測試方便，直接模擬查詢結果是現在時刻的字串。

通知 NOTIFICATION_RESULT 發生。


package idv.ben.test1.model
{
 import idv.ben.test1.ApplicationFacade;
 
 import org.puremvc.as3.interfaces.IProxy;
 import org.puremvc.as3.patterns.proxy.Proxy;

 public class DataProxy extends Proxy implements IProxy
 {
  static public const PROXY_NAME:String = "DataProxy";
  
  public function DataProxy()
  {
   super(PROXY_NAME, "");
  }
  
  public function search(searchString:String):void{
   //假設搜尋結果是此刻時間
   var result:String = (new Date()).toString();
   
   //通知 發生 NOTIFICATION_RESULT
   var body:Object = {};
   body["result"] = result;
   
   this.facade.sendNotification(ApplicationFacade.NOTIFICATION_RESULT, body);
  }
  
  
 }
}

DataProxy 只負責資料存取，不用理會查到的資料要給誰用。

這時候我們可以回到 MainMediator 看看 listNotificationInterests() 中，MainMediator 對 NOTIFICATION_RESULT 也有興趣，所以 View 就會通知 MainMediator 更新畫面。

以上，總之，每個角色只顧好自己的工作，然後通知 Facade 發生了哪些 Notification，之後自然會有事先註冊好的 Command 或 Mediator 會去執行作業。

TypeError: Error #1007: 嘗試個體化非建構函式。

2009-06-22T16:31:00.003+08:00

前兩天遇到一個非常詭異的錯誤訊息：

"TypeError: Error #1007: 嘗試個體化非建構函式。"

若用 google 去查的話，可以找到一堆與 Document Class 相關的議題，不過這次我遇到的可不是那樣的問題。事實上，我遇到的問題正如他的錯誤訊息一樣的清楚，只不過難以發覺。

以下，我先準備一個我簡化過的問題案例：

Test.fla 的 Document Class 為 Test.as


package{
 import flash.display.MovieClip;

 import a.Vector;
 
 public class Test extends MovieClip{
  
  var v:Vector = new Vector();
  
  public function Test(){
   
   trace(123, v);
   
   }
  
  }
 
 }

在這個 Test.as 中，有用到一個 package a 下的 Vector 類別：


package a{
 public class Vector{
  public function Vector(){
   trace("Vector!!");
   }
  }
 }

這個案例，若是發佈成 Flash Player 9 的話，一點問題也沒有，但若是發佈成 Flash Player 10 的話，就會出現錯誤訊息：

TypeError: Error #1007: 嘗試個體化非建構函式。
at Test()

我查了許久後，才發現問題出在那個 a.Vector，因為在 Flash Player 10 還沒推出時，Flash Player 還沒有內建 Vector 類別，所以當我們寫 var v:Vector = new Vector(); 時，可以由 import a.Vector (或 import a.*) 中找到這個 Vector 類別。可是到了 Flash Player 10 之後，會先找到的是全域類別物件 Vector，就像 String、Number 一樣，而不是我們自訂的 a.Vector 類別。

然而因為 Flash Player 10 新具備的 Vector 類別並不具有 "不帶參數的建構式"，所以就會出現 "嘗試個體化非建構函式" 的錯誤訊息啦！

如果你們家的 Flash 程式，你或前人也有從不知道哪裡找來的 Vector 類別的話，或是任何改寫自其他程式語言 (Java) 的常用類別的話，未來都很有可能遇到這種同名的衝突問題。

解決方法一，將 Test.as 改寫成：


package{
 import flash.display.MovieClip;

 import a.Vector;
 
 public class Test extends MovieClip{
  
  var v:a.Vector = new a.Vector();
  
  public function Test(){
   
   trace(123, v);
   
   }
  
  }
 
 }

使用自訂的 Vector 類別時，請明確指出完整路徑 var v:a.Vector = new a.Vector(); 即可。

解決方法二，將自訂的 Vector 類別重構一下，改名ㄅㄟ，反正現在的開發工具都很方便，重構時會協助你將所有已經使用到的程式碼都一起更新，除非你是使用 "字串轉類別" 的作法。

將文字隱藏在圖片中

2009-06-18T21:52:00.007+08:00

這兩天在研究如何將文字資訊隱藏在圖片中的技術，在 google 查了一些 "secure image sharing" 的資料，但是都沒有看到實作的方法(其實是沒有看到範例程式碼)，最後，我參考 Wiki 上關於 Steganography 的介紹：

http://en.wikipedia.org/wiki/Steganography

寫了以下的類別：

Steganography.as


package idv.ben.steganography
{
 import flash.display.BitmapData;
 import flash.geom.Point;
 
 public class Steganography
 {
  static private var __instance:Steganography;
  static public function getInstance():Steganography{
   if(__instance==null)
    __instance = new Steganography();
   return __instance;
  }
  
  private var __totalWidth:int;
  private var __totalHeight:int;
  private var __point:Point;
  
  public function Steganography()
  {
   if(__instance!=null)
    throw new Error("plz use Steganography.getInstance()");
  }
  
  public function encode(oBD:BitmapData, txt:String):BitmapData{
   var txtLen:int = txt.length;
   var txtLenLen:int = String(txtLen).length;
   
   if(oBD.width * oBD.height < txtLen + 10)
    return null;
   
   var newBD:BitmapData = oBD.clone();
   __totalWidth = newBD.width;
   __totalHeight = newBD.height;
   __point = null;
   
   var c:String;
   var p:Point;
   var newPixel:uint;
   
   //txtLenLen
   c = String(txtLenLen);
   p = getNextPoint();
   newPixel = putCharIntoPixel(c, oBD.getPixel(p.x, p.y));
   newBD.setPixel(p.x, p.y, newPixel);
   
   //txtLen
   for(var i:int=0; i<txtLenLen; i++){
    c = String(txtLen).substr(i, 1);
    p = getNextPoint();
    newPixel = putCharIntoPixel(c, oBD.getPixel(p.x, p.y));
    newBD.setPixel(p.x, p.y, newPixel);
   }
   
   //txt
   for(var j:int=0; j<txtLen; j++){
    c = txt.substr(j, 1);
    p = getNextPoint();
    newPixel = putCharIntoPixel(c, oBD.getPixel(p.x, p.y));
    newBD.setPixel(p.x, p.y, newPixel);
   }
   
   return newBD;
  }
  
  public function decode(bd:BitmapData):String{
   __totalWidth = bd.width;
   __totalHeight = bd.height;
   __point = null;
   
   var txtLenLen:int;
   var txtLen:int
   var txt:String = "";
   
   var p:Point;
   var c:String;
   
   //txtLenLen
   if(bd.width * bd.height <= 0)return "";
   p = getNextPoint();
   c = getCharFromPixel(bd.getPixel(p.x, p.y));
   txtLenLen = int(c);
   
   //txtLen
   if(bd.width * bd.height <= (1 + txtLenLen))return "";
   var strTxtLen:String = "";
   for(var i:int=0; i<txtLenLen; i++){
    p = getNextPoint();
    c = getCharFromPixel(bd.getPixel(p.x, p.y));
    strTxtLen += c;
   }
   txtLen = int(strTxtLen);
   
   //txt
   if(bd.width * bd.height <= (1 + txtLenLen + txtLen))return "";
   for(var j:int=0; j<txtLen; j++){
    p = getNextPoint();
    c = getCharFromPixel(bd.getPixel(p.x, p.y));
    txt += c;
   }
   
   return txt;
  }
  
  private function getNextPoint():Point{
   if(__point==null){
    __point = new Point(0, 0);
   }else{
    if(__point.x < __totalWidth-1){
     __point.x++;
    }else{
     __point.x = 0;
     __point.y++;
    }
   }
   return __point;
  }
  
  private function putCharIntoPixel(char:String, oPixel:uint):uint{
   var r:uint = (oPixel >> 16) & 255;
   var g:uint = (oPixel >> 8) & 255;
   var b:uint = (oPixel >> 0) & 255;
   
   var charCode:String = String(char.charCodeAt(0));
   while(charCode.length<3)
    charCode = "0" + charCode;
    
   var dr:uint = uint(charCode.substr(0, 1));
   var dg:uint = uint(charCode.substr(1, 1));
   var db:uint = uint(charCode.substr(2, 1));
   
   var r2:uint = ((r >> 4) << 4) | dr;
   var g2:uint = ((g >> 4) << 4) | dg;
   var b2:uint = ((b >> 4) << 4) | db;
   
   return r2 << 16 | g2 << 8 | b2;
  }
  
  private function getCharFromPixel(pixel:uint):String{
   var dr:uint = (pixel >> 16) & 15;
   var dg:uint = (pixel >> 8) & 15;
   var db:uint = (pixel >> 0) & 15;
   
   var charCode:String = String(dr) + String(dg) + String(db);
   var char:String = String.fromCharCode(int(charCode));
   return char;
  }
 }
}

使用範例如下，載入一張圖，並將 "Hello World!!" 的字串給隱藏進去，產生出第二張看似一樣的圖，最後再由第二張圖的 BitmapData 取出該字串。

SteganographyAS3 .as


package {
 import flash.display.Bitmap;
 import flash.display.BitmapData;
 import flash.display.Sprite;
 
 import idv.ben.steganography.Steganography;

 public class SteganographyAS3 extends Sprite
 {
  [Embed(source='../asset/IMG_3641.jpg', mimeType='image/jpeg')]
  public var Img:Class;
  
  public function SteganographyAS3()
  {
   var bmp:Bitmap = new Img() as Bitmap;
   bmp.scaleX = bmp.scaleY = 0.5;
   this.addChild(bmp);

   var msg:String = "hello world!!";   
   var newBD:BitmapData = Steganography.getInstance().encode(bmp.bitmapData, msg);
   var newBMP:Bitmap = new Bitmap(newBD);
   newBMP.x = bmp.x + bmp.width;
   newBMP.scaleX = newBMP.scaleY = 0.5;
   this.addChild(newBMP);
   
   var msg2:String = Steganography.getInstance().decode(newBMP.bitmapData);
   trace("decode=>", msg2);
  }
 }
}

執行結果，出現兩張圖，看起來沒甚麼不同，可能要將欲編入的文字資料放多一點，或許可以看到一些像素的不同吧：

將第二張圖(右邊)的 BitmapData 中隱藏的資料解出來後，trace 在 Flex Builder 的輸出視窗中：

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

[2009-06-19-13-00]

作了一個範例，完整程式碼：


package
{
 import com.adobe.images.PNGEncoder;
 
 import fl.containers.ScrollPane;
 import fl.controls.Button;
 import fl.controls.TextArea;
 
 import flash.display.Bitmap;
 import flash.display.BitmapData;
 import flash.display.Loader;
 import flash.display.MovieClip;
 import flash.events.Event;
 import flash.events.MouseEvent;
 import flash.net.FileFilter;
 import flash.net.FileReference;
 import flash.utils.ByteArray;
 import flash.utils.setTimeout;
 
 import idv.ben.steganography.Steganography;

 public class Demo2 extends MovieClip
 {
  public var btnBrowse:Button;
  public var btnEncode:Button;
  public var btnSave:Button;
  public var btnLoad:Button;
  public var btnDecode:Button;
  
  public var spImg:ScrollPane;
  public var spImg2:ScrollPane;
  
  public var txtInput:TextArea;
  public var txtOutput:TextArea;
  
  private var __fileReference:FileReference = new FileReference();
  private var __fileReference2:FileReference = new FileReference();
  
  public function Demo2()
  {
   btnBrowse.addEventListener(MouseEvent.CLICK, onBtnBrowseClick);
   btnEncode.addEventListener(MouseEvent.CLICK, onBtnEncodeClick);
   btnSave.addEventListener(MouseEvent.CLICK, onBtnSaveClick);
   btnLoad.addEventListener(MouseEvent.CLICK, onBtnLoadClick);
   btnDecode.addEventListener(MouseEvent.CLICK, onBtnDecodeClick);
   
   __fileReference.addEventListener(Event.SELECT, onFileReferenceSelect);
   __fileReference.addEventListener(Event.COMPLETE, onFileReferenceComplete);
   
   __fileReference2.addEventListener(Event.SELECT, onFileReference2Select);
   __fileReference2.addEventListener(Event.COMPLETE, onFileReference2Complete);
  }
  
  private function onBtnBrowseClick(e:MouseEvent):void{
   trace("onBtnBrowseClick()");
   
   var typeFilter:Array = [new FileFilter("Images(*.jpg;*.gif;*.png)", "*.jpg;*.gif;*.png")];
   __fileReference.browse(typeFilter);
  }
  
  private function onBtnEncodeClick(e:MouseEvent):void{
   trace("onBtnEncodeClick()");
   
   var bd:BitmapData = getEncodedBitmapData(spImg);
   if(bd == null)
    return;

   var txt:String = txtInput.text;
   
   if(txt == "")
    return;
   
   var newBD:BitmapData = Steganography.getInstance().encode(bd, txt);
   var newBMP:Bitmap = new Bitmap(newBD);
   spImg2.source = newBMP;
   setTimeout(spImg2.update, 200);
  }
  
  private function onBtnSaveClick(e:MouseEvent):void{
   trace("onBtnSaveClick()");
   
   var bd:BitmapData = getEncodedBitmapData(spImg2);
   if(bd == null)
    return;
   
   var data:ByteArray = PNGEncoder.encode(bd);
   var fr:FileReference = new FileReference();
   fr.save(data, "EncodeImage.png");
  }

  private function onBtnLoadClick(e:MouseEvent):void{
   trace("onBtnLoadClick()");
   
   var typeFilter:Array = [new FileFilter("Images(*.jpg;*.gif;*.png)", "*.jpg;*.gif;*.png")];
   __fileReference2.browse(typeFilter);
  }

  private function onBtnDecodeClick(e:MouseEvent):void{
   trace("onBtnDecodeClick()");
   
   var bd:BitmapData = getEncodedBitmapData(spImg2);
   if(bd == null)
    return;
   
   var txt:String = Steganography.getInstance().decode(bd);
   txtOutput.text = txt;
  }
  
  private function onFileReferenceSelect(e:Event):void{
   trace("onFileReferenceSelect()");
   
   __fileReference.load();
  }
  
  private function onFileReferenceComplete(e:Event):void{
   trace("onFileReferenceComplete()");
   
   var data:ByteArray = __fileReference.data;
   var loader:Loader = new Loader();
   loader.loadBytes(data);
   spImg.source = loader;
   setTimeout(spImg.update, 200);
  }
  
  private function onFileReference2Select(e:Event):void{
   trace("onFileReference2Select()");
   
   __fileReference2.load();
  }
  
  private function onFileReference2Complete(e:Event):void{
   trace("onFileReference2Complete()");
   
   var data:ByteArray = __fileReference2.data;
   var loader:Loader = new Loader();
   loader.loadBytes(data);
   spImg2.source = loader;
   setTimeout(spImg2.update, 200);
  }
  
  private function getEncodedBitmapData(sp:ScrollPane):BitmapData{
   if(sp.content == null)
    return null;
   
   var bmp:Bitmap;
   
   if(sp.content is Loader){
    if(Loader(sp.content).content == null)
     return null;
    
    bmp = Bitmap(Loader(sp.content).content);
   }else if(sp.content is Bitmap){
    bmp = Bitmap(sp.content);
   }else{
    return null;
   }
   
   return bmp.bitmapData;
  }
 }
}

操作步驟：

加密：
1. 按下 Browse 按鈕，載入原始圖片到左上角的 ScrollPane 中。
2. 在右上角的文字框中輸入欲藏入的文字 (此版不接受雙位元文字)。
3. 按下 Encode 按鈕，會將處理好後的圖片放到左下角的 ScrollPane 中。
4. 可按下 Save 按鈕將圖片存檔。

解密：
5. 按下 Load 按鈕，將內含資訊的圖片載入到左下角的 ScrollPane 中。
6. 按下 Decode 按鈕，將文字資訊從圖片中解出來到右下角的文字框中。

程式試用：

或到以下網址試用：

http://ben.rb.chang.googlepages.com/20090619_SteganographyAS3.html

以 SWC 當作素材被載入

2009-06-11T01:01:00.002+08:00

如果貴公司的 Flash 平台的開發方式也是：用 Flash IDE 製作畫面，但邏輯程式都用外部 AS Code Editor(筆記本、Flex Builder、Flash Develop...)來編輯 *.as 的話，你一定會遇到一些命名問題，在 *.as 想要使用的某些類別名稱是來自於 *.fla 中 Library 定義(匯出)的類別，當然我們可以使用 getDefinitionByName() 或其他方式來將指定字串變成想要的類別進而產生實體，不過只要一個不注意的話，就很容易出錯並 debug 到死～尤其若是有使用擾亂器(obfuscator，一種將 *.swf 內部的程式碼改變其命名、定義...等程式碼的工具，目的是讓反組譯出來的原始碼不易閱讀)的話，恐怕那更會是一個災難。

這裡有一篇文章：http://www.airtightinteractive.com/news/?p=327

他建議我們可以將 *.fla 的素材以匯出 *.swc 的方式，來提供給 flex builder 使用，這樣當 flex builder 的 AS Project 引用這些 *.swc 時，就可以正確的找到實際存在的類別名稱。

不知道若是有使用擾亂器的話，是否仍可具有相同的優勢，不過對於一般開發的話，這種做法確實應該會比較保險一點，讓 *.fla 與 *.as 能更同步一些！

使用 JSFL 列出有 Linkage 的 Symbol 列表

2009-04-07T18:04:00.008+08:00

今天被問到，如何得知 Flash IDE 中，Library 中有哪些 Symbol 有 link 到 Class。

以下，我寫了一個 JSFL 來產生這份報表。首先，先任意準備一些 Symbol，並任意設定他們的 linkage 設定：

JSFL 程式碼：


var lib = fl.getDocumentDOM().library;
var libItems = lib.items;

fl.outputPanel.clear();
fl.outputPanel.trace("symbol name\ttype\tclass\tbase class\texport in first frame");
for(var i=0; i<libItems.length; i++){
 var item = libItems[i];
 if(item.linkageExportForAS){
  fl.outputPanel.trace(item.name
    + "\t" + item.itemType
    + "\t" + item.linkageClassName
    + "\t" + item.linkageBaseClass
    + "\t" + item.linkageExportInFirstFrame);
 }
}

在 Flash IDE 執行指定的 *.jsfl 檔：

將我寫在 output 視窗的文字剪貼到 Excel 中看，比較清楚：

線上說明文件：http://livedocs.adobe.com/flash/9.0/main/wwhelp/wwhimpl/js/html/wwhelp.htm

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

[2009-04-08-17-51]

其實，寫這個工具的目的是，若是我們想要將一個舊的 Flash 的視覺全部重新設計，設計好後新的 FLA 希望能將一些與程式有關的設定資料都一一仿照舊 FLA 中的結構，像是 instance name 與 linkage class 等等，因此以下我又增加了對場景物件的列表：

JSFL：


fl.outputPanel.clear();

fl.trace("parent"
   + "\t" + "timeline"
   + "\t" + "layer"
   + "\t" + "frame"
   + "\t" + "instance type"
   + "\t" + "instance name"
   + "\t" + "pos"
   + "\t" + "symbol type"
   + "\t" + "symbol name"
   + "\t" + "class"
   + "\t" + "base class"
   + "\t" + "export in first frame"
   );

var dom = fl.getDocumentDOM();

traceContainer(null);

fl.trace("------------------------------------------------------------------");
fl.trace("symbol name"
   + "\t" + "type"
   + "\t" + "class"
   + "\t" + "base class"
   + "\t" + "export in first frame"
   );
traceLibrary();

function traceContainer(container){
 if(container!=null){
  fl.getDocumentDOM().selectNone();
  container.selected = true;
  fl.getDocumentDOM().enterEditMode("inPlace");
 }
 
 var timeline = dom.getTimeline();
 var layers, layer;
 var frames, frame;
 var elements, element;
 var libraryItem;

 var layer_locked, layer_visible;
 
 layers = timeline.layers;

 for(var idxLayer=0; idxLayer<layers.length; idxLayer++){
  layer = layers[idxLayer];
  frames = layer.frames;
  
  timeline.currentLayer = idxLayer;
  
  layer_locked = layer.locked;
  layer_visible = layer.visible;
  layer.locked = false;
  layer.visible = true;
 
  for(var idxFrame=0; idxFrame<frames.length; idxFrame++){
   frame = frames[idxFrame];
   elements = frame.elements;

   timeline.currentFrame = idxFrame;

   if(frame.startFrame == timeline.currentFrame){
    for(var idxElement=0; idxElement<elements.length; idxElement++){
     element = elements[idxElement];
  
     traceElement(container, timeline, layer, frame, element);
    
     if(element.elementType=="instance" && element.name!=""){
      traceContainer(element);
     }
    }
   }
  }
  
  layer.locked = layer_locked;
  layer.visible = layer_visible;
 }
 
 if(container!=null){
  fl.getDocumentDOM().exitEditMode();
  container.selected = false;
 }
}

function traceElement(container, timeline, layer, frame, element){
 if(element.name=="")return;
 
 var str = "";
 switch(element.elementType){
  case "shape":
  case "shapeObj":
   break;
  case "text":
  case "instance":
   str += (container==null ? "root" : container.name);
   str += '\t' + timeline.name;
   str += '\t' + layer.name;
   str += '\t' + timeline.currentFrame;
   str += '\t' + element.elementType;
   str += '\t' + element.name;
   str += '\t' + '(' + element.x + ', ' + element.y + ')';
   
   if(element.elementType=="instance"){
    libraryItem = element.libraryItem;
    
    str += '\t' + element.instanceType;
    str += '\t' + libraryItem.name;
    
    if(libraryItem.linkageExportForAS){
     str += '\t' + libraryItem.linkageClassName;
     str += '\t' + libraryItem.linkageBaseClass;
     str += '\t' + libraryItem.linkageExportInFirstFrame;
    }else{
     str += '\t\t\t';
    }
   }else{
    str += '\t\t\t\t\t';
   }
 }
 
 if(str!=""){
  fl.trace(str); 
 }
}

function traceLibrary(){
 var library = dom.library;
 var items = library.items;
 
 for(var i=0; i<items.length; i++){
  var item = items[i];
  if(item.linkageExportForAS){
   fl.trace(item.name
      + "\t" + item.itemType
      + "\t" + item.linkageClassName
      + "\t" + item.linkageBaseClass
      + "\t" + item.linkageExportInFirstFrame);
  }
 } 
}

將輸出結果放到 Excel 看：

HP 推出 SWFScan 協助分析 SWF 的安全問題(更容易 decompile?)

2009-03-27T09:24:00.004+08:00

有鑑於 SWF 的安全性問題引發很多爭議，HP Web Security Research Group 推出免費的 SWFScan 軟體，可以協助你分析你們家的 Flash Application，並提出一些安全方面的建議。

https://h30406.www3.hp.com/campaigns/2009/wwcampaign/1-5TUVE/index.php?key=swf&jumpid=go/swfscan

重要的是，他不僅僅是分析與提供報表而已，過程中理所當然的會進行 decompile，而且可以讓你看到所有 ActionScript Code，雖然不如其他 3rd party 的 decompiler 可以看到所有 symbol，但是有經驗的 AS Programmer 仍可藉此分析出許多商業邏輯。

以下，我僅隨意拿一個行銷網站的簡單 SWF 試試：

這個 SWF 的做法想必簡單，想必只運用了 Timeline 上的程式，想必是用 AS1/AS2。找時間再來測測用 AS3 製作的複雜 RIA、遊戲試試看。

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

[2009-03-27-13-46]

針對比較複雜的 SWF 測試之後，發現他還會檢查一些 keyword，告訴你哪些文字可能透露出使用者帳戶的訊息，譬如 "LOGIN"：

或是有哪些文字可能透露出與資料加密有關的訊息。

利用 LocalConnection 限制 Flash 應用程式同時間只能執行一個

2009-03-17T18:15:00.004+08:00

若是基於一些原因，你不希望你的 flash 應用程式，在同一台電腦被同時執行兩個，那麼你可以透過 LocalConnection 連線到已使用的名稱時會送出錯誤訊息，來達到這個目的。

以下，我準備一個 test.fla，其 Document Class 是 Main，而 Main.as 的程式碼如下：


package{
 import flash.display.MovieClip;
 import flash.net.LocalConnection;
 import flash.utils.getQualifiedClassName;
 
 public class Main extends MovieClip{
  private var __lcChackSingleApp:LocalConnection;
  public function Main(){
   var lcName:String = getQualifiedClassName(this);
   __lcChackSingleApp = new LocalConnection();
   try{
    __lcChackSingleApp.connect(lcName);
   }catch(e:Error){
    throw new Error("不允許同時執行兩個 flash");
    return;
   }
   
   init();
  }
  
  private function init():void{
   throw new Error("init()");
  }
 }
}

以下，我的測試畫面是直接在自己電腦用 standalone player 來開 *.swf 的效果，第一次開啟 test.swf 時，會跳出以下的 Error 訊息，表示有順利執行到 init()：

然後第一個視窗就開起完成了，然後再次按下 test.swf 嘗試開啟新的視窗，就會看到以下畫面告知錯誤訊息：

結束錯誤訊息後，也不會出現表示 init() 的訊息，證明後續的工作沒有被執行到：

實務上，當然你不會用 throw new Error() 的方式來處理，你可以使用自己想要的畫面，或是導向網頁。

這個機制，不僅可以防堵相同種類的瀏覽器，對於不同種類的瀏覽器 IE 與 FF 也一樣有效。

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

[2009-03-24-15-48]

實務上，遇到一些問題，有些人的電腦，IE 瀏覽器關閉時，雖然以為已經關閉了，但是 flash 卻好像仍未結束的樣子，通常發生在還有其他 IE 瀏覽器開啟的時候，但這種情況也不是每台電腦都可見，只有某些人的電腦會發生 IE 關不完全的情況。

這種情況，就導致了 LocalConnection 還存在，以至於新開啟的 Flash 會檢查到 LC 重複，導致無法進入。

另一種作法，當第二個 instance 開啟發現第一個 instance 的 LC 還存在的話，就用該名稱向 instance 1 溝通，要求 instance 1 進行釋放資源與結束的工作，讓 instance 2 可以進入。這種方式永遠讓後者取代前者。

免費的 Flex Builder

2009-03-09T14:06:00.002+08:00

這對一些 Flex 的開發者來說或許是個好消息，Flex Builder 可以免費取得～

http://www.eonflex.com/?p=139
http://www.digitalartsonline.co.uk/news/index.cfm?NewsID=12218

雖然這是來自英國 Adobe 的消息，但卻不限各地的 user 去索取它。

你所要做的，就是去連絡 Shorten：
email : shorten [at] adobe.com
twitter：http://twitter.com/ashorten
blog：http://www.ashorten.com/

雖然大部分的人都已經有其他方法取得 Flex Builder 了，或是採用其他的開發工具如 Visual Studio 版的 Amethyst：http://www.sapphiresteel.com/Download-Amethyst-Adobe-Flex-IDE，不過有需要的人還是可以去詢問看看。

AS3 作 3DES 編碼，與 .NET 互通資料

2009-03-07T14:22:00.005+08:00

使用 AS3 想要進行資料加密的工作時，可以參考 as3crypto：

http://code.google.com/p/as3crypto/

以及其範例：

http://crypto.hurlant.com/demo/

假設，我們要在 .NET 中將一段明碼編碼：

會得到：

Key(Base64): Lns8zSrn2h4VGb5y1NBBHPcNDGjTHjna
IV(Hex): 41b362c1231999fc
編碼結果：GAUNI2sJCx32yFiF1J0AC5YPbbXcizYl

然後將這些資料貼進 Demo 的網頁後：

按下 Decrypt，就可以解出原來的明碼 (我就不重複貼圖了)

另外一個情況是，反過來，當 Flash 透過 3DES 進行編碼後，要提供資料給 .NET 的話：

則會提供：

Key(Base64): Lns8zSrn2h4VGb5y1NBBHPcNDGjTHjna
IV(Base64): 0sqxgBNq7iA=
編碼結果：XcMt/RnEoozLmBLUpLNRTPVMjRykzDxR9wvrKV9Zwwo=

範例程式的 Key Format 下拉選單好像有點問題，無法將 Hex 資料轉成 Base64，懶得解 bug，所以這裡的 Key(Base64) 可以直接用剛剛由 .NET 產生的繼續使用即可。

IV(Base64) 的部分，因為原範例程式只有顯示 IV(Hex)，所以這部分我有修改原範例程式，多顯示一種格式的資料，便於提供給 .NET 使用。

將資料貼進 .NET 之後，按下 Decrypt 就順利解出來囉：

.NET 的原始碼，主架構可以由 MSDN 的範例找到，
http://msdn.microsoft.com/zh-tw/library/system.security.cryptography.tripledescryptoserviceprovider(VS.80).aspx

為了能編中文，所以我將原本的 ASCIIEncoding() 改為 System.Text.Encoding.UTF8。

並且設定了填補模式為 PKCS7(在 AS3 中用的是 PKCS#5，放心，有通！)：
TripleDESCryptoServiceProvider tDESalg = new TripleDESCryptoServiceProvider();
tDESalg.Padding = PaddingMode.PKCS7;

完整程式碼如下：


using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Text;
using System.Windows.Forms;

using System.Security.Cryptography;
using System.IO;

namespace TripleDES
{
    public partial class Form1 : Form
    {
        public Form1()
        {
            InitializeComponent();
        }

        private void btnEncrypt_Click(object sender, EventArgs e)
        {
            try
            {
                // Create a new TripleDESCryptoServiceProvider object
                // to generate a key and initialization vector (IV).
                TripleDESCryptoServiceProvider tDESalg = new TripleDESCryptoServiceProvider();

                // Create a string to encrypt.
                string sData = txtSource.Text;

                if (txtKey.Text == "")
                {
                    txtKey.Text = Convert.ToBase64String(tDESalg.Key);
                }
                else
                {
                    tDESalg.Key = Convert.FromBase64String(txtKey.Text);
                }

                if (txtIV.Text == "")
                {
                    txtIV.Text = Convert.ToBase64String(tDESalg.IV);
                }
                else
                {
                    tDESalg.IV = Convert.FromBase64String(txtIV.Text);
                }

                String hexIV = "";
                for (int i = 0; i < tDESalg.IV.Length; i++)
                {
                    hexIV += Convert.ToString(tDESalg.IV[i], 16);
                }
                txtIV2.Text = hexIV;

                // Encrypt the string to an in-memory buffer.
                byte[] Data = EncryptTextToMemory(sData, tDESalg.Key, tDESalg.IV);
                
                txtResult.Text = Convert.ToBase64String(Data);
            }
            catch (Exception exp)
            {
                Console.WriteLine(exp.Message);
            }

        }

        private void btnDecrypt_Click(object sender, EventArgs e)
        {
            try
            {
                
                String hexIV = txtIV2.Text;
                hexIV = System.Text.RegularExpressions.Regex.Replace(hexIV, "/\\s|:/gm", "");
                if ((hexIV.Length & 1) == 1) hexIV = "0" + hexIV;
                byte[] iv = new byte[hexIV.Length/2];
                for (int i = 0; i < iv.Length; i++) {
                    iv[i] = Convert.ToByte(hexIV.Substring(i * 2, 2), 16);
                }
                

                txtResult2.Text = DecryptTextFromMemory(Convert.FromBase64String(txtResult.Text)
                                                    , Convert.FromBase64String(txtKey.Text)
                                                    , Convert.FromBase64String(txtIV.Text));
            }
            catch (Exception exp)
            {
                Console.WriteLine(exp.Message);
            }
        }

        public static byte[] EncryptTextToMemory(string Data, byte[] Key, byte[] IV)
        {
            try
            {
                TripleDESCryptoServiceProvider tDESalg = new TripleDESCryptoServiceProvider();
                tDESalg.Padding = PaddingMode.PKCS7;


                // Create a MemoryStream.
                MemoryStream mStream = new MemoryStream();

                // Create a CryptoStream using the MemoryStream 
                // and the passed key and initialization vector (IV).
                CryptoStream cStream = new CryptoStream(mStream,
                    tDESalg.CreateEncryptor(Key, IV),
                    CryptoStreamMode.Write);

                // Convert the passed string to a byte array.
                //byte[] toEncrypt = new ASCIIEncoding().GetBytes(Data);
                byte[] toEncrypt = System.Text.Encoding.UTF8.GetBytes(Data);

                // Write the byte array to the crypto stream and flush it.
                cStream.Write(toEncrypt, 0, toEncrypt.Length);
                cStream.FlushFinalBlock();

                // Get an array of bytes from the 
                // MemoryStream that holds the 
                // encrypted data.
                byte[] ret = mStream.ToArray();

                // Close the streams.
                cStream.Close();
                mStream.Close();

                // Return the encrypted buffer.
                return ret;
            }
            catch (CryptographicException e)
            {
                Console.WriteLine("A Cryptographic error occurred: {0}", e.Message);
                return null;
            }

        }

        public static string DecryptTextFromMemory(byte[] Data, byte[] Key, byte[] IV)
        {
            try
            {
                TripleDESCryptoServiceProvider tDESalg = new TripleDESCryptoServiceProvider();
                tDESalg.Padding = PaddingMode.PKCS7;

                // Create a new MemoryStream using the passed 
                // array of encrypted data.
                MemoryStream msDecrypt = new MemoryStream(Data);

                // Create a CryptoStream using the MemoryStream 
                // and the passed key and initialization vector (IV).
                CryptoStream csDecrypt = new CryptoStream(msDecrypt,
                    tDESalg.CreateDecryptor(Key, IV),
                    CryptoStreamMode.Read);

                // Create buffer to hold the decrypted data.
                byte[] fromEncrypt = new byte[Data.Length];

                // Read the decrypted data out of the crypto stream
                // and place it into the temporary buffer.
                csDecrypt.Read(fromEncrypt, 0, fromEncrypt.Length);

                //Convert the buffer into a string and return it.
                return System.Text.Encoding.UTF8.GetString(fromEncrypt);
            }
            catch (CryptographicException e)
            {
                Console.WriteLine("A Cryptographic error occurred: {0}", e.Message);
                return null;
            }
        }

        

    }


}

至於我自己改寫的 Flex 範例，原則上只是因為在原範例中，IV 是編碼後所自動產生的，並可用於解碼，我將範例改成可以使用我們所填入文字欄位提供的 IV 值作編碼；以及上面我提過的有多顯示 IV(Base64) 的欄位。我就不再轉貼落落長的原始碼了。

將 ClassLoader 用於音效管理

2009-03-02T17:19:00.003+08:00

有了 ClassLoader 之後，可以將它用在音效的管理。

我寫了一個 SoundManager.as，裡面會用到 ClassLoader 將外部的 *.swf 載入進來，要使用的時候只要指定音效的類別名稱就可以播放了。


package
{ 
 import flash.events.Event;
 import flash.events.EventDispatcher;
 import flash.media.*;
 import flash.utils.getQualifiedClassName;
 
 public class SoundManager extends EventDispatcher
 {
  static public var SOUND_LOADED:String = "SOUND_LOADED";
  
  private var __sounds:Object = new Object();
  private var __soundClassLoaderList:Array = new Array();
  
  static private var __instance:SoundManager;
  static public function getInstance():SoundManager{
   if(__instance==null)
    __instance = new SoundManager();
   return __instance;
  } 
  public function SoundManager()
  {
   if(__instance!=null)throw new Error("please use SoundManager.getInstance()!!");
  }
  
  /**
   * 同一個存放 Sound 類別的 *.swf 只會載入一次 
   * @param soundClassLibUrl
   * 
   */  
  public function load(soundClassLibUrl:String):void{
   if(soundClassLibUrl!=null && soundClassLibUrl.length>0){
    for(var i:uint=0; i<__soundClassLoaderList.length; i++){
     if(__soundClassLoaderList[i]["url"]==soundClassLibUrl){
      dispatchEvent(new Event(SOUND_LOADED));
      return;
     }
    }
    
    var soundClassLoader:ClassLoader = new ClassLoader(soundClassLibUrl);
    soundClassLoader.addEventListener(ClassLoader.CLASS_LOADED, onClassLoaded);
    soundClassLoader.addEventListener(ClassLoader.LOAD_ERROR, onClassLoadError);
    soundClassLoader.load();
    
    __soundClassLoaderList.push({url: soundClassLibUrl, clsLoader: soundClassLoader});
    
   }else{
    dispatchEvent(new Event(SOUND_LOADED));
   }
  }
  
  /**
   * 載入 *.swf 完成 
   * @param e
   * 
   */  
  private function onClassLoaded(e:Event):void{
   dispatchEvent(new Event(SOUND_LOADED));
  } 
  
  /**
   * 載入 *.swf 失敗 
   * @param e
   * 
   */  
  private function onClassLoadError(e:Event):void{
   trace(flash.utils.getQualifiedClassName(this), "onClassLoadError()", e.toString());
  }
  
  /**
   * 去各個 Class Loader 找一遍，找出指定的 Sound Class
   * @param id
   * @return 
   * 
   */  
  private function getSound(id:String):Sound{
   var clsLoader:ClassLoader;
   var runtimeClassRef:Class;
    
   for(var i:uint=0; i<__soundClassLoaderList.length; i++){
     clsLoader = __soundClassLoaderList[i]["clsLoader"] as ClassLoader;
     runtimeClassRef = clsLoader.getClass(id);
     
     if(runtimeClassRef!=null){
      return new runtimeClassRef() as Sound;
     }
   }
   
   return null;
  }
  
  /**
   * 取得指定的 Sound Class 的物件，並存在 cache 中 
   * @param id
   * @return 
   * 
   */  
  private function getSoundObj(id:String):Object{
   if(__sounds[id]!=null){
    return __sounds[id];
   }else{
    var snd:Sound = getSound(id);
    if(snd!=null){
     var obj:Object = {};
     obj["sound"] = snd;
     obj["channel"] = null;
     obj["transform"] = new SoundTransform();
     obj["position"] = 0;
      
     __sounds[id] = obj;
     return __sounds[id];
    }
    
    return null;
   }
  }
  
  /**
   * 播放指定 Sound Class 的音效 
   * @param id
   * @param isLoop
   * 
   */  
  public function play(id:String, isLoop:Boolean=false):void{
   //log.debug("play sound", id);
   var objSound:Object = getSoundObj(id);
   if(objSound!=null){
    var loops:int = isLoop ? int.MAX_VALUE : 0;
    try{
     objSound["channel"] = (objSound["sound"] as Sound).play(objSound["position"], loops, objSound["transform"]);
     (objSound["channel"] as SoundChannel).addEventListener(Event.SOUND_COMPLETE, soundComplete);
    }catch(ae:ArgumentError){
     trace(flash.utils.getQualifiedClassName(this), "play()", id, isLoop, ae.toString());
    }
   }
  }
  
  private function soundComplete(e:Event):void{
   dispatchEvent(e);
  }
  
  /**
   * 停止指定 Sound Class 的音效 
   * @param id
   * @param isPause
   * 
   */  
  public function stop(id:String, isPause:Boolean=false):void{
   //log.debug("stop sound", id);
   var objSound:Object = getSoundObj(id);
   if(objSound!=null){
    if(objSound["channel"]!=null){
     var channel:SoundChannel = objSound["channel"] as SoundChannel;
     objSound["position"] = isPause ? channel.position : 0; //紀錄停止的地方
     channel.stop();
    }
   }
  }
  
  //===================================================================================
  
  private var __soundLists:Array = new Array();
  
  /**
   * 將多個 Sound Class 組成為一個串列音效，可以一個接一個播放 
   * @param ids
   * 
   */  
  public function playList(...ids):void{
   var sndAry:Array = new Array();
   var snd:Sound;
   
   for(var i=0; i<ids.length; i++){
    snd = getSound(ids[i]);
    if(snd!=null){
     sndAry.push(snd);
    }
   }
   
   //存放一個 sound channel 與多個 Sound 組成的陣列
   var soundList:Object = {channel: null, list: sndAry};
   __soundLists.push(soundList);
   playListObject(soundList);
  }
  
  /**
   * 播放指定的串列音效 
   * @param soundList
   * 
   */  
  private function playListObject(soundList:Object):void{
   var sndAry:Array = soundList["list"];
   if(sndAry.length>0){
    //播放串列中的下一個音效
    var snd:Sound = sndAry.splice(0, 1)[0];
    soundList["channel"] = snd.play();
    (soundList["channel"] as SoundChannel).addEventListener(Event.SOUND_COMPLETE, onPlayListSoundComplete);
   }else{
    //這個串列的音效都播完了
    for(var i:uint=0; i<__soundLists.length; i++){
     if(__soundLists[i]==soundList){
      __soundLists.splice(i, 1);
      dispatchEvent(new Event(Event.SOUND_COMPLETE)); //串列音效播放完畢
      return;
     }
    }
   }
  }
  
  /**
   * 串列音效中的某一個音效播完時，準備播下一個 
   * @param e
   * 
   */  
  private function onPlayListSoundComplete(e:Event):void{
   for(var i:uint=0; i<__soundLists.length; i++){
    if(__soundLists[i]["channel"]==(e.currentTarget as SoundChannel)){
     playListObject(__soundLists[i]); //播放串列中的下一個
     return;
    }
   }
  }

 }
}

測試方法，首先先準備一個 sound.swf，裡面在 Library 中準備兩個 *.mp3，並且匯出在第一影格，類別名稱取名 "S1" 與 "S2"。在場景畫面上不用放置任何內容。

再來，在 main.swf 的 frame 1 上寫：


var soundMgr:SoundManager = SoundManager.getInstance();   
soundMgr.addEventListener(SoundManager.SOUND_LOADED, onSoundLoaded);
soundMgr.load("sound.swf");
  
function onSoundLoaded(e:Event):void{
 soundMgr.play("S2");
}

開始測試時，就會聽到 main.swf 播放在 sound.swf 中的 "S2" 類別的音效。

若是 main.swf 的 frame 1 改寫成：


var soundMgr:SoundManager = SoundManager.getInstance();   
soundMgr.addEventListener(SoundManager.SOUND_LOADED, onSoundLoaded);
soundMgr.load("sound.swf");
  
function onSoundLoaded(e:Event):void{
 soundMgr.playList("S2", "S1");
}

則測試時，就會先播放 "S2" 類別的音效後，再接著播放 "S1" 類別的音效。

使用 ClassLoader 載入外部 swf 中的 class

2009-03-02T16:24:00.003+08:00

官方 HELP 中有段範例：

http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/system/ApplicationDomain.html#includeExamplesSummary

是談到當 main.swf 載入外部的 asset.swf 後，要使用 asset.swf 中的 Class 來動態產生物件時，要注意 ApplicationDomain 的設定。

在這個範例中最有意義的是 ClassLoader，透過這個好用的類別，你可以任意載入 *.swf，然後使用 function getClass(className:String):Class 取得在 asset.swf 中的類別，並產生物件。

我將這個 ClassLoader 類別作了一點點修改，當第一次載入完成後便會將 ByteArray 存在 cache 中，若是有不小心載入到同一個 *.swf 的話，就不會再從 server 作 request，而是從 cache 中找出之前載入過的 ByteArray 即可。


package
{
 import flash.display.Loader;
 import flash.errors.IllegalOperationError;
 import flash.events.Event;
 import flash.events.EventDispatcher;
 import flash.events.IOErrorEvent;
 import flash.events.SecurityErrorEvent;
 import flash.net.URLLoader;
 import flash.net.URLLoaderDataFormat;
 import flash.net.URLRequest;
 import flash.system.ApplicationDomain;
 import flash.system.LoaderContext;
 import flash.utils.ByteArray;

 public class ClassLoader extends EventDispatcher
 {
  public static var CLASS_LOADED:String = "classLoaded";
     public static var LOAD_ERROR:String = "loadError";
     private var loader:Loader;
     private var swfLib:String;
     private var request:URLRequest;
     private var loadedClass:Class;
     
     static private var cache:Object = new Object();
   private var lib:String;   
    
  public function ClassLoader(lib:String)
  {
   this.lib = lib;
   
   loader = new Loader();
         loader.contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);
         loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR,ioErrorHandler);
         loader.contentLoaderInfo.addEventListener(SecurityErrorEvent.SECURITY_ERROR,securityErrorHandler);
  }
  
  public function load():void {
   if(cache[lib]!=null){
    loadFromCache();
   }else{
    var urlLoader:URLLoader = new URLLoader();
    urlLoader.dataFormat = URLLoaderDataFormat.BINARY;
    urlLoader.addEventListener(Event.COMPLETE, urlLoaderComplete);
    urlLoader.load(new URLRequest(lib));
   }
     }
     
     private function urlLoaderComplete(e:Event):void{
   cache[lib] = (e.currentTarget as URLLoader).data;
   loadFromCache();
  }
  
  private function loadFromCache(){
   var ba:ByteArray = cache[lib] as ByteArray;
   
         var context:LoaderContext = new LoaderContext();
         context.applicationDomain=ApplicationDomain.currentDomain;
         
         loader.loadBytes(ba, context);
  }
 
     public function getClass(className:String):Class {
         try {
             return loader.contentLoaderInfo.applicationDomain.getDefinition(className)  as  Class;
         } catch (e:Error) {
             throw new IllegalOperationError(className + " definition not found in " + swfLib);
         }
         return null;
     }
 
     private function completeHandler(e:Event):void {
         dispatchEvent(new Event(ClassLoader.CLASS_LOADED));
     }
 
     private function ioErrorHandler(e:Event):void {
         dispatchEvent(new Event(ClassLoader.LOAD_ERROR));
     }
 
     private function securityErrorHandler(e:Event):void {
         dispatchEvent(new Event(ClassLoader.LOAD_ERROR));
     }
  
 }
}

要測試的話，可以先建立一個 asset.swf，裡面準備一個 MovieClip，放在 Library 中，設定其類別為 "MC1"，並且是 "匯出在第 1 個影格"，而場景或畫面上不用放置任何東西，基本上這個 asset.swf 的解析度或其他設定要設多少也都沒關係，因為我們真正會用到的就是那第一影格會匯出的類別們。

第二步，建一個 main.swf，在 frame 1 寫：


var clsLoader:ClassLoader = new ClassLoader("asset.swf");
clsLoader.addEventListener(ClassLoader.CLASS_LOADED, onLoaded);
clsLoader.load();

function onLoaded(e:Event):void{
 var runtimeClassRef:Class = clsLoader.getClass("MC1");
 var mc1:MovieClip = new runtimeClassRef() as MovieClip;
 addChild(mc1);
}

測試後，應該可以發現 main 有將 asset 中的 MC1 類別產生出實體，並放在場景上。

利用 ByteArray 將 SWF 重新編碼加密

2009-02-21T16:58:00.003+08:00

一篇舊文章，教如何透過 ByteArray 將 *.swf 進行自訂的編碼，使得一般人無法透過 decompiler 將該 *.swf 解出來。

文章已不存在，google cache：http://209.85.175.132/search?q=cache:JFsWjtfvv0QJ:lab.lzyy.name/blog/archives/32+swf+bytearray&hl=zh-TW&ct=clnk&cd=1&gl=tw&client=firefox-a

步驟一，隨便建立一個 swf 當作要被加密的內容檔案，怎麼做不管，假設檔名 asset.swf。

步驟二，做一個用來進行加密工作的 flash：


var ul:URLLoader = new URLLoader();
ul.dataFormat = URLLoaderDataFormat.BINARY;
ul.addEventListener(Event.COMPLETE, onComplete);
ul.load(new URLRequest("asset.swf"));

function onComplete(e:Event):void{
 var ba:ByteArray = (e.target as URLLoader).data;
 
 ba.compress(); //這裡要代換成一個複雜的加工作業
 
 var fr:FileReference = new FileReference();
 fr.save(ba, "asset_c.swf");
}

簡單來說，就是將 swf 以 binary 的方式讀入，並對 ByteArray 做些改變，再重新存成 swf 檔。這個作業當然也可能應該是由 Server 進行，至於要對 ByteArray 做甚麼樣的資料改變，都可以。

步驟三，可以用 decompiler 軟體對剛存好的 asset_c.swf 作業看看，就可以發現沒有效果，因為本質上他已經不是 swf format 了。

步驟四，另外開發一個讀取用的 flash，也就是未來真正要將 asset_c.swf 動態載入進來播放的 main.swf：


var ul:URLLoader = new URLLoader();
ul.dataFormat = URLLoaderDataFormat.BINARY;
ul.addEventListener(Event.COMPLETE, onComplete);
ul.load(new URLRequest("asset_c.swf"));

var loader:Loader = new Loader();
addChild(loader);

function onComplete(e:Event):void{
 var ba:ByteArray = (e.target as URLLoader).data;
 
 ba.uncompress(); //這裡要代換成一個複雜的加工作業
 
 loader.loadBytes(ba);
}

解密的部分，要參考加密的過程，反向進行。

不過，我想聰明如你也會知道，這個 main.swf 仍是明碼，仍能被 decompiler 給破解出來，以上這作法也就只是為了更加強破解的難度罷了，只好儘量將解密的程式隱藏的複雜一點囉，騙騙君子！

SWF Parser

2009-02-21T15:31:00.003+08:00

有一篇舊文章，連原始文章都不在了，只能靠 google cache 看到：

http://72.14.235.132/search?q=cache:OUVn3qZqmC4J:flashpanoramas.com/blog/2007/07/02/swf-parser-air-application/+swf+bytearray&hl=zh-TW&ct=clnk&cd=6&gl=tw&client=firefox-a

提到因為 ByteArray 的關係，所以其實我們在 Flash 中就可以讀取另一個 swf 的資訊，程式碼如下：


/*
Simple SWF parser
Written by Denis V. Chumakov 
http://flashpanoramas.com/blog/
Use this code without any restrictions.
*/

// log string
var parseLog:String;

// handlers for SWF tags
// for example: 
// handlers[6] = parseJPEG; 
// to set your handler for DefineBitsJPEG tag.
// you can find SWF file specifications in Google.
var handlers:Array = [];

// parse SWF file
function parseSWF(data:ByteArray) {
 parseLog = "";
 data.endian = Endian.LITTLE_ENDIAN;
 var format:String = data.readUTFBytes(3);
 var compressed:Boolean = format=="CWS";
 if (format=="FWS" || format=="CWS") {
  parseLog += "SWF version "+data.readByte();
  parseLog += ", size: "+data.readUnsignedInt();
 } else {
  parseLog += "Not a Flash file.";
  return;
 }
 data.readBytes(data);
 data.length -= 8;
 if (compressed) {
  data.uncompress();
 }
 data.position = 0;
 var frame:Array = readBox(data);
 parseLog += "\n";
 parseLog += "Width: "+Math.round((frame[1]-frame[0])/20);
 parseLog += ", height: "+Math.round((frame[3]-frame[2])/20);
 var fps_f:uint = data.readUnsignedByte();
 var fps_i:uint = data.readUnsignedByte();
 parseLog += "\n";
 parseLog += "FPS: "+(fps_i+fps_f/256);
 var count:uint = data.readUnsignedShort();
 parseLog += "\n";
 parseLog += "Total frames: "+count;
 parseLog += "\n";
 while (data.bytesAvailable) {
  readSWFTag(data);
 }
 trace(parseLog);
}

// read SWF tag and call handler if present
function readSWFTag(data:ByteArray) {
 var tag:uint = data.readUnsignedShort();
 var id:int = tag>>6;
 var size:int = tag&0x3F;
 if (size == 0x3F) {
  size = data.readUnsignedInt();
 }
 parseLog += "\n";
 parseLog += "Tag "+id;
 if (handlers[id]!=null) {
  var dump:ByteArray = new ByteArray();
  if (size!=0) {
   data.readBytes(dump,0,size);
  }
  handlers[id](tag, id, size, dump);
 } else {
  data.position += size;
 }
 parseLog += "\tsize: "+size;
}

// read compressed box format
function readBox(data:ByteArray):Array {
 var c:Array = [];
 var current:uint = data.readUnsignedByte();
 var size:uint = current>>3;
 var off:int = 3;
 for (var i:int=0; i<4; i+=1) {
  c[i] = current<<(32-off)>>(32-size);
  off -= size;
  while (off<0) {
   current = data.readUnsignedByte();
   c[i] |= off<-8?current<<(-off-8):current>>(-off-8);
   off += 8;
  }
 }
 return c;
}

var loader:URLLoader = new URLLoader();
loader.dataFormat = URLLoaderDataFormat.BINARY;
loader.addEventListener(Event.COMPLETE, loadComplete);
// load complete handler
function loadComplete(event:Event) {
 parseSWF(loader.data);
}
loader.load(new URLRequest("asset.swf"));

最後一句的 swf 檔名你自己換～

輸出結果：


SWF version 10, size: 1404
Width: 50, height: 50
FPS: 24
Total frames: 1

Tag 69 size: 4
Tag 77 size: 1284
Tag 9 size: 3
Tag 86 size: 12
Tag 83 size: 48
Tag 26 size: 6
Tag 1 size: 0
Tag 0 size: 0

其實 swf format 早已是公開的文件，有興趣的話可以自己寫一個 swf generator 或是 flash player。

時間軸預置物件的參考物件的特性

2009-02-21T12:01:00.003+08:00

遇到一個現象。

在 flash 中請像以下畫面這樣設計，在場景上放置一個叫作 m1 的 MovieClip，出現在 frame 1~10 與 frame 21~30 (第二次出現時要改變座標)：

然後 frame 1 的程式：


var n1:MovieClip = m1;

function on_EnterFrame(e:Event):void{
 trace(currentFrame, m1, n1, n1.parent, n1.x + ", " + n1.y, m1==n1);
}

addEventListener(Event.ENTER_FRAME, on_EnterFrame);

輸出時，訊息為：


2 [object MovieClip] [object MovieClip] [object MainTimeline] 58, 139 true
3 [object MovieClip] [object MovieClip] [object MainTimeline] 58, 139 true
...
...
9 [object MovieClip] [object MovieClip] [object MainTimeline] 58, 139 true
10 [object MovieClip] [object MovieClip] [object MainTimeline] 58, 139 true
11 null [object MovieClip] [object MainTimeline] 58, 139 false
12 null [object MovieClip] [object MainTimeline] 58, 139 false
...
...
19 null [object MovieClip] [object MainTimeline] 58, 139 false
20 null [object MovieClip] [object MainTimeline] 58, 139 false
21 null [object MovieClip] [object MainTimeline] 58, 139 false
22 [object MovieClip] [object MovieClip] [object MainTimeline] 58, 139 false
23 [object MovieClip] [object MovieClip] [object MainTimeline] 58, 139 false
...
...
29 [object MovieClip] [object MovieClip] [object MainTimeline] 58, 139 false
30 [object MovieClip] [object MovieClip] [object MainTimeline] 58, 139 false
31 null [object MovieClip] [object MainTimeline] 58, 139 false
32 null [object MovieClip] [object MainTimeline] 58, 139 false
...
...
39 null [object MovieClip] [object MainTimeline] 58, 139 false
40 null [object MovieClip] [object MainTimeline] 58, 139 false
1 null [object MovieClip] [object MainTimeline] 58, 139 false
...
...

我要說明的現象是：

1. 若是我們建立一個物件 n1 參考到時間軸上的預置物件 m1，當 m1 因空白影格而移除後，參考物件 n1 仍能參考到 MovieClip。

2. 參考物件 n1 的 parent 仍是參考到 Timeline。

3. 當 m1 於 frame 21 再次出現時，n1 參考到的物件仍是在 frame 1 所出現的 m1，這點可由 n1 的 x, y 座標仍維持不變得知。而且 frame 22 時的 m1==n1 也是 false。

更有意思的是，以上的測試環境是 Flash CS4 發佈成 Flash Player 9 的情況，若是發佈成 Flash Player 10 的話：


2 [object MovieClip] [object MovieClip] [object MainTimeline] 58, 139 true
3 [object MovieClip] [object MovieClip] [object MainTimeline] 58, 139 true
...
...
9 [object MovieClip] [object MovieClip] [object MainTimeline] 58, 139 true
10 [object MovieClip] [object MovieClip] [object MainTimeline] 58, 139 true
11 null [object MovieClip] null 58, 139 false
12 null [object MovieClip] null 58, 139 false
...
...
20 null [object MovieClip] null 58, 139 false
21 null [object MovieClip] null 58, 139 false
22 [object MovieClip] [object MovieClip] null 58, 139 false
23 [object MovieClip] [object MovieClip] null 58, 139 false
...
...
29 [object MovieClip] [object MovieClip] null 58, 139 false
30 [object MovieClip] [object MovieClip] null 58, 139 false
31 null [object MovieClip] null 58, 139 false
32 null [object MovieClip] null 58, 139 false
...
...
39 null [object MovieClip] null 58, 139 false
40 null [object MovieClip] null 58, 139 false
1 null [object MovieClip] null 58, 139 false

觀察到的是，當 m1 被移除時，參考物件 n1 的 parent 也同時被設為 null 了。

不論測試環境是 FP9 或 FP10，n1 都是參考到 frame 1 上的 m1，不同的是在 FP10 時，當 m1 被移除時，m1 的 parent 也會被移除，所以參考到 m1 的 n1 的 parent 就變成 null 了。

Main Document 如何在 Flash 移至指定 Frame 後做事情

2009-02-07T10:34:00.002+08:00

寫 AS3，或是說寫 Flex，或是說早先 Flash 有支援的幻燈片、簡報式、表單式的開發模式，越來越不會考量到 Timeline 的問題，都是假設 Flash 中只有一個 Frame，但是當 Flash 還是由美術設計所提供時，Timeline 對於開發人員來說就很麻煩了。

在 Main Document 類別中，若是我們寫了 gotoAndPlay("frame name") 後，想要當移至該 Frame 時就進行某些工作，譬如設定場景上的元素的初始值，這時我們只有 Event.ENTER_FRAME 事件可以協助，但是 Event.ENTER_FRAME 看來又發生得比場景上的元素載入完成來得早。

於是，我寫了以下這個程式，為了當移至指定的 Frame 後，Event.ENTER_FRAME 發生第二次時，可以呼叫我們的程式：


package aa.bb.cc.dd.utils
{
 import flash.display.MovieClip;
 import flash.events.Event;
 
 public class FrameController
 {
  private var mc:MovieClip;
  private var callback:Function;
  private var enterFrameCnt:uint;
  
  public function FrameController(mc:MovieClip){
   this.mc = mc;
   
   enterFrameCnt = 0;
  }
  
  public function gotoAndPlay(frame:Object, callback:Function):void{
   this.callback = callback;
   
   mc.addEventListener(Event.ENTER_FRAME, onEnterFrame);
   mc.gotoAndPlay(frame);
  }
  
  public function gotoAndStop(frame:Object, callback:Function):void{
   this.callback = callback;
   
   mc.addEventListener(Event.ENTER_FRAME, onEnterFrame);
   mc.gotoAndStop(frame);
  }

  private function onEnterFrame(e:Event):void{
   enterFrameCnt++;
   
   if(enterFrameCnt==2){
    callback();
    mc.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
    destroy();
   }
  }
  
  private function destroy():void{
   mc = null;
   callback = null;
   delete this;
  }
 }
}

在 Main Document 想要使用的時候：

  
  private function gotoFrameAAA():void{
   var fc:FrameController = new FrameController(this);
   fc.gotoAndStop("frame aaa", onGotoFrameAAA);
  }
  private function onGotoFrameAAA():void{
   ......
  }

尚未進行太複雜的測試，基本上，我想，別同時對同一個 MovieClip 都進行這項工作，應該無大礙，不然有可能會有某個 FrameController 會在 Event.ENTER_FRAME 發生第二次時，回呼其實你已經不想要執行的函式，因為實際上你可能已經透過第二個 FrameController 跳到別的 Frame 去了。

Flash 不同 Frame 加入的元素，Main Document 中如何得知

2009-02-07T09:40:00.005+08:00

使用 Flash IDE，程式碼卻都寫成 *.as，並且用其他開發工具(Flex Builder 或 FlashDevelop) 來開發。這種模式在美術程式切得很開的公司會遇到，因為程式開發人員不喜歡 Flash。

這時，就遇到一些問題，譬如 Main Document 的類別，如何拿到場景上的 TextField 與 Button 呢？尤其是美術設計所設計出來的 Flash 不是只有一個 Frame 的時候。當 Main Document 載入其類別時，若類別中有指定 TextField 的話，是抓不到 Frame 2 場景上的物件的。

為處理這樣的問題，我做了一個 UIManager，負責用來記錄這些場景上的元件的參考：


package aa.bb.cc.dd.ui
{
 import aa.bb.cc.dd.event.XxxBtnClickEvent;
 
 import flash.events.*;
 import flash.text.TextField;
 
 public class UIManager extends EventDispatcher
 {
  public var txtAAA:TextField;
  public var txtBBB:TextField;
  
  public var btnCCC:XxxBtn;
  public var btnDDD:XxxBtn;
  
  static private var __instance:UIManager;
  static public function getInstance():UIManager{
   if(__instance==null){
    __instance = new UIManager();
   }
   return __instance;
  }
  
  public function registerTextSprite(obj:TextSprite):void{
   obj.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
   obj.addEventListener(Event.REMOVED_FROM_STAGE, onRemoveFromStage);
  }
  
  public function registerXxxBtn(obj:XxxBtn):void{
   obj.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
   obj.addEventListener(Event.REMOVED_FROM_STAGE, onRemoveFromStage);
  }
  
  private function onAddedToStage(e:Event):void{
   if(e.target is TextSprite){
    UIManager.getInstance()[e.target.id] = e.target.txt;
   }else if(e.target is XxxBtn){
    var btn:XxxBtn = e.target as XxxBtn;
    btn.addEventListener(MouseEvent.CLICK, onXxxBtnClick);
    
    UIManager.getInstance()[e.target.id] = btn;
   }
  }
  
  private function onRemoveFromStage(e:Event):void{
   if(e.target is TextSprite){
    UIManager.getInstance()[e.target.id] = null;
   }else if(e.target is GameBtn){
    var btn:XxxBtn = e.target as XxxBtn;
    btn.removeEventListener(MouseEvent.CLICK, onXxxBtnClick);
    
    UIManager.getInstance()[e.target.id] = null;
   }
  }
  
  private function onXxxBtnClick(e:MouseEvent):void{
   this.dispatchEvent(new XxxBtnClickEvent(e.currentTarget as XxxBtn));
  }
 }
}

這個 UIManager 現在我用來協助記錄兩種類型的物件，一種是 TextField，另一種是 XxxBtn。在說明如何使用 UIManager 之前，先概述一下我的想法，我希望在 Flash 中每個想要被控制的 TextField 與 Button(實際上是 SimpleButton) 都能在當自己被加入或移出 Stage 時，對 UIManager 通知並進行相對的處理。

因為在 Flash 中，Library 中可以放的 Symbol 種類 "傳統上" 只有三種：Graphic、Button、MovieClip，不能放 TextField，所以無法為一個 TextField 指定其所連結的類別。因此在我的設計中，TextField 的做法是一個放在 MovieClip 中的 TextField(instance name 固定為 "txt")，然後再設定此 MovieClip 的連結類別即可。

所以，我設計了一個 TextSprite 的類別：


package aa.bb.cc.dd.ui
{
 import flash.display.Sprite;
 import flash.text.TextField;

 public class TextSprite extends Sprite
 {
  public var id:String;
  public var txt:TextField;
  
  public function TextSprite(id:String)
  {
   super();
   
   this.id = id;
   UIManager.getInstance().registerTextSprite(this);
  }
 }
}

接著，每個想要放在場景上的 TextField(被包在一個 MovieClip) 都需要撰寫各自的類別，繼承自 TextSprite，譬如 TextSpriteAAA：


package aa.bb.cc.dd.ui
{
 import flash.text.TextField;

 public class TextSpriteAAA extends TextSprite
 {
  public function TextSpriteAAA ()
  {
   super("txtAAA");
  }  
 }
}

目的是在建構函式中，設定這個 TextSprite 的 id，然後就會在 UIManager 中註冊這個 TextSprite 了，也就是將自己的參考提供給 UIManager 記住。

最後，在 Flash 的 Library 中的 MovieClip(帶有 instance name = "txt" 的 TextField) 的連結類別，指定為 aa.bb.cc.dd.ui.TextSpriteAAA 即可。這樣一來不管美術設計想要將這個文字欄位在哪個 Frame 放到場景上或移出場景，UIManager 都會知道了。

在 Main Document 的類別中，要使用該文字欄位時，只要判斷 UIManager 的 txtAAA 是否為 null 就可以使用了。

另外一種物件 SimpleButton，我用一個 XxxBtn 來繼承之，主要也是為了用 id 來區別是哪個按鈕，然後在 UIManager 中記錄：


package aa.bb.cc.dd.ui
{
 import flash.display.SimpleButton;

 public class XxxBtn extends SimpleButton
 {
  public var id:String;
  
  public function XxxBtn(id:String)
  {
   super();
   
   this.id = id;
   UIManager.getInstance().registerXxxBtn(this);
  }
 }
}

同樣的，場景上每個希望被控制的 Button 都要各自開發一個繼承自 XxxBtn 的類別，譬如


package aa.bb.cc.dd.ui
{
 public class XxxBtnCCC extends XxxBtn
 {
  public function XxxBtnCCC()
  {
   super("btnCCC");
  }
  
 }
}

然後 Flash 的 Library 中的 Button 指定連結為 aa.bb.cc.dd.ui.XxxBtnCCC 即可。

若是你再回頭看看 UIManager 中的程式，在 Add to Stage 時，若是物件為 XxxBtn 的話，UIManager 會監聽其 MouseEvent.CLICK 事件：


private function onAddedToStage(e:Event):void{
   if(e.target is TextSprite){
    UIManager.getInstance()[e.target.id] = e.target.txt;
   }else if(e.target is XxxBtn){
    var btn:XxxBtn = e.target as XxxBtn;
    btn.addEventListener(MouseEvent.CLICK, onXxxBtnClick);
    
    UIManager.getInstance()[e.target.id] = btn;
   }
  }

......
......

private function onXxxBtnClick(e:MouseEvent):void{
   this.dispatchEvent(new XxxBtnClickEvent(e.currentTarget as XxxBtn));
  }

然後將這個按鈕事件再以 XxxBtnClickEvent 事件送出，並將按鈕資訊(是哪個 XxxBtn 類別的 instance) 存放在 XxxBtnClickEvent 事件中，讓之後的 Main Document 類別可以接收到：


package aa.bb.cc.dd.event
{
 import aa.bb.cc.dd.ui.XxxBtn;
 
 import flash.events.Event;

 public class XxxBtnClickEvent extends Event
 {
  static public var ON_EVENT:String = "xxx btn click event";
  
  public var xxxBtn:XxxBtn;
  
  public function XxxBtnClickEvent(xxxBtn:XxxBtn)
  {
   super(XxxBtnClickEvent.ON_EVENT);
   
   this.xxxBtn= xxxBtn;
  }  
 }
}

這樣一來，在 Main Document 類別中，就可以收到這些按鈕被按下的事件，而不用理會這些按鈕是何時被加入或移除場景中了：


package {
 import aa.bb.cc.dd.event.*;
 import aa.bb.cc.dd.ui.*;
 
 import flash.display.MovieClip;
 import flash.events.*;
 
 public class Main extends MovieClip
 {

......
......
  
  private var uiMgr:UIManager;
  
  private function initComponents():void{
   uiMgr = UIManager.getInstance();
   
   uiMgr.addEventListener(XxxBtnClickEvent.ON_EVENT, onXxxBtnClick);
  }
  
  private function onXxxBtnClick(e:XxxBtnClickEvent):void{
   switch(e.xxxBtn.id){
    case "btnCCC":
     btnCCC_click();
     break;
    case "btnDDD":
     btnDDD_click();
     break;
    default:
     throw new Error("not handle xxx btn event: " + e.xxxBtn.id);
   }
  }
  
  
 }
}

以上，堪用，若需再加強，歡迎大家提點！

IE 在同一頁處理過多 Flash 時

2009-02-05T13:59:00.003+08:00

這兩天遇到一個詭異的問題，發現 IE 的 Flash Player 外掛的 bug。

需求是這樣的，若是我們希望用 Flash 作一些簡單資料的呈現，譬如 Image Viewer 或其他數字的顯示，而資料是由 HTML 在一開始建立 Flash 標籤時就帶入的。當在一頁 HTML 中，若要顯示這同樣的 swf 達到 100 個的時候，在 Firefox 可以正常顯示，但是 IE 就會發生錯誤而當掉。

假設，準備一個 demo.fla(AS3)，裡面只放一個 t1 的文字欄位，在 frame 1 的程式碼為：


var paramObj:Object = LoaderInfo(this.root.loaderInfo).parameters;
t1.text = paramObj["v1"];

用來接收來自預設參數 v1 並顯示在 t1 文字欄位中。

接下來，將輸出的 demo.htm 修改一點程式碼，讓他跑迴圈產生 100 筆：


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh_tw" lang="zh_tw">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>demo</title>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>
</head>
<body bgcolor="#ffffff">
<!-- saved from url=(0013)about:internet -->
<script language="javascript">
 if (AC_FL_RunContent == 0) {
  alert("這個頁面必須具備 AC_RunActiveContent.js。");
 } else {
  for(var i=0; i<100; i++)
  AC_FL_RunContent(
   'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0',
   'width', '100',
   'height', '50',
   'src', 'demo',
   'quality', 'high',
   'pluginspage', 'http://www.macromedia.com/go/getflashplayer',
   'align', 'middle',
   'play', 'true',
   'loop', 'true',
   'scale', 'showall',
   'wmode', 'window',
   'devicefont', 'false',
   'id', 'demo',
   'bgcolor', '#ffffff',
   'name', 'demo',
   'menu', 'true',
   'allowFullScreen', 'false',
   'allowScriptAccess','sameDomain',
   'movie', 'demo',
   'salign', '',
   'FlashVars', 'v1='+i
   ); //end AC code
 }
</script>
</body>
</html>

在 FF 可以活著跑完，IE 則會在 80 以上的次數就可能會死掉了。

於是，我想，會不會跟同一時間就要產生那麼多 Flash 有關，所以我調整了一下程式碼，另外產生 tag 的部分改用 swfobject 來做：


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh_tw" lang="zh_tw">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=big5" />
<title>demo</title>
<script type="text/javascript" src="swfobject.js"></script>
</head>
<body bgcolor="#ffffff">

<!-- saved from url=(0013)about:internet -->
<script language="javascript">
 var i=0;
 var cnt = 100;

 function createFlashTag(){
  var flashvars = {v1:i};
  var params = {};
  var attributes = {};
  swfobject.embedSWF("demo.swf", "div" + i, "100", "50", "9.0.0", false, flashvars, params, attributes);

  i++;
  if(i<cnt)
   setTimeout(createFlashTag, 50);
 }

 for(var j=0; j<cnt; j++)
  document.write("<div id='div" + j + "'></div>");

 createFlashTag();

</script>

</body>
</html>

結果還是一樣，IE 跑到 95 筆左右時，就跳錯誤訊息死當了。

在還沒研究出問題原因之前，我只能先歸咎是 IE 的問題，設計時儘量避免在同一頁面用那麼多 Flash 來表現。

Google Weather API

2009-01-13T11:00:00.002+08:00

原來 google 也有出 weather api 可以查天氣資訊。

這裡有篇文章：
http://animaonline.blogspot.com/2007/07/google-weather-api.html

提供了 C# 範例：


static void Main(string[] args)
{
    int i = 0;
    XmlNodeList GWP_NodeList = GoogleWeatherAPI_Parser(@"http://www.google.co.uk/ig/api?weather=Drammen").SelectNodes("xml_api_reply/weather/current_conditions");
    Console.WriteLine("Current weather in Drammen: " + GWP_NodeList.Item(i).SelectSingleNode("temp_c").Attributes["data"].InnerText);
    Console.ReadLine();
}
private static XmlDocument GoogleWeatherAPI_Parser(string baseUrl)
{
    HttpWebRequest GWP_Request;
    HttpWebResponse GWP_Response = null;
    XmlDocument GWP_XMLdoc = null;
    try
    {
        GWP_Request = (HttpWebRequest)WebRequest.Create(string.Format(baseUrl));
        GWP_Request.UserAgent = @"Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4";
        GWP_Response = (HttpWebResponse)GWP_Request.GetResponse();
        GWP_XMLdoc = new XmlDocument();
        GWP_XMLdoc.Load(GWP_Response.GetResponseStream());
    }
    catch (Exception ex)
    {
        Console.WriteLine(ex.Message);
    }
    GWP_Response.Close();
    return GWP_XMLdoc;
}

不過，問題在於，google weather api 的位置在哪裡？範例中使用 http://www.google.co.uk/ig/api?weather=Drammen，不過若是我們想要查找的地點不知道城市名稱的話呢？

這裡有另外一篇文章：
http://space.itpub.net/14780828/viewspace-497880

提到可以使用經緯度查資料
var strURL="http://www.google.com/ig/api?hl=zh-cn&weather=,,,"+point.y*1000000+","+point.x*1000000;

所以，這樣就組合起來啦～譬如若是我知道台北縣政府的經緯度的話：
http://www.google.com/ig/api?hl=zh-tw&weather=,,,25012085,121465701

ASP.NET 的 Url Rewrite

2008-12-28T04:43:00.005+08:00

若希望當網友點下 http://www.xyz.com/123456789 可以自動連到 http://www.xyz.com/page.aspx?id=123456789 的話，就需要用到 Url Rewrite。

導到別頁的語法是：HttpContext 的 RewritePath() 或 Response 的 Redirect()，差別是後者是告知 client 端進行，前者是 server 端直接進行。

問題是 "時機"，在哪裡可以寫程式來判斷現在的 url 的組成？

有時間的話，請看一下 MSDN 這篇 ASP.NET Application Life Cycle Overview for IIS 5.0 and 6.0：
http://msdn.microsoft.com/en-us/library/ms178473.aspx
HttpApplication 中依照不同程序會發生一堆事件。

我們可以在 Global.asax 中，當這些事件發生時，做 Url Rewrite 的工作。

另外一種做法，是寫一個實作 IHttpModule 的 HttpModule 類別，然後掛在 web.config 中，這樣每個 request 都會經過這個我們開發的 HttpModule，就可以進行 Url Rewrite 了。

首先，先開發這個 HttpModule，

UrlRewrite.cs：


using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

namespace idv.ben.httpmodule
{
    public class UrlRewrite : IHttpModule
    {
        public UrlRewrite() { }

        #region IHttpModule 成員

        public void Dispose()
        {
            //throw new Exception("The method or operation is not implemented.");
        }

        public void Init(HttpApplication application)
        {
            application.BeginRequest += new EventHandler(context_BeginRequest);
        }

        void context_BeginRequest(object sender, EventArgs e)
        {
            HttpApplication application = (HttpApplication)sender;
            HttpContext context = application.Context;

            string queryString = context.Request.ServerVariables["QUERY_STRING"];
            string currentURL = context.Request.Path.ToLower();
            string pageParam = "";

            System.Diagnostics.EventLog log = new System.Diagnostics.EventLog();
            log.Source = "Application";
            log.WriteEntry(string.Format("queryString={0}, currentURL={1}"
                , queryString
                , currentURL
                ));

            if (currentURL.EndsWith(".aspx"))
            {
                int idx = currentURL.LastIndexOf("/");
                string page = currentURL.Substring(idx + 1);
                currentURL = currentURL.Substring(0, idx);

                bool fileExists = false;
                while (idx != -1)
                {
                    string paramName = "";
                    string paramValue = "";

                    idx = currentURL.LastIndexOf("/");
                    if (idx != -1)
                    {
                        paramValue = currentURL.Substring(idx + 1);
                        currentURL = currentURL.Substring(0, idx);
                    }

                    idx = currentURL.LastIndexOf("/");
                    if (idx != -1)
                    {
                        paramName = currentURL.Substring(idx + 1);
                        currentURL = currentURL.Substring(0, idx);
                    }

                    if (!paramName.Equals("") && !paramValue.Equals(""))
                    {
                        if (!pageParam.Equals(""))
                            pageParam += "&";
                        pageParam += string.Format("{0}={1}", paramName, paramValue);
                    }

                    try
                    {
                        if (System.IO.File.Exists(context.Server.MapPath(currentURL + "/" + page)))
                        {
                            fileExists = true;
                            break;
                        }
                    }
                    catch { break; }
                }

                if (fileExists)
                {
                    if (queryString != string.Empty)
                        context.RewritePath(currentURL + "/" + page + "?" + pageParam + "&" + queryString, false);
                    else
                        context.RewritePath(currentURL + "/" + page + "?" + pageParam, false);
                }
                else
                {
                    context.Response.Write("page not found!!");
                    context.Response.End();
                }
            }
        }

        #endregion
    }
}

只要注意在 init() 時，我們設定 HttpApplication 的 BeginRequest 事件發生時，要處理的動作。

至於在 context_BeginRequest()，該如何將網友瀏覽的 Url 轉成你期望的 Url，這就視需求而訂。我這裡的用途是：

* url 的最後一定要是一個 *.aspx
* 去除 page (*.aspx) 之外，將 url 由後往前組合變數值對(name=value)，每找到一組可成為變數值對後，原本的 url 就縮減去除那組變數值對。
* 判斷 url(某層資料夾) 下是否存在有 page (*.aspx)。如果找到 page 所在的 url 層級，就可以進行 Url Rewrite 了。
* 所有找出來的變數值對與原始url 的 query string，都會成為新的 query string。

以上，是我的範例的做法，你們可以寫自己的一套。

接下來，就可以將這個 HttpModule 掛到 web.config 開始服務了，請於 web.config 中加入以下這段：


 <system.web>
  <httpModules>
   <add name="UrlRewrite" type="idv.ben.httpmodule.UrlRewrite"/>
  </httpModules>
 </system.web>

最後，準備一個 view.aspx 做測試`:

<%@ Page Language="C#" AutoEventWireup="true" %>

<script runat="server">
    
    void Page_Load(object sender, EventArgs e)
    {
        Response.Write("qs = " + Request.ServerVariables["QUERY_STRING"]);
    }    
    
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>aa</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
        </div>
    </form>
</body>
</html>

瀏覽效果如下：

一般：http://localhost:13833/WebSite1/var1/123/var2/456/view.aspx

加額外的參數：http://localhost:13833/WebSite1/var1/123/var2/456/view.aspx?var3=789&var4=999

變數值對有誤、找不到網頁：http://localhost:13833/WebSite1/xxx/var1/123/var2/456/view.aspx?var3=789&var4=999

ASP.NET 動態產生縮圖

2008-12-25T04:53:00.003+08:00

動態產生縮圖的程式，每次都要找，就連自己以前寫過的都找不到了，所以再寫一遍。

thumbnail.ashx：


<%@ WebHandler Language="C#" Class="thumbnail" %>

using System;
using System.Web;

using System.Drawing;
using System.Drawing.Imaging;

public class thumbnail : IHttpHandler
{

    public void ProcessRequest(HttpContext context)
    {
        /*
        context.Response.ContentType = "text/plain";
        context.Response.Write("Hello World");
        */
        
        string file = context.Request["file"];
        int max = Convert.ToInt32(context.Request["max"]);

        Image img = Image.FromFile(context.Server.MapPath(file));

        double w, h;
        if (img.Width > img.Height)
        {
            w = max;
            h = img.Height * (w / img.Width);
        }
        else
        {
            h = max;
            w = img.Width * (h / img.Height);
        }
        
        /*
        Image.GetThumbnailImageAbort myCallback = new Image.GetThumbnailImageAbort(ThumbnailCallback);
        Image thumb = img.GetThumbnailImage(Convert.ToInt32(w), Convert.ToInt32(h), myCallback, IntPtr.Zero);
         * */
        Image thumb = new Bitmap(img, Convert.ToInt32(w), Convert.ToInt32(h));

        thumb.Save(context.Response.OutputStream, img.RawFormat);
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

    /*
    public bool ThumbnailCallback()
    {
        return false;
    }
     * */

}

thumbnail.htm：



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>thumbnail demo</title>
</head>
<body>
    <table>
        <tr>
            <td>
                100</td>
            <td>
                <img src="thumbnail.ashx?max=100&file=imgs/IMG_3492.JPG" /></td>
        </tr>
        <tr>
            <td>
                200</td>
            <td>
                <img src="thumbnail.ashx?max=200&file=imgs/IMG_3492.JPG" /></td>
        </tr>
        <tr>
            <td>
                300</td>
            <td>
                <img src="thumbnail.ashx?max=300&file=imgs/IMG_3492.JPG" /></td>
        </tr>
        <tr>
            <td>
                400</td>
            <td>
                <img src="thumbnail.ashx?max=400&file=imgs/IMG_3492.JPG" /></td>
        </tr>
    </table>
</body>
</html>

瀏覽：

用 ASP.NET 的 Cache 做週期執行的程式

2008-12-18T15:38:00.004+08:00

要寫一個週期執行的工作，如果不能寫 windows service，也不能在 server 上安裝程式的話，可以寫一個 aspx 頁面並且定期去執行它，只不過要誰來執行這個 aspx？一個人做在電腦前不斷 reload？寫個程式放在不關機的電腦不斷向 web server 送出 request？

透過前輩提點使用 Cache，先去找幾篇基本用法：

http://blog.darkthread.net/blogs/darkthreadtw/archive/2007/08/30/tips-asp-net-cache-mini-guide.aspx

http://www.dotblogs.com.tw/jeff377/archive/2008/08/28/5236.aspx

http://msdn.microsoft.com/zh-tw/library/system.web.caching.cacheitemremovedcallback(VS.80).aspx

然後我寫了一個 aspx 網頁，其 *.cs 如下：


using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

using System.Web.Caching;
using System.IO;


public partial class cacheTest : System.Web.UI.Page
{
    static public string status = "";

    protected void RemovedCallback(String k, Object v, CacheItemRemovedReason r)
    {
        if (status.Equals("PLAY"))
        {
            addCache();
        }

        log(string.Format("CacheItemRemovedReason={0}", r.ToString()));
    }

    protected void log(string str)
    {
        StreamWriter sr;

        FileInfo fi = new FileInfo(Server.MapPath("cacheTest7.txt"));
        sr = new StreamWriter(fi.Open(FileMode.OpenOrCreate | FileMode.Append, FileAccess.Write));
        sr.WriteLine(string.Format("{0}, {1}, {2}"
            , DateTime.Now.ToString("yyyyMMdd HHmmss")
            , str
            , Cache.Count
            ));
        sr.Flush();
        sr.Close();
    }

    protected void addCache()
    {
        log("[addCache start]");

        if (Cache["AutoTask"] == null)
        {
            Cache.Add("AutoTask", "xxx", null
                , DateTime.Now.AddSeconds(10), TimeSpan.Zero
                , CacheItemPriority.High, new CacheItemRemovedCallback(this.RemovedCallback));
        }

        log("[addCache end]");
    }

    protected void remove()
    {
        if (Cache["AutoTask"] != null)
        {
            Cache.Remove("AutoTask");
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request["stop"] != null)
        {
            status = "STOP";
            remove();
        }
        else
        {
            status = "PLAY";
            addCache();
        }

    }
}

第一次進入，會執行 addCache()，並會設定 10 秒後到期，以及到期時要執行的 RemovedCallback()，然後再次重複執行 addCache()。

寫入紀錄檔的內容：


//用ff開網頁
20081218 153238, [addCache start], 0
20081218 153238, [addCache end], 1

20081218 153300, [addCache start], 1
20081218 153300, [addCache end], 2
20081218 153300, CacheItemRemovedReason=Expired, 2

20081218 153320, [addCache start], 1
20081218 153320, [addCache end], 2
20081218 153320, CacheItemRemovedReason=Expired, 2

20081218 153340, [addCache start], 1
20081218 153340, [addCache end], 2
20081218 153340, CacheItemRemovedReason=Expired, 2

//用ie開相同網頁
20081218 153356, [addCache start], 1
20081218 153356, [addCache start], 1
20081218 153356, [addCache end], 2
20081218 153356, CacheItemRemovedReason=Expired, 2
20081218 153356, [addCache end], 1

20081218 153420, [addCache start], 1
20081218 153420, [addCache end], 2
20081218 153420, CacheItemRemovedReason=Expired, 2

20081218 153440, [addCache start], 1
20081218 153440, [addCache end], 2
20081218 153440, CacheItemRemovedReason=Expired, 2

20081218 153500, [addCache start], 1
20081218 153500, [addCache end], 2
20081218 153500, CacheItemRemovedReason=Expired, 2

* 即使瀏覽器被關掉了，這個執行緒仍會不斷跑。
* 開不同的瀏覽器、另一個人瀏覽此網頁，可造成上次的 cache 立即到期，然後建立新的 cache。
* web server 重開好像不會造成中斷，www 服務重開才會造成中斷。

這樣就可以寫週期執行、排程程式了。

精通 Flex 與 Flex 3 徹底研究兩本書

2008-12-15T00:14:00.003+08:00

前幾天收到最近新出的 Flex 中文書：

1.
精通 Flex－基於 ActionScript 實現

http://tlsj.tenlong.com.tw/WebModule/BookSearch/bookSearchViewAction.do?isbn=9789862043226&sid=47795

2.
Flex 3 徹底研究 (Adobe Flex 3: Training from the Source)

http://tlsj.tenlong.com.tw/WebModule/BookSearch/bookSearchViewAction.do?isbn=9789866587252&sid=47356

隨性買了這兩本新出的 Flex 3 的書，因為 1. 看中文書畢竟比原文書快，2. 兩本中文書加起來才 1000 左右，比起一本原文書還便宜。

這幾天正在看人民郵電出版社的精通 Flex，我自己的感覺是，這本書挺糟的。我大約已經快速的翻了 3/4 了。

1 ~ 4 章是基礎，認識 Flex 觀念或學過 ActionScript 的人，都可以在第一個小時就很快速的翻過。

5 ~ 10 章是 Flex 的一些基本組件，排版方面的一些表格列表，可以讓讀者很快的有個初淺的認識，不過在這一階段中，我就已經感到內容的排版描述方式不是很討喜：貼了一大串的完整程式碼，然後用一段的文字敘述作簡述，有一些物件定義或命名還需要讀者回到原始檔自己好好找，原始碼中並沒有用粗體標示出一些關鍵程式碼，有經驗的 Flex 開發者可能才有辦法很快的找到對應的 MXML 標籤或 AS 程式碼。

總之，有概念的讀者，可以利用這本書，有個整體、概述的閱讀方式，不過若真是初學者，我擔心光看書中的敘述，也提供了完整原始碼，會仍不知道原始碼中彼此的關係。

11~16 章，是 Flex 與後台資料傳遞的部分，也是我正在閱讀，也是我之前比較沒有花時間研究，也是我很想好好學習的部分。不過，一些資料傳輸組件的教學，都非常簡述，如同我上面說的 5~10 章的部分，雖然我以速讀的方式大多可以理解，不過我覺得實作的話，或是由讀者要自己應用的話，恐怕會遇到一些書中沒提到的問題與觀念吧。

另外，第 13 章，談到 Flex 與後台不同技術的資料整合方式，包括 ASP.NET、Java、PHP，這裡雖然提到三種，不過寫作方式等於只有一種，因為，全都是講述如何用 Flex 的精靈來產生，然後再次將所有 Flex 產生的程式碼完整貼出，然後只寫了簡單的註解，加上一點點自己的意見，況且，對於 Server 技術的部分也因為超出本書範圍之緣故而減少說明，我的感覺這本書有點充數～

還沒完全閱讀完，我並不能完全說這本書不好，對於我這種背景 (有寫過 Flash 與 Server 溝通，初淺認識 Flex 或是其他 ASP.NET 的視覺化組件，有其他程式語言的經驗，看過 Flex 官方 PDF 文件) 來說，閱讀它是可以以速讀的方式幫自己複習一下 Flex 的功能，而且至少可以對 LCDS 的一些概觀能有瞭解。不過若是對於初學者來說，對於連非同步資料傳輸與 callback 都不知道的人來說，恐怕這本書會讓你看得很辛苦。

我會很快的翻完 "精通 Flex" 這本書，並期待 "Flex 3 徹底研究" 能讓我懂更多我遺漏的小細節，雖然之前已經簡單翻過幾頁 "Flex 3 徹底研究"，發現翻譯有些白字或遺漏，不過我想對於我閱讀上來說，應該不會有太大的理解方面的問題。

AIR 1.5

2008-11-18T09:00:00.002+08:00

Adobe AIR 推出 1.5 版，他的新功能介紹請參考這篇文章：

http://www.adobe.com/devnet/logged_in/rchristensen_lpolanco_air_1.5.html

因為 AIR 1.5 包含了 Flash Player 10，所以也已經可以使用 Pixel Bender 的特效了：

http://www.adobe.com/devnet/air/ajax/articles/blackbooksafe_anatomy.html

這篇文章也提到在先前 AIR 的版本與 1.5 版間，分別要如何作資料的編碼：

In previous versions of the AIR runtime, if you wanted to store sensitive data in your AIR application, you had to use the encrypted local store. Although this is helpful in a pinch, the encrypted local store is not a relational database; it uses only key/value pairs. With AIR 1.5, you can use either the encrypted local store or the encrypted (SQLite) database which is included in AIR.

Pixel Bender

2008-11-12T22:51:00.000+08:00

Flash CS4 新增 Pixel Bender 的功能，可以自己寫濾鏡，你也可以去下載別人開發好的 Pixel Bender 來用，譬如 Adobe Exchange 也提供了 Pixel Bender 區：

http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=26&loc=en_us

我下載 RippleBlocks 這個來作展示，將下載的檔案解壓縮後是一個 RippleBlocks.pbk 文字檔，可以透過 Adobe CS4 包含的 Adobe Pixel Bender Toolkit 來開啟，並且 Run 執行效果，系統會提醒你載入一個圖檔來套用這個特效：

接下來，要將它輸出給 Flash Player 可以用的濾鏡 RippleBlocks.pbj：

接下來，在 Flash CS4 中，我在 frame 1 寫下以下的程式碼：


var fr:flash.net.FileReference;
var shader:flash.display.Shader;
var shaderFilter:flash.filters.ShaderFilter;
var loader:flash.display.Loader;

fr = new FileReference();
fr.addEventListener(Event.SELECT, onSelect);
fr.addEventListener(Event.COMPLETE, onComplete);
loader = new Loader();
loader.load(new flash.net.URLRequest("C:/Users/ben/Pictures/20081019_日本九州_Ben/PA190002.JPG"));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);
addChild(loader);
loader.addEventListener(MouseEvent.CLICK, loaderClick);

function loaderComplete(e:Event):void {
 var loader:Loader = (LoaderInfo(e.target).loader);
 loader.width = 550;
 loader.height = 400;
}

function loaderClick(e:Event):void {
 fr.browse();
}

function onSelect(e:Event):void {
 fr.load();
}

function onComplete(e:Event):void {
 shader = new Shader(fr.data as flash.utils.ByteArray);
 shaderFilter = new ShaderFilter(shader);
 loader.filters = [shaderFilter];
}

程式一執行，先載入照片，點選照片後，可以讓 user 透過 FileReference 載入外部 *.pbj 檔，並且可以於載入完成時透過 FileReference.data 得到檔案的 ByteArray 資料 (這也是新功能)，然後就可以產生 Shader 與 ShaderFilter，用在 loader 上當作濾鏡。

執行畫面：

Excel 為欄位設定下拉選單的驗證方式

2008-08-29T01:06:00.003+08:00

也不是什麼太特別的東西，也跟程式沒什麼關係，只不過是老婆問到，若要提供一個 Excel 請客戶填資料用來匯入資料庫，又希望部分欄位可以用下拉選單的方式，以免填錯，該如何在 Excel 中做這項設定呢？我想 Excel 的書中應該都會教吧，就算沒教，把功能表選單全部摸一遍，大概也可以找出做法(這時好像該稱讚一下微軟設計的好？)

首先，在想要具有下拉選單的填空格中，進行 [資料] 的 [驗證] 設定：

將儲存格允許的值，由原本的 "任意值" 改為 "清單"：

然後 "清單來源" 就去選擇 "清單來源" 囉～很白話阿～：

這樣該欄位就具備下拉功能了，只要將該欄位的格式複製到整欄即可：

其他欄位也可以一樣畫葫蘆：

Webcam 偵測畫面改變

2008-08-28T15:59:00.004+08:00

之前做過畫面偵測：http://blog.ben.idv.tw/2007/08/webcam.html

這次來試試看如何可以抓到變化區域最大的地方。

執行畫面如下，畫面中第一直行是原 camera，第二直行是取得與上次 BitmapData 的變化，第三直行是根據原始變化以不同大小的格子來區分，第四直行是依照格子變化將有連在一起的格子用相同顏色作群組。

若是整個環境沒有太多雜訊，若是人物離 camera 遠一點(使人物對畫面的影響減少)，然後用拳頭取代手指(因為人坐遠了，所以要大一點的指標)，然後為了避免手臂會被誤判，所以要將手臂抬起來呈現直指 camera 的姿勢，這樣的話就可以讓變化區比較集中一些了。

不過，上述的範例，放在瀏覽器的 flash player 播放時，會停住，想必可能是因為我中間作了太多不必要的 BitmapData 的關係吧：

原始檔：http://ben.rb.chang.googlepages.com/20080828_Webcam_Detect.fla

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

[2008-08-28-16-34]

若是將最後取得的最大 Rect，用其中心點來控制小球的話，畫面如下：

Google Map 做店家地圖

2008-08-28T10:57:00.004+08:00

不規則移動動畫的移動控制

2008-08-19T14:47:00.003+08:00

若有一物體，依照動畫路徑移動，同時會依照動畫路徑改變角度，若我們希望能控制該物體延著物體 y 軸做垂直上下移動時，我們需要計算當時的物體角度，來算出新的座標。不過，當然，簡單的作法，就是好好利用 Flash 的特性囉。

線上瀏覽：
http://ben.rb.chang.googlepages.com/20080819_timeline_dir.html

截圖：

直接看 fla 原始檔吧，注意車子多包一層 MovieClip 的用途：
http://ben.rb.chang.googlepages.com/20080819_timeline_dir.fla

frame 1 程式碼：


function btnLeft_onClick(evt:MouseEvent):void{
 ani_mc.carAni_mc.car_mc.y -= 5;
}
btnLeft.addEventListener(MouseEvent.CLICK, btnLeft_onClick);

function btnRight_onClick(evt:MouseEvent):void{
 ani_mc.carAni_mc.car_mc.y += 5;
}
btnRight.addEventListener(MouseEvent.CLICK, btnRight_onClick);

function stage_onEnterFrame(evt:Event):void{
 var p:Point = new Point(ani_mc.carAni_mc.car_mc.x, ani_mc.carAni_mc.car_mc.y);
 p = ani_mc.carAni_mc.localToGlobal(p);
 
 msg_txt.text = ani_mc.road_mc.hitTestPoint(p.x, p.y, true);
}
stage.addEventListener(Event.ENTER_FRAME, stage_onEnterFrame);

判斷車子是否離開路面，也只要轉換一下座標，與路面灰色區域進行 hitTestPoint() 測試即可。特別要注意的是我是以兩個輪胎中心點當作碰撞偵測的基準。

不規則移動動畫的速度控制

2008-08-19T11:05:00.004+08:00

若是有一段物體移動動畫，是不規則的路線，用一堆座標陣列也不是不可以，不過若希望用更簡單的方式的話，可以直接配合時間軸動畫來做。

線上瀏覽：
http://ben.rb.chang.googlepages.com/20080819_timeline_speed.html

截圖：

原始檔：
http://ben.rb.chang.googlepages.com/20080819_timeline_speed.fla

frame 1 的程式碼：


function m1_mc_onEnterFrame(evt:Event):void{
 var mc:MovieClip = evt.target as MovieClip;
 frame_txt.text = mc.currentFrame.toString();
 speed_txt.text = speed.toString();
}
m1_mc.addEventListener(Event.ENTER_FRAME, m1_mc_onEnterFrame);
m1_mc.stop();



//時速轉微秒
function speed2ms(speed:int):Number{
 return ((speed - SPEED_MIN) / (SPEED_MAX-SPEED_MIN)) * (SPEED_MS_MAX-SPEED_MS_MIN) + SPEED_MS_MIN;
}

var SPEED_MAX:int = 100; //最高時速
var SPEED_MIN:int = 0; //最低時速
var SPEED_DIFF:int = 20; //每階段時速變化
var speed:int = SPEED_MIN;

var SPEED_MS_MAX:int = 20; //最快多少微秒更新一次
var SPEED_MS_MIN:int = 200; //最慢多少微秒更新一次
var speed_ms:Number = speed2ms(speed);

var timer:Timer = new Timer(speed_ms);
function timer_onTimer(evt:TimerEvent):void{
 m1_mc.nextFrame();
 if(m1_mc.currentFrame==m1_mc.totalFrames){
  m1_mc.gotoAndStop(1);
 }
}
timer.addEventListener(TimerEvent.TIMER, timer_onTimer);

function btnUp_onClick(evt:MouseEvent):void{
 speed = Math.min(SPEED_MAX, speed+SPEED_DIFF);
 speed_ms = speed2ms(speed);
 timer.delay = speed_ms;
 trace("speed=" + speed + ", speed_ms=" + speed_ms);
 if(!timer.running){
  timer.start();
 }
}
btnUp.addEventListener(MouseEvent.CLICK, btnUp_onClick);

function btnDown_onClick(evt:MouseEvent):void{
 speed = Math.max(SPEED_MIN, speed-SPEED_DIFF);
 speed_ms = speed2ms(speed);
 timer.delay = speed_ms;
 trace("speed=" + speed + ", speed_ms=" + speed_ms);
 if(timer.delay==SPEED_MS_MIN){
  timer.stop();
 }
}
btnDown.addEventListener(MouseEvent.CLICK, btnDown_onClick);

基本觀念就是，自己決定要間隔多少微秒，呼叫 nextFrame() 一次。

Stage RESIZE 時的物件座標

2008-08-08T14:39:00.003+08:00

最近遇到需要製作 Flash 全畫面的機制，所有物件都需要用程式來控制座標，以求當 player / browser 改變大小時，各物件可以隨著邊緣的相對距離 / 比例做改變。

首先，我準備了幾個 MC 放在場景上，等下將會將每個 MC 給予不同的設定：

fla 的 frame 1 上的原始碼為：


var layoutMgr:PositionManager = PositionManager.getInstance(550, 400, stage, StageAlign.BOTTOM);
if(false){
 layoutMgr.add(m1, PositionManager.BASE_POINT, PositionManager.ALIGN_TOP_LEFT);
 layoutMgr.add(m2, PositionManager.BASE_POINT, PositionManager.ALIGN_TOP);
 layoutMgr.add(m3, PositionManager.BASE_POINT, PositionManager.ALIGN_TOP_RIGHT);
 layoutMgr.add(m4, PositionManager.BASE_POINT, PositionManager.ALIGN_LEFT);
 layoutMgr.add(m5, PositionManager.BASE_POINT);
 layoutMgr.add(m6, PositionManager.BASE_POINT, PositionManager.ALIGN_RIGHT);
 layoutMgr.add(m7, PositionManager.BASE_POINT, PositionManager.ALIGN_BOTTOM_LEFT);
 layoutMgr.add(m8, PositionManager.BASE_POINT, PositionManager.ALIGN_BOTTOM);
 layoutMgr.add(m9, PositionManager.BASE_POINT, PositionManager.ALIGN_BOTTOM_RIGHT);
 
 layoutMgr.add(p1, PositionManager.BASE_POINT, PositionManager.ALIGN_RATIO, .25, .25);
 layoutMgr.add(p2, PositionManager.BASE_POINT, PositionManager.ALIGN_RATIO, .75, .25);
 layoutMgr.add(p3, PositionManager.BASE_POINT, PositionManager.ALIGN_RATIO, .25, .75);
 layoutMgr.add(p4, PositionManager.BASE_POINT, PositionManager.ALIGN_RATIO, .75, .75);
}else{
 layoutMgr.add(m1, PositionManager.BASE_BOARDER, PositionManager.ALIGN_TOP_LEFT);
 layoutMgr.add(m2, PositionManager.BASE_BOARDER, PositionManager.ALIGN_TOP);
 layoutMgr.add(m3, PositionManager.BASE_BOARDER, PositionManager.ALIGN_TOP_RIGHT);
 layoutMgr.add(m4, PositionManager.BASE_BOARDER, PositionManager.ALIGN_LEFT);
 layoutMgr.add(m5, PositionManager.BASE_BOARDER);
 layoutMgr.add(m6, PositionManager.BASE_BOARDER, PositionManager.ALIGN_RIGHT);
 layoutMgr.add(m7, PositionManager.BASE_BOARDER, PositionManager.ALIGN_BOTTOM_LEFT);
 layoutMgr.add(m8, PositionManager.BASE_BOARDER, PositionManager.ALIGN_BOTTOM);
 layoutMgr.add(m9, PositionManager.BASE_BOARDER, PositionManager.ALIGN_BOTTOM_RIGHT);
 
 layoutMgr.add(p1, PositionManager.BASE_BOARDER, PositionManager.ALIGN_RATIO, .25, .25);
 layoutMgr.add(p2, PositionManager.BASE_BOARDER, PositionManager.ALIGN_RATIO, .75, .25);
 layoutMgr.add(p3, PositionManager.BASE_BOARDER, PositionManager.ALIGN_RATIO, .25, .75);
 layoutMgr.add(p4, PositionManager.BASE_BOARDER, PositionManager.ALIGN_RATIO, .75, .75);
}

var stageWH_txt:TextField = new TextField();
addChild(stageWH_txt);
stageWH_txt.border = true;
stageWH_txt.autoSize = TextFieldAutoSize.LEFT;
stageWH_txt.text = "stage = " + stage.stageWidth + " x " + stage.stageHeight;
layoutMgr.add(stageWH_txt, PositionManager.BASE_POINT, PositionManager.ALIGN_OFFSET_BR, stageWH_txt.width + 10, 100);

layoutMgr.startAutoLayout();

stage.addEventListener(Event.RESIZE
        , function(evt:Event):void{
         stageWH_txt.text = "stage = " + stage.stageWidth + " x " + stage.stageHeight;
      });

我自訂了一個 PositionManager 類別，只要將各種設定利用 add() 加到 PositionManager 物件中，然後就可以用 startAutoLayout() 來啟動了。

新增設定時，第二個參數要填 PositionManager.BASE_POINT 或 PositionManager.BASE_BOARDER，表示是以物件的座標做基準，還是以物件的外邊界做基準，等下看截圖會比較懂～

第三個參數則有 PositionManager.ALIGN_TOP_LEFT 等八種代表要將物件貼到八方向的邊緣上，若是不想完全貼緊 Stage 的邊緣的話，也可以用 PositionManager.ALIGN_RATIO 然後指定第四、第五參數，來指定物件距離左上角百分比，若是 1 表示最右邊或最下面。

第三個參數除了貼邊緣，與自訂百分比之外，也可以設定要距離四個角多少像素，有 PositionManager.ALIGN_OFFSET_TL 等四種代表 Stage 的四個頂角，若是設定 PositionManager.ALIGN_OFFSET_BR，然後第四、第五參數設定為 100 的話，表示物件要放在距離右下角各 100 的位置。

PositionManager.as 原始檔如下：


package{
 import flash.display.*;
 import flash.events.*;
 import flash.geom.*;
 
 public class PositionManager{
  private static var __instance:PositionManager;
  
  public static var BASE_BOARDER:int = 1;
  public static var BASE_POINT:int = 2;
  
  public static var ALIGN_TOP_LEFT:int = 1;
  public static var ALIGN_TOP:int = 2;
  public static var ALIGN_TOP_RIGHT:int = 3;
  public static var ALIGN_LEFT:int = 4;
  public static var ALIGN_RIGHT:int = 5;
  public static var ALIGN_BOTTOM_LEFT:int = 6;
  public static var ALIGN_BOTTOM:int = 7;
  public static var ALIGN_BOTTOM_RIGHT:int = 8;
  
  public static var ALIGN_RATIO:int = 9;
  
  public static var ALIGN_OFFSET_TL:int = 10;
  public static var ALIGN_OFFSET_TR:int = 11;
  public static var ALIGN_OFFSET_BL:int = 12;
  public static var ALIGN_OFFSET_BR:int = 13;
  
  public static function getInstance(movieWidth:Number, movieHeight:Number, stage:Stage=null, align:String=""):PositionManager{
   if(__instance==null){
    if(stage!=null){
     __instance = new PositionManager(movieWidth, movieHeight, stage, align);
    }else{
     throw new Error("初始化須提供Stage類別物件");
    }
   }
   return __instance;
  }

  private var __movieWidth:Number;
  private var __movieHeight:Number;

  private var __stage:Stage;
  private var __align:String;

  private var __ary:Array;
  
  function PositionManager(movieWidth:Number, movieHeight:Number, stage:Stage, align:String){
   trace("[PositionManager]");
   __movieWidth = movieWidth;
   __movieHeight = movieHeight;
   __stage = stage;
   __align = align;
   
   __ary = new Array();
  }
  
  public function add(obj:DisplayObject, base:int, align:int=0, cust_x:Number=0, cust_y:Number=0):void{
   __ary.push({obj:obj, base:base, align:align, cust_x:cust_x, cust_y:cust_y});
  }
  
  public function startAutoLayout():void{
   __stage.scaleMode = StageScaleMode.NO_SCALE;
   __stage.align = __align;
   __stage.addEventListener(Event.RESIZE, onResizeHandler);
   
   arrange();
  }
  
  public function stopAutoLayout():void{
   __stage.removeEventListener(Event.RESIZE, onResizeHandler);
  }
  
  private function onResizeHandler(evt:Event):void{
   trace("[PositionManager.onResizeHandler]stage.x=" + __stage.x + ", stage.y=" + __stage.y);
   arrange();
  }
  
  private function arrange():void{
   trace("[PositionManager.arrange]");
   
   var sw:Number = __stage.stageWidth;
   var sh:Number = __stage.stageHeight;
   
   var movieX:Number;
   var movieY:Number;
   
   var ratioX:Number;
   var ratioY:Number;
   
   switch(__align){
    case StageAlign.TOP_LEFT:
     ratioX = 0;
     ratioY = 0;
     break;
    case StageAlign.TOP:
     ratioX = .5;
     ratioY = 0;
     break;
    case StageAlign.TOP_RIGHT:
     ratioX = 1;
     ratioY = 0;
     break;
    case StageAlign.LEFT:
     ratioX = 0;
     ratioY = .5;
     break;
    case StageAlign.RIGHT:
     ratioX = 1;
     ratioY = .5;
     break;
    case StageAlign.BOTTOM_LEFT:
     ratioX = 0;
     ratioY = 1;
     break;
    case StageAlign.BOTTOM:
     ratioX = .5;
     ratioY = 1;
     break;
    case StageAlign.BOTTOM_RIGHT:
     ratioX = 1;
     ratioY = 1;
     break;
    default:
     ratioX = .5;
     ratioY = .5;
   }
   movieX = (sw - __movieWidth) * ratioX;
   movieY = (sh - __movieHeight) * ratioY;

   trace("movieX=" + movieX + ", movieY=" + movieY);
   
   for(var i:int=0; i<__ary.length; i++){
    var obj:Object = __ary[i];
    var displayObj:DisplayObject = obj["obj"] as DisplayObject;
    
    switch(obj["align"]){
     case ALIGN_TOP_LEFT:
      ratioX = 0;
      ratioY = 0;
      break;
     case ALIGN_TOP:
      ratioX = .5;
      ratioY = 0;
      break;
     case ALIGN_TOP_RIGHT:
      ratioX = 1;
      ratioY = 0;
      break;
     case ALIGN_LEFT:
      ratioX = 0;
      ratioY = .5;
      break;
     case ALIGN_RIGHT:
      ratioX = 1;
      ratioY = .5;
      break;
     case ALIGN_BOTTOM_LEFT:
      ratioX = 0;
      ratioY = 1;
      break;
     case ALIGN_BOTTOM:
      ratioX = .5;
      ratioY = 1;
      break;
     case ALIGN_BOTTOM_RIGHT:
      ratioX = 1;
      ratioY = 1;
      break;
     case ALIGN_RATIO:
      ratioX = obj["cust_x"];
      ratioY = obj["cust_y"];
      break;
     case ALIGN_OFFSET_TL:
      ratioX = obj["cust_x"] / sw;
      ratioY = obj["cust_y"] / sh;
      break;
     case ALIGN_OFFSET_TR:
      ratioX = (sw - obj["cust_x"]) / sw;
      ratioY = obj["cust_y"] / sh;
      break;
     case ALIGN_OFFSET_BL:
      ratioX = obj["cust_x"] / sw;
      ratioY = (sh - obj["cust_y"]) / sh;
      break;
     case ALIGN_OFFSET_BR:
      ratioX = (sw - obj["cust_x"]) / sw;
      ratioY = (sh - obj["cust_y"]) / sh;
      break;
     case 0:
     default:
      ratioX = .5;
      ratioY = .5;
    }

    if(obj["base"] == BASE_POINT){
     displayObj.x = sw * ratioX;
     displayObj.y = sh * ratioY;
    }else if(obj["base"] == BASE_BOARDER){
     var topRect:Rectangle = displayObj.getBounds(__stage);
     var parentRect:Rectangle = displayObj.getBounds(displayObj.parent);
     //trace("topRect=" + topRect + ", parentRect=" + parentRect);
    
     var cx:Number = displayObj.x - parentRect.x;
     var cy:Number = displayObj.y - parentRect.y;
     //trace(displayObj.name + ", cx=" + cx + ", cy=" + cy);
     
     displayObj.x = (-parentRect.width * ratioX) + cx + (sw * ratioX);
     displayObj.y = (-parentRect.height * ratioY) + cy + (sh * ratioY);
    }
    displayObj.x -= movieX;
    displayObj.y -= movieY;
   }
  }
 }
}

若是將一開始的 StageAlign 設定為 StageAlign.TOP，將會看到只有 550x400 的有色背景會向中上對齊，然後物件對齊的基準若是以物件座標 PositionManager.BASE_POINT，則測試畫面如下：

若是將一開始的 StageAlign 設定為 StageAlign.BOTTOM，將會看到只有 550x400 的有色背景會向中下對齊，然後物件對齊的基準若是以物件外框 PositionManager.BASE_BOARDER，則測試畫面如下：

另外可以注意到，右下角的文字框，則是以固定距離的方式來對齊右下角頂點，不會因為 Stage 的大小改變，而有不同的距離比例變化，也就是 "實際距離" 與 "相對(於總寬度的)距離" 的不同啦～

flash.text.engine 可載入 local 端的字型

2008-07-30T16:12:00.000+08:00

Flash Player 10 允許我們動態載入 client 端的字型來顯示，就連中文字也可以作旋轉效果了！

執行效果如下：

輸出的 swf 檔案大小約 37.2 KB 左右，而下拉選單中的字型列表，是根據 client 端擁有的字型而定，沒有使用 embeded font：

關於新的 flash.text.engine 的文件，可於官方查得：

http://livedocs.adobe.com/flex/gumbo/langref/flash/text/engine/package-detail.html

我寫在 frame 1 的完整程式碼如下：


import fl.controls.Button;
import fl.controls.ComboBox;
import flash.text.engine.*;

var rotate_btn:Button;
var font_cb:ComboBox;
var msg:String;
var textContainer:Sprite;

function init():void{
 font_cb = new ComboBox();
 var fonts:Array = Font.enumerateFonts(true);
 for(var i:int=0; i<fonts.length; i++){
  font_cb.addItem({label:fonts[i].fontName});
 }
 font_cb.width = 200;
 font_cb.addEventListener(Event.CHANGE, fontChange);
 addChild(font_cb);
 
 rotate_btn = new Button();
 rotate_btn.label = "旋轉 / 停止";
 rotate_btn.width = 100;
 rotate_btn.x = font_cb.x + font_cb.width + 20;
 rotate_btn.addEventListener(MouseEvent.CLICK
        , function(evt:MouseEvent):void{
         if(hasEventListener(Event.ENTER_FRAME)){
          removeEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
         }else{
          addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
         }
         });
 addChild(rotate_btn);
 
 msg = "";
 for(var j:int=0; j<20; j++){
  msg += "中文世界, ";
 }
 
 displayText(msg);
}

function fontChange(evt:Event):void{
 displayText(msg, font_cb.selectedItem.label);
}

function displayText(str:String = ""
      , fontName:String = "_serif"
      , fontSize:Number = 12.0
      , fontColor:uint = 0x000000):void{
 if(textContainer!=null){
  removeChild(textContainer);
 }
 textContainer = new Sprite();

 var fd:FontDescription = new FontDescription(fontName);
 var ef:ElementFormat = new ElementFormat(fd, fontSize, fontColor);

 var te:TextElement = new TextElement(str, ef);
 var tb:TextBlock = new TextBlock();
 tb.content = te;

 var lineWidth:Number = 250;
 var xPos:Number = 0;
 var yPos:Number = 0;
 
 var yMax:Number = 0;
 
 var line:TextLine = tb.createTextLine (null, lineWidth);
 while(line){
  line.x = xPos;
  line.y = yPos + line.textHeight;
  
  yPos += line.height + 5;
  textContainer.addChild(line);

  yMax = line.getBounds(textContainer).bottom;
  
  line = tb.createTextLine(line, lineWidth);
 }
 
 textContainer.graphics.lineStyle(0);
 textContainer.graphics.drawRect(0, 0, textContainer.width, yMax);
 
 textContainer.x = stage.stageWidth / 2;
 textContainer.y = stage.stageHeight / 2;
 
 addChild(textContainer);
}

function onEnterFrameHandler(evt:Event):void{
 if(textContainer!=null){
  textContainer.rotation++;
  //trace("rotation = " + textContainer.rotation);
 }
}

init();

至於輸出時，好像選擇 Flash Player 10 或 Flash Player 10 (flash.text.engine API) 都可以：

瀏覽效果(記得先安裝 Flash Player 10)：
http://ben.rb.chang.googlepages.com/20080730_flash_player10_local_font.html

Hands-On With the Voodoo Envy's Instant-On OS

2008-07-21T08:49:00.001+08:00

Ticore，這是你們家的產品嗎：

http://blog.laptopmag.com/first-impressions-of-the-voodoo-envys-ios

我看到 Flex 了：

unloadAndStop()

2008-07-16T10:59:00.001+08:00

moock 貼了一篇文章，說明當我們要卸載一個 MC 時，要注意釋放哪些資源，或是停下哪些正在進行的作業：

http://www.moock.org/blog/archives/000279.html

包含了：

Tell any loaded .swf child assets to disable themselves.
Stop any sounds from playing.
Stop the main timeline, if it is currently playing.
Stop any movie clips that are currently playing.
Close any connected network objects, such as instances of Loader, URLLoader, Socket, XMLSocket, LocalConnection, NetConnections, and NetStream.
Release all references to cameras and microphones.
Unregister all event listeners in the .swf (particularly Event.ENTER_FRAME, and mouse and keyboard listeners)
Stop any currently running intervals (via clearInterval()).
Stop any Timer objects (via the Timer class’s instance method stop()).

未來，將會有 Loader.unloadAndStop() 可以幫我們做掉以上的事情：

http://www.gskinner.com/blog/archives/2008/07/additional_info.html

The Charges Against ActionScript 3.0

2008-07-16T10:42:00.006+08:00

Colin Moock 寫了一篇文章：
http://www.insideria.com/2008/07/the-charges-against-actionscri.html

針對一些升級到 Flash CS3 時，一些小小的不便 (多個"小小的不便"，加起來就成為"大大的不便")，在 Flash CS3 時要如何對應，但又建議 Adobe 應該在下一版時可以如何改進，或是建議如何針對各位 Flasher 的習慣來設計開發工具的介面。也建議 Flasher 們，可以上官方的 wish list 去張貼自己對下一版的期待。

圍棋題庫

2008-07-15T11:50:00.003+08:00

基於網友提出的疑問：

http://blog.ben.idv.tw/2007/06/papervision3d-part-72.html?showComment=1216084860000#c3959481488832795458

若是要製作一個圍棋的題庫的話，這支 flash 的基本架構與程式大致如下：

首先，準備一個主程式 main.fla，其中 frame 1 的 actionscript 如下：


var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, function(evt:Event):void{
 var target:URLLoader = evt.target as URLLoader;
 var xml:XML = new XML(target.data);
 paint(xml);
})
loader.load(new URLRequest("chess.xml"));

function paint(chessXML:XML):void{
 var sprite:Sprite = new Sprite();

 var g:Graphics = sprite.graphics;
 g.lineStyle(0);
 
 var ary:Array = chessXML.text().split("\r").join("").split("\n")
 for(var i:int=0; i<ary.length; i++){
  //橫線
  g.moveTo(0, 20 * i);
  g.lineTo(20 * (ary.length-1), 20 * i);
  
  //直線
  g.moveTo(20 * i, 0);
  g.lineTo(20 * i, 20 * (ary.length-1));
 }
 
 for(var i:int=0; i<ary.length; i++){
  var line:String = ary[i];
  for(var j:int=0; j<line.length; j++){
   var chess:String = line.charAt(j);
   if(chess=="0" || chess=="y"){
    var chessSprite:ChessSprite = new ChessSprite(chess);
    chessSprite.graphics.beginFill(0xffffff, 0.2);
    chessSprite.graphics.drawCircle(0, 0, 5);
    chessSprite.graphics.endFill();
    chessSprite.x = 20 * j;
    chessSprite.y = 20 * i;
    chessSprite.addEventListener(MouseEvent.CLICK, function(evt:MouseEvent):void{
                 if((evt.target as ChessSprite).value=="y"){
                  trace("正確");
                 }else{
                  trace("錯誤");
                 }
                });
    sprite.addChild(chessSprite);
   }
   if(chess=="1"){
    g.beginFill(0x000000);
    g.drawCircle(20 * j, 20 * i, 5);
    g.endFill();
   }
   if(chess=="2"){
    g.beginFill(0xffffff);
    g.drawCircle(20 * j, 20 * i, 5);
    g.endFill();
   }
  }
 }
 
 addChild(sprite);
 sprite.x = (stage.stageWidth - sprite.width)/2;
 sprite.y = (stage.stageHeight - sprite.height)/2;
}

這個 fla 會載入外部 chess.xml，取得棋子的擺放方法，若是 0 表示一般錯誤(較差)的位置，1 與 2 表示已下的棋子，y 表示正確的下一步，程式會為 0 與 y 放上可點選的透明棋子，若是點下去發現是 y，則表示正確，反之則錯誤。

chess.xml：


<c>
0000200000000000000
00021y0000000000000
0002120000000000000
0000200000000000000
0000000000000000000
0000000000000000000
0000000000000000000
0000000000000000000
0000000000000000000
0000000000000000000
0000000000000000000
0000000000000000000
0000000000000000000
0000000000000000000
0000000000000000000
0000000000000000000
0000000000000000000
0000000000000000000
0000000000000000000
</c>

為了要在 Sprite 中，儲存一些額外的資訊 ("0" 或 "y")，所以我另外新建一個繼承自 Sprite 的 ChessSprite 類別，可夾帶自訂變數，這個 ChessSprite.as 就放在與 fla 相同目錄下即可：


package{
 import flash.display.Sprite;
 public class ChessSprite extends Sprite{
  private var __value:String;
  function ChessSprite(v:String){
   this.__value = v;
  }
  public function get value():String{
   return __value;
  }
 }
}

執行畫面如下，點選正確與否，會 trace 在 output 視窗中：

黑白棋，加入電腦玩家

2008-07-07T15:40:00.005+08:00

之前寫過黑白棋的遊戲：
http://blog.ben.idv.tw/2007/06/papervision3d-part-72.html

不過之前沒有將電腦玩家寫進去，這次我將之前寫給 flex 的 *.as 檔拿來改一改，給 flash cs3 當作 document class 使用。

Reversi.as 原始檔如下：


package  {
 import flash.display.*;
 import flash.events.*;
 import flash.ui.*;
 import flash.utils.*;
 
 import org.papervision3d.cameras.*;
 import org.papervision3d.scenes.*;
 import org.papervision3d.objects.*;
 import org.papervision3d.materials.*;
 
 public class Reversi extends MovieClip {
  
  // Constants:
  private static var TH:Number = Math.PI / 180;
  
  // Public Properties:
  // Private Properties:
  private var container:Sprite;
  private var scene:Scene3D;
  private var camera:Camera3D;
  
  //camera 繞著y軸線旋轉的角度
  private var du:Number = -90;
  
  //camera 距離y軸線的半徑
  private var movingRadius:int = 1000;
  
  //camera 的高度
  private var movingHeight:int = 3000;
  
  //棋子材質寬高
  private var chess_material_width:int = 40;
  private var chess_material_height:int = 40;
  
  //棋子間距
  private var chess_offset_h:int = 5;
  private var chess_offset_v:int = 5;
  
  //棋子離地高度
  private var chess_pos_y:int = 5;
  
  //地板資訊
  private var groundSpriteData:Object = {};

  //棋位
  private var gameData:Array = [
   [-1, -1, -1, -1, -1, -1, -1, -1],
   [-1, -1, -1, -1, -1, -1, -1, -1],
   [-1, -1, -1, -1, -1, -1, -1, -1],
   [-1, -1, -1,  1,  0, -1, -1, -1],
   [-1, -1, -1,  0,  1, -1, -1, -1],
   [-1, -1, -1, -1, -1, -1, -1, -1],
   [-1, -1, -1, -1, -1, -1, -1, -1],
   [-1, -1, -1, -1, -1, -1, -1, -1]
  ];
  
  //兩家雙方可點的位置
  private var allowClickData:Array = [
   [
   [0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0]
   ],
   [
   [0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0],
   [0, 0, 0, 0, 0, 0, 0, 0]
   ]
  ];
  
  //換誰
  private var whoTurn:int = 0; //0=黑：玩家先攻, 1=白：電腦後攻
  
  //使用金牌
  private var isUsingGoldCard:Boolean = false;
 
  // Initialization:
  public function Reversi(chess_material_width:int = 49
        , chess_material_height:int = 42
        , chess_offset_h:int = 5
        , chess_offset_v:int = 5
        , chess_pos_y: int = 5) {
   this.chess_material_width = chess_material_width;
   this.chess_material_height = chess_material_height;
   
   this.chess_offset_h = chess_offset_h;
   this.chess_offset_v = chess_offset_v;
   
   this.chess_pos_y = chess_pos_y;
   
   this.addEventListener(Event.ADDED_TO_STAGE, addToStageHandler);
  }
  
  private function addToStageHandler(evt:Event):void{
   init3D();
   this.addEventListener(Event.ENTER_FRAME, loop3D);

   //stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
   stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
  }
  
  // Public Methods:
  // Protected Methods:
  private function init3D():void{
   container = new Sprite();
   this.addChild(container);
   container.x = stage.stageWidth/2;
   container.y = stage.stageHeight/2;
   
   scene = new MovieScene3D(container);
   
   camera = new Camera3D();
   camera.zoom = 30;
   camera.focus = 100;
   camera.x = movingRadius * Math.cos(du*TH);
   camera.y = movingHeight;
   camera.z = movingRadius * Math.sin(du*TH);
   
   //地板&棋子
   var material:ColorMaterial = new ColorMaterial(0x999999);
   for(var i:int=0; i<gameData.length; i++){
    for(var j:int=0; j<gameData[i].length; j++){
     //去除預先擺上的棋子外，建立其他地板
     if(gameData[i][j]==-1){
      var ground:DisplayObject3D = scene.addChild(new Plane(material, chess_material_width, chess_material_height, 1, 1), "ground"+i+j);
      ground.x = (j-3.5) * (chess_material_width+chess_offset_h);
      ground.z = (3.5-i) * (chess_material_height+chess_offset_v);
      ground.y = 1;
      ground.rotationX = -90;
     }else{
      //棋子
      addChess(i, j, gameData[i][j]);
     }
    }
   }
   
   //先繪製出來，才能決定container的sprite，才能addEventListener
   scene.renderCamera(camera);
   
   //地板，設定滑鼠事件
   for(var i:int=0; i<gameData.length; i++){
    for(var j:int=0; j<gameData[i].length; j++){
     var ground:DisplayObject3D = scene.getChildByName("ground"+i+j);
     if(ground!=null){
      ground.container.name = "ground"+i+j;
      ground.container.visible = false; //一開始全部不顯示
      ground.container.alpha = 0.6;
      ground.container.buttonMode = true;
      ground.container.addEventListener(MouseEvent.CLICK, ground_onClick);
      
      groundSpriteData[ground.container.name] = {i:i, j:j};
     }
    }
   }
   
   //計算可以點選的地板
   countAllowClicks();
   
   //顯示可以點選的地板
   displayAllowClicks();
  }
  
  private function loop3D(evt:Event):void{
   scene.renderCamera(camera);
  }

  private function countAllowClicks():void{
   countAllowClick(0);
   countAllowClick(1);
   
   //將現在輪到的玩家的權數表印出來參考
   //dumpArray(allowClickData[whoTurn]);
  }
  
  private function displayAllowClicks():void{
   for(var i:int=0; i<gameData.length; i++){
    for(var j:int=0; j<gameData[i].length; j++){
     var ground:DisplayObject3D = scene.getChildByName("ground"+i+j);
     if(ground){
      if(whoTurn==0){
       //玩家
       if(isUsingGoldCard){
        ground.container.visible = false;
       }else{
        if(allowClickData[whoTurn][i][j]>0){
         ground.container.visible = true;
        }else{
         ground.container.visible = false;
        }
       }
      }else{
       //電腦，不顯示地板
       ground.container.visible = false;
      }
     }
     
     //使用金牌，找出電腦下過的地方，可以被點
     if(isUsingGoldCard && gameData[i][j]==1){
      var chess:DisplayObject3D = scene.getChildByName("chess"+i+j);
      chess.container.name = "ground"+i+j;
      chess.container.buttonMode = true;
      chess.container.addEventListener(MouseEvent.CLICK, chess_onClick);
     }
    }
   }
  }
  
  private function countAllowClick(whoTurn:int):void{
   var another:int = whoTurn==0?1:0;//對手
   
   for(var i:int=0; i<gameData.length; i++){
    for(var j:int=0; j<gameData[i].length; j++){
     if(gameData[i][j]==-1){
      var canKillChess:Array = getKillChess(whoTurn, i, j);
      if(canKillChess.length!=0){
       //自訂該位置的點選權數
       
       //以可以殺多少對手，當作權數
       allowClickData[whoTurn][i][j] = canKillChess.length;
       
       if((i==0&&j==0)
          ||(i==0&&j==7)
          ||(i==7&&j==0)
          ||(i==7&&j==7)){
        //若是該點是四個角，則權數+24
        allowClickData[whoTurn][i][j] += 24;
       }else if(i==0 || i==7 || j==0 || j==7){
        //若是該點是四邊，則權數+12
        allowClickData[whoTurn][i][j] += 12;
       }
       
       //若是該點正巧也是對手可以點的，則權數 + "對手殺我方的個數"
       //意味著，會使我方損傷越多的，越要先擋
       if(allowClickData[another][i][j]>0){
        allowClickData[whoTurn][i][j] += allowClickData[another][i][j]
       }
      }else{
       allowClickData[whoTurn][i][j] = 0; //沒對手可殺，不能點
      }
     }else{
      allowClickData[whoTurn][i][j] = -1; //有棋子，不能點
     }
    }
   }
   //dumpArray(allowClickData[whoTurn]);
  }
  
  private function ground_onClick(event:MouseEvent):void{
   var ci:int = groundSpriteData[event.target.name].i;
   var cj:int = groundSpriteData[event.target.name].j;
   
   select(ci, cj);
  }
  
  private function chess_onClick(event:MouseEvent):void{
   var ci:int = groundSpriteData[event.target.name].i;
   var cj:int = groundSpriteData[event.target.name].j;

   //將每個電腦下過的位置，解除按鈕事件
   for(var i:int=0; i<gameData.length; i++){
    for(var j:int=0; j<gameData[i].length; j++){
     if(gameData[i][j]==1){
      var chess:DisplayObject3D = scene.getChildByName("chess"+i+j);
      chess.container.name = "";
      chess.container.buttonMode = false;
      chess.container.removeEventListener(MouseEvent.CLICK, chess_onClick);
     }
    }
   }
   
   select(ci, cj);
   
   isUsingGoldCard = false;
  }

  private function chessAnimation(ci:int, cj:int, whoTurn:int):void{
   var timer:Timer = new Timer(0, 200);
   timer.addEventListener(TimerEvent.TIMER, function(evt:TimerEvent):void{
              var timer:Timer = evt.target as Timer;
              var chess:DisplayObject3D = scene.getChildByName("chess"+ci+cj);
              //轉棋面效果
              if(whoTurn==0){
               //黑
               chess.rotationZ -= 20;
               if(chess.rotationZ<=0){
                chess.rotationZ = 0;
                timer.stop();
                timer = null;
               }
              }else if(whoTurn==1){
               //白
               chess.rotationZ += 20;
               if(chess.rotationZ>=180){
                chess.rotationZ = 180;
                timer.stop();
                timer = null;
               }
              }
             });
   timer.start();
  }
  
  private function addChess(ci:int, cj:int, whoTurn:int):DisplayObject3D{
   var material0:BitmapAssetMaterial = new BitmapAssetMaterial("PlayerImg0");
   var material1:BitmapAssetMaterial = new BitmapAssetMaterial("PlayerImg1");
    
   var chess:DisplayObject3D = scene.addChild(new DisplayObject3D(), "chess"+ci+cj);
   chess.addChild(new Plane(material0, chess_material_width, chess_material_height, 8, 8, {y:2, rotationX:-90}));
   chess.addChild(new Plane(material1, chess_material_width, chess_material_height, 8, 8, {y:1, rotationX:-90, rotationZ:180}));
   chess.x = (cj-3.5) * (chess_material_width+chess_offset_h);
   chess.z = (3.5-ci) * (chess_material_height+chess_offset_v);
   chess.y = chess_pos_y;
    
   //轉棋面效果
   if(whoTurn==0){
    //黑
    chess.rotationZ = 0;
   }else if(whoTurn==1){
    //白
    chess.rotationZ = 180;
   }
   
   return chess;
  }
  
  private function select(ci:int, cj:int):void{
   //改變此座標
   gameData[ci][cj] = whoTurn;
   
   //若是地板還沒刪除
   var ground:DisplayObject3D = scene.getChildByName("ground"+ci+cj);
   if(ground!=null){
    scene.removeChild(ground);
   }
   
   //若是棋子還沒生出來
   var chess:DisplayObject3D = scene.getChildByName("chess"+ci+cj);
   if(chess==null){
    chess = addChess(ci, cj, whoTurn);
   }else{
    //動畫
    chessAnimation(ci, cj, whoTurn);
   }
   
   //改變所有會被換掉的座標
   var ary:Array = getKillChess(whoTurn, ci, cj);
   
   var timer:Timer = new Timer(150);
   timer.addEventListener(TimerEvent.TIMER
           , function(evt:TimerEvent):void{
          if(ary.length>0){
           var k:Array = ary.splice(0, 1);
               
           //改變座標
           gameData[k[0].i][k[0].j] = whoTurn;
               
           //動畫
           chessAnimation(k[0].i, k[0].j, whoTurn);
          }else{
           (evt.target as Timer).stop();
               
           //換手
           whoTurn = whoTurn==0?1:0;
               
           //計算可以點選的地板
           countAllowClicks();
   
           //顯示可以點選的地板
           displayAllowClicks();
               
           //為接下來的玩家找出最適合的攻擊點
           var nextBestPoint:Object = choiseBestAttPoint();
           if(nextBestPoint==null){
            //沒路可走，換另一方
            
            //換手
            whoTurn = whoTurn==0?1:0;
               
            //計算可以點選的地板
            countAllowClicks();
   
            //顯示可以點選的地板
            displayAllowClicks();
            
            //為接下來的玩家找出最適合的攻擊點
            var nextBestPoint:Object = choiseBestAttPoint();
            if(nextBestPoint==null){
             //表示沒有可以攻擊的位置，遊戲結束
             gameover();
            }else{
             if(whoTurn==1){
              //電腦自動選最佳攻擊點
              var timer:Timer = new Timer(1000, -1);
              timer.addEventListener(TimerEvent.TIMER_COMPLETE, function(evt:TimerEvent):void{
               select(nextBestPoint.i, nextBestPoint.j);
              });
              timer.start();
             }
            }
           }else{
            if(whoTurn==1){
             //電腦自動選最佳攻擊點
             var timer:Timer = new Timer(1000, -1);
             timer.addEventListener(TimerEvent.TIMER_COMPLETE, function(evt:TimerEvent):void{
              select(nextBestPoint.i, nextBestPoint.j);
             });
             timer.start();
            }
           }
          }
         });
   timer.start();
   dumpArray(gameData);
  }
  
  private function choiseBestAttPoint():Object{
   //為接下來的玩家找出最適合的攻擊點
   var maxValue:int = 0;
   var max_i:int;
   var max_j:int;
   for(var i:int=0; i<allowClickData[whoTurn].length; i++){
    for(var j:int=0; j<allowClickData[whoTurn][i].length; j++){
     if(allowClickData[whoTurn][i][j]>0){
      if(allowClickData[whoTurn][i][j] > maxValue){
       maxValue = allowClickData[whoTurn][i][j];
       max_i = i;
       max_j = j;
      }
     }
    }
   }
   if(maxValue==0){
    return null;
   }else{
    return {i:max_i, j:max_j};
   }
  }
  
  private function gameover():void{
   trace("遊戲結束");
   
   var score0:int = 0;
   var score1:int = 0;
   
   for(var i:int=0; i<gameData.length; i++){
    for(var j:int=0; j<gameData[i].length; j++){
     if(gameData[i][j]==0){
      score0++;
     }else if(gameData[i][j]==1){
      score1++;
     }
    }
   }
   
   trace("玩家=" + score0 + ", 電腦=" + score1);
   this.dispatchEvent(new GameOverEvent(score0, score1));
  }
  
  private function dumpArray(ary:Array):void{
   for(var i:int=0; i<ary.length; i++){
    trace(ary[i]);
   }
  }
  
  private function getKillChess(whoTurn:int, ci:int, cj:int):Array{
   //判斷某個棋子座標的八方向是否可以掃射哪些棋子座標
   //trace("[getKillChess]i=" + ci + ", j=" + cj);
   var ary:Array = new Array();
   
   ary = ary.concat(killChess(whoTurn, ci, cj, -1, 0, 0, cj));//往上, i
   ary = ary.concat(killChess(whoTurn, ci, cj, 1, 0, 7, cj));//往下, i
   ary = ary.concat(killChess(whoTurn, ci, cj, 0, -1, ci, 0));//往左, j
   ary = ary.concat(killChess(whoTurn, ci, cj, 0, 1, ci, 7));//往右, j
   
   ary = ary.concat(killChess(whoTurn, ci, cj, -1, -1, 0, 0));//往左上
   ary = ary.concat(killChess(whoTurn, ci, cj, 1, -1, 7, 0));//往左下
   ary = ary.concat(killChess(whoTurn, ci, cj, -1, 1, 0, 7));//往右上
   ary = ary.concat(killChess(whoTurn, ci, cj, 1, 1, 7, 7));//往右下
   
   return ary;
  }
  
  private function killChess(whoTurn:int, i_s:int, j_s:int
         , i_inc:int, j_inc:int
         , i_e:int, j_e:int):Array{
   //trace("[killChess]i=" + i_s + ", j=" + j_s);
   
   //若兩個變化量都為0
   if(i_inc==0 && j_inc==0)return new Array();
   
   //若是變化量不為0，但是起點卻等於終點
   if((i_inc!=0 && i_s==i_e)
    || (j_inc!=0 && j_s==j_e))return new Array();

   var i:int = i_s;
   var j:int = j_s;
   var ary2:Array = new Array();
   
   do{
    //檢查下一個
    if(i!=i_e)i += i_inc;
    if(j!=j_e)j += j_inc;
    //trace("check i=" + i + ", j=" + j)
    
    if(gameData[i][j]!=-1){
     if(gameData[i][j]==whoTurn){
      //開始清算要被殺掉的棋子
      return ary2;
     }else{
      //被掃到的對手棋
      ary2.push({i:i, j:j});
     }
    }else{
     return new Array();
    }
   }while((i_inc==0 || (i_inc!=0 && i!=i_e))
     && (j_inc==0 || (j_inc!=0 && j!=j_e)))
   //變化量不為0，尚未抵達終點
   
   return new Array();
  }
  
  public function useGoldCard():Boolean{
   //該使用者時，可以使用金牌
   if(whoTurn==0 && !isUsingGoldCard){
    isUsingGoldCard = true;
    
    //顯示可以點選的地板
    displayAllowClicks();

    return true;
   }
   return false;
  }
  
  public function chessboard_zoomin():void{
   if(movingHeight>2000){
    movingHeight -= 100;
    movingRadius += 100;
   }
  }
  
  public function chessboard_zoomout():void{
   if(movingHeight<3000){
    movingHeight += 100;
    movingRadius -= 100;
   }
  }
  
  public function chessboard_rotateleft():void{
   du += 5;
   du = (du + 360) % 360;
  }
  
  public function chessboard_rotateright():void{
   du -= 5;
   du = (du + 360) % 360;
  }
  
  
  
  //鍵盤事件
  private function keyUpHandler(evt:KeyboardEvent):void{
   switch(evt.keyCode){
    case Keyboard.SPACE:
     useGoldCard();
     break;
   }
  }
  private function keyDownHandler(evt:KeyboardEvent):void{
   switch(evt.keyCode){
    case Keyboard.UP:
     chessboard_zoomin();
     break;
    case Keyboard.DOWN:
     chessboard_zoomout();
     break;
    case Keyboard.LEFT:
     chessboard_rotateleft();
     break;
    case Keyboard.RIGHT:
     chessboard_rotateright();
     break;
   }
   trace("du=" + du + ", movingHeight=" + movingHeight);
   camera.x = movingRadius * Math.cos(du*TH);
   camera.y = movingHeight;
   camera.z = movingRadius * Math.sin(du*TH);
  }
  
 }
}

在 Reversi.fla 中，則在 library 中準備兩個 symbol 當做兩種棋子的貼圖，instance name 分別為 PlayerImg0 與 PlayerImg1。

玩的過程中最開心的是，玩出一套增加勝算的玩法，小時候玩的時候好像還沒想通這點，那就是要盡量攻擊同一個區塊，不只是要攻下四角與四邊，還要盡量讓自己的棋子集中在同一區域(已搶下邊與角的區域)，這樣一來，電腦就無法在我們的背後見縫插針了，最後，就會形成只有我們能攻擊的狀態。

使用 AMFPHP

2008-07-02T16:07:00.000+08:00

其實這跟 Flash CS4 的新功能沒啥關係，只不過當初我在看 AMFPHP 時，沒有找到 Flash CS3 的作法，我還以為那是因為沒有 Flash CS3 的 Flash Remoting Component 的緣故，剛再重新看 AMFPHP 的資料時，發現有人寫過 Flash CS3 的用法。

以下我只是將 Flash CS3 的用法，用在 Flash CS4 看看，測試結果沒啥大問題。

1.
可以根據官網的安裝流程：
http://www.amfphp.org/docs/installingamfphp.html

在 SourceForge 下載到 amfphp 1.9 版：
http://sourceforge.net/project/showfiles.php?group_id=72483#files

將下載的檔案解壓縮到 apache 的 htdocs 網站目錄下，你可以直接放在這個目錄下(我放這)，那就等於是網站根目錄，也可以依據官方的建議，多放一層 flashservices 的資料夾下。

2.
準備一個 php 的服務
{apache安裝目錄}\htdocs\services\idv\ben\remotingObject\Hello.php
原始檔如下：


<?php
class Hello{
public function getData(){
 return array(
  array("name" => "name1",
   "phone" => "phone1",
   "email" => "email1"),
  array("name" => "name2",
   "phone" => "phone2",
   "email" => "email2")
 );
}
}
?>

3.
在 Flash CS4 中，新建一個 main.fla，其 Class 為 Main.as，原始檔如下：


package{
 import flash.display.MovieClip;
 import flash.net.NetConnection;
 import flash.net.Responder;
 
 public class Main extends MovieClip{
  private var gateway:String = "http://localhost:8080/gateway.php";
  private var connection:NetConnection;
  private var responder:Responder;
  
  public function Main(){
   connection = new NetConnection();
   connection.connect(gateway);
   
   responder = new Responder(roResult, roStatus);
   connection.call("idv.ben.remotingObject.Hello.getData", responder);
  }
  
  private function roResult(result:Object):void{
   trace("[roResult]");
   dumpObject(result);
  }

  private function roStatus(result:Object):void{
   trace("[roStatus]");
   dumpObject(result);
  }
  
  private function dumpObject(obj:Object, level:Number=0):void{
   var levelIndicate:String = "";
   for(var i:int=0; i<level; i++){
    levelIndicate += "-";
   }
   if(levelIndicate!="")levelIndicate += " ";
   
   for(var j:String in obj){
    
    trace(levelIndicate + j + " = " + obj[j]);
    if(obj[j] is Object){
     dumpObject(obj[j], level+1);
    }
   }
  }
 } 
}

4.
測試，輸出畫面：

完成！

Google 服務結合自己的 Domain

2008-06-26T14:44:00.005+08:00

透過 http://www.everydns.net/ 的免費 DNS 代管，我們可以在沒有自己的主機的條件下，利用許多 Google 提供的服務，來建置一個中小企業的資訊系統。

Google 提供的 blogspot 平台，可以讓你的 blog 使用自己申請的 domain，像是我的 blog 現在已經是 http://blog.ben.idv.tw 了。

其他像是 Google App Engine 平台，也可以讓你使用自己的 domain，不僅可以放靜態 html 網頁，若是你會寫 python 的話，也可以開發 server 端程式呢！

使用 Google 服務加自己的 domain 設定，通常都是在 DNS 上，加一筆 CNAME 資料，指到 google 的 ghs.google.com 即可，這樣當有人要瀏覽 blog.ben.idv.tw 時，就會先找到我在 everydns.net 上設定的 DNS 紀錄，然後導到 ghs.google.com 去找這個 blog.ben.idv.tw 的網址，接下來就是 google 的服務囉！

感覺怎麼解釋都好像解釋得不是很好，誰叫我不是系統工程師出身的呢！以下畫面是我在 everydns.net 上設定的資料，可以看到我有不少的紀錄如 blog, js, lua 都是導到 google 採用 blogspot 平台，而 gae 則是使用 Google App Engine 平台：

以上，是對於一般部落客可以運用的部份。

接下來，是一個小型組織，甚至是公司可以考慮採用的應用，Google 提供了另一個平台：Google 應用服務！

https://www.google.com/a/

先講講跟前述類似的部份，就是這個平台也可以使用你自訂的 domain 來提供一些服務，所以你若是打 http://www.ben.idv.tw/ 的話，就會導到我在 Google Apps 上所設定的 Start Page，基本上，這個 Start Page 應該是類似 iGoogle 的東西吧！我完全沒玩過 iGoogle，不過我想應該是一樣的，因為，他也可以讓你自訂你想要放的 widget 與排版位置：

為何我說 Google Apps 適用於 "組織" 應用呢？因為你可以想像這裡是 ben.idv.tw 這家公司/組織的內部網站，若是要 login 的話，就必須輸入管理者事先已經定義好的帳號資料才行，你可以看到以下的 login 畫面中，他會提示你是要輸入 xxxxxx@ben.idv.tw 的帳號：

登入成功後，回到這個 ben.idv.tw 的組織的 Start Page 時，就會看到此登入帳號自己的 Start Page 設定，譬如以下畫面中，我在右下角就放置了一個新的 widget：

再來證明一下這個平台到底跟 "組織" 有什麼關係，登入者接著可以到信箱中看看，可以看到以下畫面的右上角，現在正在瀏覽的信箱是 webmaster@ben.idv.tw 的信箱，這就表示你可以為你的組織成員開信箱，而不用真的自己建置 mail server 環境了：

所以啦！中小企業可以好好考慮這套服務，若是你公司只用 blog 來公告公司訊息的話，那就用 blogspot 結合自己的 domain 即可，若是想要做比較複雜的網頁服務，也可以考慮學學 python 然後使用 Google App Engine 來建置你家的企業網站，總之，在某種流量與空間的限制之下，這一切都是免費的囉，只有申請 domain name 是要花錢ㄉㄟ！

ben.idv.tw

2008-06-26T08:37:00.005+08:00

經朋友介紹，使用了免費的 DNS 服務：http://www.everydns.net/

所以現在我的 blog 可以使用自己的 domain 了！

http://blog.ben.idv.tw --> 邦邦的部落格

http://lua.ben.idv.tw --> 邦邦學 Lua in uiOne (學Lua時的心得)

http://js.ben.idv.tw --> 邦邦的JavaScript教學 (只寫了幾篇的JS教學)

http://gae.ben.idv.tw/WebcamCapture/ --> 放在 Google App Engine 的 webcam 程式

關於 MMUG 暫停服務

2008-06-25T15:57:00.004+08:00

http://mmug.com.tw/ 因為一些說來話長的原因，暫停服務一陣子！

若是您在這段期間有什麼 Flash 的問題 "急著" 想要找人請教與討論的話，歡迎到 Google Group 平台的 AUG.tw 繼續發問：

http://groups.google.com/group/augtw

PV3D 做翻頁

2008-06-19T14:57:00.004+08:00

執行畫面：

瀏覽效果；點選 flash 使之取得 focus，可用左右鍵進行翻頁；移動滑鼠與滾輪可用來切換視角：

http://ben.rb.chang.googlepages.com/20080619_PV3D_2_bookflip.html

完整程式碼：


package {
 import caurina.transitions.Tweener;
 
 import flash.display.Sprite;
 import flash.events.Event;
 import flash.events.KeyboardEvent;
 import flash.events.MouseEvent;
 import flash.ui.Keyboard;
 
 import org.papervision3d.cameras.Camera3D;
 import org.papervision3d.core.geom.renderables.Vertex3D;
 import org.papervision3d.materials.ColorMaterial;
 import org.papervision3d.materials.utils.MaterialsList;
 import org.papervision3d.objects.DisplayObject3D;
 import org.papervision3d.objects.primitives.Plane;
 import org.papervision3d.render.BasicRenderEngine;
 import org.papervision3d.scenes.Scene3D;
 import org.papervision3d.view.Viewport3D;

 [SWF(backgroundColor="#000000", frameRate="12", width="400", height="400")]
 public class PV3D_2_bookflip extends Sprite
 {
  private var viewport:Viewport3D;
  private var scene:Scene3D;
  private var camera:Camera3D;
  private var renderer:BasicRenderEngine;
  
  private var camera_angle:Number = 0; //盤旋的圓圈角度
  private var camera_height:Number = 500; //高度
  private var camera_r:Number = 500; //半徑，距離 y 軸線的距離
  
  private var page_count:int = 8;
  private var page_thickness:int = 10;
  private var page_left_idx:int = -1;
  
  public function PV3D_2_bookflip()
  {
   init();
  }
  
  private function init():void
  {   
   initPV3D();
   
   this.addEventListener(Event.ENTER_FRAME, loopPV3D);
   
   this.stage.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
   this.stage.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel);
   this.stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
  }
  
  private function initPV3D():void
  {
   viewport = new Viewport3D(stage.stageWidth, stage.stageHeight);
   this.addChild(viewport);
   
   scene = new Scene3D();
   camera = new Camera3D();
   renderer = new BasicRenderEngine();
   

   for(var i:int=0; i<page_count; i++)
   {
    var materialList:MaterialsList = new MaterialsList({
     front: new ColorMaterial(0xffffff * Math.random())
     , back: new ColorMaterial(0xffffff * Math.random())
     });
    var page:DisplayObject3D = createNewPage(materialList, 750, 1000);
    moveCenter(page, -750/2) //移動中心點
    page.rotationX = -90; //倒下去
    page.y = (page_count - i) * page_thickness; //每頁要有點層級、厚度
    
    scene.addChild(page, "page" + i);
   }
  }
  
  private function createNewPage(materials:MaterialsList, width:Number=500, height:Number=500, segmentsW:Number=0, segmentsH:Number=0, initObject:Object=null):DisplayObject3D
  {
   var page:DisplayObject3D = new DisplayObject3D();
   
   var frontPlane:Plane = new Plane(materials.getMaterialByName("front"), width, height, segmentsW, segmentsH, initObject);
   var backPlane:Plane = new Plane(materials.getMaterialByName("back"), width, height, segmentsW, segmentsH, initObject);
   
   backPlane.rotationY = 180;
   
   page.addChild(frontPlane, "front");
   page.addChild(backPlane, "back");
   
   return page;
  }
  
  private function moveCenter(obj3d:DisplayObject3D, dx:Number=0, dy:Number=0, dz:Number=0):void
  {
   if(obj3d.geometry!=null)
   {
    var vs:Array = obj3d.geometry.vertices;
    var vc:int = vs.length;
    for(var i:int=0; i<vc; i++)
    {
     var vt:Vertex3D = vs[i] as Vertex3D;
     vt.x -= dx;
     vt.y -= dy;
     vt.z -= dz;
    }
   }
   
   for each(var child:DisplayObject3D in obj3d.children)
   {
    child.x -= dx;
    child.y -= dy;
    child.z -= dz;
   }
   
   /*
   obj3d.x += dx;
   obj3d.y += dy;
   obj3d.z += dz;
   */
  }
  
  private function loopPV3D(evt:Event):void
  {
   countCameraPostion();
   
   renderer.renderScene(scene, camera, viewport);
  }
  
  private function countCameraPostion():void
  {
   camera.x = camera_r * Math.cos(camera_angle);
   camera.y = camera_height;
   camera.z = camera_r * Math.sin(camera_angle);
  }  
  
  private function onMouseMove(evt:MouseEvent):void
  {
   camera_angle = Math.PI * (.25 * (evt.stageX - this.stage.stageWidth/2) / (this.stage.stageWidth/2) - 0.5);
   camera_height = 500 + 500 * (1 - evt.stageY / this.stage.stageHeight);
  }
  
  private function onMouseWheel(evt:MouseEvent):void
  {
   if(evt.delta>0)
   {
    //拉近
    camera_r -= 25;
    camera_r = Math.max(camera_r, 200);
   }
   else
   {
    //拉遠
    camera_r += 25;
    camera_r = Math.min(camera_r, 2000);
   }
  }
  
  private function onKeyUp(evt:KeyboardEvent):void
  {
   if(evt.keyCode == flash.ui.Keyboard.RIGHT)
   {
    nextPage();
   }
   else if(evt.keyCode == flash.ui.Keyboard.LEFT)
   {
    prevPage();
   }
  }
  
  private function nextPage():void
  {
   //頁面翻到左邊
   if(page_left_idx < page_count-1)
   {
    var page:DisplayObject3D = scene.getChildByName("page" + (page_left_idx+1));
    if(page)
    {
     var newPageDepth:int = (page_left_idx+1) * page_thickness; //每頁要有點層級、厚度
     Tweener.addTween(page, {rotationZ:180, time:3, onUpdate:function():void{
                  if(this.rotationZ>90)
                  {
                   page.y = newPageDepth;
                  }
                 }});
     page_left_idx++;
    }
   }
  }
  
  private function prevPage():void
  {
   //頁面翻到右邊
   if(page_left_idx > -1)
   {
    var page:DisplayObject3D = scene.getChildByName("page" + page_left_idx);
    if(page)
    {
     var newPageDepth:int = (page_count - page_left_idx) * page_thickness; //每頁要有點層級、厚度
     Tweener.addTween(page, {rotationZ:0, time:3, onUpdate:function():void{
                  if(this.rotationZ<90)
                  {
                   page.y = newPageDepth;
                  }
                 }});
     
     page_left_idx--;
    }
   }
  }
 }
}

我的 Google App Engine 第一個範例：Webcam 監控程式

2008-06-17T16:58:00.012+08:00

今天使用 Google App Engine 平台，開發了一個用 Webcam 監控，定期拍照上傳圖檔的程式。

監控程式位置：
http://ben-rb-chang.appspot.com/WebcamCapture/

可以調整每隔 5 ~ 30 秒拍照一張，按下 Start 後就會開始擷取了：

儲存在 Server 上的圖檔 (存在 DataStore 中)，可由此觀看：
http://ben-rb-chang.appspot.com/WebcamCapture/uploadPic

原始檔放在 Google Code：
http://code.google.com/p/gae-ben-rb-chang/source/browse/trunk/WebcamCapture

這個程式可以用來監看家裡的老人、寵物、或是任何想要開放給網路任何人看到的東西或景觀。

Flex 儲存圖檔的程式，可以參考我之前的文章：

Flash WebCam 拍照存檔
http://benbenstudio.blogspot.com/2007/08/flash-webcam.html

將影片轉成連續圖檔
http://benbenstudio.blogspot.com/2007/09/blog-post_05.html

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

[2008-06-20-11-16]

我將 Google Map for Flash 結合進來，user 可以自己定出自己的 webcam 的所在位置。

接下來，就可以利用這些經緯度資料，以及拍照時間資料，看看如何美化看圖介面了。

我第一次使用 Google Map for Flash 時的文章如下：

地址轉經緯度後，於PV3D地球上定位
http://benbenstudio.blogspot.com/2008/06/pv3d.html

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

[2008-06-20-15-33]

現在，可以在介面上，看到最近活動的 30 個 webcam 畫面(雖然只有我在玩)。

地圖當然就是要可以放大的囉！

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

[2008-06-23-13-21]

flex 向 server 端的 python 取得圖檔的時候，可以指定寬高，python 會將圖檔縮放成指定寬高後再傳回，雖增加了 server 的 CPU 運算，但可減少頻寬的使用。

另外，增加了 what are you doing? 的欄位。

說起來，這只還是多種技術的亂結合而已！

World or Warcraft Programming

2008-06-13T11:24:00.002+08:00

之前買的魔獸世界程式開發手冊今天到貨了

買的時候沒有注意到，它竟然有 1022 頁，比 Essential ActionScript 3 還厚，沒關係，只是好玩隨意看看而已，真是敗家ㄚ！

升級 PV3D 2.0

2008-06-13T10:28:00.004+08:00

稍微去看了一下 PV3D 2.0 的進展，在以下這裡有些教學：
http://pv3d.org/pv3d-20-tutorial-list/

其中，有些初學者的教學可以先看看：
Preparing for your first Papervision3D (pv3d) Project
0. Flash Develop + Flex 2 SDK
1. Downloading Papervision3D 2.0 Alpha - Great White
2. Preparing a Papervision3D Project

Introduction to pv3d Workflow
3. Creating a pv3d 2.0 Skeleton Class
4. Creating Your First pv3d 3D Object
5. Applying Materials to a pv3d 3D Object (Skinning/Texturing)
6. Basic Movement in 3d
7. Basic Interactivity
8. Basic Template and Function Modifier Explanations

前三篇，工作環境的介紹，有經驗的人只要知道 SVN 位置就好了：
http://papervision3d.googlecode.com/svn/trunk/branches/GreatWhite/src/
此刻的版本是 Revision 590。

接下來，可以看看 3 與 7 的文章，了解與 1.x 版不同的新東西，像是 org.papervision3d.view.Viewport3D 與 org.papervision3d.render.BasicRenderEngine，然後看看如何製作可以接收互動事件的貼圖材質與相關事件處理方式。

Datastore 的 DateTimeProperty 採用 UTC 儲存資料

2008-06-11T11:18:00.005+08:00

Google AppEngine 的 DataStore 有個 DateTimeProperty 的資料型態，不過，它是以 UTC 做儲存的，不管我們寫入時是否有指定 tzinfo，取出時 tzinfo 都已經被拿掉了。相關說明官網有提到：

http://code.google.com/appengine/docs/datastore/typesandpropertyclasses.html#DateTimeProperty

官網也提到如何將 UTC 的 datetime 轉換成自己想要的 tzinfo 的時間：

http://code.google.com/appengine/docs/datastore/typesandpropertyclasses.html#datetime

除了自己寫一個繼承自 tzinfo 的類別之外，也可以考慮使用 pytz：

http://pytz.sourceforge.net/

我嘗試採用 pytz 來產生我要的 timezone，在寫入資料庫前，確認寫入的 datetime 真的具有 tzinfo，不過輸出時，tzinfo 也確實被拿掉了。

以下是我寫入資料庫前的程式碼，之前的版本是採用資料庫預設產生的，而現在改為由我們自己用 datetime.now(taipei_tz) 指定：


class GuestBook(webapp.RequestHandler):
    def post(self):
        greeting = Greeting()
        if users.get_current_user():
            greeting.author = users.get_current_user()
        greeting.content = self.request.get("content")
        greeting.date = datetime.now(taipei_tz)
        
        greeting.put()

        self.response.out.write("存入的日期時間為：" + greeting.date.strftime("%Y-%m-%d %H:%M:%S %Z%z") + "<p>")
        self.response.out.write("<a href=\"/\">Home</a>")
        #self.redirect("/")

這裡看到的 taipei_tz 是 global 建好的 timezone：


import pytz
from pytz import timezone

taipei_tz = timezone('Asia/Taipei')

執行時，送出留言後的畫面如下，可以看出我們用 strftime() 指定字串格式中的 %Z%z 所代表的 tzinfo 資訊，可以正確的呈現出來：

可是當回到列表頁面時，若是我採用 replace(tzinfo=tz) 的話，出來的結果根本就沒有變化：


        greetings = Greeting.gql("order by date desc limit 10")
        ......
        ......
        for greeting in greetings:
            ......
            ......
            greeting.date.replace(tzinfo=taipei_tz)
            self.response.out.write("<td>")
            self.response.out.write(greeting.date.tzname())
            self.response.out.write("</td>")
            ......
            ......
        ......
        ......

而，若是採用 astimezone(tz) 的話，則會出現錯誤訊息：


        greetings = Greeting.gql("order by date desc limit 10")
        ......
        ......
        for greeting in greetings:
            ......
            ......
            greeting.date.astimezone(taipei_tz)
            self.response.out.write("<td>")
            self.response.out.write(greeting.date.tzname())
            self.response.out.write("</td>")
            ......
            ......
        ......
        ......

錯誤訊息如下：


Traceback (most recent call last):
  File "C:\Program Files\Google\google_appengine\google\appengine\ext\webapp\__init__.py", line 499, in __call__
    handler.get(*groups)
  File "C:\GoogleAppEngineWorkspace\helloworld\05_helloworld_db.py", line 51, in get
    greeting.date.astimezone(taipei_tz)
ValueError: astimezone() cannot be applied to a naive datetime

所以，最後我還是暫時只能用我上一篇的作法，自己加 timedelta(hours=+8) 了，做出來的執行畫面如下：

不知道是否是 Google AppEngine 的問題，輸出的 datetime 應該不要用 naive，而要用 aware 包含 tzinfo，還是說這是 dev_appserver.py 的限制(應該不可能)，還是說還有其他轉換的作法，還是說這版的 astimezone() 實作有問題(應該不可能)，總之，再研究看看吧！

這次的完整程式碼如下：


# -*- coding: utf8 -*-
import cgi
import wsgiref.handlers
from datetime import datetime, timedelta
from google.appengine.api import users
from google.appengine.ext import webapp
from google.appengine.ext import db

import pytz
from pytz import timezone

taipei_tz = timezone('Asia/Taipei')

class MainPage(webapp.RequestHandler):
    def get(self):

        #self.response.out.write(datetime.now(taipei_tz).strftime("%Y-%m-%d %H:%M:%S %Z%z") + "<p>")
        
        self.response.out.write("<html><body>")

        user = users.get_current_user()
        if user:
            self.response.out.write("welcome, " + user.nickname())
            self.response.out.write("[<a href='" + users.create_logout_url(self.request.uri) + "'>logout</a>]<p>")
        else:
            self.response.out.write("[<a href='" + users.create_login_url(self.request.uri) + "'>login</a>]<p>")

        self.response.out.write("""
                    <form action="/sign" method="post">
                    <div><textarea name="content"></textarea></div>
                    <div><input type="submit"></div>
                    </form>""")

        #greetings = db.GqlQuery("select * from Greeting order by date desc limit 10")
        greetings = Greeting.gql("order by date desc limit 10")
        self.response.out.write("""
                <table border="1">
                <tr>
                <th>UTC</th>
                <th>+08:00</th>
                <th>tzinfo</th>
                <th>user</th>
                <th>content</th>
                </tr>""")
        for greeting in greetings:
            self.response.out.write("<tr>")
            self.response.out.write("<td>" + greeting.date.strftime("%Y-%m-%d %H:%M:%S %Z%z") + "</td>")
            self.response.out.write("<td>" + (greeting.date + timedelta(hours=+8)).strftime("%Y-%m-%d %H:%M:%S %Z%z") + "</td>")

            greeting.date.replace(tzinfo=taipei_tz)
            #greeting.date.astimezone(taipei_tz)
            self.response.out.write("<td>")
            self.response.out.write(greeting.date.tzname())
            self.response.out.write("</td>")

            self.response.out.write("<td>")
            if greeting.author:
                self.response.out.write("<b>%s</b> wrote:" % greeting.author.nickname())
            else:
                self.response.out.write("an anonymous person wrote:")
            self.response.out.write("</td>")
            self.response.out.write("<td><pre>%s</pre></td>" % cgi.escape(greeting.content))
            self.response.out.write("</tr>")
        self.response.out.write("</table>")

        self.response.out.write("</body></html>")        
                
class GuestBook(webapp.RequestHandler):
    def post(self):
        greeting = Greeting()
        if users.get_current_user():
            greeting.author = users.get_current_user()
        greeting.content = self.request.get("content")
        greeting.date = datetime.now(taipei_tz)
        
        greeting.put()

        self.response.out.write("存入的日期時間為：" + greeting.date.strftime("%Y-%m-%d %H:%M:%S %Z%z") + "<p>")
        self.response.out.write("<a href=\"/\">Home</a>")
        #self.redirect("/")

class Greeting(db.Model):
    author = db.UserProperty()
    content = db.StringProperty(multiline=True)
    date = db.DateTimeProperty(auto_now_add=True)
    
def main():
    application = webapp.WSGIApplication(
        [('/', MainPage)
         , ('/sign', GuestBook)],
        debug=True)
    wsgiref.handlers.CGIHandler().run(application)

if __name__ == "__main__":
    main()

Python 的 datetime 轉時區

2008-06-10T14:07:00.004+08:00

為了週末要參加 Google Developer Day，所以被官方寄信告知要先自己玩過 Google App Engine 的範例教學，以確保當天課程的順利進行。

在玩 datastore 的範例時：
http://code.google.com/appengine/docs/gettingstarted/usingdatastore.html
Greeting 的 date 欄位預設自動填入日期值，而輸出時，範例並沒有示範如何顯示這個日期資料。

第一個問題是，若是從 Greeting 取得 datetime 類別的 date 物件時，要用何種方法可以將它變成我們想要的字串格式，當然各別將年月日取出來自己接字串也是可以，不過大部分的程式語言都具備有 format 的功能才對。

這題算是比較簡單，只要會使用 strftime() 即可：
http://docs.python.org/lib/strftime-behavior.html

有支援的符號，可以由此查得：
http://docs.python.org/lib/module-time.html


Directive Meaning
%a Locale's abbreviated weekday name. 
%A Locale's full weekday name. 
%b Locale's abbreviated month name. 
%B Locale's full month name. 
%c Locale's appropriate date and time representation. 
%d Day of the month as a decimal number [01,31]. 
%H Hour (24-hour clock) as a decimal number [00,23]. 
%I Hour (12-hour clock) as a decimal number [01,12]. 
%j Day of the year as a decimal number [001,366]. 
%m Month as a decimal number [01,12]. 
%M Minute as a decimal number [00,59]. 
%p Locale's equivalent of either AM or PM.
%S Second as a decimal number [00,61].
%U Week number of the year (Sunday as the first day of the week) as a decimal number [00,53]. All days in a new year preceding the first Sunday are considered to be in week 0.
%w Weekday as a decimal number [0(Sunday),6]. 
%W Week number of the year (Monday as the first day of the week) as a decimal number [00,53]. All days in a new year preceding the first Monday are considered to be in week 0.
%x Locale's appropriate date representation. 
%X Locale's appropriate time representation. 
%y Year without century as a decimal number [00,99]. 
%Y Year with century as a decimal number. 
%Z Time zone name (no characters if no time zone exists). 
%% A literal "%" character.

接下來，我第二個遇到的問題是，從 datastore 取得的 datetime 資料型態，都是以 UTC 的 timezone 呈現，這對我來說就麻煩了，即使我在學 Java 的時候，也沒怎麼學過如何處理國際化或是時區的相關議題，只好硬著頭皮查查以下的資料：

1.
http://docs.python.org/lib/datetime-datetime.htmldatetime 具有 tzinfo 屬性，以及 astimezone(tz) 方法與 replace(tzinfo=tz) 方法，看來可以用來設定 timezone。

2.
http://docs.python.org/lib/datetime-tzinfo.html
不過，tzinfo 是個 abstract class，我們必須自己繼承它，並實做一些 method 才行，文件中有提供範例程式，可以透過 USTimeZone() 取得 tzinfo 物件，但是台灣要用何種時區設定，就還要再查一查，我只知道我們是 +08:00。

3.
若是你在 google 查 "python timezone" 的話，可以找到一個有名的專門用來處理 timezone 的 python lib：
http://pytz.sourceforge.net/
我還沒研究要如何使用它。

4.
繼續步驟 2.，雖然我還不知道台灣的設定該如何設，不過我還是先亂玩一下，用 USTimeZone 任意建立一個 tz 後，餵給 greeting.date.astimezone(tz)：


......
from tzinfo import USTimeZone
tz  = USTimeZone(-5, "Eastern",  "EST", "EDT")
......
greeting.date.astimezone(tz)
......

結果，出現錯誤訊息：ValueError: astimezone() cannot be applied to a naive datetime

5.
重新回到 datetime 的文件：
http://docs.python.org/lib/module-datetime.html

有這麼一段：


There are two kinds of date and time objects: ``naive'' and ``aware''. This distinction refers to whether the object has any notion of time zone, daylight saving time, or other kind of algorithmic or political time adjustment. Whether a naive datetime object represents Coordinated Universal Time (UTC), local time, or time in some other timezone is purely up to the program, just like it's up to the program whether a particular number represents metres, miles, or mass. Naive datetime objects are easy to understand and to work with, at the cost of ignoring some aspects of reality.

總之就是，我從 datastore 取出的 datetime 屬性的 date 欄位，因為是 naive 的，所以不具有 timezone 的資訊，所以，我乾脆利用 timedelta 自己來為它加 8 小時吧：


(greeting.date + timedelta(hours=+8)).strftime("%Y-%m-%d %H:%M:%S %Z%z")

關於 timedelta 的用法：
http://docs.python.org/lib/datetime-timedelta.html

最後，執行畫面如下：

完整程式碼如下：


import cgi
import wsgiref.handlers
from datetime import timedelta
from google.appengine.api import users
from google.appengine.ext import webapp
from google.appengine.ext import db

class MainPage(webapp.RequestHandler):
    def get(self):
        self.response.out.write("<html><body>")

        user = users.get_current_user()
        if user:
            self.response.out.write("welcome, " + user.nickname())
            self.response.out.write("[<a href='" + users.create_logout_url(self.request.uri) + "'>logout</a>]<p>")
        else:
            self.response.out.write("[<a href='" + users.create_login_url(self.request.uri) + "'>login</a>]<p>")

        self.response.out.write("""
                    <form action="/sign" method="post">
                    <div><textarea name="content"></textarea></div>
                    <div><input type="submit"></div>
                    </form>""")

        #greetings = db.GqlQuery("select * from Greeting order by date desc limit 10")
        greetings = Greeting.gql("order by date desc limit 10")
        self.response.out.write("""
                <table border="1">
                <tr>
                <th>UTC</th>
                <th>+08:00</th>
                <th>user</th>
                <th>content</th>
                </tr>""")
        for greeting in greetings:
            self.response.out.write("<tr>")
            self.response.out.write("<td>" + greeting.date.strftime("%Y-%m-%d %H:%M:%S %Z%z") + "</td>")
            self.response.out.write("<td>" + (greeting.date + timedelta(hours=+8)).strftime("%Y-%m-%d %H:%M:%S %Z%z") + "</td>")
            self.response.out.write("<td>")
            if greeting.author:
                self.response.out.write("<b>%s</b> wrote:" % greeting.author.nickname())
            else:
                self.response.out.write("an anonymous person wrote:")
            self.response.out.write("</td>")
            self.response.out.write("<td><pre>%s</pre></td>" % cgi.escape(greeting.content))
            self.response.out.write("</tr>")
        self.response.out.write("</table>")

        self.response.out.write("</body></html>")        
                
class GuestBook(webapp.RequestHandler):
    def post(self):
        greeting = Greeting()
        if users.get_current_user():
            greeting.author = users.get_current_user()
        greeting.content = self.request.get("content")
        greeting.put()
        self.redirect("/")

class Greeting(db.Model):
    author = db.UserProperty()
    content = db.StringProperty(multiline=True)
    date = db.DateTimeProperty(auto_now_add=True)
    
def main():
    application = webapp.WSGIApplication(
        [('/', MainPage)
         , ('/sign', GuestBook)],
        debug=True)
    wsgiref.handlers.CGIHandler().run(application)

if __name__ == "__main__":
    main()

開發 IE 瀏覽器的 Toolbar：開新視窗並做兩視窗間的互動

2008-05-30T12:31:00.006+08:00

在研究如何在 toolbar 上，進行另開新視窗，然後還可以兩個 IE 視窗互相溝通，這個問題查了一天半，看了以下幾個屬性或方法：

IHTMLWindow2::open Method
http://msdn.microsoft.com/en-us/library/aa741489(VS.85).aspx
可是得到的都一直是 null！

IHTMLWindow2::opener Property
http://msdn.microsoft.com/en-us/library/aa741490(VS.85).aspx
說只適用於 frame 與 iframe，奇怪，怎麼跟我在 JavaScript 時的經驗不太一樣呢？

IHTMLDocument2::parentWindow Property
http://msdn.microsoft.com/en-us/library/aa752599(VS.85).aspx
認識一下如何從 document 取得 window！

IHTMLDocument2::frames Property
http://msdn.microsoft.com/en-us/library/aa752592(VS.85).aspx
想當然不是這個，因為現在是要處理 window 的互動，不是 frame 的！

IWebBrowser2::Navigate Method
http://msdn.microsoft.com/en-us/library/aa752133(VS.85).aspx
IWebBrowser2::Navigate2 Method
http://msdn.microsoft.com/en-us/library/aa752134(VS.85).aspx
在 C# 的語法中，都得不到回傳值！

最後，只好另外建立一個 InternetExplorer 介面的物件，用它來開啟新視窗，並且在舊視窗中繼續監聽新視窗的事件，這樣一來在視窗處理函式中就仍可存取到舊視窗的物件架構了。

以下是我的 MyToolbar.cs 中的片段程式碼，第三個按鈕的程式：


  private InternetExplorer IE;
  private DWebBrowserEvents2_DocumentCompleteEventHandler IE_DocumentCompleteEventHandler;

  private void button3_Click(object sender, System.EventArgs e)
  {
   object o = new object();

   try
   {
    IE.Visible = true;
    IE.Navigate("http://www.google.com", ref o, ref o, ref o, ref o);
   }
   catch(Exception exp)
   {
    IE = new InternetExplorer();
    IE.Visible = true;

    IE_DocumentCompleteEventHandler = new DWebBrowserEvents2_DocumentCompleteEventHandler(IE_DocumentComplete);
    IE.DocumentComplete += IE_DocumentCompleteEventHandler;

    IE.Navigate("http://www.google.com", ref o, ref o, ref o, ref o);
   }
  }

  private void IE_DocumentComplete(object pDisp, ref object URL)
  {
   IWebBrowser2 ie = pDisp as IWebBrowser2;
   
   MessageBox.Show("[Explorer]" + (this.Explorer.Document as HTMLDocumentClass).url
       + "\n[IE]" + (IE.Document as IHTMLDocument2).url
       + "\n[ie]" + (ie.Document as IHTMLDocument2).url);
   
   //IE.DocumentComplete -= IE_DocumentCompleteEventHandler;
  }

按下按鈕後，會產生新的視窗，但是新視窗的 DocumentComplete 事件處理程式卻都放在舊視窗中，所以仍可存取到舊視窗的物件，像是在 IE_DocumentComplete() 中的訊息框，Explorer 就代表舊視窗，IE 就代表新視窗，ie 則代表在新視窗中發出事件的來源，因為新視窗的 html 頁面可能會有許多 frame / iframe，所以會發現 ie 會有所不同。

下圖，按下 toolbar 上第三個按鈕，開啟新視窗到 google，並跳出訊息：

下圖，當舊視窗變更網址到 mmug，則當新視窗也變更網址到 yam 時，會看到訊息框中可以正確的得知舊視窗的資訊：

若是，將舊視窗關閉的話，則表示 Listener 已經不存在了，當新視窗在變更網址到其他位置時，將無人監聽事件，所以就不會再有訊息框了，我就不貼沒有訊息框的貼圖了！

借此作法，我們就可以在舊視窗中完全掌控新視窗的事件處理、控制 HTML 物件等等，而且仍可拿到舊視窗的 HTML 物件，得以互動。

開發 IE 瀏覽器的 Toolbar：安裝程式

2008-05-28T15:23:00.009+08:00

開發好 IE 瀏覽器的 Plug-in 後，接下來就是要知道如何製作安裝程式，在以下這篇文章中，有提到一些做法：

Issues faced while extending IE with Band Objects using .NET and Windows Forms
http://www.codeproject.com/KB/cs/Issuewithbandobjects.aspx

這篇文章在提到安裝程式的那段中，主要是說我們可以為 MSI 設定 registration 為 vsdrpCOM，這樣安裝後就會進行註冊 dll 的動作，但是據說在 uninstall 時不會被移除。所以作者建議可以維持預設的 vsdrpNoDotRegister 不註冊，然後自己寫 Custom Actions。

首先，先在 MyToolbar 的專案中，新增一個 MyToolbarInstaller 的 Installer Class：

完整程式碼如下，重點在於 override Install 與 Uninstall 的部份：


using System;
using System.Collections;
using System.ComponentModel;
using System.Configuration.Install;

namespace MyToolbar
{
 /// 
 /// Summary description for Installer1.
 /// 

 [RunInstaller(true)]
 public class MyToolbarInstaller : System.Configuration.Install.Installer
 {
  /// 
  /// Required designer variable.
  /// 

  private System.ComponentModel.Container components = null;

  public MyToolbarInstaller()
  {
   // This call is required by the Designer.
   InitializeComponent();

   // TODO: Add any initialization after the InitializeComponent call
  }

  public override void Install(IDictionary stateSaver)
  {
   base.Install (stateSaver);

   System.Runtime.InteropServices.RegistrationServices r = new System.Runtime.InteropServices.RegistrationServices();
   r.RegisterAssembly(this.GetType().Assembly, System.Runtime.InteropServices.AssemblyRegistrationFlags.SetCodeBase);
  }

  public override void Uninstall(IDictionary savedState)
  {
   base.Uninstall (savedState);

   System.Runtime.InteropServices.RegistrationServices r = new System.Runtime.InteropServices.RegistrationServices();
   r.UnregisterAssembly(this.GetType().Assembly);
  }

  /// 
  /// Clean up any resources being used.
  /// 

  protected override void Dispose( bool disposing )
  {
   if( disposing )
   {
    if(components != null)
    {
     components.Dispose();
    }
   }
   base.Dispose( disposing );
  }


  #region Component Designer generated code
  /// 
  /// Required method for Designer support - do not modify
  /// the contents of this method with the code editor.
  /// 

  private void InitializeComponent()
  {
   components = new System.ComponentModel.Container();
  }
  #endregion
 }
}

這個 Installer Class 會一起被包進 MyToolbar.dll 中！

接著，可以在 Solution 中新增一個 MyToolbarSetup 的 Setup Project：

然後在 Setup Project 的檔案總管中，在 Application Folder 中新增一個 Assembly，請選取 MyToolbar 專案所產出的 MyToolbar.dll，系統會自動將依賴的 dll 也都包進來，其中有一個 shdocvw.dll 因為是屬於 C:\WINDOWS\system32\shdocvw.dll 的共用 dll，所以可以將之排除，設定其 Exculde 設定為 True：

順利 build 完這個 Setup Project 並執行輸出的 \MyToolbarSetup\Release\MyToolbarSetup.msi 後，會發現當我們開啟 IE 時並不會看到我們開發的 Toolbar，這是因為我們在 Setup Project 中，並未設定 MyToolbar.dll 要進行註冊：

記得 Custom Actions 這件事情嗎？若是你跟我一樣對 Visual Studio .NET 2003 沒有那麼熟的話，可以參考以下的官方說明，教你如何在 Setup Project 中指定自己的 Custom Actions：

http://msdn.microsoft.com/en-us/library/d9k65z2d(VS.80).aspx

步驟如下：

在 Install 與 Uninstall 都指定到 MyToolbar.dll，因為在 MyToolbar.dll 中有 Install Class，所以會進行一些自訂的作業。

重新 build 並執行 MyToolbarSetup.msi 安裝後，應該就可以在 IE 瀏覽器看到 Toolbar 了，記得測試一下 Uninstall 是否也會正常移除 IE 瀏覽器的 Toolbar 喔！

開發 IE 瀏覽器的 Toolbar：半自動程式搭配人為挑選資料

2008-05-27T18:18:00.003+08:00

若是在自動化作業中，有一些需要半自動 + 人為決定的話，譬如在 100 篇資料中只要複製其中幾篇，這時候就要考慮如何將人為因素加入。以下畫面中呈現 login 後，要從頁面二的表格中，挑選部分資料複製到頁面三的表格中：

login：

進入頁面二後，我會動態在 html table 中加入新的一欄，並在欄位標頭加一個按鈕，而其他列中則加入 checkbox 供勾選：

勾選完畢，按下欄位標頭的按鈕後，因為我會監聽此按鈕的 click 事件，所以可以在此重新分析 table 的資料，決定哪幾列因為有勾選而需要儲存資料，並且將瀏覽器跳至下一頁：

最後，將儲存的資料複製進頁面三的表格中即可：

完整 HTML 原始檔：


<html>
<head>
<title>test page</title>
</head>
<body>

<table border="1">
<tr valign="top">

<td>
<h3>頁面一：登入</h3>

<form>
uid: <input type="text" name="uid"><br>
pwd: <input type="text" name="pwd"><br>
<input type="submit">
</form>
</td>

<td>
<h3>頁面二：複製資料</h3>

<form>
<table border="1">
<tr>
<td>owner</td>
<td>status</td>
</tr>
<tr>
<td>owner 1</td>
<td>status 1</td>
</tr>
<tr>
<td>owner 2</td>
<td>status 2</td>
</tr>
<tr>
<td>owner 3</td>
<td>status 3</td>
</tr>
<tr>
<td>owner 4</td>
<td>status 4</td>
</tr>
<tr>
<td>owner 5</td>
<td>status 5</td>
</tr>
</table>
</form>
</td>

<td>
<h3>頁面三：貼上資料</h3>

<form>
<table border="1">
<tr>
<td>owner</td>
<td>status</td>
</tr>
</table>
</form>
</td>

</tr>
</table>

</body>
</html>

C# 原始檔：


  /*
   * override BandObjectLib 的 OnExplorerAttached，可於此處設定監聽 browser 的事件
   */
  protected override void OnExplorerAttached(EventArgs ea)
  {
   this.Explorer.DocumentComplete += new DWebBrowserEvents2_DocumentCompleteEventHandler(this.OnDocumentComplete);
  }

  /*
   * 監聽網頁載入完成的事件
   */
  private void OnDocumentComplete(object frame, ref object urlObj)
  {
   string rooturl = ((this.Explorer as IWebBrowser2).Document as IHTMLDocument2).url;

   IWebBrowser2 webBrowser = (IWebBrowser2)frame;
   IHTMLDocument2 document = (IHTMLDocument2)webBrowser.Document;

   //MessageBox.Show("[OnDocumentComplete]\n" + document.title + "\n" + document.url);

   if(step!=-1)
    startProcess();
  }
 
  /*
   * 按鈕一，連到指定頁面
   */
  private void button1_Click(object sender, System.EventArgs e)
  {
   IWebBrowser2 webBrowser = (IWebBrowser2)this.Explorer;

   object Null = System.Reflection.Missing.Value;
   webBrowser.Navigate("http://127.0.0.1/temp/test.html", ref Null, ref Null, ref Null, ref Null);
  }

  private int step = -1;
  private string data_owner = "";
  private string data_status = "";

  /*
   * 按鈕二，開始自動化作業
   */
  private void button2_Click(object sender, System.EventArgs e)
  {
   step = 0;
   startProcess();
  }

  /*
   * 自動化作業程序
   */
  private void startProcess()
  {
   IWebBrowser2 webBrowser = (IWebBrowser2)this.Explorer;
   IHTMLDocument2 document = (IHTMLDocument2)webBrowser.Document;

   step++;

   if(step==1)
   {
    /*
    * 程序一，登入
    */
    HTMLFormElementClass loginForm = document.forms.item(0, 0) as HTMLFormElementClass;
    HTMLInputTextElement uid = loginForm.item("uid", 0) as HTMLInputTextElement;
    HTMLInputTextElement pwd = loginForm.item("pwd", 0) as HTMLInputTextElement;

    uid.value = "username";
    pwd.value = "password";

    MessageBox.Show("填入帳密，自動送出！");
    loginForm.submit();
   }
   else if(step==2)
   {
    /*
    * 程序二，為表格建立勾選項目
    */
    HTMLTable sourceTable = (document.all.tags("table") as IHTMLElementCollection).item(1, 0) as HTMLTable;
    for(int i=0; i<sourceTable.rows.length; i++)
    {
     HTMLTableRow row = sourceTable.rows.item(i, 0) as HTMLTableRow;
     row.insertCell(0);

     HTMLTableCell cell = row.cells.item(0, 0) as HTMLTableCell;

     if(i==0)
     {
      cell.innerHTML = "<input type='button' name='btnSelected' value='選擇完畢'>";
     }
     else
     {
      cell.innerHTML = "<input type='checkbox'>";
     }
    }

    HTMLButtonElement btnSelected = document.all.item("btnSelected", null) as HTMLButtonElement;
    HtmlEventProxy.Create("onclick", btnSelected, new System.EventHandler(this.btnSelected_onclick));
    
    MessageBox.Show("請選擇欲複製的項目！");
   }
   else if(step==3)
   {
    /*
    * 程序三，貼上資料
    */
    HTMLTable targetTable = (document.all.tags("table") as IHTMLElementCollection).item(2, 0) as HTMLTable;
    if(copyData!=null){
     for(int i=0; i<copyData.Count; i++){
      
      HTMLTableRow row = targetTable.insertRow(targetTable.rows.length) as HTMLTableRow;
      row.insertCell(0);
      row.insertCell(1);

      System.Collections.Hashtable data = copyData[i] as System.Collections.Hashtable;
      (row.cells.item(0, 0) as HTMLTableCell).innerText = data["owner"].ToString();
      (row.cells.item(1, 0) as HTMLTableCell).innerText = data["status"].ToString();
     }
    }

    MessageBox.Show("複製完成");
   }
  }

  private System.Collections.ArrayList copyData;

  private void btnSelected_onclick(object sender, EventArgs e)
  {
   /*
   * 程序二，將勾選的項目儲存起來
   */
   IHTMLElement element = ((HtmlEventProxy)sender).HTMLElement as IHTMLElement;
   
   IWebBrowser2 webBrowser = (IWebBrowser2)this.Explorer;
   IHTMLDocument2 document = (IHTMLDocument2)webBrowser.Document;

   copyData = new System.Collections.ArrayList();
   string msg = "";

   HTMLTable sourceTable = (document.all.tags("table") as IHTMLElementCollection).item(1, 0) as HTMLTable;
   for(int i=1; i<sourceTable.rows.length; i++)
   {
    HTMLTableRow row = sourceTable.rows.item(i, 0) as HTMLTableRow;
    HTMLTableCell cell0 = row.cells.item(0, 0) as HTMLTableCell;
    HTMLTableCell cell1 = row.cells.item(1, 0) as HTMLTableCell;
    HTMLTableCell cell2 = row.cells.item(2, 0) as HTMLTableCell;

    bool isChecked = (cell0.getElementsByTagName("input").item(0, 0) as HTMLOptionButtonElement).@checked;
    string owner = cell1.innerText;
    string status = cell2.innerText;

    if(isChecked)
    {
     System.Collections.Hashtable data = new System.Collections.Hashtable();
     data.Add("owner", owner);
     data.Add("status", status);

     copyData.Add(data);
     msg += ("owner = " + owner + ", status = " + status + "\n");
    }
    
   }

   MessageBox.Show("勾選了：\n" + msg);

   object Null = System.Reflection.Missing.Value;
   webBrowser.Navigate("http://127.0.0.1/temp/test.html", ref Null, ref Null, ref Null, ref Null);

   ((HtmlEventProxy)sender).Detach();
  }