Red5...

Red5是Open source的Flash Media Server(FMS),現在最新的版本是0.6 rc2...
在多方考量下,決定將之前開發的FMS相關程式移轉到Red5上...
Red5是Java base的,所以我又把以前寫java程式環境建構起來(腦袋的java compiler也需要換換..)..
開發環境如下:
*Server-side部分
 -Java JDK 6
 -eclipse 3.2.2
  -Subclipse(SVN plug-in)
  -QuantumDB(Database access plug-in)
  -XMLBuddy(XML edit plug-in)
*Client-side部分
 -Flex 2 Builder
*DataBase部份
 -MySql 5.0.26
其實Flex 2 builder也可以是plug-in的形式存在在eclipse中,因為Flex 2 builder本來就是以eclipse為基礎開發的,我最早學習Flex 2的時候也是這樣子弄,但後來我還是移除掉重新安裝獨立的版本,因為開發環境比較單純,因為我的eclipse已經裝了一堆plug-in...
大概講一下怎麼部署Red5,透過SVN(網址:http://svn1.cvsdude.com/osflash/red5/java/server/trunk)就可以直接取出Red5到電腦上,然後必須先透過Ant部署/建構(red5 root資料夾內的build.xml),這樣就完成基本的環境建構了...
接下來就可以寫測試程式,跟開始移轉FMS程式到Red5上了,下面有個網站可以參考...
http://www.joachim-bauch.de/index.html/en
在tutorials裡面就有Red5的教學文章(包含建立第一隻程式,跟從FMS移轉到Red5..)
基本上Red5的中文資源真的很少,我英文又破,所以花很多時間在看文件跟資料上,學海無涯呀...

Flex 2.0.1 SDK Hotfix 1...

Flex 2.0.1 SDK Hotfix 1釋出了...
修正了一些Bug,主要如下:
1.DataGrid
2.CellRenderer
3.Tree
4.其他修正

FLV MetaData Viewer...

想看FLV的MetaData嗎?除了自己寫程式去撈外就是找工具用了...
上次抓附加MetaData資訊的工具(FLVMDI)的網站另外有個工具也很讚...
就是 FLV MetaData Viewer (FLVMDV),可以在檔案內容裡面看到FLV的MetaData...
這樣要判斷FLV的資訊就方便許多...
當有好用的工具就會野心很大的想,有沒有可以把所有相關影音資訊秀出來的工具呀?這樣就不用自己去猜他背後的編碼格式是什麼了...

Apollo小玩心得...

這兩天找空小玩了一下Apollo,寫了幾個小程式來試看看...
基本上跟寫Flex程式沒多大差別,我也將以前的程式移轉Apollo上,目前是沒遇到問題,所以看起來是沒有上手問題...
不過畢竟是alpha 1,所以還是有些問題...
<mx:Html>標籤大概是這一次alpha上最受注目的項目之ㄧ,不過利用它寫出來的程式還是有問題,我遇到的問題如下:
*多國語言顯示與輸入的問題:這部份我沒有詳細研究不過我想Apollo應該還是會以unicode為主,但是遇到某些網頁(包含正體中文,簡體中文,日文)還是會出現問題,輸入部分我用新注音完全無法輸入,不知道是alpha 1版的關係,還是我程式沒寫好...
*字型顯示和CSS問題:這個跟unciode網頁應該也有相關的問題,遇到某些網頁排版會死的很慘,目前支援度看來還有待改進...
*沒有內嵌Flash player:瀏覽到含有Flash的網頁都無法顯示,這部份是Apollo一直強調整合的部份,但是在Alpha 1上沒看到,有點可惜(PDF好像也沒有,這也是強調重點之ㄧ)...
*文件要另外開來看,沒有跟Flex 2 builder整合,會不會因為只是Alpha 1所以沒做...
*建立Apollo專案的時候還需要自己手動設定run/debug的方式,不然預設會跑Flex專案編譯,這點就很奇怪,不知道是我安裝的問題還是其他問題,都已經建立Apollo專案了,怎麼還要自己手動調,怪怪的...
不過Apollo終於掀開神秘的面紗出現在面前,看來未來這幾個月會很好玩呀!!!

Apollo alpha 1 開放下載啦...

Adobe的Apollo終於放出了alpha 1版了...
目前可以下載到的包含Runtime,SDK,文件,開發套件for Flex Builder 2.01和範例程式...
要來好好玩一下啦...
另外Apollo for Adobe Flex Developers Pocket Guide這本書在Adobe Labs也放了整本書的pdf版上去,真是驚奇,是不給歐萊禮賣這本書了嗎?乾脆就免費大放送的政策真是讚呀...

*Adobe Apollo（Adobe Labs）
*Apollo:Applications:Samples（Adobe Labs）
*Apollo for Adobe Flex Developers Pocket Guide（Adobe Labs）

Apollo for Adobe Flex Developers Pocket Guide...

看MXNA的時候發現了Apollo for Adobe Flex Developers Pocket Guide這本書的完整版!!!
馬上抓下來存檔,晚上要K的書又多一本啦!
Adobe Lab的Apollo網頁已經把DownLoads跟Documentation兩區準備好啦...
看來快啦!!Apollo~~~

Flv MetaData...

這兩天用Flex開發Flv的播放程式...
由於沒有利用Flash Media Server,所以要取得Flv的基本資訊就要靠Flv的MetaData...
找到一個Open Source的工具FLVMDI可以附加MetaData到Flv裡面,也支援command模式,這樣利用Script大量輸出會比較方便...

Skinning & Scale-9

開始進入令我頭痛的章節...
先來看Skinning,照字義翻就是皮膚,用來改變組件外觀的...
以Flex Quick Starts的例子來看是用Button組件,裡面包含三個屬性(ownSkin, upSkin, and overSkin)來定義Skins,你可以在<mx:Button>裡面定義這三個屬性,也可以透過CSS利用<Style>區塊來定義Button的Skins...
這三個屬性(ownSkin, upSkin, and overSkin)也描述了Button組件對於滑鼠的三種行為,每個UI組件包含的Skins不盡相同,所以詳細還是得要查手冊...
再來看Scale-9,Scale-9是在Flash8裡面出現的,強調在作縮放的時候,會保持外型不變,它是將圖像切割成九個區塊來定義屬性,Scale-9要用Embedding的技巧來內嵌資料,Scale-9有四個參數(scaleGridTop, scaleGridBottom, scaleGridLeft, and scaleGridRight)來做調整...
之前有看到一個用Flex做Theme的網站(Scalenine),就是大量利用Scale-9的技巧來做,這才是專業呀,看來自己還需要的努力還很多...

奇怪的XML...

之前開發一個展示程式時遇到一個問題...
我利用Flex透過Web Service跟後端程式利用XML做資料交換....
另外在一個Flash程式上也會讀到相同一份XML資料...
問題來了,我Flex的程式是最早完成的,所以測試都沒問題,
但是Flash的程式就是沒有辦法讀到同一份XML...
當下以為我Flash程式寫錯了,所以進入漫長的Debug階段...
最後在手賤的情況下發現了bug在哪,原來是XML的編排有問題...
下面有兩段XML碼:
<?xml version="1.0" encoding="utf-8"?>
<catalog>
<item itemId="1">
<name>item1</name>
</item>
<item itemId="2">
<name>item2</name>
</item>
</catalog>
<?xml version="1.0" encoding="utf-8"?><catalog><item itemId="1"><name>item1</name></item><item itemId="2"><name>item2</name><item></catalog>
兩段XML有時麼不一樣呢?答案是沒有,只是有換行跟空白的差別而已...
但是很奇怪的是,第一種有空白有換行的Flex讀的到,Flash就不行了,所以後來全部改用第二種又臭又長的方式...
我本來以為是我用的文字編輯器自己幫我加了一些標籤進去所以造成無法讀取XML,但是很奇怪Flex又讀的到,很玄,問題解決了,但我還是不知道為什麼...

Repeater...

Repeater是一個Runtime Object用來建構重複的組件...
基本MXML語法如下:
<mx:Repeater Properties Events>
<UIComponent區塊>
<mx:Repeater/>
屬性裡面最常用到的就是dataProvider,透過Data Binding的技巧就可以取得資料來源,另外測試了幾個屬性:
count:限制Repeater產生的組件個數,
startingIndex:從第幾個資料來源開始產生組件,
currentItem:回傳目前被抓取的項目(回傳Object)
currentIndex:回傳目前被抓取的項目的索引(回傳Int)

Transitions & States

Transitions顧名思義就是轉換,而且是應用在States轉換之間...
來研究一下Transition這個Class,基本的MXML與法如下:
<mx:Transition id="myTransition" fromState="*" toState="*">
<effects區塊>
</mx:Transition>
<mx:Transition>標籤裡面有兩個屬性fromState,toState表示你希望產生效果的States切換來源跟目的,*表示所有情況都要用...
effects區塊就參照mx.effects這個Package的說明,在Flex Quick Starts裡面是利用Parallel這個effects...
在有些effects的Class裡面說到會有包含children的項目,像Parallel就可以使用的子Class有Move,Resize,Sequence...等,這部份請參考Help文件的說明...

States 續...

詳細來研究States...
States的應用其實很簡單,利用Design面板其實就可以做到大部分的處理了...
但是有些地方還是需要寫程式會比較方便...
比如說我有插入Hbox/Vbox組件做畫面配置,在Design面板就會看不到,那就需要寫程式處理了...
利用<mx:AddChild>的relativeTo屬性來決定你要放置新的UI組件位置與BaseState的舊組件的關係...
另外States的組成可以是樹狀的,完全是看妳basedOn哪個State...

States...

Flex的States很像是Flash的的Stage...
用來切換目前的程式狀態...
你可以用來定義哪些功能配合顯示哪些States...
你也可以像Flash一樣定義States轉場...
更不用說像Flash一樣的轉場特效照樣可以使用(請參考mx.effects Package)...
Flex Quick Starts裡面談States的部份很簡單,程式碼也只是用MXML就達到了效果...
不過我還是稍微改寫了一下,以符合實際應用的情況...
以下是程式碼片段:
private function doChangeStates(evt:Event):void{
currentState = currentState == 'Register' ? '':'Register';
}
透過這個Function就可以透過click event去判斷目前所在的States是哪個,然後做切換...
利用Function的寫法的好處就是可以擴充跟Copy&Paste(Reuse啦,想到哪去...)...

Apollo的第一本書...

這個月是Apollo最值得關注的一個月,在Adobe的計畫裡三月應該要有測試版可以玩....
所以每天都在注意開放下載沒,還沒看到消息倒是看到了Apollo有了第一本書...
Apollo for Adobe Flex Developers Pocket Guide
作者是Mike Chambers.
出版社是動物書商(個人覺得:D)歐萊禮.
網路上也找的到試讀的章節了,講File System API...
大概讀了一下,越來越有Apollo要來了的實際感覺了...
之前接過一個案子要利用Zinc + Flash/Flex開發一個展示程式...
Debug起來真是痛苦,寫程式要寫兩段配合是在Flash/Flex開發用還是經過Zinc編譯過後用...
雖然Zinc提供的API已經相當強大好用,但是寫起程式來工具的使用還是綁手綁腳的...
Apollo的出現就統一用Flex Builder 2開發了,這樣開發/Debug上就會流暢順利許多...
Apollo...快來吧~~

Flex Quick Starts 中文版...

原來...
Flex Quick Starts有正體中文版....
平常都只會找英文資料而已,我記得我之前找都還是會轉到英文網頁去呀...
不知道何時提供的,不過也讓入門的門檻低一點啦,畢竟英文我也很爛...哈...
看了一下中文版的,最新的還是只有英文網頁有,不過資料相當充足了...
連結如下:
1.Flex Quick Starts 正體中文網頁
2.Flex Quick Starts 英文網頁

User interface 序...

自己寫了多年的程式,但對於目前多變化UI的處理一籌莫展...
認識我的都知道,程式ok,美工別找我,我是那種幫忙寫Flash程式連基本的畫面處理都堅持要用ActionScript處理的人,寫程式比較快嘛 :D...
在進入RIA的時代後,從後端程式拉到前端來就不得不面對這個自己最弱的一環...
Flex的UI組件很強大,所以要學的還很多呢...
先介紹兩個網頁...
1.Adobe Flex 2 Component Explorer
2.Flex 2 Style Explorer
第一個網頁最好能看到直覺到看到Flex寫出來的程式馬上知道是哪些組件兜起來的,我就還不行,所以要猛看...
第二個網頁是新版的Flex 2 CSS Explorer,CSS在Flex中(應該說所有網頁程式中)很重要,現在的程式視覺處理部份第一眼就決定這個程式好不好的比重太高了,畫面處理不好大概也沒多少人想用,所以CSS就很重要了(當初我打死不碰的一塊= =,報應來了...)
知道組件後接下來就是怎麼用的問題了...
這可學問大了,個人覺得Flex 2很大的精華就在這裡...

Flex Quick Starts的Building a simple user interface介紹了基本的user interface相關的議題...
* Using controls
* Using containers
* Styling your components
* Adding effects
* Creating states
* Defining state transitions
* Using tooltips
* Controlling the cursor

把範例程式跟說明看一看應該基本的應用就可以上手了...

Handling events 續...

續Handling events 思考到的問題...
下面有兩個程式片斷
第一種:
private function doChange():void{
bt.label="Change!";
}

<mx:Button id="bt" label="Click!" click="doChange()"/>
第二種:
private function doChange(evt:Event):void{
bt.label="Change";
}

<mx:button id="bt" label="Click!" click="doChange(event)"/>
兩段程式碼可以做到一樣的事情,就是把button組件的lable換掉,
個人習慣是第一種,但是在event based programming的觀念裡面還是要傳遞event才方便後續處理.
如下程式碼:
function doChange( evt:Event ){
trace("evt: ", evt );
if( evt.target == "btn1" ){
//do something
}
}
所以ActionScript有這樣的彈性,應用上更靈活,個人使用上還是比較在乎啥時候的時機啥時用比較好,所以還是讓自己學乖一點寫寫正統的程式碼會比較好,基礎打穩點再說...
感謝Jeremy老師的在RIADEV的回答...

Handling events

今天主要從Adobe的Flex Developer Center裡的Flex Quick Start下手...
針對各個議題研讀並了解後改寫程式,熟習自己習慣的撰寫模式...

Handling events
event的處理有三種~
* Registering an event handler in MXML
* Creating an inline event handler in the MXML definition
* Registering an event listener through ActionScript

自己習慣是利用第一跟第三種,
第一種利用組件自己的觸發事件
程式碼片段如下:
private function doChange():void{
bt.label="Change";
}
然後在組件Button裡面註冊一個click="doChange()"就好了...

第三種動態註冊我要監聽的事件
程式碼片段如下:
在application中加入creationComplete event,以便程式建立時執行init(),
private function init():void{
addListeners();
}

private function addListeners():void{
//將button "bt"呼叫一個CLICK事件,利用onChange()處理
bt.addEventListener(MouseEvent.CLICK,onChange);
}

//接受event做處理
private function onChange(evt:Event):void{
bt.label="Change!";
}
在組件Button裡面就可以不需要呼叫click事件了..
至於何時利用的時機個人覺得如下...
1.如果只是做畫面(ui)上處理的,第一種跟第二種event就很好用了.
2.第三種在做event control時必用,在Design Pattern裡面Singleton是常用的設計模式,所以大量使用這種方式註冊、監聽、廣播事件是很正常的.

第一PO~

自己知道RIA也有幾個月了...
這段時間試著利用Flash,Flex,Flash Media Server寫了幾個程式...
深覺自己程度不足,所以決心從基礎打起...
利用此blog來記錄順便做筆記...