Yahoo! 立法會選舉 interactive Flash banner

幾個月之前透過 blog 識到一位 designer Bryan
(哈哈~ blog 的確有佢 networking 既用途~
就算你幾個月唔 update 都好 =.=||)

Bryan 想我幫佢手為 Yahoo! 香港既立法會選舉網頁寫一個 Flash 既 interactive banner
一聽到 Yahoo! 就二話不說即刻應承~
相信一定係好好既 experience~
(結果… 唔… 原來係咁… 真係估唔到…)

Anyway… 講返個 banner

Banner 裡面其中一個 function 係要將一 d avatars randomly placed in 一個 specified area
起初我只係用簡單既切餅方法將一個長方形切成等份
然後 randomly place d avatar 入 d 餅入面…

好明顯… 結果好生硬…

之後嘗試唔用餅~ 直接做 random placement
然後每一次 place 既時候都 check hit area~ if hit 就 replace
結果好好多~ 而且速度完全 acceptable

跟住o既問題就係點樣可以只從o係一個 specific area 裡面 random place 呢?
由於要就返立法會大樓o既 shape~ 所以個 specific area 會係 irregular shape
當然啦~ 要準確的話一定係靠計數
但係計數o既問題係唔 flexible 同埋唔容易 maintain
最後我用左好多長方形去 approximate placeable area
然後每次 random place 都 check hit area

咁樣做有兩個好處

1. 易寫
2. 易改

對於 designer 黎講~ 要改 specific area 的話只需要 resize d 長方形~

之後比較特別o既就係要令每一個 random generate 的人
都會o係 mouse over o既時候用一個 talking bubble 講野
因為 talking bubble o既 content 會有唔同長度
而且有機會 multi line~ 所以就要利用到 Flash o既 9-slice scaling

最後就係要令 talking bubble o既 tip 對正講野的人的頭~
哈哈~ 雖然係好 minor o既 feature
但係絕對影響整體o既感覺~

Final product 可以去 Yahoo! 度睇下~
As long as 佢地唔 shut down 個 web :p

立法會選舉 2008 Yahoo!
http://hk.news.yahoo.com/legco08/fc.html?path=/fc/20080814/legco08.html