[心得]Mate的ListenerInjector

0 意見

之前有介紹過Mate 的Event map及Model map架構,這次來講Mate的ListenerInjector 。

同之前的 Model Map的概念,PropertyInjector能為 View注入資料,顧名思義,ListenerInjector則可為View注入監聽,在設計專案的時候,可用ListenerInjector把View的互動建立起來,建立一張 Listener Map表,明確指出事件跟View的關連,方便後期維護,且透過EventAnnouncer,在Event Map也能調用View的變化,使用起來很方便

簡單的ListenerInjector 寫法如下

ListenerMap.mxml

<?xml version="1.0" encoding="utf-8"?>
<EventMap xmlns="http://mate.asfusion.com/" xmlns:mx="http://www.adobe.com/2006/mxml" >
<Injectors target="{Main}" debug="true">
   <ListenerInjector eventType="{NavigateEvent.GOTO_HOME}" method="navigateStateHandler" />
   <ListenerInjector eventType="{NavigateEvent.GOTO_MUSIC}" method="navigateStateHandler"/>
   <ListenerInjector eventType="{NavigateEvent.GOTO_MOVIE}" method="navigateStateHandler"/>
   <ListenerInjector eventType="{NavigateEvent.GOTO_PROFILE}" method="navigateStateHandler" />
</Injectors>
</EventMap>
上面的程式讓Main的View監聽導覽事件(NavigateEvent)的變化,所以在Main裡要寫一個public 的方法來接收事件,範例是用navigateStateHandler

Main.mxml

public function navigateStateHandler(event:NavigateEvent):void
{
var type:String = event.type;
switchMainState(type);
}
在設計上,如果僅是view的變化其實就可以用Listener Map來對應,如果以之前Cairngorm 的概念,View的變化要透過model的值改變,反查比較不易,用Listener Map一下就能知道那些View對應那些事件,這也是Mate依賴注入的好處

Blog參照:Mate Framework Part1, Mate Framework Part2



使用unity開發的 LEGO STAR WARS

0 意見

樂高版的星際大戰,由LEGO及Three Melons所開發,整體畫面不錯,光劍也能反彈子彈,有興趣的玩家可以玩玩看

2009-12-23_131455.png

網址:http://starwars.lego.com/en-us/FunAndGames/CloneWars-Quest-For-R2D2.aspx

Three Melons:http://www.threemelons.com/



Flash CS5 的物理引擎

0 意見

Adobe MAX 2009中展示了CS5的物理引擎功能,相信未來的Flash動畫將更真實

原文:http://cs5.org/?p=408



在Flash中使用滑鼠右鍵

0 意見

就結論來說,Flash 沒有任何方法可阻擋滑鼠右鍵,除了AIR可自訂右鍵外,在一般瀏覽器中的Flash右鍵一定會出現Flash選單,即使把content menu關掉。

即然Flash Player不能阻擋右鍵,那麼換個想法,瀏覽器是否可擋滑鼠右鍵?,答案當然可行,簡單的想法就是給Flash蓋上一層看不見的元件擋掉右鍵操作,並透過Javascript把右鍵行為傳給Flash

fig_01.jpg

這個做法雖然簡單,但每個Flash都要準備一個覆蓋元件就很麻煩,另一個比較好的做法是直接監聽Flash元件,當有右鍵行為發生時,阻擋瀏覽器事件並改成Flash事件,這種做法簡潔且方便,重點是網路上已有現成的Library可用,www.uza.lt所提供的RightClick Library就可解決這個問題,值得一提的是RightClick使用前必需把wmode改成transparent或opaque,且RightClick只會觸發右鍵行為給Flash,如果要操作Flash內的元件,可搭配MouseRollOver、stage.mouseX、stage.mouseY。

補上一些demo:

UZA demo:http://uza.lt/rightclick/

Adobe captivate demo: http://blogs.adobe.com/captivate/2009/01/Right-Click-BlogDemo.htm

Flash遊戲─快樂神仙:可使用右鍵使用道具 http://kl.linekong.com/

item.JPG



RightClick下載:http://code.google.com/p/custom-context-menu/

Uza's Blog:http://www.uza.lt/

參考文章:http://www.adobe.com/devnet/captivate/articles/rightclick.html



Adobe 發佈 Flash Player 10.1 測試版,修正wmode輸入問題

0 意見

目前Player10.1已可在Adobe Lab下載,這個版本增加了些多功能,包含Microphone的存取、多點觸碰,文字的改善等...,更多的細即可見http://www.adobe.com/devnet/logged_in/jchurch_flashplayer10.1.html

回到wmode,wmode輸入問題是player 9.0.124一直有的問題,在wmode設為transparent或opaque的情況下,Firefox會無法輸入中文,所幸在10.1終於修正,目前輸入法文字框雖然還不在正確的位置,但已可輸入中文了,有興趣的網友可安裝10.1後到這頁進行測試

FF womode issue:http://bugs.adobe.com/jira/browse/FP-501?actionOrder=desc

Flash 10.1介紹:http://www.adobe.com/devnet/logged_in/jchurch_flashplayer10.1.html



Flex Logger的Firebug target

0 意見

之前有介紹過Flex Logger跟ThunderBolt 這兩個Logging Framework,雖然Flex原生的就很好用,但Flex只提供trace Target,不像Thoundbolt有Firebug支援,為了開發方便,筆者寫了一個Flex Logger用的Firebug Target,有興趣可以參考


package idv.gd.utils.logging
{
    import flash.external.ExternalInterface;
    import flash.system.Capabilities;
    
    import mx.core.mx_internal;
    import mx.logging.LogEvent;
    import mx.logging.LogEventLevel;
    import mx.logging.targets.LineFormattedTarget;
    use namespace mx_internal;
    
    /**
     * firebug專用 log target
     * @author GD
     * 
     */    
    public class FirebugTarget extends LineFormattedTarget
    {
        private var formattedMessage:String;
        
        public function FirebugTarget()
        {
            super();
        }
        
        /**
         * 取得格式化後的lineFormatted message (內部method)
         * @param message
         * 
         */        
        override mx_internal function internalLog(message:String):void
        {
            formattedMessage = message;
        }
        
        /**
         * 送出訊息給Firebug
         * @param event
         * 
         */        
        override public function logEvent(event:LogEvent):void
        {
            super.logEvent(event);
            
            var message:String = formattedMessage;
            if (ExternalInterface.available) 
            {
                var level:int = event.level;
                switch (level)
                {
                    case LogEventLevel.DEBUG:
                    {
                        ExternalInterface.call("console.debug", message);
                        break;
                    }
                    case LogEventLevel.ERROR:
                    case LogEventLevel.FATAL:
                    {
                        ExternalInterface.call("console.error", message);
                        break;
                    }
                    case LogEventLevel.INFO:
                    {
                        ExternalInterface.call("console.info", message);
                        break;
                    }
                    case LogEventLevel.WARN:
                    {
                        ExternalInterface.call("console.warn", message);
                        break;
                    }
                    default:
                    {
                        ExternalInterface.call("console.log", message);
                        break;
                    }
                }
            }
            //保留trace
            trace(message);
        }


[推薦] 一些好用的Flash Library

0 意見

先整理上來,持續更新

分類 名稱 說明 Blog 文章
Tweener引擎 TweenMax Tweener工具,支援貝茲
gTween Tweener工具,用法同AS3事件驅動,有Proxy等好用屬性
物理引擎 Box2DFlashAS3 非常強大的2D物理引擎,支援IK [練習]PV3D + BOX2D + IK
APE 簡易的2D物理引擎,有限的形狀
jiglibflash 3D物理引擎,支援不規則mesh [練習]3D物理引擎jiglibflash
增強現實 FLART Toolkit 增強現實(AR)工具,可透過Camera及圖標計算3D物件位置
粒子引擎 Emitter 粒子特效引擎
Flint 開源的粒子引擎
除錯工具 as3flexunit Flex Framework 單元測試工具
asunit Flash 單元測試工具
FlexCover Flex的程式碼覆蓋率工具,搭配unit test使用
flexMonkey Flex UI測試工具 Flex UI測試工具
ThunderBolt 輕量的Logging Framework 輕量級的Logging Framework
monsterdebugger Flash-debug工具
PDF alivepdf PDF文件產生工具 [心得]使用Flash 操作PDF
pavo PDF文件解析,能取出PDF內的文字 [心得]使用Flash 操作PDF
網路服務 FacebookASAPI Facebook API的Actionscript版本
GoogleMap GoogleMap的Actionscript版本 [練習] Google Map API
網路相關 bulk-loader 多重載入工具
其它 SWFAddress Flash Deep link工具,可讓Flash做出網址切換
SWFObject Flash網頁嵌入用工具,這個工具在新版的FlashBuilder取代了Adobe原本的嵌入機制
as3corelib Adobe開發人員所釋出的一些utils,可用來彌補Flash API的不足
JPEGEncoder Flash10 JPEGEncoder ByteArray.org所釋出的Flash10 JPEGEncoder,有利用Flash10的語法做最佳化
Achemy JPEGEncoder

利用Achemy編譯的JPEGEncoder,這也是筆者目前看到最快的JPEGEncoder,可參考原作者的比較



手機上的Flash 10

0 意見

Adobe目前已把手機上的Flash版本推向第10版,跟桌上的Flash版本相同,以後PC上開發的Flash程式手機將都可支援(包括Flex、Papervision3D等...),當然效能會是個問題,不過Adobe有持續在改善

另外iPhone不是以Flash Player的方式支援,Apple似乎還是不讓Flash上iPhone,所以Adobe目前是改用Standalone Application的方式來支援,簡單來說每個SWF會被編譯成iPhone native application,使Flash可放在iPhone的app store。

Flash10 on iPhone:
http://www.youtube.com/watch?v=kusXgPAmMLw

Flash10 on palm pre:
http://www.youtube.com/watch?v=V0RoQ6t1g9c

Flash10 on windows mobile:
http://www.youtube.com/watch?v=i2RqQMzobsI

Flash10 on Android phone:
http://www.youtube.com/watch?v=xuTQD08hYFs

Flash10 on Skyfire browser for Nokia Symbian OS:
http://www.youtube.com/watch?v=kESdESjyOdA



Adobe Flash CS5現身

0 意見

Adobe的更新速度愈來愈快了,CS4還沒用熟CS5的消息就出來了,雖然這也是好事,不過對企業來說又是一筆升級費...。

這次Flash CS5加強了程式編輯,加了code hit及Snippet,這真的是早該加的,以後在Flash寫程式就不會那麼痛苦,另外FlashCS5又整合了FlashBuilder,加強了程式的開發。

2009-09-22_191017.png

Flash CS5 Beta將在今年年底前發佈,期待CS5的新功能

相關網站:

http://cs5.org/

http://www.flashmagazine.com/news/detail/adobe_flash_cs5_sneaks_from_fotb09/



Flex UI測試工具:FlexMonkey

0 意見

2009-09-21_185920.png

FlexMonkey是專門給Flex的UI測試工具(AIR),他可記錄Flex的元件操作,並像播放的方式重播,這可用在冗長的UI操作、Click等動作,最後再驗證結果是否符合預期。

雖然FlexMonkey非常好用但在複雜的事件機置似乎仍有問題,像是Mate Framework,可能FlexMonkey也是用Describetype等方式反監聽Flex元件,但在Mate由於多了EventMap介入,FlexMonkey一直不能正常運行,即使簡單的Mate專案也會有問題,這點是比較令人覺得可惜的

Google Code:http://code.google.com/p/flexmonkey/

網站:http://flexmonkey.gorillalogic.com/gl/stuff.flexmonkey.html



WEB 3D MMO Game:Quake Live

0 意見

Quake Live(台灣翻做雷神之鎚)是一個線上的WEB 3D MMO Game,所使用的技術既不是Flash也不是Unity而是用他們自家的Plug-in,雖然第一次下載遊戲要花很多時間但3D運作很順暢且支援多家瀏覽器,包含Firefox2+、IE7+、Safari3+。

2009-08-31_141215.png

2009-08-31_141350.png

Quake Live玩法有點像早期的CS,所有人在一個空間內撕殺,3D效果跟現在的次世代遊戲相比遜色許多,或許這是為了跨平台的限制

網站:http://www.quakelive.com/



Flash P2P 研究

0 意見

Flash 10及AIR 1.5支援P2P連線,這種通訊技術叫做Real-Time Media Flow Protocol (RTMFP),跟FMS(Flash Media Service)的RTMP不同,RTMFP是架構在UDP層,允許點對點連線,使用者只需連到RTMFP-capable 伺服器即可,目前Adobe有提供免費的伺服器─Stratus,透過Stratus我們可簡單做出VOIP或電視電話的功能,當然也能運用在遊戲上。

2009-08-21_184655.png

比較兩種技術,RTMP是透過伺服器溝通,所有的訊息都需經過伺服器,而RTMFP只需透過伺服器建立連線,之後的訊息交換以兩台電腦為主,且Stratus允許本地及NAT連線,在一般網路環境都可正常運作。

Flash P2P遊戲:real time mill

Stratus:http://labs.adobe.com/technologies/stratus/

教學影片:http://www.flashrealtime.com/tuts/p2p-in-flash.html

教學網站:http://www.flashrealtime.com/basics-of-p2p-in-flash/

RTMFP FAQ:http://www.scribd.com/doc/3798516/Flash-Player-10-RTMFP-FAQ-070208



[教學]使用Subclipse做Flex版本控管 Part2

0 意見

繼上篇介紹過Subclipse安裝之後,接著介紹如何使用Subclipse開設新專案

筆者這次測試是用Google code的專案代管,這是Google所提供的免費空間,有1G的容量且支援SVN。

首先切換Perspective,在window -> Perspective -> Other 下找到瀏覽SVN檔案庫

接著在檔案庫上按右鍵選新增 -> 檔案庫位置,輸入SVN位置

新增好後會要求名稱及密碼,都輸入完後回到Flex Perspective

接著到要同步的專案,在專案上點右鍵,選擇 team -> share project,更新類型為SVN,接著選剛設好的SVN位置點下一步

2009-08-17_195721.png

這個步驟是匯入目前專案到SVN,但還沒真的更新,匯完後先把要加入SVN的檔案用右鍵 team -> add加入

2009-08-17_200529.png

這樣也還沒更新到伺服器,最後選team -> 送出才會上傳,上傳後可以試著改改看文件再上傳一次,我們來測試回復的動作

在文件檔點右鍵選team ->顯示資源歷程可看到文件更新歷史,這裡會顯示版本、日期及註解,點選要回復的版本按取回

2009-08-17_201304.png

顯示資源歷程也可以比較版本差異,SVN還有許多功能,筆者才剛試不久還沒摸熟,如果有什麼心得或意見也歡迎留言 :D



Flash IDE上的3D組件

1 意見

Papervision3D是非常強大的3D引擎Library,雖然直接撰寫很好用但要跟美術結合往往不是那麼容易,主要還是因為沒有預覽效果,每次修改都必需回源始碼,且改了也不能馬上預覽,非常麻煩。為此,網路上有人撰寫了PV3D組件,這個組件能在Flash IDE(Flash CS3)下運作,可讀入COLLADA模型並提供即時預覽,能旋轉模型及改變Camera參數,雖然細部操作還是要寫程式,但對只要簡單3D效果的人來說應該夠用了

2009-08-17_125346.png

筆者試著把乳牛套上去,編輯效果不錯,但發佈時座標竟然偏移了,移除元件又發生程式錯誤,看來這個組件還有許多問題...

google code:http://code.google.com/p/papervision3d/downloads/list

blog:http://rockonflash.wordpress.com/2009/08/10/new-papervision3d-component-2-1/

另外再介紹一個商業的3D組件FreeSpin,功能比較完整,支援CS3及CS4,且可使用Flash的時間軸漸變,比較特殊的是支援格式,FreeSpin僅支援自家的fl3d格式,這個格式可透過FreeSpin所提供ImportEngine(AIR)進行轉換,目前能轉的格式只有3DMax(*.3ds),筆者試著把Design plus plus提供的keroro模型套入,一樣有預覽功能,發佈座標也沒有問題。

2009-08-17_131141.png

FreeSpin特色:http://www.freespin3d.com/freespin3d/features.html

FreeSpin:http://www.freespin3d.com/Default.html

教學:http://www.adobe.com/newsletters/edge/december2009/articles/article6/index.html?trackingid=FBTRV



[教學]使用Subclipse做Flex版本控管 Part1

0 意見

Subclipse是給Eclipse的Subversion(SVN) Plug-in,所以基於Eclipse的Flex也能安裝,版本控管的好處在於在多人開發時能妥善分配權限,且資料集中在伺服器,不必憺心個人保管的問題,即使不小心修改錯了,SVN也能回溯先前的版本,保持專案正常運作,這部分的控管在大型專案很常見,但個人開發的Library也可用SVN做版本控管,以下做個簡單教學。

1.下載並安裝Subclipse

使用Help -> software updates -> find and install -> new remote site,輸入以下網址安裝,由於Flex的Eclipse是3.3版,所以可裝1.4及1.6,筆者這次的範例是裝1.6版。

subclipse 1.6.x:http://subclipse.tigris.org/update_1.6.x

subclipse 1.4.x:http://subclipse.tigris.org/update_1.4.x

官網的安裝教學:http://subclipse.tigris.org/servlets/ProjectProcess?pageID=p4wYuA

有些功能需要別的Plug-in支援,沒有的話可以取消勾選

2009-08-14_192957.png

2.使用Subclipse取回專案

先開啟SVN伺服器專案,使用File -> new -> other找到SVN,選自SVN取回專案

筆者這次是測試,所以先抓了Papervision3D的SVN做範例,另外有沒有人注意到,Subclipse很貼心的提供中文語系,雖然不完整,但看起來很有親切感。

2009-08-14_193748.png

取回trunk後放到本地的專案上,接下來的操作就跟一般一樣,要更新或送出只要按右鍵選Team即可

2009-08-14_194609.png

筆者當然沒有權限修改Papervison3D,所以只能更新,自己架設伺服器就可使用送交,把新版本送上伺服器。

這次範例只示範了安裝及取回,下一篇再來介紹使用Subclipse開設新專案



Visual Studio 上的 Flex Plug-in:Tofino

0 意見

Tofino是完全免費的Flex plug-in,可讓.net人員撰寫flex、as專案,不必切換IDE,功能跟之前介紹的ASDT不同,這是給Visual Studio的Plug-in,有更完整的編輯介面(有code hit及文字變色)且直接支援break point,非常方便,唯一美中不足的是沒有預覽功能,且改Flex4 SDK會出現錯誤,目前還是Beta版,期待他日後的更新。

2009-08-14_191440.png

目前支援Visual Studio 2008,支援的平台為Windows XP及Vista

Tofino:http://www.ensemble.com/products/tofino.shtml



[網站推薦]Flash遊戲網站:nigoro

2 意見

2009-07-23_001602.png

日本的遊戲網站,由四人組成的小工作室,遊戲都很有創意,且網站還有分享遊戲開發心得,想開發Flash遊戲的人都可以參考(不過是日文...)

網站:http://nigoro.jp/

技術Blog:http://kyoudou.nigoro.jp/



Tour de LiveCycle

0 意見

screenshot-collage-600.jpg

Tour de LiveCycle是LiveCycle Data Service(LCDS)的教學程式,由AIR開發,提供多樣的LCDS範例。

這跟之前的Tour de Flex類似,有用到的人可以參考

Tour de LiveCycle:http://www.adobe.com/devnet/livecycle/tourdelivecycle/index.html

順便補上Tour de Flex

Tour de Flex:http://www.adobe.com/devnet/flex/tourdeflex/

Tour de Flex WEB:http://www.adobe.com/devnet/flex/tourdeflex/web/



[心得]使用Flash 操作 PDF

0 意見

最近剛好有用到,把心得整理一下

一、使用Flash顯示PDF:

Flash可透過HTMLLoader直接顯示PDF,而Flex則可用HTML Tag,這兩者都是用瀏覽器嵌入的方式呈現,效果跟Firefox、IE直接打開PDF一樣,雖然能顯示PDF,但Flash的渲染邏輯跟想像的不同,顯示的PDF文件會被置於最上層,跟Flash Index無關,且無法操作PDF文件,有一種比較特殊的作法是Cross-Scripting,透過Flash -> DOM -> PDF -> Javascript的方式操作,HTMLLoader讀取嵌入PDF的網頁,透過DOM操作PDF內的JavaScript,這種做法很麻煩而且PDF必須事先埋JavaScript,有興趣的朋友可參考Cross-Scripting PDF一文。

剛談論的HTMLLoader跟HTML都只能在AIR中使用,也就是Flash並沒有給Web顯示PDF的方法,雖說如此,網路上還是有看到有人用Flash做PDF Viewer(豆丁網),這部分可能是使用PDF轉SWF的技術,由於PDF文件格式是公開的,所以網路上有很多第三方的Parser,其中一種就是PDF轉向量SWF檔,這種技術的好處是可完整操作,且也能去掉一些文件屬性,像是Navigate tag跟Page Layout等..,讓顯示不受文件影響。

補充一些線上的PDF轉換網站:

PDF Online:http://www.pdfonline.com/convert-pdf/

PDF Convert:http://www.freepdfconvert.com/

PDFMenot:http://pdfmenot.com/

二、使用Flash產生PDF

有個好用的第三方Library─AlivePDF,這是改自PHP的FPDF,可產生文字及圖片,功能很完整但不支援中文 ,該作者也有注意到這個問題,期待他的更新版

logo.jpg

AlivePDF:http://www.alivepdf.org/

三、使用Flash解析PDF

Parser的部分比較少,筆者只找到Pavo這個由日本人撰寫的Parser,只能取出PDF的資訊及內文,無法取出圖片,重點是沒什麼教學,且裡面有用到File、FileStream等AIR才有的Class,所以這個Parser也只能給AIR使用。

Pavo:http://code.google.com/p/pavo/



[好用工具] Flash eff 2.0

1 意見

2009-07-14_150208.jpg

FlashEff是Flash的Plug-in,可簡單做出Flash特效,有點像是之前的SWISH但是用Flash做開發介面,只要在原本元件點選效果即可。網站下可下載免費版,有數百種效果可用,但不能做細部修改,有些效果也被擋住,專業版雖聲稱有3000以上的效果,但要99美金,可調絞版更要$199,個人覺得免費版就很夠用了。

官網:http://www.flasheff.com/

效果展示:http://www.flasheff.com/patternsshowcase/

使用教學:http://www.flasheff.com/tutorials/



[網站推薦]Flash版的快打旋風

0 意見

2009-07-14_165829.jpg

Flash版的快打旋風(二代),感覺有可能是用Alchemy寫的,遊戲很完整

網址:http://www.ponged.com/actiongames/streetfighter2championedition-4113



AStar路徑演算法初探

2 意見

A*是著名的尋路演算法,在即時戰略遊戲很常見,主要是用來找出最短路徑,筆者參考Patrick Lester的A* Pathfinding for Beginners一文,試著用Actionscript3實作A*,為了加快效能,全部改用Vector取代Array,所以以下範例請用Flash Player10以上版本觀看。

先簡單說明一下A*的邏輯,A*是藉由評分制來取得最短路徑,有三個參考值F、H、G,F是H跟G的總合,最後拿來參考用,而G是由起點到目前位置所需的移動耗費,也就是移動距離參考,而H比較特殊,這是一種啟發式的預測,估算目前位置到終點所需的移動量,H有很多種算法,這次的範例是採用最簡單的Manhattan演算法,直線且不考慮障礙物

第一個範例把評分列出,黃色區塊為算出的最短路徑,而淺藍色區塊為有運算過的節點,按下空白鍵可切換四方向及八方向移動

2009-10-05_011918.png

觀看範例

套用PV3D,這樣感覺就比較像遊戲了,如果加上移動限制及回合,就能做出SLG戰略遊戲的效果,下次再寫個範例試試

2009-10-05_011951.png

觀看範例

原始檔下載

AStar類別



Flash Player10的聲音操作

0 意見

2009-07-07_141207.jpg

Flash Player 10 允許聲音在播放時動態改變內容,網路上有人寫了一個唱盤的範例,轉動唱盤可倒播,右側的控制把可加速、減速。蠻有趣的,類似DJ的遊戲

網址:http://herrmuttlobby.com/scratch/



體驗真正的3D效果:PV3D + AnaglyphView

0 意見

anaglyph.gif

之前無意間看到的,有人透過Papervision3D做出立體影片(anaglyph)的效果,只要有3D眼鏡即可,筆者沒那東西所以也沒試,改天去文具行買玻璃紙吧 :-)

原文可下載AnaglyphView原始檔

文章:http://blog.barcinski-jeanjean.com/2008/10/17/making-of-part-iii-anaglyph/



Flash and Flex Developer's Magazine

0 意見

2009-07-02_163827.jpg

國外的Flash/Flex雜誌,提供一些新聞及教學,內容還蠻豐富的

雙月刊,一年的價格是39.2美元,約台幣1286,價格還可接受,不想訂也可以免費下載過期雜誌,有興趣的人可以參考

網址:http://ffdmag.com/

過期雜誌下載:http://ffdmag.com/prt/view/back-issues/page/1.html



免費的Flex開發工具:eclipse + AXDT

0 意見

AXDT是eclipse的Plug-in,可用來撰寫Actionscript3及mxml,支援Flex SDK 3及Flex SDK 4,不過功能很陽春,Design mode只能顯示列表,且Code hit有限,文字也不會自動變色,唯一的好處是eclipse的編輯環境,對習慣eclipse快速鍵的人來說會比較好用。

另外網站上還有一個ASDT可下載,跟AXDT一樣是eclipse的Plug-in,可用來撰寫Actionscript2,由於不常用到筆者就沒試了。

裝完後可選AXDT的Perspective

2009-06-30_150938.jpg

AXDT編輯環境,可寫mxml,但Script不會跳code hit

2009-06-30_150913.jpg

有預覽模式但只是列表

2009-06-30_150558.jpg

執行效果,這裡只加一個按鈕跟日期選取組件,輸出結果同Flex,沒什麼太大問題

2009-06-30_150717.jpg

官方網站:http://axdt.org/

AXDT update site: http://update.axdt.org/

ASDT update site: http://aseclipseplugin.sf.net/updates/



你也可以當變形金剛

0 意見

2009-07-01_103458.jpg

上傳照片合成變形金剛,最近這種類型的網站還蠻多的

網址:http://www.transformersmovie.com/robotize_me/



體驗更強大的AIR:Merapi

0 意見

2009-06-30_181631.jpg

Merapi能實現AIR與Java溝通,讓AIR可以透過Java去存取USB、Bluetooth、GPS..等AIR不支援的IO設備,或是直接執行本機檔案、開啟目錄等...。或許有人會質疑,既然都要透過Java了,那不如用Java開發就好,何必使用AIR?其實就以UI開發來講,Flash是非常方便的工具,尤其是Flex的mxml,基本上就是為了UI所設計的語言,強大的排版能力、多樣的特效及CSS的概念等都是使用AIR開發的好處。

附上教學影片及網站給大家參考:

官網:http://www.merapiproject.net/

教學:http://playground.deju.nu/2009/04/getting-started-with-merapi/



[網站推薦] Flash Builder 中文資源網站

0 意見

fbc.png

Flash Builder試用快到期了,趁這一、二天再把Flash Builder的特性再看一次,推薦兩個不錯的中文網站:

RIA Meeting 視頻中心:提供Adobe TV跟官網影片中文翻譯,也有gotoAndLearn的教學影片

網址:http://www.riavideo.net/

Airia Flash Builder4教學專題:Airia 論壇的Flash Builder專區,有詳細的圖文介紹

網址:http://www.airia.cn/flashbuilder/



MVC Framework總整理

4 意見

接觸MVC Framework半年多了,把之前的筆記做個整理,希望能對想學Framework的朋友有幫助

一、Cairngorm:

Cairngorm是官方的MVC框架,有完整文件及教學, 事件驅動及能使用Flex特有的data binding跟state,不過資料管理過度集中,存取的資料只給ModelLocator管,在較大一點的專案會變很亂。

範例教學:http://waterxbread.blogspot.com/2009/03/micro-architecture-cairngorm.html

二、PureMVC:

PureMVC為獨立的事件驅動架構, 支援多語言(C#、Java、PHP…),雖然相容性高,但並未使用到Flex的好處,在大型專案裡類別會多到赫人(不過修改功能很容易)。 使用Code-Behind寫法(Mediator),UI跟程式分開,在Module溝通上也有許多好用的Utils

PureMVC範例教學 Part1:http://waterxbread.blogspot.com/2009/03/micro-architecture-puremvc-part1.html

PureMVC範例教學 Part2:http://waterxbread.blogspot.com/2009/03/micro-architecture-puremvc-part2.html

PureMVC Util,使用Pipes實現Module溝通:http://waterxbread.blogspot.com/2009/03/puremvc-pipes-util-module.html

PureMVC Util,使用Fabrication與Module溝通::

http://waterxbread.blogspot.com/2009/04/puremvcfabricationmodule.html

三、Mate:

Mate 一樣為事件驅動架構, 使用標籤語法,跟Cairngorm一樣能使用data binding,並簡化了端溝通(RemoteObjectInvoker、HTTPServiceInvoker...),撰寫上比較簡單,且依賴注入的特性,可不破壞原架構加入功能

Mate範例教學 Part1:http://waterxbread.blogspot.com/2009/06/mate-framework-part1.html

Mate範例教學 Part2:http://waterxbread.blogspot.com/2009/06/mate-framework-part2.html



HTC Hero 手機將支援Flash

0 意見

Adobe發出的新聞,HTC(宏達電) Hero手機將是第一個使用Flash的Android手機,雖然目前只支援Flash Player 9,但會密切注意FP10的發展

展示影片:http://www.adobe.com/devnet/devices/articles/htchero.html

相關文章:http://www.adobe.com/aboutadobe/pressroom/pressreleases/200906/062409AdobeandHTCBringFlashPlatformtoAndroid.html



[PV3D] ReflectionView

0 意見

又把小牛拿出來了,PV3D內附的反射效果,繼承自BasicView,可直接放置在舞台上,使用相當簡單

2009-06-24_183753.jpg

觀看範例

原始檔下載

有三個值可設定,surfaceHeight為ReflectionView內的Camera高度,viewportReflection是真正操作的反射Viewport,元件為Sprite,一樣可加Filter或其它設定,而setReflectionColor則可設定反射的ColorTransform

surfaceHeight = 0;
viewportReflection.filters = [new BlurFilter()];
setReflectionColor(.7, .7, .7);

要特別注意的是,一定要用SingleRender來Render場景,雖然是繼承BasicView,但反射的渲染只寫在SingleRender,StartRendering及onRenderTick只會渲染基本Viewport,不會有反射效果



用手機觀看Flash:Skyfire

0 意見

Skyfire是免費的手機瀏覽器,可讓手機實現桌面的瀏覽經驗,支援Flash10、Silverlight2、Javascript跟Ajax,讓手機可觀看youTube及Papervision3D。

InsideRIA有介紹Flash執行效果,就結論來看似乎不錯,也能觀看著名的Big & small,唯一的要求只是一顆強而有力的處理器 :-)

軟體名: Skyfire 1.0

支援OS:Windows Mobile 5、Windows Mobile 6、S60

下載:http://get.skyfire.com/

官網:http://www.skyfire.com/

InsideRIA上的介紹:http://www.insideria.com/2009/06/ux-discussion-skyfire-mobile-b.html



Flash 多人連線伺服器:SmartFoxServer

0 意見

2009-06-23_181730.jpg

SmartFoxServer是相當強大的多人伺服器,以Flash Socket為基礎,可實現多人應用程式及MMO Game,由於是Java base開發,在Windows、Linux及MacOS都可運行,且client端支援AS1、AS2、AS3語法,專業版還能跨防火牆,功能相當強大。

2009-06-23_183745.jpg

當然,這不是免費軟體,試用版有20人的連線限制,無限制的專業版要2000歐元(約台幣九萬多),但若只是小遊戲,20人其實也夠了。

官方首頁:http://www.smartfoxserver.com/

中文概論:http://www.smartfoxserver.com/_cn/

遊戲範例:http://www.smartfoxserver.com/showcase/



[PV3D]會走動的Camera:Spring Camera

0 意見

Spring Camera是PV3D之後才加入的Camera,有點像跟拍的效果,在3D視角的A-RPG遊戲很常見。筆者跟據pv3d.org的範例做個練習,原文及教學可參考這篇:http://pv3d.org/?s=spring+camera&submit=GO

2009-06-22_142646.jpg



好用的Flex Plug-in:Blueprint

0 意見

2009-06-22_101203.jpg

Adobe Labs在6/10所放出的Plug-in,能用在Flex Builder 3及Flash Builder(Gumbo)。

Blueprint主要是用來查詢語法範例,能直接在Flex內顯示結果,在只是忘掉API用法時非常好用,只要在要查詢的文字上按下Alt + B即可(也可使用搜尋框),這個Plug-in剛好彌補了Flex Help的不足,讓Flex更好用。

官網有完整教學,筆者就不再多述:

Blueprint:http://labs.adobe.com/technologies/blueprint/

安裝:http://labs.adobe.com/wiki/index.php/Blueprint:Installation_Instructions#Installing_Blueprint_-_Step_1

教學:http://labs.adobe.com/wiki/index.php/Blueprint:Using_Blueprint



[教學]Mate Framework Part2

0 意見

part1介紹過Mate架構跟流程,這次寫一個簡單範例來說明Mate的寫法

範例為使用DataGrid操作來自DataManager的資料。按此觀看範例

原始檔下載

2009-06-04_131314.jpg

Main.mxml

同上次的架構,程式的進入點是Main.mxml,裡面只要宣告EventMap、ModelMap跟要使用的UI

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
xmlns:maps="idv.gd.hellomate.maps.*"
xmlns:view="idv.gd.hellomate.views.*"
width="600" height="350">        
<mx:Style source="assets/style.css"/>
        
        <maps:MainEventMap/>
<maps:ModelMap/>
<view:DataList/>
</mx:Application>

DataList.mxml

DataList.mxml 為列表的UI,負責顯示、新增及刪除,在Mate架構中,UI的Domain Logic直接寫在mxml,或許會有點亂,但這種寫法也方便Mate做Data Binding

<!-- 部分程式碼 -->    
<!-- mate特有的Dispatcher,即使元件不在顯示列表或不可見,仍可送訊息給Mate -->
<mate:Dispatcher id="deleteAllDispatcher" 
generator="{ListEvent}"
type="{ListEvent.REMOVE_ALL}">
<!-- 可直接接收來自EventMap的回應 -->
<mate:ResponseHandler type="deleteItemResponse" response="Alert.show('ok')"/>
</mate:Dispatcher>

<!-- 能監聽自己內部跟Mate事件 -->
<mate:Listener type="{NavigationEvent.ADD_STATE}" receive="stateChangeHandler(event)"/>
<mate:Listener type="{NavigationEvent.LIST_STATE}" receive="stateChangeHandler(event)"/>
 <mx:DataGrid id="myDG" 
x="10" y="10" 
width="560" height="215"
dataProvider="{currentListAC}">
<mx:columns>
<mx:DataGridColumn headerText="標題" dataField="title"/>
<mx:DataGridColumn headerText="訊息" dataField="message"/>
</mx:columns>
</mx:DataGrid>

事件可由Mate的Dispatcher送出,也可使用原本的EventDispatcher,但事件的bubbles一定要為true,而<listener>的標籤可以聽到來自Mate的事件,但自己Bubbles上來的事件也會聽到,在設計時要注意

三種在Mate中傳事件的寫法:

一、使用<Dispatcher>:<mate:Dispatcher id="deleteAllDispatcher" generator="{ListEvent}" type="{ListEvent.REMOVE_ALL}">,用調用時呼叫 deleteAllDispatcher.generateEvent();

二、使用原生的EventDispatcher:this.dispatchEvent(new NavigationEvent(NavigationEvent.ADD_STATE));,由於事件bubble為true,EventMap可聽到事件

三、使用程式碼的Mate Dispatcher: var mateDispatcher:Dispatcher = new Dispatcher(); mateDispatcher.dispatchEvent(listEvent);

ListEvent.as

自定事件,寫法同一般Flash事件寫法,但為避免混淆,Mate建議在事件的常數後加上Class名,好讓事件不會重覆

public class ListEvent extends Event
{
//常數後加上Class名,避免名稱重覆
public static const DELETE:String = "deleteListEvent";
public static const REMOVE_ALL:String = "removeAllListEvent";
public static const ADD:String = "addListEvent";

public var item:ItemInfo;

//bubbles要為true,給EventMap聽
public function ListEvent(type:String, bubbles:Boolean = true, cancelables:Boolean = false, item:ItemInfo = null)
{
super(type, bubbles, cancelables);
this.item = item;
}

override public function clone():Event
{
return new ListEvent(type, bubbles, cancelable, item);
}
}

DataManager.mxml

為管理列表資料的Manager

        public class DataManager
{
public var listArrayCollection:ArrayCollection;

public function DataManager()
{
listArrayCollection = new ArrayCollection();
listArrayCollection.addItem(new ItemInfo("first item", "hello mate"));
listArrayCollection.addItem(new ItemInfo("second item", "test"));
}

public function deleteItem(item:ItemInfo):void
{
if (listArrayCollection)
listArrayCollection.removeItemAt(listArrayCollection.getItemIndex(item));
}

public function deleteAllItem():void
{
if (listArrayCollection)
listArrayCollection.removeAll();
}

public function addItem(item:ItemInfo):void
{
if (listArrayCollection)
listArrayCollection.addItem(item);
}
}

DataManager封裝了資料操作,這裡只外露一個listArrayCollection給外部View使用,也可把ModelManager做為資料物件跟View挷定,但要記得要給class設[Bindable],或自定Binding事件

MainEventMap.mxml

為Mate事件的中心,用以管理事件及專案的Business Logic

<?xml version="1.0" encoding="utf-8"?>
<EventMap xmlns="http://mate.asfusion.com/" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import idv.gd.hellomate.events.*;
import idv.gd.hellomate.business.DataManager;
]]>
</mx:Script>

<!-- 監聽Mate事件,可呼叫Manager執行方法(Manager只會被生成一次)-->
<EventHandlers type="{ListEvent.DELETE}">
<MethodInvoker generator="{DataManager}" method="deleteItem" arguments="{event.item}"/>
</EventHandlers>

<EventHandlers type="{ListEvent.REMOVE_ALL}">
<MethodInvoker generator="{DataManager}" method="deleteAllItem"/>
<!-- 回應訊息給呼叫者 --> 
<ResponseAnnouncer type="deleteItemResponse"/>
</EventHandlers>

<EventHandlers type="{ListEvent.ADD}">
<MethodInvoker generator="{DataManager}" method="addItem" arguments="{event.item}"/>
<!-- 發送Navigation事件 -->
<EventAnnouncer generator="{NavigationEvent}" type="{NavigationEvent.LIST_STATE}" />
</EventHandlers>

其中<EventHandlers>的標籤為註冊Event要觸發的事件,這裡能調用ModelManager的方法,並可直接回傳內容(<ResponseAnnouncer>)或是呼叫事件(<EventAnnouncer>)

ModelMap.mxml

<?xml version="1.0" encoding="utf-8"?>
<EventMap xmlns="http://mate.asfusion.com/" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import idv.gd.hellomate.views.DataList;
import idv.gd.hellomate.business.DataManager;
]]>
</mx:Script>

<!-- 注入資料,DataList生成時自動注入 -->
<Injectors target="{DataList}" debug="true">
<PropertyInjector targetKey="currentListAC" source="{DataManager}" sourceKey="listArrayCollection"/>
</Injectors>
</EventMap>

ModelMap.mxml底層其實是EventMap,這裡分出來只是為了釐清架構。其中<Injectors>是很特殊的標籤,會在目標元件生成時自動把資料注入,且若是Bindable物件,之後就可靠物件自己更新,在寫法上很方便。

總結

這次只寫個簡單範例練習,由於Mate可用Data Binding,在寫法上會比PureMVC好寫很多,但實際上使用還是要看專案的複雜度,沒有人說那個MVC Framework是最好的,端看開發人員習慣那種架構。

這次的練習不夠完整,如果寫法或概念有錯還請指正,謝謝



[網站推薦]Narikiru

0 意見

2009-06-06_164213.jpg

推薦一個有趣的Flash網站:http://video.foxjapan.com/narikiru/,這個網站可以讓你成為電影封面主角,雖然現在只有二部,期待他日後的更新



[網站推薦]Unity 3D 教學網站

2 意見

推薦一個不錯的Unity教學網站Unity Tutorials,裡面有七篇寫給Flash開發者的教學影片,有興趣的朋友可以看看

  1. Capabilities http://www.unitytutorials.com/video/54/r-h--1-of-7
  2. Basic Scripting http://www.unitytutorials.com/video/60/r-h--2-of-7
  3. Prefabs http://www.unitytutorials.com/video/59/r-h--3-of-7
  4. Mouse Interaction http://www.unitytutorials.com/video/58/r-h--4-of-7
  5. Tutorial 5 http://www.unitytutorials.com/video/57/r-h--5-of-7
  6. Basic Physics http://www.unitytutorials.com/video/56/r-h--6-of-7
  7. Basic Collision Detection http://www.unitytutorials.com/video/55/r-h--7-of-7

網址:http://www.unitytutorials.com/



[教學]Mate Framework Part1

0 意見

2009-06-03_130504.jpg

Mate是給Flex開發的Framework,跟Cairngorm一樣只能在Flex下運作,比較特別的是Mata以mxml標籤撰寫,特有的EventMap跟Injector可在不破壞原架構的情況下注入行為,屬於非侵入式的框架。

一、架構

2009-06-04_131314.jpg

官網並沒有特別解釋要分成那幾類,這是按照官網範例的分類法,給大家參考

business:放置資料管理的ModelManager

events:放置自定事件

maps:放置EventMap跟ModelMap,Mate的主要核心

views:放置要顯示的UI Component

vos:放置Value Object

最外層為程式的進入點(Main.mxml)

二、流程

官網有完整的流程圖,這裡只挑幾個筆者覺得常用到的來講

先看一下mate的雙向流程圖

two_ways.png

如上圖,View透過事件驅動EventMap,在Mate裡所有的事件Bubble要設為true,讓上層元件可聽到事件,EventMap就是用來集中管理事件的地方,透過EventMap可呼叫要存取的網路服務或Manager,且可使用ResponseAnnouncer回傳訊息給呼叫者,不必再特別調用事件,當然想調用事件也可以,使用Mate的EventAnnouncer,可通知給對事件給感興趣的View。

使用Mate Adapter

model_adapter.png

除了使用EventAnnouncer及ResponseAnnouncer回應訊息外,還可透過ModelManager自動更新給View,這裡就要用到Flex的強項:DataBinding,我們可在程式初始時挷定View跟ModelManager的Bindable資料(例如ArrayCollection),在透過EventMap改變ModelManager時,由於是DataBinding,我們可不用送事件給View,Binding會自動送PropertyChange事件,一些Flex元件(像DataGrid)會自己更新,簡化了原本MVC煩雜的訊息溝通,這也是使用Mate的好處。

第一部分先簡單介紹架構與流程,下一篇會使用範例來說明,如果大家對Mate的流程感興趣,可參考Kenshin's Flex BlogMate教學

Mate官網:http://mate.asfusion.com/

教學文件:http://mate.asfusion.com/page/documentation

API DOC:http://mate.asfusion.com/api_docs/



Flash Builder 4 Beta、Catalyst Beta發佈

0 意見

這應該Adobe今天最熱門的新聞

Flash Builder是Flex Builder 4(Gumbo)的正式名稱,以後Flex指的是Flex SDK,Flash Builder才是開發介面(IDE),這次的改名也是為了符合Adobe的Platform,開發工具是Flash、Flash Builder,語言才是Flex SDK跟Actionscript

2009-06-02_163518.jpg

今天趁熱就裝起來了,介面有許多的改變,左上的樹狀列表變成跟Java一樣,有package跟libery,libery可反查類別及方法,相當方便,中間多了data/service跟network monitor,Component也多了Flash Component及Flash Container,似乎還有許多的功能,繼續測試中

Flash Builder4:https://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashbuilder4

Catalyst 下載:http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs_flashcatalyst



Gaia Frameowrk

0 意見

2009-05-19_125947.jpg

Gaia是給Flash開發的Framework,不像PureMVC或Cairngorm的MVC架構(Model、View、Controller),反是提供Flash骨架生成,可快速製作Flash-base網站,利用site.xml管理所有頁面及架構,條列清楚且容易修改,且直接支援SWFAddress、SWFObject,能自動生成deeplink及SEO(Search Engine Optimization),對常接觸Flash網站開發的設計師來說,Gaia絕對是好用的工具。

備註:Gaia是給Flash IDE的擴充元件,需使用Extension Manager安裝,請參考官網教學

2009-05-19_125910.jpg

Gaia site:http://www.gaiaflashframework.com/

Demo:http://www.tmrw.co.uk/blog/gaia-framework-demo-site/



[網站推薦] mogera

0 意見

2009-05-15_132850.jpg

日本的Flash game網站,收錄許多有趣的投稿,有些遊戲是給手機的,有裝Flash lite的玩家一定要玩玩看

2009-05-15_133144.jpg

網站連結:http://mogera.jp/