2011年7月28日 星期四

Convert animated GIF into Sprite

  Sprite is a huge image which contains multiple sub-images, each of them is a frame of an animation. By combining different small pieces images into a large file, we can easily implement animation by offsetting a "window" in sprite. This technology is frequently used in performance-critical scenario, such like 2D video game animation. There are multiple tools to create a sprite, like Adobe PhotoShop or Flash. But if you want to convert an existent animated GIF into a sprite, you dont need to have such luxury tool. There is a more easy way to achieve this (but still not so trivial) by using ImageMagick. It's so simple, just a one line command:


montage input.gif -tile x1 -geometry '1x1+0+0<' -alpha On -background "rgba(0, 0, 0, 0.0)" -quality 100 output.gif
Thats it! Remember that use your input file name to replace input.gif. Thanks to Nick. This awesome command is originally from TIGForums

2011年7月21日 星期四

Animate static images with jQuery plugin

  The easiest way to add simple animations into a webpage is by putting some GIF images. But this also make it hard, or impossible, to control the animation, for example, you cannot control when the animation begin, end or pause. Because animated GIFs are rendered and updated by browser, which is a black box for web front end design. To gain the control of your animation, you can use javascript. The basic idea is to have a list of images which is exactly all the frames of the animation, and use javascript to keep refreshing it with a timer. Fortunately, there are already jQuery plugins to help you do that. I found the most popular two: jAni and Spritely. But in order to use such plugins, you need to make all your frames into a form of "sprite", which can be easily done in my another article "Convert animated GIF into sprite".

  jAni is light-weight, easy-to-use and very simple. However, it can only handle one (ONE!) sprite at the same time. So if you need multiple animations on the page, you need to use Spritely. Using Sprite  is so easy. The following example is to create a repetitive animation with 10 frames and duration of 2 sec:
  1. create a div with appropriate class and id (#t1 in this case)
  2. assign sprite to the div in css
  3. to play animation in Sprite:


     $('#t1').sprite({fps: 5, no_of_frames: 10}).active();
  

  Done! Enjoy using it!

2011年6月5日 星期日

6/5

    今天買了三件AF的衣服,一下子一百美刀就不見了。細看一下,版型確實合身,質料也很舒服。但是設計非常幼稚且破爛。真不得不配服品牌塑造之成功,今天一件AF Tshirt如果賣五元,我想連Amigo都不會買。但是賣40元,就變成潮男最愛了。AF利用價格區別了自己的菁英形象,而消費者也樂意花錢買這種昂貴的形象來區別自己與窮酸人。名牌真是一種直接迅速的階級歧視。

2011年6月2日 星期四

Social Network Company是不是泡沫

 首先要定義泡沫。如果一樣東西看起來的價值遠大於它真正的價值,那麼就是泡沫。一個公司的價值,在於它賺錢的能力。所以如果一個social application有一億的用戶但是賺不到一塊錢的話,它就是泡沫。如果它有一億的用戶,股票市值50億,結果一年只賺不到五千萬,這種遠低於定存的回報,也是泡沫。
    即然是一個公司,那一定要有賺錢的能力,不然就是慈善機構了。現在來看最知名的Social network company是怎麼賺錢的:
    Facebook: 廣告
Twitter: 廣告
    LinkedIt: 會費 + HR介紹費
Zinga: 虛擬寶物
Groupon: e-commerce
  所以其實都有賺錢的方法的。關鍵只在於能不能賺到資本額就是了。Groupon應該是裡面商業模式真可靠的,這也反應在它最高的營收上。Zinga次之,青少年對於花錢改別人database裡面的entry是毫不手軟。LinkedIT吃的是行之有年的Club + 獵人頭的餅。那麼吹最大的FB和Twiter呢?
     FB市值70B,Twitter值8B (最近應該更高了)。他們該賺多少錢呢?隨便舉一些成熟的、讓投資人放心的"非泡沫"純軟體科技公司的Revenue / market cap (不比gross...因為我也沒有FB的gross)

     IBM:       99B  /  201B  =  49 %
     MSFT:    62B  /  204B  =  30 %
     ORCL:   26B   / 165B =   15%
     GOOG:   29B  /  170B  =  17%
   
    嗯...所以70B要有15%的成績就要有10B的revenue。依照FB年成長近兩倍來看,是非常有可能的。網路廣告市場不斷擴大,而FB利用用戶個資的Target Ad,似乎對於廣告商來說更有說服力。PWC說全球網路廣告市場目前約有70B,而年成長率有double digit。在此情況下,FB其實一點都不算泡沫啊!(如果股價不再升高)。至於Twitter.....個人不是很看好。也許可以套用google AdWords的模式,但是這種model總感覺是要跟fb搶市場。有可能會有複數贏家嗎?歷史似乎是否定的。


   

[iOS] multiline textfield (use UITextView)

    我的app需要一個行數可變的text input box。一開始box的高度只有一行,隨著input string的換行,box會自動增加其高度。非常基本的需求,相信所有的UI design都會需要。難以至信的是,UITextField沒有類似 enableMultiline這種property的。Google了一下,發現最方便的work-around是用UITextView去。UITextView本來就支援keyboar input,也支援 multiline,只需要把inset修好,scrolling關掉,增加"偵測字數長高/變矮"的機制,就大功告成了。具體的作法,請參考 http://www.hanspinckaers.com/multi-line-uitextview-similar-to-sms。不過它在斷行和inset有點小瑕吃,等我有空在上傳我的版本。

6/2

    今天忽然想通了,我不快樂是因為我不知足。其實我已經很幸運了,過份的強求自己有最好的成就,一是不切實際,二會讓自己分心,三是一事無成,四是抱怨不快樂。想起自己能在國外歷練,在不還不錯的公司做自己喜歡做的事,認識很多強大的朋友,應該是非常好的經歷的。不需要感嘆自己比不上他人--沒有意義,也不會有幫助。該做的事,就是在自己的能力範圍內,把每項事情做好,做到自己覺得的好。沒有這種原則,做什麼都註定失敗。
AskMyMob目前到了瓶頸。感覺必須要有改變才行。然後到底欠了什麼臨門一腳,我還是想不透。希望某天可以靈光一閃。現在就改網站門面吧。

2011年6月1日 星期三

6/1

    今天算是比較不普通的一天。工作方面非常正常,出異狀的是我的心理。我發現我居然會開始嫉妒朋友的成功,居然會開始希望他失敗。我發現我居然開始成為了一個處處跟別人比較,非常在乎輸贏的人,那種我最不想成為的人。我好像失去當初的單純與熱血,墮落成俗世的人了。我以前是個隨心所欲的人,我只會跟我心中目標的自己去比較。我不會在意成就不如人,只關心我實現了什麼目標。那時的我雖然更笨懂得更少,卻更有熱情和執行力。如今的我懂得比較多,顧忌的事也多了。處處怕得罪人,事事想做的圓滑,卻想要又最美好的結果。這是錯的。活了二十六年,我最重要的教訓就是:為自己而活,做自己想做的事。專注在自己的事上,別人的成功不該影響我。不這樣做,一不會快樂,二是什麼事都做不好,三是成為一個我所鄙視的人。
 我想做的到底是什麼?就是改善世界。改善世界中的一種方式就是把資源分配最佳化。其中資訊的分配是還有很大進步空間的。人生很多不平等都建立在資訊的不平等上。很多人可以有個更有意義的人生,只要在他需要的時候給他適當的資訊即可。Google幫我們做到了一些,Q&A website又更進一步,但是還有空間。我的使命,就是補足這部份,或是讓世人了解這部份必需被補足。

2011年5月4日 星期三

5/4

    今天orientation講google兩大支柱:search 跟 ads。search的背後除了大家都知道的page rank之外,其實有非常多的細節是非常tricky的,例如光是如何防止SEO的攻擊就是一門大學問。ads背後更是auction的賽局理論命題,有時間還蠻想看一下相關的理論。
    傍晚是social hour。我的搭訕能力越點越高了,現在無論哪國人都可以胡扯很久。在美國要成功,第一野心 第二能力 第三人脈。我目前大概還是只有野心XD。
   

2011年5月3日 星期二

5/3

   第二天的orientation結束了,相當無聊。不過又多認識了兩個人,而且跟partner關係更好了。Google裡面真的蠻多機會,有趣的project相當多。雖然我是做business app,但是也希望有天可以做product方面。不知道轉職難度如何XD 多認識人一定要的,畢竟我最終還是會去startup。目前就磨練web的front end和相關technology吧!