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