http://www.flashdevelop.org/downloads/documents/Library_AS3_Frameworks_AIR.zip

請盡情享用～

人與環境密不可分, 環境更是被媒體所左右. 我們每天穿的看到的聽到的, 摸到的,知道的,很多都是由媒體傳播而來。

吃飯, 聚餐, 辦party, 宴客, 買禮物, 買衣服, 旅遊, 唱歌, 爬山, 交友, 登山, 結婚 … 生活中的總總, 抉擇, 成與不成在一個點,點與點的機會在於傳播, visual communication / commercial advertising　做的好的，不只可以塑造品牌形象，更可以昇華成生活形態。

從媒體步入數位後，每一個小環節都可以是很大的轉捩點，這些環節有些在無形中發生，不知不覺的變成了新的革命，我用我的觀察方法，用動態的角度分析 成: 主動，被動，互動，亂動.

以下淺見：

被動

路上的招牌, 報紙上的廣告, 很多不是我想要看到的資訊, 在傳統的資訊夾帶的資訊上強迫接受, 像是我沒有小孩也不需要紙尿布, 打開電視或報紙,還是得無意看到, 我不喜歡選舉, 可是公車看版, 路上旗幟, 還是得看到候選人們互像吐槽, 這種強迫的接受資訊, 算是被動. 一般都是傳統的產業, 大部分在媒體上都是不透過電腦的.

傳統的被動的方式往往比較像是一種宣達, 或是演講(Speech) 藝術家/作者 可以很明確的將自己的想法傳達給觀眾, 所以觀眾與作者的身分/立場非常明顯.

主動

透過搜尋引擎, 關鍵字廣告, 通過訂閱主動給我們訊息的電子報 / RSS FEED, 我們有興趣的,或相關的, 自己送上門來, 算是主動. 主動媒體, 還有一個特點,就是數位媒體漸漸的分身, 以往的單一網站概念 (就是大家一定要到某個網址,才可以獲得資訊, 在主動媒體像是 YouTube, Blog (RSS) 漸漸的把內容以分散的方式外放, 造成更好的流傳效果.

互動

以往媒體給我們的, 我們只能接受, 互動就是所謂的相互作用, 現在像是 Blog, YouTube, 甚至一些新聞網站, 我們可以評分, 可以留言, 可以接受回饋的媒介, 就是互動.

互動的方式往往比較像是一種遊戲, 或是溝通(communication), 藝術家/作者 只把話講一半, 另一半交給觀眾去發揮, 觀眾與作者的身分/立場模糊. 藝術家/作者 也就沒有辦法很完全的把作品理念傳達, 尤其如果作品又流於類似軟體/程式功能展示, 變成了科技之下的魔術表演, 藝術價值反而就降低了, 這也很有可能是互動藝術十年還是無法正式進入主流藝術的原因.

亂動

以往以上的三種動態,很多都是獨立,或伴參雜著隨著發生,並沒有說新的(互動)就一定比舊的(被動)好, 而亂動的歸類, 則是科技在更進步之後開始有一些整合的現象, 想是 Facebook, 他整合了 twitter(微網誌) / blog / group (fans) / flickr(picasa) 網路相簿 / Game 等等, 加上手持裝置, 把上述的三種動態混合, 形成亂動的局面, 但卻也發生了各種機能上模糊的混淆,伴隨來更多的隱私權, 資訊氾濫的問題…

以上,正在製做精美的互動簡報(未完成), 有興趣的人可以到這邊來看.

廢話不多說,OOP(物件導向)也是一堆規則堆成的一種語法,用這些規則可以達到你想要叫電腦做的事, 但並不代表用了規則就做的漂亮.

在OOP規則的世界, 輸贏可以有很多方面, 基本上是如何拼奏這些規則, 達到

1. 讓共同開發的人都能互相了解,分工合作

2. 可以重複使用又易於修改

以上兩樣基準, 由不同的狀況用途, 經過邏輯的推演歸納, 會產生某些特別拼湊的OOP規則,就成了所謂的 Design Pattern了.

Design Pattern 的用意是在解決問題, MVC是眾多 Design Patterns 的一種, 目的在解決的問題就是避免 Model / View 之間偶合的情形.並且利用一些 interface 的寫法讓 開發者之間可以互相了解.

一般flash presentation 網站對Model幾乎只讀取而不改變的情形,所以很自然的就會把 Controller 跟 Model 寫在一起.不過卻會造成 Model 更改不易的情形.

之前在 Flash Coder New York (FCNY) 的 email 討論裡面, 有一堆人提到 MVC 是如何的複雜無用, 其實沒錯, MVC 確實讓人在寫 code 上多了很多程序, 不過這些程序主要也是為了減少 model / view 的耦合現象, 讓開發過後的元件可以重複使用, that’s all AS3 OOP programing about.不然直接寫再 Flash IDE 的 Frame 上面就好, 何必還要寫一堆 as.

之前看了一陣子 PureMVC framework. 覺得好像很複雜, 很多次看一下就放棄了, 這次我選擇不看, 我直接用, 發現其實並不難, 而且讓整個開發變得很清楚明瞭.(但是還是要多寫很多Code…)

以上是 pureMVC 的官方架構示意圖,看起很嚇人,已經到了有 infovis 美感的地步.

以下是我只管使用面的簡單版

PureMVC 的內部架構用了不少很厲害的 patterns, 想要看懂並不容易, 所以不要去管他的架構. 用了就懂了. 以下是一些心得

1. M(proxy), V(mediator), C(command) 都要照他的用法 extends + implements 該元件的相關 classes.

M -> extends Proxy implements IProxy

V -> extends Mediator implements IMediator

C -> extends SimpleCommand implements ICommand (microCommand 我還不知道是幹嘛用的)

以上都需要命名

2. Mediator + Proxy:

以上MV者都只是個 framework 的溝通管道, 就像拼圖裡面凹凹凸凸的連結部份, 你可以在裡面輕鬆的包個你想要的物件, 這個做法主要是不管你之前的 M/V 用什麼怪寫法或怪名字, 用這個包起來之後就可以跟其他的元件接軌

3. Command

3.1.與 Notification 配對執行.
3.2.經由 retriveProxy / retriveMediator 用名字的字串, 取得 Mediator / Proxy, 可裡面的 method, 並且溝通兩者, 所以 M(Proxy),V(Mediator) 不會直接溝通

4. Notification

用來執行 Command,  Command, Notification 這兩者容易讓人搞混,基本上 Command 是 class, 裡面有 execute, 用來執行一些任務, Notification 則只是一個字串, 像是指令一樣會去執行 Command
這兩者分開的好處是可以讓不同的 Notification 可以執行相同的 Command.
很多案例都是把 Notification 定義放在 Application Facade 裡面, 我則認為有分開的 Class 用 const 管理這些字串比較好.

5. 發送 Notification

Proxy, Mediator, Command 都可以發送 sendNotification(Notification字串, 跟隨發送的資訊物件);

6. 反應 Notification (這是最重要的部份)
執行指令的方法有兩種:

6.1.Notification -> registerCommand -> Command.execute();
在 Application facade, initialize 的時候:
registerCommand(Notification, CommandClass); // Notification字串與 CommandClass 的配對

6.2.Notification -> listNotificationInterests -> handleNotification(notification:INotification)
在Mediator 裡面:
透過 framework 的寫法 extends+implements, 會有一個 override method 要去填: listNotificationInterests, 回傳Notification 字串陣列
如果有以上陣列被執行的話,handleNotification 會被執行

以下是狀況演練

View 觸發事件

1.interface event 不改變 model ( 或是 view 自己解決就可以）

2.interface event 直接改變 model + view,由 command 發出 notification (state 改變, 像是 sound on / off 之類的, model 不需要load 東西)

3.interface event 改變 Model 但是不發出 notification 由 Command.retriveMediator 呼叫 Mediator 裡面的 function 更改 view, (比較複雜的改變)

4.interface event 改變 Model (load 一些東西） 之後又改變 View. 可以想像 load data 進來的過程,view 要等待 model 讀完才能繼續進行

Model 改變

1.Model 更新改變 view (假想讀取預設的 user 內定值改變 view / DeepLinking)

2.interface event without changing model （像是 menu 開關等等, 視覺上面無傷大雅的改變, 盡量少用, 最好把 state 都還是存在 model 裡面）

由以上的演練可以得知,

Notification -> Command
這類大概都是會牽扯到 Model 的

Notification -> Mediator.listNotificationInterests
這類就是只去更改 View

Notification 規範的越有系統越好, 尤其不要搞混以上兩者

所以像是 view 4 範例, 可以分成 UPDATE_MODEL,之後要改變 View （步驟 7 sendNotification )之後 change view 的過程可以共用另一個 Notification (UPDATE_VIEW)去呼叫, 這樣的話舊可以共用 Notification 而不會寫了一堆.

可以由的控制方式分作:

多重控制的 view

(由多個source 去控制一個 view, source 可能是其他的 view or model）所有元件透過同一個 notification 更新 view

單一控制的 view

(一對一的控制, 像是由 scroll bar 控制內容）這種情形可以就直接不用任何 notification 直接 view 裡面解決就可以

改變 model 的 view update.

這種情形最好繞到 model, 由 model(proxy) 透過 sendNotification 去更改 view. 這樣一來 控制端的 view 跟  model 都可以利用同一個 notification 去更改被多元控制的 view

由用途可以分作

System

GUI (Graphic User Interface)

View

PS:
這篇不錯 : http://flash.tutsplus.com/tutorials/workflow/understanding-the-puremvc-open-source-framework/

一切都歸源於次級房貸風波, 之前願者上勾的公司網站,也被迫重新定位, 目的在於招攬更多的案子.

策劃 SITE MAP

公司經營十來年,服務項目不斷的擴張, 依據製作項目分類可以有以下這些業務:

• Illustration – 3D Modeling / Rendering…
• Photography – Fashion / Portrait / Architecture…
• Graphic Design – Logo, Brochure, Copy writing…
• Web – Website, Interactive Kiosk…

加上公司簡介跟成員

• Company Bio / Info
• People

大致上可以分做五大資訊內容.

PS: 就像上館子吃飯一樣,有時候有趣的名字會給人有好奇心,或是高級感:

沙茶炒空心菜  -> 馬來風光
豆辦醬炒粉絲  ->螞蟻上樹
辣牛肉肺片 -> 夫妻肺片
等等

應該是類似的道理,我們開始依據target客群的策略,再把內容分類重新劃分一次:

Intro:

因為之前網頁太少資訊,所以這次開門見山, Company Bio: 變成三個問句放在最前面當作 intro, 告訴大家我們在幹麻…

原本的設計是擺三個問句在那裡,右下角放一個 ENTER. 不過有人根本不知道那可以rollover,所以我們決定要起碼 rollover 一個以後,下面的黃色的 bar 才會跑出來,用黃色是因為他夠明顯,而且也是敝公司的 CI 顏色.
ENTER 則改成 MENU, 因為之後每一個 section 都會有這個按鈕, 我們決定利用intro的時候先讓人使用,也算是介紹他的功能.

Menu 從單字變成一個句子

Illustration

• CGI still or in motion?

Photography

• photography?

Web Design:

• fancy an interactive experience?

Graphic Design:

• brand, design and re-design!
• do you need to position or shift some property?

Info

• want a magic dboxDVR?
• please contact dbox

People

• hungry? No really, are you hungry?

之後在把句子藏起來,除了讓版面看起來簡單,同時引起 Viewer 的一些好奇心之外,其實還有一些策略性的模糊地帶.

本公司很多客人是 broker, 或是紐約的大型房地產代銷公司(就像台灣的信義房屋）, 基本上這些代銷公司都是打著 Branding / Marketing 的號招,招攬地產開發公司. 而本公司在裡面扮演的角色就是提供設計跟視覺上的協助, – 但是 – 我們公司也想要開始朝 Branding 這塊發展, 那就可能會招惹到一些我們現有待消公司,因為業務重疊, 所以我們將一些字藏起來, rollover 的時候才會出現.

一般地產公司的人會來看我們的 CGI / Property 部份, 可能會略過 Branding, Design這個部份,所以也就比較沒有關係, 我們的目的是要 隱藏我們的目的,老闆說這個事道下, 有時候得玩一點躲貓貓的遊戲… <- 這其實是用介面的互動,把句子藏起來的主因.

另外,在成員方面, 我們不想用一般的方式來介紹公司成員,所以決定用比較另類的方式: 大家煮東西放食譜上去,當作是成員介紹.

PLUG-IN 機制

除此之外我們為了因應現在多變的市場,我們把所有的內容模組化並且獨立,也就是說從 intro 到 上述主要目錄,都只是個 launcher, 其實所有 sections 都是獨立的小型網站,也就是說他們可以用 deeplinking 或是獨立的 URL 路徑方式進入,像是 http://www.dbox.com/cgi 或是 http://www.dbox.com/interactive.

這樣一來可以針對不同的客戶,很快速的拿掉或增加內容,雖然說有點詭異,不過我想針對現在變化多端的市場,這一招算是很妙.

在製作上,我把應有的內容分成一些 template, 之後要增加的話, 只要編修 xml 就可以快速的讓 sales 拿去簡報, 是一個很 powerful 的 presentation tool. 必要的話還可以在主網站增加 menu(隱藏小句子那個), 變成官方網頁.

分開來做還有一個好處,就是 Google Analytics 會很開心,而且 SEO, 也比較好做.

技術

這次開發在技術上大多 recycle 之前有的 code, 整個開發到完成時間不到一個月, 在 website 部份, 四個人製作（但大家都還是有別的案子在跑）,兩人程式, 一人 video 設計 + 剪接,一人處理校正資料.
在程式技術上並不是太難, 主要著重於控制 loading 時間, 依據不同螢幕大小 load 不同的圖片以確保最好的影像品質, 全螢幕及圖片播放的預先 loading, 還有 sections 之間流暢簡單的轉場, loose deeplinking, google analytics, xml based content, & SEO(未完成)
剪接部份一人擔綱, 在 interactive 部份, 針對每一個影片的特色, 擷取 3-4 段精華, 來表現該網站
總而言之 : 製作並不難, 細部調很久.

LOOP 影片

本 站花最多心力的就是這些 Loop 影片了, 橫跨歐美亞洲, 幾乎動員了公司全部 3D 的人, 連老闆假日都跑去拍, 看來大家玩得不亦樂呼, 這些影片營造出的 “氣氛”, 大概就是本站最大的特色了, 一開始各地的工作夥伴紛紛寄來了許多影片, 在經過很嚴格的篩選跟 loop 的編排之後, 還根據每一片的內容, 一個個分開壓縮, 最後在依據 section 的種類做配置.

在配置方面, 應該一般人都會選很直接能連想到的影片, 不過這樣是不是就淺了, 所以我們在選片的時候, 都刻意的偏離一點, 跟該頁內容保持一些安全距離, 才不會讓人覺得 “看圖說故事”, 也讓人比較有聯想空間, 及新鮮感.

之後可能要開始加入聲音, 再度加強氣氛, 不過我想會是跟頻寬 / 流暢奮戰的掙扎.

DESIGN TASK

這個案子我主要扮演的腳色是設計諮詢,溝通跟整合,從寫一堆code變成講一堆話跟寫一堆email… 發現其實這個工作並沒有比較輕鬆,所以如果你還是在做事的人,千萬不要覺得管事的人很爽啊,因為我們除了要知道每個人在進度,做最妥善的人力派遣之外,還得多想好幾步,分配每一步的時間,詳細的步驟,然後溝通,最後還要承擔成敗的責任~

這次的網站設計,我主要想要達到的目的是用最少的 interface design 去 support 基本的  navigation functionality.裡面有的自動導航功能(auto pilot), 所以地產開發公司的大爺們,可以只按幾下滑鼠就可以看完整個網站.

原本以數字形態最為圖片庫的分類,顯示了比較沒有意義的圖片數目,之後換成羅馬數字.

大部分的介面上有用到 I,II,III… 等等羅馬數字, 這是用像是書本章節的概念來增添影像的故事性,同時每一張圖下面都有編號,這樣讓 tel conference 的時候,會比較好溝通. Interactive 的部分, rollover 會有影格往上延伸,這算是唯一本站在互動上的 eye candy 了,因為我們決定在這個 section 加一點 eye candy,單是又要保持住整體的 tone 調.

在這案子我想要達到”無我”的介面設計(就是連一個特別的 icon 都沒有),並且用 rollover / off 來show / hide 圖文,達到很簡潔的視覺經驗,有些地方可能會 try and error,不過通常在你開始有一點點困惑的時候,答案應該就會出現,所以一切在使用上,保持了一點探索,並維持一致的 rollover / rollout 簡單的互動模式,整體界面還算直覺.

本站的設計目的是希望觀眾在看完網站之後,對 interface 毫無印象,卻對網站裡面的內容及留下記憶.

During this design progress, I try to use minimal interface design to support essential navigation functionality. So viewers can focus on content and won’t even notice of / surprise to anything cool / special on the web interface.

圖一

最近做很多 flash video progressive download 測試, 要求目的是: 要能達到大螢幕, 快速播放 … 廢話,這兩樣就是最難的…

我為了把工作丟出去,免得自己跟組員被操死, 所以想出了一套簡單的解釋方法,給公司的 3D 人員看,並做出測試程式.

想了想,既然是 streaming, 那用水來表示應該很恰當, 所以就做了以上的 diagram, 果然大家一下就明白.

首先,根據最近的製作經驗,以下是一些一般口語與技術口語的轉換:

“video loading slow“ -> buffer takes long time to load.

“video looks pixelate / crappy“ -> datarate not high enough.

以下是 progressive download 最重要的原則:

PlayHead vs BufferLoding 的賽跑, 如果 Buffer 永遠快於 PlayHead,那就會順,如果 BufferLoading 慢到被 PlayHead趕上,那就會停頓了…
如果把BufferTime設定很長？沒錯,你可以讓 BufferTime 先偷跑,不過設定越長,等待 video “開始“ 的時間越久.
BufferTime計算的時間是以 video 播放為主,並不代表在 video 開始之前的等待時間, 速度慢的網路 BufferTime 五秒可能要等上好幾分鐘.
此外CPU的能力也直接影響到解壓縮以及撥放的效能,把小畫面放大到全螢幕,會吃掉一些CPU資源,所以窮人的鳥電腦永遠看到不順的東西…

以下是各個要素的解釋及各種狀況演練:

1. Video Size / Length vs DataRate.

大小與長度跟是不是會比較慢? 並沒有絕對的關係, DataRate 才是關鍵.
DataRate? 每一秒畫面需要的資料量,一般都是控制在 1000 – 1500 kbps 的大小.
你可把很size很小的video壓成很好的影像品質,這樣 DataRate 會很大
也可以把size很大的video壓成很差的影像品質,這樣 DataRate 會很小
如過想要全螢幕播放,我建議用小的解析度1.5 – 2倍大,效果可以接受
以當今最大螢幕來說 2560×1600,我用 1280×1200來撥還不算太差
同樣的影像品質,越大的video,DataRate吃掉越多
整個影像的變化量很大的,會吃掉很多 DataRate.（部份動態會比較省）
顏色較少(黑白）影像可以節省 DataRate
FrameRate 也可以節省 DataRate
如果有很多影片,每個都要求最好的表現,應該依據每一個影片的畫面性質來作不同的壓縮測試,
才可以得到最儉省也最好的效果

2. Bandwidth / DataRate.

如圖一,同樣的 Bandwidth 不同的 Datarate.

圖中寬瓶那邊代表影片壓縮成較高的 datarate, 中間的管子代表server到電腦之間的頻寬,狀況良好的時候DSL的頻寬可以到 2000 kbp/s. 以下來一下國小數學:

Q1.在 DSL 狀況良好(2000kbps)的情況下, 我們要 progressive download 一個壓縮到 quality 還算不錯 (1000-1500 kbps,這裡以 1200kbps來算)的影片,片長 30sec. (請注意那個ｂ,大小寫有差）,buffer time 5 秒(先抓資料偷跑 ),以上需要等多久？

A1.解答:

(buffer抓下來的資料大小 / 一秒可以抓多少)
1200(kb/s) x 5(s) / 2000(kb/s) = 3(s) 答案三秒. 還算可以接受.

再來難一點的,算一下速率問題:

Q2.buffer 偷跑五秒, 會不會被 play head 追上？如果會,在開始播放以後,多久會追上?
假設 N 秒追上 (video播放會卡住,重新抓buffer)

A2.解答:

影片資料量 = download 資料量
1200(kb/s) x5(s) 偷跑 +1200(kb/s) * N(s) = 2000(kb/s) * N(s)
6000+1200N = 2000N
60+12N=20N
8N = 60
N =7.5
答案是 7.5秒

錯錯錯,頻寬 2000kbps 比 datarate 1200kbs 還快,怎麼可能追上呢?

偷跑的應該要算在 download 的資料量吧!!!

1200(kb/s) * N(s) = 1200(kb/s) x5(s) 偷跑 + 2000(kb/s) * N(s)
N=-7.5秒,負值,也就是永遠不會被追上

所以說此題 1200kbps + DSL 根本不用設 buffer 五秒,為以防萬一,別的東西分掉頻寬,設定 buffer 1-2秒就夠了～

Q3.如果 30sec 影片 datarate 是1200kbps,可是窮留學生用 56kbps摩墊撥接上網,一樣五秒buffer,開始撥要等多久,撥了以後要多久以後影片卡住?

A3.解答:

1200 * 5 / 56 = 107秒,窮鬼慢慢等吧~
1200(kb/s) * N(s) = 1200(kb/s) * 5(s) 偷跑 + 56(kB/s) * N(s)
N = 5.91秒,等超久,看一下就停了…

Q4.再問,那buffer要多長才不會掃興? （也就是 playhead 撞到 buffer 的時候剛好 撥完)

A4.解答:

先要算整個影片的大小 : 1200 * 30 = 36000(kb)
36000 = 30 * 56 (正常時間不停頓播放,可以抓下的資料) + buffertime * 56
buffertime = 612.85 秒（30秒影片要花 10 分鐘抓, 窮學生專心唸書吧! 不要上網看 A 片!)

以上都以全部頻寬給progressive download用,如有計算錯誤敬請指教.

3. Video長度不影響速度,但是會被別的下載需求影響

基本上 video 長度是對 progressive download 沒有影響的,不過如果像是 Bg loop video的時候特別,因為如果video還沒被 load 完, user 已經去按了別的東西的時候, bandwidth 會被佔掉, 所以可能 playhead 很快的就會撞到 buffer, 導致 video 播放停頓.

關於flash方面

flv 在用 as3 抓下來必須要透過影片裡面的 metadata 資訊,這些資訊有

• duration – Obvious. But unlike for FLV files this field will always be present.
• videocodecid – For H.264 we report ‘avc1′.
• audiocodecid – For AAC we report ‘mp4a’, for MP3 we report ‘.mp3′.
• avcprofile – 66, 77, 88, 100, 110, 122 or 144 which corresponds to the H.264 profiles.
• avclevel – A number between 10 and 51. Consult this list to find out more.
• aottype – Either 0, 1 or 2. This corresponds to AAC Main, AAC LC and SBR audio types.
• moovposition – The offset in bytes of the moov atom in a file.
• trackinfo – An array of objects containing various infomation about all the tracks in a file.
• chapters – As mentioned above information about chapters in audiobooks.
• seekpoints – As mentioned above times you can directly feed into NetStream.seek();
• videoframerate – The frame rate of the video if a monotone frame rate is used. Most videos will have a monotone frame rate.
• audiosamplerate – The original sampling rate of the audio track.
• audiochannels – The original number of channels of the audio track.
• tags – As mentioned above ID3 like tag information.

很討厭的是這些資料要用很詭異的方式獲得: 設定一個物件obj,在物件上設定要跑的 function 然後用 NetStream.client = obj,之後才抓的到,並沒有辦法用 as3 標準的 addEventListener 獲得…

var customClient:Object = new Object();
customClient.onCuePoint = cuePointHandler;
customClient.onMetaData = metaDataHandler;

var myVideo:Video = new Video();
addChild(myVideo);

var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns:NetStream = new NetStream(nc);
ns.client = customClient; //<--------------------
myVideo.attachNetStream(ns);
ns.play("xxx.flv");

function cuePointHandler(infoObject:Object):void {
    trace("cuePoint");
}
function metaDataHandler(infoObject:Object):void {
    trace("metaData");
}

...

很可惜,flash似乎沒有辦法獲得 client 端電腦的 bandwidth,所以在製作的時候,dynamic 計算應該所需的buffertime.
只能靠假設的客群來虛擬實況,我都設定用戶是 DSL (1.5Mbps = 1500kbps)來計算,
因為 user 可能是宅男,在逛網站同時可能也在抓一些有的沒的,所以 bandwidth 如果保守一點的設定 1000kbps,
video datarate 1200kbps, buffertime 依據影片長短來作調整,得到以下公式: (求 buffertime)

videoDataRate * VideoLength = Bandwidth * VideoLength + Bandwidth * bufferTime;

其中部份資料可以從 metadata 獲得

buffertime = (videoDataRate – 1000) * VideoLength / Bandwidth;

這個公式我還沒有測試過,不太確定 buffer time可不可以在 ns.play(“xx.flv”)之後設定… 這要請高手回應.

關於壓縮

FlashPlayer 的 NetStream API 可以播放 .mp4,.m4v,.m4a,.mov and .3gp, Video needs to be in H.264 format only. 根據公司同事 S 小姐測試, H.264 可以壓得蠻小的,不過顏色會變淡…

以下是抓來的對照圖:

from : http://www.adobe.com/devnet/flash/articles/video_guide_02.html

AS3 方面:

flash.video class有一些客戶端讓video變好的參數 smooth / deblocking, 都可以設定看看,不過既然是客戶端,一定是用 CPU 及時運算,所以要小心使用.

deblocking設定數值

• 0 － 允许视频压缩程序根据需要应用消除马赛克的滤镜。
• 1 － 不使用消除马赛克的滤镜。
• 2 － 使用 Sorenson 消除马赛克的滤镜。
• 3 －（只限 On2 视频）使用 On2 消除马赛克的滤镜，但不使用 Deringing 滤镜。
• 4 －（只限 On2 视频）使用 On2 消除马赛克的滤镜和 Deringing 滤镜。
• 5 － （只限 On2 视频）使用 On2 消除马赛克的滤镜和性能更高的 On2 Deringing 滤镜。

本文參考 / 延伸閱讀:

http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/flash/media/Video.html

http://labs.adobe.com/wiki/index.php/Flash_Player:9:Update:H.264#Q:_Does_the_addition_of_H.264_mean_Flash_Player_will_support_HD.3F

http://www.kaourantin.net/2007/08/what-just-happened-to-video-on-web_20.html

http://www.streaminglearningcenter.com/articles/2/1/Streaming-101-The-Basics—Codecs-Bandwidth-Data-Rate-and-Resolution/Page1.html

Flash 裡面泡”康保濃湯”(Component)
可以用 Authoring 的介面在眾多相同的 Symbol 上做不同的參數設定,相當方便.
市面上查到的方式即複雜又困難.

以下快速客製的方式,雖然在編輯上沒有 live preview, 或是其他像Flash Component 那樣很厲害的編輯方式,不過基本的表單設定,如字串,選擇,選色等等,都有,重要的是他 WORK!

我覺得這是我的獨家秘方,應該沒有人這樣做過,所以有任何建議敬請回覆~

康保濃湯製作食譜如下:

in FLASH IDE

1. 建一個 圖形MovieClip 物件在 lib裡面,裡面只有一個 textfield 名為 myLabel

2.在該 Symbol 上按右鍵 -> Component Definition

3.[+] [-] Parameters: 把要控制的property放在這裡,並設定屬性 -> [ok]跳出

• Name: 在 flash IDE 上面 Parameters 出現的字
• Variable:變數名稱
• Value:預設值
• Type:資料類別

4.在該 Symbol 上按右鍵 -> Linkage -> 打入該物件對應的 .as檔

5.該 .as 檔裡面必須要有相對應於 Component Definition 裡面的 Variable 名稱

6.於該 .as 檔裡面: (假設 MyComponent.as)

package {
import flash.display.*;
import flash.text.TextField;
import flash.utils.Timer;
import flash.events.*;

public class MyComponent extends Sprite {
public var myName:String;
public var myColor:Number;
public function MyComponent():void {
var tmr:Timer = new Timer(1,1);
tmr.addEventListener(TimerEvent.TIMER,onShowComponent);
tmr.start();
//onShowComponent();
//會出現 myName = null 的狀況
}
public function onShowComponent(evt:TimerEvent=null):void {
myLabel.text = myName;
myLabel.backgroundColor = myColor;
}
}
}

注意要訣/缺點都在
1.要延遲才可以用
2.一定要去改才會有用,不改的話連預設值都不會出現

各位就請好好享用~

component

假設今天A君被layoff,要做一個portfolio找工作, 想用 about,  website, contact為簡單明瞭秀三個頁面,

• about, 裡面是一些自我瞎掰介紹
• works, 跟別人的合作案跟借來的作品
• contact, 將要搬家的地址跟快要丟掉的手機電話

很快的規劃,以最精簡的方式可以有以下幾個 classes 的製作 (如果連這都想不出來,還是趕快準備打包吧!)

• Main.as, document class – 聽 Menu 的事件 切換內容
• Menu.as, menu class – 用 TextFiled 建立出一些 Menu
• About.as, 裝 about 這頁的內容
• Works.as, 裝作品, slideshow?
• Contact.as, 放聯絡資訊, form?

在按 Menu 切換內容的時候,要移除上一個內容,所以在 About.as, Works.as,  Contact.as 裡面都有一個自己的 remove function, 把自己移除.

Main.as會像以下這樣

//properties
private var aboutContent:About;
private var worksContent:Works;
private var contactContent:Contact;
//methods
private function changeContent(evt:MouseEvent):void{
//偵測有沒有這個物件,有的話再移除
if(aboutContent){
aboutContent.remove();
}
if(worksContent){
worksContent.remove();
}
if(contactContent){
contactContent.remove();
}
//偵測是哪個menu被按到,然後去 new 內容
var contentName:String = evt.target.text;
switch(contentName){
case "about":
aboutContent  = new About();
aboutContent.x=100;
addChild(aboutContent);
break;
case "works":
worksContent = new Works();
worksContent.x=100;
addChild(worksContent);
break;
case "contact":
contactContet = new Contact();
contactContent.x=100;
addChild(contactContent);
break;
default:
break;
}
}

以上如果有耐心看完,那妳/你就快了解一半了,恭喜

如果妳/你發現:

if(aboutContent){
aboutContent.remove();
}
if(worksContent){
worksContent.remove();
}
if(contactContent){
contactContent.remove();
}

要寫三次,很鳥,那恭喜妳/你,妳/你的code會越寫越漂亮.

沒錯! 這裡就是要用到 polymorphism 的地方:

目標是要怎麼達成

if(content){
content.remove();
}

呢? 那就要靠 super or interface 了

可以用

public interface IContent{
function remove():void;
}

or

public class AbstractContent{
public function remove():void{
throw Error("abstract function must be override"); // 提醒一定要被改寫
}

之後用 About.as, Works.as, Contact.as 去 implements IContent or extends AbstractContent 之後
以用 IContent 為例, in Main.as:

//type 定義的時候因為 implements 的關係可以全部用父類別
private var content:AbstractContent;
private function changeContent(evt:MouseEvent):void{
if(content){ //偵測有沒有這個物件,有的話再移除
content.remove();
}
var contentName:String = evt.target.text;
switch(contentName){
case "about":
content= new About();
//如果要去呼叫 About type裡面的 method 的時候,可以把他的Ｔｙｐｅ轉回來
About(content).doOtherStuff();
break;
case "works":
content= new Works();
break;
case "contact":
content= new Contact();
break;
default:
break;
}
//這裡還可以統一設定
content.x = 100;
addChild(content);
}

類似以上這樣.

總之,這有點像是以前學代數乘法,
(a*b+a*c+a*d)*k = a*(b+c+d)*k
共同的部分可以提出來,
共同重複的class也是,可以寫成interface / super class 並以這個為 type. 就可以用 polymorphism去在 runtime 執行共同擁有的部分.

因為型態是屬於父類別,而卻還是有自己型態(type)裡面的properties / methods,這樣寫就可以相互轉換了,所以叫做多形(or多态)

這樣有比較容易一點嗎?
如果還沒有,示範都好了(.zip)

此外,我不確定這跟多形有沒有關係,就是很基本的type轉換,讓FDT開心,也讓自己容易了解.
如果你將物件從DisplayObjectContainer裡面抓出來

for(var i=0;i<10;i++){
var menu:MenuItem = new MenuItem();
addChild(menu); }
//之後想要呼叫menu裡面的method: setLabel.
this.getChildAt(3).setLabel("songYY");
//該死的DisplayObjectContainer.getChildAt是回傳Object,Object物件裡面怎麼可能會有setLabel呢? 所以你的 setLabel 在 FDT 裡面會找不到... 這時候你可以寫:
MenuItem(this.getChildAt(3)).setLabel("songYY");
//去轉換type就OK了

還有用在Event.target回傳的時候也很好用:

private function handleClick(evt:MouseEvent):void{
evt.target.setLabel("Clicked");
//evt.target:Object ,裡面不會有 setActivateState();
//可以加上type解決.
MenuItem(evt.target).setLabel("Clicked");
}

PS: Object 是dynamic Class,所以以上不轉換成 MenuItem並不一定會錯,只是FDT會給你警告,很討厭,
而且個人覺得有良好的typing轉換習慣是會讓別人看的了解,自己也會進步的.

A good piece from my company, glad that I could participate on it and had my name on creativity.
Team work! Please take your time to submit your color story as well.

友人歐在他blog上討論 flash 設計及使用問題.

這是策略問題,html/full flash site各有長處.
如果偏實際互動,像是留言,設群,web2.0等等當然是用html based.
如果偏重於視覺感官上的那當然用flash.但是互動是要動的有意義,主要還是環繞在 branding/content等,eye candy要有可是不要太多,不然會有人被搞到腎上腺素爆發.

以下是針對編號議題的意見:
01,06,10,11:
厲害一點的程式設計師(是要真的很厲害)上下頁,SEO,捲軸,滾輪…等等,都不會是flash會輸html的地方,甚至可以做出比html更有趣的方式.

02:
有些客戶故意不讓人選文字,而且flash基本上也可以選 flash4就有了吧.html字體都還不能改說

03:
至於Loading, html based的,也要 loading(難道不是嗎),flash hold住loading的過程統一顯示,是因為要求更好的視覺效果,並不是flash的檔案就會便很大.這點可以反駁客戶.（而且這什麼時代了,網路越賴越快啦~)

04:
動畫一定要輔助內容或形象,這比例要對,很多人設計flash網站,背景特效轉場佔了70%,真正的內容圖文,反而小小的用很普通的捲軸顯示,那就真的遜掉了.(壞榜樣例)

05:
特效在電影可以看到,在網頁上也可以再看,flv+flash現在應該已經是大宗,theFwa上面哪個不是靠video,在flash上有的非線性玩法,在線性媒體上可是會讓你按遙控器到手酸眼睛麻的.

07:
html設計不好也會這樣,這不只是flash的問題

08:
他不只跟不上我的腳步,而且跟不上時代的腳步

09:
我很少放音樂,頂多只放音效,除非必要.用flash賣的是一種視聽經驗,不過不要去過度影響到user.

網路發展了這麼多年,該玩該嘗試的大概都也都做過了,一切也都回到基本面,尤其現在又是不景氣…
網路進入到2.0的時代,很多東西都必須要有跟各家API結合的能力,flash在這方面吃虧很多.flash的開發要從這裡面走出一條生路並不簡單,所 以在運用flash的時候要更加小心.有前瞻性的設計公司也應該趁早開始累積做html/ajax的基本功.可以看見未來是重視覺,也講功能的時代. nike.com 就是最好的例子.

x x x x x x x x x x x x x x

另外一提,是我發現很多flash網站設計師的盲點.
網站是一個殼,內容才是主角,很多年輕設計師都下很多工夫在轉場跟特效上,而自己放了哪些字,秀了哪些圖,可能完全沒去看,在欣賞別人網站的時候也都職業 病的站在技術跟視覺得立場,而沒有真的仔細去看是否內容好瀏覽,動線,有沒有不必要的3D處理或是很”假行”的轉場. 視覺上的刺點,一個聰明厲害的就好了,沒必要每一個元素都要 transition in / out.
通常程式套用後,同一個轉場會變成是每一次按下去之後的轉場,如果每按一次就要等或是pv3d轉來轉去,在厲害的特效看很多遍,也會煩死人的.

以下回應康貓:

完全讚同不一定要用flash才能做出好設計,不過 html 要做的漂亮,難度跟技術都會比flash還要複雜.對一般設計師來說,flash會比較好上手,尤其在vector動畫方面.

對於第二點,我不是很讚同,Flash天生並不大,也並不慢,只是有人轉場設計太多/圖太多,導致loading太花時間,被人詬病.這又是設計問題,並不是flash就一定會慢,不過在製作上複雜很多又難維護倒是真的.
很多flash設計師都是平面設計師出生,對技術方面及file size比較沒有概念,導致普遍很多flash網站過大,而讓人印象flash比較慢.

維護更新型網站,用全flash網站真的不是決策錯誤就是在show off actionscript技術,真的是用html/ajax based就好.

混合型網站兩者兼顧,這點我跟貓哥看法一制.在網路界 flash 頂多就是”玩視覺”,”玩真的”的web2.0,全都是 Ajax/html的天下.

Tweetcoding contest

140 字元 flash coding contest. organized by @gskinner, open to anyone

gimme code:

g=graphics;
mt=g.moveTo;
lt=g.lineTo;
ls=g.lineStyle;
m=Math;
r=m.random;
s=m.sin;
i=0;
o={};
function f(e){trace(“參賽者的 code(140字元)”);}
addEventListener(“enterFrame”,f);

直接貼以上的code到flash IDE裡面就可以跑(strict mode 關掉)

其實原則很簡單,就是要了解兩邊的規則,讓 Editor 以及 Compiler 能找到的 class path是一樣的,就不會出問題了.

Flash IDE 的規則 :

為了特定的單獨案子設定
在Publish setting >Flash>Actionscript 3.0 > Setting…

常設:每次new案子都會有這個設定
在Edit > preferecne>Actionscript>Actionscript 3.0 裡面設定

• 方便起見在與 .fla 檔案同一層的 folder　自動就會是內定的 classpath,如果你的 fla沒有跟 src 放在一起,那就要把那些 path 加進來
• 內建core library(多案共用部分): $(AppConfig)/ActionScript 3.0/Classes -> “$(AppConfig)” stands for “C:\Program Files\Adobe\Adobe Flash CS3\en\Configuration”
• Flash IDE 會自動找到 Component 需要用到的 classpath (多案共用部分)
• Flash IDE 裡面在撰寫 code 的時候,compiler會自動去找 class path,不需要自己寫 import ….

FDT / 3rd Party Editor 的規則 :
以FDT為例: windows>prefereces>FDT>CoreLibraries>AS3 Core Libraries(tab),( 我覺得FDT的設定相當的令人頭暈),由這種方式加進來的 Linked Lib 在 icon 上面會有一個小箭頭.

• Linked Lib (src/folder,多案共用部分)
  在 FDT 裡面, 要先透過介面去把 Path 設定成好記憶的  “Path Variable”  並且給他名字. 這個 path 可以指到 .swc 檔(壓縮/pre-compiled過的classes)或是class folder.
  你可以找一次先把所有會用到的 class path 找到,紛紛設定成 variable, 之後在每個案子上按右鍵 > New Linked Libraries
  • swc : 可以將預先設定好的好的 swc path 加進來
  • folder: 可以將預先設定好的好的 folder path 加進來
• Source Folder
  Source Folder 是用在針對每個案子自行開發的部分,由於他沒有像 flash IDE 一樣會根據 .fla 的所在位置自動設定成 classpath, 所以如果用 Flash IDE Compile swf,要記得把相對的 .fla 所在地的path設定上去(在 folder 上面按右鍵,如圖)
• 就算加上了 class path,在FDT裡面撰寫 as3的時候還是得將所有有用到的 classes import 來告訴 FDT 編輯器的realtime code hinting/debug 去找相關的 reference.

總結:

Compiler 在 compile的時候會根據class path的路徑當作根,開始往下找，所以flash.display.* 其實是在其中一個 class path 裡面的 “\flash\display” folder,”.”代表folder路徑,而 “*” 代表該 folder 底下所有的class.

同一個路徑底下的class我們稱他叫做 package,通常都是一組為了同一個目的寫出來的classes,很多時候我們會用到某package底下的很多class,這時候我們就會用”.*”來指定,而不用一個一個class來寫,而使用”.*”也不會牽扯到compile後檔案會比較大的問題,因為他只是叫compiler找該路徑底下有用到的class(es)而已.”.*”只會找該層目錄底下的class,該層目錄底下的目錄並不會去找.

由於一個案子常常會有許多的 linked class path,所以必須要避免路徑跟檔名都一樣的情形,因為這樣compler會不知道要去找哪個class來compile.(好像可以用 name space解決,不過我沒用過)

在flash IDE裡面有很多內建的class path,這些class一定要相對的也在FDT裡面設定(雖然不設定,flash IDE照樣可以compiler,因為compiler是根據flash IDE裡面的設定,不過在FDT裡面會出現一堆紅字.不建議)

Flash IDE vs FDT editor Match 表:

(以上有錯請留言更正)

另外一項會令人混淆的地方就是 swf 讀取檔案的位置:

在撰寫 .as 的時候, code裡面如果要 refer / load 外部檔案, 必須要以該compile候的 .swf 為主,如果該 .swf 又被其他的 swf load 進去的話,那要以最後 embed的那個為跟目錄開始向下編寫路徑.

網站做多了,開始就會發現綜觀的背後因子的原由.在做完 front 之後,有些心得,趁現在還記得在這邊記錄下來跟大家分享.

網站分為很多種,有社群網站,blog,新聞網站,購物網站,或是介紹型的網站.
我經手的大多數是介紹型的網站. 介紹型的網站主要是傳遞資訊. 通常都是在介紹或訴說一個範圍的內容,比如說: 人,公司,汽車,房子,或是鞋子.有很多種網站都屬於這一類型.

首先提一下很根本又容易不忽視的事: 網站就像在講一個故事,必須在有限又多變化（筆電,桌上型,或是手機等等都不同）的視窗範圍內完成.

我們很習慣的把這個故事從不同的角度切割,做成介面. 通常的分法可以歸納成”質”跟”量”:

“質”:

就是所謂的本質,也是從不同的角度去切入主題,簡單說就像是如果介紹個人（設計師）可能有 about, works, photos, drawings, resume… 等等. 大部分的website都是在同一資訊上做本質的分割, 切成不同的資訊屬性以供閱讀.

資訊分割 – menu

在質上面的切割,聽似簡單,其實很重要也很複雜,裡面可以牽扯到策略跟流程.information architecture / user experience design 就是這方面的專業.

策略

做網站的人,常常忽略掉這點,而從”分類”的角度死板的切割資訊,這樣會做出很“邏輯“的網站,但卻不”人性”. 哪個選項比較重要,要提到外層,或第一頁讓人容易看到,不過又不會打亂整個資訊分類的邏輯. 在合邏輯的範疇內又要如何簡單使用, 用最少的clicks讓user/網站到達宣傳目的.

流程

怎樣設計才會讓人容易瀏覽,還有頁面跟頁面之間,如何做滑鼠操作的動向安排.看起來不會太複雜,同時又要注意到有進,就有出的反向.對於有先後閱讀順序的資訊,跟非線性區塊資訊都有不同的解決方法.

(上二圖）front案,一開始的設計著重於方便user 在操作上方便回去之前的選向而顯得非常雜亂.

(上圖）front案,將 works 獨立出來變成兩組 menu 的策略,強調 works section的內容.

在front案,原本我的提案是一開始就進入works section,因為主要內容都在這邊. 把works menu獨立出來,其他的放到其他地方,讓 user 比較容易按到 works section. 不過客戶不想要太 show off 作品(這是他們的策略) 所以最後我將所有 menu 平等對待統一放在一起.

“量”:

資訊顯示 – infovis 顯示同質多量的分佈狀況

除了最常見的資訊分割,還有一種有趣也可以說比較學術性的方法,通常用於大量的同質性資訊,同好管他叫做 information visualization (infovis)

“A picture tells thousand words“,有意義的infovis是能達到這樣的目的,不過有很多都只是求視覺上的表現,通常我認為這只是information eye candy,在不能幫助了解資訊而過於複雜的視覺表現,在資訊傳達上並不是一個好的approach.但是卻是個可以產生很漂亮視覺的方式… 如果複雜到沒辦法了解資訊,那何必又跟資料扯上關係,直接弄美美的不就好了? (迷思)

好的infovis通常可以幫助人了解資料之間的關係,像是區域性,時間性,或是量化跟比例. 我們其實從小時候的教育就開始接觸這類的方法,像是柱狀圖,餅狀圖,都可以說是這類的呈現.

網站上用infovis的手法可就五花八門了,樹狀,網狀,3d,地球mapping,等等的創意都有,簡單的可以在有限的螢幕裡做到一百筆資料,複雜的可以做到上千筆（不過我認為過多的infovis實在對使用者沒有太大幫助) 畢竟界面的設計是要以方便使用者瀏覽或是了解資訊與某些屬性的關係才有意義.

所以在顯示”量”的相互關係之後,另一種方法 – Sorting 的篩減過程就是量化表現之後切入內容的核心步驟.

資訊篩減 – sorting 減量進入資訊內容

顯示資料在某些屬性之間的關係,其實並沒有多大的意義,到最後還是要進入內容,不然也是多餘.就像 iTune 在眾多種瀏覽方式(cover flow, grid, list…) 還是得讓人聽歌才行. infovis 可以幫助瀏覽,不過這些聰明的瀏覽方式之後,開始適當的在螢幕上篩檢,逐漸的進入內容本身,才是真正有意義的.

所以在website上,sorting 比 infovis 功用來的實際, 通常 infovis的東西我欣賞個頂多一分鐘,可是 sorting 的真正功用可以讓人真的使用上很久. 利害的 sorting 方式也是可以顧及到 infovis 的美感部分, 兩者皆具的介面可以說是資訊呈現的完美.

在front案,一開始顯示所有的案子,經過不同的屬性選擇,漸漸narrow down案件的內容,一開始覺得在某些選項有的資訊超出了螢幕以外,使用到了scroll bar,並且浪費了很多空間,似乎不是很好的安排,但考慮到menu使用的直覺跟方便性的取捨,也就繼續保持一制的瀏覽方式而犧牲掉了一些全體視覺得呈現,不過或許這樣也傳達了某些篩檢的過程. 不一定要顯示全部的量,片面表現造成量的減少,或許也讓人鬆一口氣…

經過一些經驗以後,發現幾乎所有的工具再使用的時候,都會具有下列的幾個動作

1. new -> 2. setting (必要參數,內定參數) -> 3. init -> 4.interact(開始使用互動)

ex:

//1.new
var ss : Slideshow = new Slideshow();
//2.setting
ss.imageFileArray = imgAry;
ss.autoPlay=true;
ss.transitionStyle="fadeIn";
//3.init
ss.init();
//4.interact
ss.showSlide(4);

對於slideshow來講,imageFileArray應該是必備的,必須強迫使用者輸入,所以我覺得可以放在constructor強迫人填:
1. new (必要參數) -> 2. setting (內定參數) -> 3. init -> 4.interact(開始使用互動)

//1.new
var ss : Slideshow = new Slideshow(imgAry);
//2.setting
ss.autoPlay=true;
ss.transitionStyle="fadeIn";
//3.init
ss.init();
//4.interact
ss.showSlide(4);

補充: 關於 必要參數 / 內定參數是否放在constructor裡面?

function裡面的paramater是有前後之分的,通常必須設定的要放前面,有內建值的放後面.這樣的順序如果要跳著設定會變的比較麻煩.

ex:
public function Slideshow(fileAry:Array, autoplay:Boolean=true, interval:Number=5, startfrom:Number =null)
像是這樣的constructor,如果要只改變 interval的話要這樣寫
var ss:Slideshow = new Slideshow(myArray,true,10);
你要多打個 true,而且還要記得每一個裡面代表的是什麼,別人打開code的時候也比較容易看不懂. 所以我決定只把必要參數放在constructor.

爽 （中式花紋,這次用flash做） by marc lin

上次的爽