體驗更強大的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