L.O.N.G.F.E.L.l.o.w.: Flash

顯示具有 Flash 標籤的文章。顯示所有文章

2011年8月27日星期六

整理一些以前自己練習的程式

2010年4月27日星期二

MikuMikuDance use PMDViewer and FLARToolkits Multimarker/CubeMarker

2010年3月19日星期五

在開發 AIR 應用程式後，若要包裝自己的應用程式，並且加上自訂的圖示的話，可以到 project\src\your-app.xml 找到…



修改成…

    <icon>
        <image32x32>images/icon.png</image32x32>
    </icon>

要注意，若你只有一個 32x32 的 ICON 就只要留下 <image32x32></image32x32> 這行即可，千萬別把其它留空白，否則會包裝失敗還一直查不出原因…錯誤示範如下…

    <icon>
        <image16x16></image16x16>
        <image32x32>images/icon.png</image32x32>
        <image48x48></image48x48>
        <image128x128></image128x128>
    </icon>

FMS串流撥放FLV(或RTMP)時截取其BITMAP的方式

在透過 FMS 撥放 rtmp 串流影音時，若你的 CLIENT 端除了撥放，還要抓圖作處理的話，會遇到如下的例外…

SecurityError: Error #2123: Security sandbox violation:
BitmapData.draw: file:///xxx/xxx/xxx.swf
cannot access rtmp://xxx.xxx.xxx/live. No policy files granted access.

解決方式如下…
1. COPY 安裝範例 C:\Program Files\Adobe\Flash Media Server 3.5\samples\applications\vod 到你自己的應用程式。(有興趣可以研究看看其寫法)

2. 修改 Application.xml 檔，在 <client></client> 區間加入…

<Access>
<VideoSampleAccess enabled="true">/</VideoSampleAccess>
</Access>

3. 修改 main.asc (即 Server-side-code)…
找到 application.onConnect = function( p_client, p_autoSenseBW )
這邊是用來處理當有 client 連到這個 server app 時的對應函式，幾個相關參數設定如下…

writeAccess:
若你有用到 shared object 或 live streams，就把它註解掉
//p_client.writeAccess = ""; // prevents creating shared object or live streams.

audioSampleAccess:
允許 client side 直接抓取音效 raw data，利用 SoundMixer.computeSpectrum() 處理音效
p_client.audioSampleAccess = "/";

audioSampleAccess:
允許 client side 直接抓取影片 raw data，利用 BitmapData.draw() 抓圖
p_client.videoSampleAccess = "/";

參考這篇: http://www.thebluepipe.com/Developer/tutorials/as3/Crossdomain-Video-Snapshot-Fixing-BitmapData-draw-Security-Sandbox-Violation.html

2010年1月5日星期二

AS3 Face Detection 練習

臉部辨識練習。

測試影片:
http://www.youtube.com/watch?v=EHocW-Bkqkc

線上DEMO:(需有 Webcam 視訊，正面對鏡頭)
http://www.asn.com.tw/flex/FaceDetector/FaceDetectorXML.html

參考網站:
http://www.squidder.com/2009/02/26/realtime-face-detection-in-flash/
這個網站以 OpenCV 為基礎，改寫成 flash 版本，效能不錯。

這邊還有一個網站有把它作些優化…
http://www.quasimondo.com/archives/000687.php
主要是 haarcascade 檔的載入把它轉成一個靜態的類別，但這樣變成只能作臉部辨識，haarcascade 就不能動態載入了。

*haarcascade 檔是拿來述描所要辨識的影像的特徵集。

squidder 載入的 haarcascade 檔是一個包含 Adler-32 Checksum 的 ZIP 壓縮檔，使用上比較不方便，我用了 nochump 的 ZIP LIB 寫了一個簡單的 ZipLoader.as 來給這個 DEMO 使用，好方便載入不同的 haarcascade 檔，使用時只要把 HaarCascadeLoader.as 原始檔中的 "import jp.maaash.net.ZipLoader" REMARK 掉即可(當然，你還要有 nochump 的 ZIP LIB)。

有試過安裝 OpenCV 並使用它的其它 haarcascade 檔，例如手部、眼睛…，可惜沒有辨識成功~"~，還需要再研究。

ZipLoader.as...
package
{
    import nochump.util.zip.*;

    import flash.events.EventDispatcher;
    import flash.events.Event;
    import flash.net.URLRequest;
    import flash.utils.IDataInput;
    import flash.utils.ByteArray;
    import flash.net.URLLoader;
    import flash.net.URLLoaderDataFormat;

    public class ZipLoader extends EventDispatcher{
        private var debug:Boolean;
        private var _url:String;
        private var req:URLRequest;
        private var data:ByteArray;

        public function ZipLoader(d:Boolean=false){
            debug = d;
            req = new URLRequest;
        }

        public function load():void{
            var xmlLoader:URLLoader = new URLLoader();
            xmlLoader.addEventListener(Event.COMPLETE, onLoadXML);
            xmlLoader.dataFormat = URLLoaderDataFormat.BINARY;
            xmlLoader.load(req);
        }

        public function onLoadXML(e:Event):void
        {
            var zipFile:ZipFile = new ZipFile(e.target.data);
            var entry:ZipEntry = zipFile.entries[0];
            //trace(entry.name);
            // extract the entry's data from the zip
            data = zipFile.getInput(entry);
            //trace(data.toString());

            dispatchEvent( e.clone() );
        }

        public function set url(u:String):void{
            _url = u;
            req.url = _url;
        }

        public function getContentAsString():String{
            return data.toString();
        }

        private function logger(... args):void{
            if(!debug){ return; }
            log(["[ZipLoader]"+args.shift()].concat(args));
        }
    }
}

2009年12月30日星期三

FlarDetector - make a hole underground

http://www.youtube.com/watch?v=CW9imHbbljU

使用 FlarDetector 作成的地洞測試影片，加上在 3DS MAX 作的 miku 動畫、彩虹及程式中運算的 3D 彈跳球。

project source ...
http://code.google.com/p/flardetector/

2009年12月22日星期二

FLARToolKit Multi Marker Detector & Cube type Marker 實作

ARis...
ARis 是日本一間公司出品的產品，應用了 ARToolKit 技術。
展示影片在這…
http://www.youtube.com/watch?v=yCCx7zANsGE
YouTube上可以找到更多類似的影片。

這邊是我用 FLARToolKit 自己作的 DEMO，當然，不止是能運用在這方面( 指宅男專用 )，像是商業產品的3D 展示也可以這樣用，在全像投影真正普及化實現之前，我想 AR 技術或許是最快實現類似體驗的方法吧? ( 配合 AR 眼鏡 )

DEMO VIDEO...
http://www.youtube.com/watch?v=W9s2ldmd9Vc

DEMO ONLINE...
http://www.asn.com.tw/flex/FlarMikuDemo/PV3DFlarTest.html

要線上執行需要列印出上列 Marker 檔，將其中的方塊組合起來，並且準備一台 Webcam，程式運行後再將 Webcam 對準方塊就會出現人偶嘍~(還有牛)!!!

Markers...
ARis Marker : http://www.asn.com.tw/flex/FlarMikuDemo/Data/ARisMarker.jpg
Cube Marker : http://www.asn.com.tw/flex/FlarMikuDemo/Data/CubeMarker.jpg
要自建 Marker 檔可以到…
http://flash.tarotaro.org/blog/2008/12/14/artoolkit-marker-generator-online-released/

======== 底下給有興趣寫 AR 程式的人作參考 ========

MultiMarker...
這個程式等於是 FLARToolKit 複數 Marker 的應用，在 FLARToolKit 中有個 FLARMultiMarkerDetector 的類別，是用來同時偵測多個 Marker 用的，MultiMarker 的偵測需要管理多個 Maeker 的 ARCode。
網路上有現成的多偵測點 Marker 管理函式庫 FLARManager…
這個 MultiMarker 管理類別功能蠻強大的，包含多點偵測、圖形二元化閥值最佳化、座標位置 smooth 及動態點預測…。

FlarDetetor...
不過我沒有實際去用 FLARManager，而是自己寫了個簡化版的 FlarDetetor，一樣是 MultiMarker Detect，還蠻好用的，我的 ARis 就是利用這個類別作出來的。

FlarDetetor 特色：
一、多個 Marker 同時偵測。
二、事件觸發 ( MARKER_ADDED、MARKER_UPDATED、MARKER_REMOVED )。
三、完全獨立的一個類別，低耦合，只用到原始的 FLARToolKit 類別。
四、俱備簡易 smooth 功能。

如何使用：
一、初始化，跟一般 FLARToolKit 應用程式一樣代入 FLARParam 跟 Webcam 的 Bitmapdata。

FlarDetector.init(_capture);

二、建立 FlarObject 物件並載入 Marker 檔，然後加入 PV3D scene 中。

var cube:FlarCube = new FlarCube ();
cube.detector.loadCode( 'cube.pat',16,100 ); /// 注意後面二個 width 參數要與當初存 patern 時一致，否則測不出來唷。

this.scene.addChild( cube );

三、最後只要在 PV3D Render 的時候 detect 即可自動分派事件。

FlarDetector.detectMarkerLite();

FlarObject...
這個類別便是拿來裝你的 PV3D 子物件的容器，繼承自 FLARToolKit 的 FLARBaseNode 類別，並且有基本的一個 FlarDetector 及預設的事件反應，當 FlarDetector偵測到時便進行座標方位的轉換。
比較特別的地方在於我使用了一個 _pivot:DisplayObject3D 作為內容器，好方便底下延伸類別的座標軸轉換，所有子物件都放在 pivot中，就可以自由在程式控制相對位置跟方向，而不會受 Node Transform 的影響。
當然，其實 FlarDetector 是蠻低耦合的一個類別，你也可以直接使用 FlarDetector 在任何的場合，創造你自己的類別，也不一定要配合 PV3D 來使用，把 FlarDetector 當成一個單純的 Sensor 來使用即可。

FlarARisCube...

至於六面體 Marker 的偵測，網路上可以找到 Tarotaro 的 5 面立方體範例…
http://flash.tarotaro.org/blog/2009/04/06/cube-type-marker-in-flar/
他的演算法是將水平的四個面用二個 Marker 解決，一個偵測用，一個判斷面向用，再加上上面一個 Marker 總共三個，真聰明丫，詳細的演算法可以參考…
http://flash.tarotaro.org/blog/2009/06/10/about-cube-detection-algorithm/

但是可惜是這個方法只能作 5 面偵測，從底下往上看沒有(要幹嘛?!)，而且水平的四個面的 Marker 必需有一定的規則，Marker 的設計要比較注意。

這個函式庫我也沒實際去用，於是又寫了個 FlarARisCube 的類別，這個類別其實只是在一個類別中放了六個 FlarDetector，再在偵測到時轉換一下座標而己，只是在轉換座標時搞的有點暈頭轉向，我的方法是比較直接的方式，效能沒 Tarotaro 的好，只能說是比較容易實現的方法。

最後則是六面體方塊在上仰角度時，會有遮罩的效果，讓六面體看起來更直實(能遮到人偶)，我是參考 FLARToolKit 的原作者 saqoosha 的這篇文章…
http://saqoosha.net/en/2009/01/08/1676/
文章是介紹地上打洞的效果，不過原理一樣 ( 地上打洞很酷丫，下回再來作 ^ ^ )。

Finally…
一連串的學習QQ"，總算成功，出現人偶嘍~(還有牛)~呵呵呵。

Source Code...
原始程式下載：( 包含 papervision3d 及 flartoolkit )-原始版本
http://www.asn.com.tw/flex/FlarMikuDemo/FlarMikuDemo.zip

2009/12/22 - 最新的 source 改放在 google code，http://code.google.com/p/flardetector/
( 不包含 papervision3d 及 flartoolkit )

2009年12月10日星期四

Flartoolkits - Load DAE & Make your own Marker Online

在網路上即時載入 DAE 3D 模型，透過視訊即時的在線上建立 Flar 物件的 Marker。

操作方式：
1. Load DAE file，預設己經載入三個模組。
2. 下拉選單點選你要操作的FLAR物件。
3. 用麥克筆或印表機畫出你自訂的圖樣(正方形黑色邊框+裡面塗上簡易圖示)。
4. 按下 Detect Pattern，把視訊對準圖樣。
5. 當紅色標示出現在正確的位置時按下 Set Pattern。
6. 下方操控面板可以控制物件的大小及角度。
(亦可直接點選畫面上的物件操作)

DEMO VIDEO:
http://www.youtube.com/watch?v=Hp2qY4_Ez_Y

ONLINE DEMO:
http://www.asn.com.tw/flex/PV3DFlar/MarkerGeneratorOnline.html

2009年11月21日星期六

PV3D 練習 - 開車

開車兜兜風…
http://www.asn.com.tw/flex/cardrive/cardrive.html

http://www.asn.com.tw/flex/cardrive/cardrive2.html with BOX2D

程式參考…
http://pv3d.org/2009/01/23/springcamera3d-and-driving-a-car/
重點在 driveCar() 及 updateCar() 兩個函式。

汽車控制幾乎都使用原作的，看別人的程式可以學到很多，沒想到原來不難，缺的大概就是經驗跟創意。

另一個重點是汽車的模型，在建模的時候就要先規畫好，要能配合程式運作，包括物件軸心、面向、四個輪子的軸心跟方向、子物件的名稱…。

圖檔及資源的讀取部份改寫如下…

使用一個陣列 push 所有需要讀取資源的 loader，並加入事件監聽，在收到完成的事件後再移出陣例，最後判斷是否己全數讀取完成，再進行其它的初始化工作。

        private var loadAssets:Array = new Array();
        private function initAssets():void
        {
            removeEventListener(Event.ADDED_TO_STAGE, initAssets);

            floorMaterial = new BitmapFileMaterial("assets/grassTexture.jpg");
            floorMaterial.addEventListener(FileLoadEvent.LOAD_COMPLETE,onLoadAssets);
            loadAssets.push(floorMaterial);

            bodyMaterial = new BitmapFileMaterial("assets/FocusBody.jpg");
            bodyMaterial.addEventListener(FileLoadEvent.LOAD_COMPLETE,onLoadAssets);
            loadAssets.push(bodyMaterial);

            wheelMaterial = new BitmapFileMaterial("assets/FocusWheel.jpg");
            wheelMaterial.addEventListener(FileLoadEvent.LOAD_COMPLETE,onLoadAssets);
            loadAssets.push(wheelMaterial);
        }

        private function onLoadAssets(e:FileLoadEvent):void
        {
            var idx:Number = loadAssets.indexOf(e.target);
            if( idx != -1 )
            {
                if( e.target is BitmapFileMaterial )
                    (e.target as BitmapFileMaterial).removeEventListener(FileLoadEvent.LOAD_COMPLETE,onLoadAssets);
                loadAssets.splice( idx, 1 );
                if( loadAssets.length == 0 )
                    initOther();
            }
        }

2009年11月20日星期五

PV3D DAEMC2 練習

DAEMC2 是一個讓 PV3D 可以讀取 dae 動作模型的組件，藉由它，可以讓你在 PV3D 中控制撥放預先制作好的動作。

http://www.asn.com.tw/flex/BoxMan/BoxMan.html

程式參考這裡，但改成了 DAEMC2 版 frame 的新的操作方式。

DAEMC2 教學可以參考影片

2009年11月11日星期三

Paper Vision 3D 正確 destory 物件的方法

由於 AS3 有 garbage collection 的機制，這樣的機制有好有壞，但千萬別以為有 garbage collection 就不用去在意 memory 的議題，因為不管 garbage collection 運作的原理是什麼，它總還是有一套運作的規則，不去依循這個規則的話，仍然會造成 memory leaks。

garbage collection 主要的扮演角色的是在程式背後的「管理程式」，記錄、管理使用者(這裡指程式設計師) 記憶體的使用狀況，它底層的意義就是在記錄某段記憶體是不是有物件(指標、參考…)指向它，若沒的話，便能進行釋放。

可以想像的到，一個環狀的參考一定會造成 garbage collection 的困擾，因此，在具備 garbage collection 的系統下寫程式，有些地方便要特別注意，才不會造成問題。

以前在 C++，常常會使用指標將自己 allocate 到的 memory 記錄下來，以便在物件 destroy 時一併釋放，但在 garbage collection 系統，這樣的習慣卻會造成「過多的」或「意外的」參考到了沒用到的記憶體，反而造成 garbage collection 無法正確運作。

因此在寫 AS3 時，儘量在要用到時才去 new 一個物件，而不需要在初始化時就把一切 new 出來放在私有變數裡去作準備，當然，這也不是通則，期待更好的 garbage collection 系統出現。

回歸正題，Paper Vision 3D 物件的創建跟刪除便出現了類似上述的問題，當你用「動態」的產生物件 (譬如 sphere 或 cube) 時，由於物件需要參考到 Material 材質，而材質又會記錄著使用這個 Material 的物件 list，於是當你刪除物件( 從 scene 移除並設為 null ) 卻發現 garbage collection 起不了作用，memory 依然被佔用住，這樣的 memory leaks 造成的後果會非常嚴重，memory 用量會不斷攀升，最後效能直線下降。

在 Paper Vision 3D 團隊還沒修正這段(bug?)或改用更好的作法之前…
解決方法：

        private function destory3DObject():void
        {
            var objArray:Array = new Array();
            var obj:DisplayObject3D;
            for each ( obj in this.scene.objects )
                objArray.push(obj);

            for ( obj=objArray.pop(); obj; obj=objArray.pop() )
            {
                var mmArray:Array = new Array();
                var mm:MaterialObject3D;
                for each ( mm in obj.materials )
                    mmArray.push(mm);

                for ( mm=mmArray.pop(); mm; mm=mmArray.pop() )
                {
                    mm.interactive = false;
                    mm.unregisterObject(obj);
                    obj.materials.removeMaterial(mm);
                    mm.destroy();
                }
                obj.materials = null;
                //obj.material.animated = false;
                obj.material.interactive = false;
                obj.material.unregisterObject(obj);
                this.scene.removeChild( obj );
                obj.material.destroy()
                obj.material = null;
            }
        }

每個步驟的先後順序很重要，次序相反有可能還是沒清楚跟 garbage collection 系統交待好你不要這段 memory 了，你會發現，最後參考到這段 memory 的會是區域變數 var obj，如此才能保證在離開 scope 後沒有任何參考指標與該物件有關聯。

這個函式是一次清除所有的 DisplayObject3D物件，若只想清除物定物件，那可以使用 array 來裝你的 DisplayObject3D 物件即可，程式雷同。

所以其實 garbage collection 好壞見仁見智吧，好像只不過換了方式去管理你創出來的物件/記憶體罷了，恐怕還是需要瞭解黑箱下的作業方式，才能真正去掌握你所有的資源。

2008年4月22日星期二

FLASH 練習

FLASH真的不錯玩

訂閱：文章 (Atom)

L.O.N.G.F.E.L.l.o.w.

2011年8月27日星期六

整理一些以前自己練習的程式

2010年4月27日星期二

MikuMikuDance use PMDViewer and FLARToolkits Multimarker/CubeMarker

2010年3月19日星期五

FLEX AIR 包裝應用程式 ICON 的問題

FMS串流撥放FLV(或RTMP)時截取其BITMAP的方式

2010年1月5日星期二

AS3 Face Detection 練習

2009年12月30日星期三

FlarDetector - make a hole underground

2009年12月22日星期二

FLARToolKit Multi Marker Detector & Cube type Marker 實作

2009年12月10日星期四

Flartoolkits - Load DAE & Make your own Marker Online

2009年11月21日星期六

PV3D 練習 - 開車

2009年11月20日星期五

PV3D DAEMC2 練習

2009年11月11日星期三

Paper Vision 3D 正確 destory 物件的方法

2008年4月22日星期二

FLASH 練習

VirtualBox 空間減肥

我的…

檢舉濫用情形

2011年8月27日 星期六

2010年4月27日 星期二

2010年3月19日 星期五

2010年1月5日 星期二

2009年12月30日 星期三

2009年12月22日 星期二

2009年12月10日 星期四

2009年11月21日 星期六

2009年11月20日 星期五

2009年11月11日 星期三

2008年4月22日 星期二

2011年8月27日星期六

2010年4月27日星期二

2010年3月19日星期五

2010年1月5日星期二

2009年12月30日星期三

2009年12月22日星期二

2009年12月10日星期四

2009年11月21日星期六

2009年11月20日星期五

2009年11月11日星期三

2008年4月22日星期二