2010年12月31日 星期五

Facebook ActionScript Graph API ( 0 ) Graph API與Facebook官方文件介紹

Facebook Graph API今年五六月推出後,到現在已經慢慢成熟;而Flash 平台方面,很早就有人嘗試用透過URLLoader與javascript去使用Graph API了,在九月左右,Adobe也推出了由gskinner.com開發的官方版Adobe ActionScript 3 SDK for Facebook Platform API。它的名字好像很亂很不統一,大家知道我在講哪個東西就好。這個API在12月6號更新到1.5版,使用上更簡便,還多了mobile的部分。而使用時,必須先知道Graph API以及FQL等的呼叫方式,也常常需要查詢Facebook的官方文件。因此,一開始我們先不管ActionScript,而是先跟大家介紹Facebook官方文件上有哪些東西。

2010年11月30日 星期二

Progression 4 實用小技巧整理

最近的專案都用Progression 4來建構,遇到了一些問題,也學到更多的實用技巧。這邊就來整理一下最近學到的東西。

2010年10月15日 星期五

AS3分享至社群網站與微網誌的兩件小事

現在的網站製作通常會有個分享到Facebook、分享到Plurk的功能。之前接一個案子發現兩個小地方:
第一:以前剛開始用這些分享機制時,找到的文件說明通常是使用javascript,呼叫Facebook或Plurk等所提供的分享程式,後面代入分享的網址、文字等。但其實也可以使用URLRequest,設定好要傳送的網址跟參數,再用navigateToURL去呼叫。這其實是理所當然的事,我竟然最近才發現......。
第二:在有使用swfAddress,網址中有/#/的情形下,分享到Facebook後,#後面會被自動清除的問題,之前通常是寫個轉址的程式,分享的時候網址#後面的路徑把它改成一個參數,在轉址程式裡面再將它重組回去,然後轉到該頁。好處是這樣也可以順便去做動態改變顯示圖片,內文,以及計數等動作。但其實也是有辦法讓分享網址帶#的。
首先,將"/#"改成"%2F#","%2F"其實就是"/"。這樣Facebook就會保留#與後面的東西了。不過又發生一個問題,就是Facebook似乎又會在網址後面幫你多加個"/",所以"/#"就會變成"//#",這樣連結又不對了。這邊又有個小技巧,就是在網址後面,"/#"的前面,多帶一個參數,例如"?rnd=1111",這樣即使多加了一個"/",還是可以正常連結。如果將分享寫成一個function,我們可以在function裡多一段程式幫我們自動轉:
if (url.indexOf("/#") >= 0)
{
  url = url.replace("/#", "?rnd="+String(Math.floor(Math.random()*10000))+"%2F#");
}
url是我們傳進去要分享的網址,例如:
"http://www.aaa.com/#/About",
上面這段程式碼就會幫我們轉成:
"http://www.aaa.com?rnd=2845%2F#/About";
分享後,Facebook會解讀成:
"http://www.aaa.com/?rnd=2845/#/About";
".com"後面會自動多一個"/",但這不影響連結。
當然如果原本分享的網址就想帶其他參數,那就要再多點判斷了。

2010年10月13日 星期三

簡單談ColorMatrixFilter以及Bitmapdata.threshold()



Flash 8以後出現的一些點陣圖變化的功能非常有趣。前陣子執行一個案子,想讓使用者上傳一張圖片,然後將圖片輪廓轉成白色-透明的圖形。查了一些資料後,只要用ColorMatrixFilter以及Bitmapdata.threshold()這兩個東西就可以完成。

2010年9月21日 星期二

簡單談走訪某個DisplayObjectContainer底下的所有DisplayObject

最近遇到一個需求:在user按下某個按鈕後要讓畫面上所有的動態停下來,而且有5個檔案要這樣做,其中幾個元件還頗複雜,因為加了很多效果。顯然,要手動去停止所有MovieClip會做到死,記得之前有看過走訪某個DisplayObjectContainer底下的所有DisplayObject的範例,就是殿堂之路這本書。

簡單談用BitmapData.compare來做手畫路徑比對

有一種遊戲類型,就是電腦指定一個形狀路徑,例如一個圓,或一個方型,然後要使用者去"畫出"這個形狀。畫路徑這個比較常見,就是用一些Flash的繪圖API把路徑畫在Sprite.graphics。那畫完之後要怎麼跟指定的路徑去比對呢?可以把原有路徑(先做好圖,設定visible = false藏起來)以及user畫的路徑的BitmapData取出來,再使用BitmapData.compare去比對兩個BitmapData,就可以去做判斷。

簡單談Embed字型到AS檔

簡單記錄一下Embed字型到AS檔的做法。雖然我們可以直接在主要程式裡Embed字型,可是這樣做的話,每次發佈都要多花時間。我試過光是Embed常用的Ariel的數字,發佈時間就要多5秒,這樣會拖慢開發速度。所以這邊介紹的方法分兩步:1.把Embed字型的AS檔單獨發佈成一個SWF檔。2.要用的時候再去Load這個SWF進來。如此一來,只需要花一次Compile的時間,當有多個地方需要用到這個字型檔的時候,也可以去Load同一個SWF檔。

2010年9月18日 星期六

半個月,還過得去~


真的感謝各方好友的支持~讓我從這個月初就一直有案子做,解除了我對於沒有穩定收入的不安。今天剛好工作告一個段落(雖然這兩天應該多少會有些修改),稍微可以喘口氣。接下來還有一堆東西要K,Android也該認真玩了。

只不過一個人工作雖然自由,但也是超悶的啊~所以不時的會往網基那邊跑,就像今天這樣,要跟我講八卦啊~~還有就是,foursquare也請努力check in,把我這個mayor擠掉吧!!

2010年8月31日 星期二

下一個階段?

今天是在網路基因的最後一天。離開的這件事情對很多同事來說很突然,但其實做這個決定已經半年了。這種事情也不好一天到晚掛在嘴邊,所以到最後才讓大家知道。

原因,很複雜,我也說不太清楚。簡單歸納出一點,就是覺得應該進入下一個階段了。並不是網路基因不好,而是現在的工作沒辦法帶給我太多成就感。人啊~終究還是要靠這種虛幻的情感來支撐下去。

那下一個階段是什麼?這問題我想了半年也沒有很清楚。應該不會再進入網路行銷公司,遊戲公司有考慮過,但應該也不是我想要的。短期之內會先以接案來維持生計吧~所以如果有有趣的互動網站想要外發,歡迎跟我聯絡。

前面講的好像我對自己的人生沒有甚麼目標與規劃。其實我有個最終的理想,既沒有老闆,也沒有付錢要你改改改的客戶,而是自己做出有趣的東西,直接賣給使用者。這樣的機會其實越來越多,智慧型手機的應用程式,還有Adobe AIR,現在有越來越多的平台去達成這樣的目標。接下來除了接案以外,我會先把時間投注在Android開發上面。等累積一點資金,也會開始玩iPhone。AIR最近越來越活絡,所以可能也是個投資的方向。

就是這個樣子啦~~明天開始就要過著不知道下一筆收入會在哪裡的日子了~~

2010年8月12日 星期四

在Facebook粉絲專頁的Tab上使用FBJS抓取使用者uid,以及一些基本操作

之前寫了一篇使用Facebook Application在粉絲專頁上面加開一個頁籤tab,大概說明了如果要在粉絲專頁做一些進階的操作,可能需要建立一個App.來新增這個Tab。這一篇要接著再來講一些應用,介紹一些粉絲專頁常用的參數、FBJS、FBML,最後想要抓到使用者的uid,因為如果想要知道哪個user在粉絲專頁上做了甚麼,那最基本的就是要抓到uid。

2010年7月31日 星期六

Adobe AIR開發Android Application的流程簡介

發現不常做的步驟,很容易忘記。做個筆記,順便分享一下。

首先,我們要有幾點基礎認知:
1.AIR for Android目前還在Prerelease版階段,還沒有推出正式版。目前每隔一陣子會有新版本,增加一些新的功能。
2.AIR for Android一開始釋出的版本可以在Android 2.1及Android 2.2上面跑,但後面幾次更新就只看到2.2版的Runtime了。
3.AIR for Android的效能比起直接使用JAVA開發仍有一大段差距。將來的版本理論上也只能盡量逼近JAVA的效能而已。
綜合以上幾點,老實說AIR for Android目前也只能拿來玩玩而已,將來即使正式版推出,我想就如Maso在第三屆 PTT Flash 閃光俱樂部分享時一直說的:要使用AIR的話,就應該要去做一些JAVA做不到或不容易做到的事吧。

2010年7月23日 星期五

使用FlashDevelop來幫自定義的Library產生SWC、ASDoc、以及Fat SWC

Flash程式開發一段時間後,相信大家多少都會開發自己常用功能的Library來使用。一開始當然要先產出source code,一堆.as檔案依照package分別放在適合的資料夾裡。慢慢的,我們可能會想把這一堆檔案包裝成一個SWC檔,不但輕巧方便,也比較快速。現在大部分的Libraries都有提供SWC檔。隨著我們自定義的功能與類別越來越多,我們可能會希望產出一份說明文件,一方面提醒自己,另一方面也讓工作夥伴方便了解這些Lib.的功能,如果要公布出來給大家使用,那就更不可或缺啦。最常見的文件格式,就是ASDoc,也就是如ActionScript 3.0 Client Library for Facebook Platform API,或者Adobe自己官方的ActionScript 3.0 Reference for the Adobe Flash Platform,相信這樣的文件大家並不陌生。這些html當然不是人工刻出來的,只要在source code裡面依照一定的規則加上註解,再經由工具就可以產出。不管是SWC或者ASDoc都有一點歷史了,這篇最主要還要介紹新一點的東西--Fat SWC。從Flash Builder 4開始,code hint不再只有參數的型別,而是連同ASDoc裡的說明都會自動跑出來,減少了程式寫到一半還要去查說明文件的機會。FlashDevelop最新的版本也已經支援,不過我們所使用的Libraries的SWC必須是Fat SWC,也就是包了ASDoc產出的一些XML檔案進去的SWC,這樣開發工具才能把註解抓出來顯示在code hint裡。下面就一項一項來說明如何用FlashDevelop來幫我們產出。

2010年7月20日 星期二

Youtube API簡介,AuthSub認證,以及Browser-base Upload

前陣子研究了一下Youtube API,稍微分享一下心得,讓有興趣的人可以比較好上手。由於已經很久沒寫Server端程式了,所以只能大概介紹一下概念。

首先Youtube API共分幾塊:
Widget:
只要在產生Widget的頁面上輸入一些例如網址、關鍵字等資料,就可以產生Widget的程式碼,就可以直接貼到網頁上使用。目前只有Video Bar與Video Search Control兩種。
Custom Player:
也是一樣輸入一些設定值就可以得到自訂撥放器的程式碼,也可貼到網頁上使用。
Player APIs:
可以使用JavaScript或ActionScript來自己撰寫Youtube撥放器。
Data API:
這部分才是重點了。透過Data API,可以經由認證連結user的Youtube帳號,可以取得影片資料,下評論,上傳影片等等。接下來要介紹的主要是這一塊。

接著我們進入到Youtube API的Getting Started頁面。這一頁就是剛剛介紹四大類API的頁面。左邊攔有一長串相關的文章連結,這邊就稍微介紹哪幾篇重要該看。

2010年7月5日 星期一

使用Embed來加速Flash編譯,並結合到Progression 4專案裡

2011/3/7更新

開發Flash網站時,需要不斷的修改-發佈來測試程式碼,而使用Flash IDE來發佈的話,每次Ctrl+Enter按下去就必須把元件與程式碼都一起重新編譯一次。在CS3以前,除了內嵌影片,這樣發佈倒還很快。但到了CS4,甚至到了CS5,這樣反覆的發佈可能會把開發者逼瘋,因為實在太~慢~啦~。為了加快開發的速度,這陣子找了不少資料,分析比較各種的方法,最後決定採用Embed的方式,將編譯好的元件「嵌進」程式碼,然後在FlashDevelop裡面發佈。在研究的過程中發現,其實沒有一個方法是十全十美的,每個方法都有優點及缺點,最後還是要依照自己開發的習慣來做取捨。以下先分析幾個我找到的方法,說明為何採用Embed,最後看看這方法如何結合到前面使用的Progression 4專案裡。

2010年6月27日 星期日

夏日讀書會!換書或送書活動

最近想把家裡的書櫃整理一下,原本想要把一些書丟資源回收的,但想了想,也許有人也有相同的困擾,何不來換一下咧?讓這些書再多發揮一點價值,我多少也可以換幾本書回來看呀。於是花了一點時間把清單整理如下。一些大師、前輩都說訓練創意的一個方法就是多讀點不同方面的書。所以快來換書吧!!

規則說明一下:
1.前兩個禮拜以換書為優先,從6/27到7/11世足冠軍賽踢完。這兩個禮拜期間也可以先跟我提出送書的需求,不過如果世足冠軍賽踢完前有人想跟我換那本書,那還是以換書的為優先囉。
2.換書不限種類,不限書本數量。可以多換少,也可以少換多,開心就好。只要是我沒看過的書,我都會願意交換。
3.通常同一個欄位裡面是一套書,希望是整套交換出去。
4.我會隨時更新「換」或「送」的欄位,已換的就請大家不用再詢問囉。前兩個禮拜即使「送」的欄位已經註記了,還是可以提出「換」的需求,請見第1點。
5.7/12開始送書,當然想換的也還是歡迎,這時候「換」跟「送」就是先提出需求的優先了。
6.書的連結,有些書已經改版過,不過基本上都還是同一個作者同一家出版社的書,如果對版本很在意的,請先跟我確認。套書可能只以第一本書的連結做參考。
7.本活動限認識我,方便約時間地點拿書的人,也歡迎大家列出自己的書單!!

2010年6月22日 星期二

Progression 4 歡樂開發Flash網站 ( 5 ) — 增加導覽列功能

我們進一步研究一下導覽列的功能。通常當我們到了某個單元後,會希望導覽列上這個單元的Button處於Highlight的狀態,且不能夠再度點選。再者,CastButton本身,有一堆滑鼠相關的事件可以用,偏偏少了Click,這當然是因為通常Click的時候只會做Scene的移動,或者跳到其他網頁,這些只要設定sceneId以及href屬性就可以了。但我們有時候會想要在Click的時候做一些其他事情,例如去計算click數等。其他有些時候,我們在場景上可能有一些Button,它的連結跟導覽列上面那些Button是一樣的,我們希望其中一組Mouse Over時,另一組也會有相對的反應。這些都可以藉由CastButton的功能,再加上一些些擴充,就可以輕易辦到。

Progression 4 歡樂開發Flash網站 ( 4 ) — 分割各場景元件庫

如果稍微有點Flash網站開發經驗的開發者,看完上一篇範例後,心裡一定想:這一點都不實用啊~!是的,我們為了快速介紹Progression架構網站,忽略了一個問題:在真正網站製作時,通常會依照單元將元件切成不同的.fla檔案來製作,以免user一開始就必須等到整個網站的檔案都下載完才能開始瀏覽。這篇立刻就來介紹,如何在Progression裡面做到這一點。

2010年6月21日 星期一

Progression 4 歡樂開發Flash網站 ( 3 ) — 簡單範例

接著我們就用個簡單的範例,也就是將上一篇用到的例子,實際架構出來。首先再把架構圖拉出來參考:

2010年6月18日 星期五

Progression 4 歡樂開發Flash網站 ( 2 ) — 基本原理與主要構成

新增了一個專案,一下子產生出好幾個檔案。在動手寫程式之前,我們先試著分析一下Progression運作的基本原理與主要構成。前面提過,Progression主要是用來解決網站架構,以及各場景畫面間的切換。網站架構的部分使用Scene場景來組成一個Scene tree,對應傳統的網站架構,然後在進入每個Scene的時候將這個場景應該上場的Cast演員放到舞台上。各個場景間的切換則是一套定義完整的事件機制,我們只要下切換場景的命令,事件就會依序發生,那麼在每個相對應的事件發生時去處理進退場,以及Cast的上下場,那麼整個網站就自然的運作起來。另外,為了方便讓每件事情依序進行,Progression裡面有一套Command命令,把每件要做的事情用Command的方式來指派,然後依照想要執行的順序加到適合的CommandList,然後一次執行,就可以解決很多錯綜複雜的狀況。而這背後,則是由一個manager(Progression)在掌控。以下就針對每個部分來加以說明。

2010年6月17日 星期四

Progression 4 歡樂開發Flash網站 ( 1 ) — 新增專案

2011/3/7 修改

接著這一篇就來探討怎樣新增一個Progression專案。

依照開發的方式以及專案的目的,可以分為三種Style(種類),以及五種環境設定。三種Style分別為:
1.Component:使用組件方式構成,適合設計師不用寫程式,純用組件的面板設定來架構網站。
2.Timeline:配合時間軸上的程式來建構網站,適合剛從AS 2過渡到AS 3的設計師與開發者。
3.Class:用Class來建構網站,適合開發者使用。
五種開發環境分為:
1.Web Content:網頁使用,幾乎所有功能都可以使用。
2.Slide Content:投影片模示,強化支援方向鍵等切換投影片的功能。
3.Basic Application:一般的應用程式,大概只比Web少了SWFAddress同步的功能。
4.Lite Application:檔案需要壓得較小的應用程式,例如banner或blog parts。但國內目前應該還不能用AS 3來做banner。
5.AIR Application:當發布的Player選擇AIR 2.0時使用。
以下要討論的,是使用Class Style,然後發布成Web Content的專案類型。

Progression 4 歡樂開發Flash網站 ( 0 ) — 開發前準備

2011/3/7 更新

Progression是一套很好用的Framework,主要的目的在於解決Flash網站或App.最基本的架構問題,例如:HTML頁面概念與Flash場景快速的對應與轉換,頁面與場景間的進退場切換,命令流程排定等,都可以做很有效率的規劃。將這些基本問題做有效的分析與管理,讓開發者可以專注在更有趣的功能上面。開發者與設計師也很容易訂出一些元件製作的基本規則,減少溝通的成本。而開發者除了每次都可以用同樣的流程快速建立起專案以外,多個開發者之間也可以輕易的做分工,也很容易接手另一個開發者的專案。這篇就先來做點開發前的準備。

2010年5月18日 星期二

使用Facebook Application在粉絲專頁上面加開一個頁籤tab

Facebook粉絲頁的操作在網路行銷越來越蓬勃,需求也越來越多。目前除了塗鴉牆上發布的訊息,辦一些投票,最大的應用就在新增頁籤上面,去增加粉絲專頁的內容。這塊的應用跟開個App.做個遊戲來比,可以說又是另一片天地。國內也看到幾個做了很特別操作的粉絲頁,例如BurgerKing 漢堡王火烤美味分享團7-ELEVEN,如果再不認真研究一下,恐怕又要被追殺了。

2010年5月10日 星期一

試玩Android


從今年年初,就一直很想要玩玩智慧型手機上的App.。在台灣,大家比較熟知的當然是iPhone啦,可是,要開發iPhone的App.,要先有支iPhone不說,還得要有個Intel CPU,Mac OS X 10.5版以上的Apple電腦才行。算一算這開發門檻還真是高。於是我把目標轉向Google的Android上。這就簡單多了,只要有一般的PC,去下載它的SDK,開發環境(軟體)也是使用免費的Eclipse,程式語言使用JAVA,會寫AS3或C#其實很好上手。有錢就買個Android手機,沒錢就先用它的虛擬機器來模擬。可惜的是,台灣目前還沒辦法上架或下載付費的App.,所以想靠它賺錢的,可能要先找個美國朋友啦。

2010年4月1日 星期四

Flash在wmode設定為transparent時中文輸入發生問題的解法=SwfText Beta版

首先聲明,這篇文章不是為了愚人節做效果的,所以請安心看下去。

當Flash的wmode設定為transparent時,在IE瀏覽時輸入中文,會發生輸入法造成Flash暫時位移的情形;在Firefox時更慘,中文字根本出不來。這個問題存在好幾年了,聽說Flash Player 10.1終於修正了這個問題。可是,就算過一陣子之後Flash Player 10.1的安裝率到了99.9%,最後那0.1%很可能包含你某個客戶,過不了客戶那一關,案子當然也沒辦法上線。所以可能的話,我還是想找個辦法來解決它。

2010年3月2日 星期二

自己新增facebook-actionscript-api類別來使用dashboard的相關功能

有用Flash開發Facebook app.的人應該對facebook-actionscript-api這個library又愛又恨。使用它加上一些javascript就可以開發Flash版的Facebook app.,可是它的說明文件內容相當缺乏,而且很久沒更新了。其實這個library一直有在更新,目前出到v3.4版,一些新的功能都有陸續放進去。上次隨意點開它的as檔案來瀏覽,發現了com.facebook.commands.stream這個package,裡面的PublishPost類別,就是對應PHP api的stream.publish方法。於是想說,應該可以依樣畫葫蘆來新增command。這樣在facebook-actionscript-api還沒更新前就可以自己新增一些PHP api有的新功能,例如前一陣子才新增的dashboard。實際測試之後發現可行,正好notification通知的功能,app.也不能再使用了,就趕緊來試用一下dashboard怎麼玩。這篇就同時介紹如何自己幫facebook-actionscript-api增加新的功能,以及dashboard這個功能大概是怎麼運作的。

2010年2月25日 星期四

使用Static FBML增加Facebook粉絲專頁/應用程式專頁的頁籤

在幫客戶操作Facebook粉絲專頁的時候常常會遇到一個需求:增加一個頁籤。最簡單的做法,就是使用Static FBML。底下就來個Step by step的操作說明。

2010年1月14日 星期四

7分14秒瀏覽PLURK API功能

前一篇大致介紹了如何用Flash去玩Plurk API,然後做了一個簡單的Demo,這篇試著用中文把Plurk API裡的功能講出來,給創意以及企畫作參考。首先,請自行熟悉一下Plurk介面以及功能,我懶的抓一堆圖說明啦~

用Flash玩Plurk API


去年12月初,Plurk終於開放了官方的API,看了一下上面的簡介,只要能發送HTTP requests的語言就可以呼叫它,回傳的是JSON encoded data,這些Flash都可以處理。不過因為跨網域的問題,一開始Flash並不能單獨跟它溝通,唯一可行的是透過php或其他程式當中介。幸好最近Plurk已經把crossdomain.xml放上去了,這樣一來,Flash也能直接呼叫Plurk API了。既然這樣,就趁著空檔測試一下吧!但才玩了一兩天,就發現了一個大問題:登入的方式也太簡單了吧!?讓使用者在第三方網站輸入帳號密碼就可以登入,那麼我寫一個網路活動,讓使用者來登入Plurk帳號密碼,然後偷偷把這些使用者的帳號密碼塞進資料庫,之後不就可以任意使用這些人的Plurk帳號了嗎?仔細想想,好像還沒遇過哪種服務是以這麼簡單的方式來登入。Facebook靠一堆繁複的Session來驗證,Yahoo或Windows Live ID都是經過他們特定的網頁來登入,Flickr也要在他們網站上允許上傳程式連結後才可以上傳照片。是我漏掉甚麼了嗎!?拿著Plurk的帳號密碼到一台新的電腦確實就可以登入了呀~~這漏洞也太大了吧!所以請容我在第一段就大膽的直接下結論:目前Plurk API不適合拿來做網路活動!這篇文章直接結束,我可以躲進被窩裡面睡覺了嗎?當然不是這麼簡單~~這個API也才推出一個多月,也許隨時會有甚麼修正也不一定,況且也不一定只有登入使用者的Plurk帳號才能玩,拿個公用帳號來玩或許也可行啊。所以還是先來了解一下Plurk API能做啥吧。