tag:blogger.com,1999:blog-35345346901540250212024-03-04T23:09:36.723-08:00i am Jason提醒自己的漸忘Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.comBlogger39125tag:blogger.com,1999:blog-3534534690154025021.post-18715204322760441882012-06-26T20:39:00.000-07:002012-06-26T20:52:23.216-07:00[新案上線] TOYOTA 86Toyota 86 (強列建議使用Chrome或Safari觀看…。)<br />
<a href="http://www.toyota.com.tw/cars/86">http://www.toyota.com.tw/cars/86</a><br />
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.toyota.com.tw/cars/86" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbLCcb6TqiJVHHAO9L-IGBy_gOkP2mVdC9JGsPqg9f_48Z8LdfhyphenhyphenS4tJthgYQSsCcYXTKb9MtVed2L9ZkPIRvOFSjkt3S3dXPGolki6YyFCOUgs1nfBPeB1pRbbTkyCGwsel6TelCc6q8/s320/t86.jpg" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span lang="EN-US"> 第一次完整獨立完成一個純js的商業案。<br />最近為了這個案子傷了不少腦袋。<br />這是一個html的網站,目標是要能在所有的裝置及瀏覽器上觀看,所以flash馬上被排除,但是又希望能做到像flash一樣精彩的效果,乍看之下其實沒什麼,就是播播影片而已嘛。<br />剛開始我參與會議時心裡也是這麼想的,應該沒什麼。<br /><br />不過真正執行後就開始遇到一些問題了。<br /><br />首先是影片的問題,整個網站的幾個主要大單元是由影片串場的,因為原本的需求是希望隨時能在影片中的某一個場景停下來(甚至是倒播),又希望整個串場個過程能夠順暢,因此評估之後我們採用了大量的連續圖檔來處理這一塊。<br />為了要讓影片播放順利,所以需要預先載入一定量的圖檔,這跟影片的buffer是一樣的道理,只不過在載入的過程中我發現電腦的記憶體使用量大量的爆增,直到整台電腦的記憶體都被吃光之後,載入的動作就會發生錯誤,這時即使再釋放記憶體,再重新載入新的圖片也會失敗,原因不明。<br />所以要在何時適放部份的記憶以及何時開始播放影片、何時載入新的圖檔,變成了這個案子最花工的地方…。<br />不過也因為這樣無意中發現了Chrome及Safari在記憶體的配置處理上真的比FF及IE厲害許多。</span><br />
<span lang="EN-US">但礙於實在有太多圖檔無法適放,因此在部份電腦的FF及IE下,還是會發生記憶體不足的情況,因此只能說這仍然是個不完整的案子…。<br /><br />另外一個問題就是手持裝置的效能問題。<br /><br />原本我的寫法是用兩個div去輪流播放當下該出現的圖片,為什麼要用兩個?其中一個要墊在下面,先放入下一張圖,這樣才不會造成閃爍,這個概念好像叫做double buffer。<br />不過這樣的話,吃cpu似乎吃得還挺重的,在手機上(我個人是使用HTC Sensation)整個畫面跑起來非常吃力,一點都不流暢。<br />所以後來就在上線前我馬上改寫成canvas,但為了讓IE系列仍然能正常觀看,所以IE仍然是使用div來播放。<br />我想現階段這方面的效能也只能這樣調整了,至少部份的手機上跑起來雖沒有很快速但也可以接受。<br /><br />再來就是音效的問題。<br /><br />音效原本我是使用HTML5的Audio來處理,但是FF不吃mp3,只吃wav,這下子不得了,光背景音樂wav就要5mb,所以最後折衷,唯獨音效的部份使用了flash,放棄了行動裝置上的聲音效果。<br /><br />開發心得大概是這樣,其它很多是比較細節的(解析度的調整、js的物件技巧、從外部load單元進來呈現… 等等)就不再額外提了。<br />但是真的是從這案子吸收到不少經驗。</span>
</div>
<div class="MsoNormal">
</div><div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com1tag:blogger.com,1999:blog-3534534690154025021.post-7798248536902686082012-05-08T21:40:00.001-07:002012-05-08T21:42:34.110-07:00IE下Facebook JS SDK getLoginStatus無法取得登入狀態<br />
這又是一篇<b>不走正途的解法</b>…大概寫一下就好。<br />
<br />
之前在執行專案時發現,在一部份的IE裡(有些ok,有些不ok),即使使用者已經授權且登入的狀態下,Facebook JS SDK的getLoginStatus仍然一直無法取得登入資訊,所以導致這些IE的使用者完全無法使用Facebook JS SDK。<br />
<br />
搞了很久,一直沒辦法解決這個問題。<br />
後來火了,想說反正所有的api都是透過access_token做認證的,只要我能取得access_token的話,就應該能夠繼續使用api。<br />
<br />
要取得access_token的方式很簡單,用導向的方式處理就可以了,文件說明在這:<a href="https://developers.facebook.com/docs/authentication/client-side/">https://developers.facebook.com/docs/authentication/client-side/</a><br />
在<b>Client-side authentication without the JS SDK</b>的部份,很簡單。<br />
因此我在頁面上加入判斷,針對這些不ok的IE,我先將他們導向到<br />
https://www.facebook.com/dialog/oauth?client_id="+<b>YOUR_APP_ID</b>+"&redirect_uri="+<b>YOUR_REDIRECT_URI</b>+"&scope="+<b>COMMA_SEPARATED_LIST_OF_PERMISSION_NAMES</b>+"&response_type=token<br />
其中的參數:<br />
YOUR_APP_ID = api id<br />
YOUR_REDIRECT_URI = 使用者授權後要導回來的url,通常就是原本的網站本身<br />
COMMA_SEPARATED_LIST_OF_PERMISSION_NAMES = 要取得的授權<br />
<br />
導回來後,access_token就會跟在網址後面一起回來了,格式會是像這樣:<br />
http://xxx/#access_token=<b>USER_ACCESS_TOKEN</b>&expires_in=NUMBER_OF_SECONDS_UNTIL_TOKEN_EXPIRES<br />
於是access_token就取得了。<br />
<br />
接下來要面臨的問題就是,access_token我們是取得了,但是Facebook JS SDK仍然無法work,因為它還是不知道access_token,所以我們要做的事情就是把access_token塞給Facebook JS SDK,強迫它使用這一組access_token。<br />
Facebook JS SDK在使用者登入後會把一些資訊存在<b>FB._authResponse</b>這一個物件裡,包括access_token,如果使用者還沒登入的情況下<b>FB._authResponse</b>會是一個null值,但沒關係,我們可以自動幫它new出來,然後再把access_token塞進去。<br />
if (!FB._authResponse) FB._authResponse = {};<br />
FB._authResponse.accessToken = 我們自己取得的access_token;<br />
<br />
這樣一來就可以直接使用原本的Facebook JS SDK了。<br />
測試過後是沒問題的,甚至我把其它人的access_token塞進去也可以跑出正確的資料出來,因此可以很肯定Facebook JS SDK的確是依靠FB._authResponse這個物件來判斷當下的使用者身份。<br />
<br />
希望這一篇會幫助到同樣受IE所苦的開發者們。<br />
<br /><div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com2tag:blogger.com,1999:blog-3534534690154025021.post-66220537957104684792012-02-23T01:23:00.000-08:002012-02-23T01:25:05.143-08:00既然Flash版GoogleMap不再發新的key…<br />
總覺得自己老是在走偏門…=_=。<br />
<br />
自從GoogleMap Flash版停止再發送key值之後,GoogleMap的Flash版本等於正式走入歷史,也因此我們要在flash裡使用GoogleMap的話會變得很頭大。<br />
雖然說以後全flash的網站「理論上」會越來越少,應該都會是flash搭配html一起邁向美好的未來,但是有時難免客戶(或設計師)為了整體視覺著想(或其它因素),一定要在flash使用GoogleMap的話,那就是我們要苦往肚子裡吞的時候了。<br />
這兩天研究了一下,想說看有沒有辦法弄一個簡單的GoogleMap到flash裡,結果似乎是可行的。<br />
說穿了,原理其實就是計算經緯度,然後跟Google「偷偷」的拿取該經緯度下的圖片,再呈現在flash裡而已。<br />
<br />
<b>GoogleMap的圖片區塊</b><br />
可以先參考一下這一篇:<br />
<a href="http://code.google.com/intl/zh-TW/apis/maps/documentation/javascript/v2/overlays.html#Google_Maps_Coordinates" target="_blank">http://code.google.com/intl/zh-TW/apis/maps/documentation/javascript/v2/overlays.html#Google_Maps_Coordinates</a><br />
要取得圖片的網址很簡單,瞄一下httpWatch的話就會知道,格式類似這樣:<br />
http://mt0.googleapis.com/vt?lyrs=m@170000000&src=apiv3&hl=zh-TW&x=1&y=1&z=15&s=G&style=api|smartmaps<br />
Google把地圖切分成很多區塊,每一個區塊(Tile)的圖片大小是256X256,在不同級數之下會有不同數量區塊,數量的增加是以2的次方在增加的。<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIyIa-zP7VudsLTJBvY9O24gDOp6nVUZTr0Bf1pqKlcrxj04aqz25K7GYR9S-vt2RnwzFTTHeUfFbs-YbYO-BcO7bxJmhz74kuc-mi-IXxBYtQNj5Tthh6JAWvHMYNvATB-xlrfpsHOTg/s1600/tileCoordinates.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIyIa-zP7VudsLTJBvY9O24gDOp6nVUZTr0Bf1pqKlcrxj04aqz25K7GYR9S-vt2RnwzFTTHeUfFbs-YbYO-BcO7bxJmhz74kuc-mi-IXxBYtQNj5Tthh6JAWvHMYNvATB-xlrfpsHOTg/s1600/tileCoordinates.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
也就是說,在縮放等級(zoom)是0的情況之下,世界地圖只有2的0次方=1張的圖片,zoom=2的時候,x軸及y軸各有2的2次方=4張圖,一共16張圖。<br />
有了這個概念的時候,我們就可以依照zoom的大小,配上實際經緯度投射到平面座標上的點,來找出目前該經緯度所對應到的圖片,然後再從Google那邊把圖抓回來就對了,剛剛上面的圖片網址裡,x及y就是代表該區塊的index值,z則是縮放值。<br />
<br />
<b>經緯度的投射座標</b><br />
既然已經知道地圖被切成多少區塊,就很方便取得了,但麻煩的在於經緯度。<br />
GoogleMap使用的是「麥卡托投影法」來計算經緯度,請參考wiki:<br />
<a href="http://zh.wikipedia.org/wiki/%E9%BA%A5%E5%8D%A1%E6%89%98%E6%8A%95%E5%BD%B1" target="_blank">http://zh.wikipedia.org/wiki/%E9%BA%A5%E5%8D%A1%E6%89%98%E6%8A%95%E5%BD%B1</a><br />
這種投影法將地球投影成圓柱狀體,也因此,經度的部份是從最左邊的-180到最右邊的180度,平均均分地圖上的所有x軸距離。<br />
於是我們可以很簡單的計算出某一個經度應該對應到實際像素裡的哪一個x值,因為經度是平均切割整個世界地圖的,所以純粹只是比例的換算而已。<br />
麻煩的在於緯度。<br />
緯度並不是平均切割地球的從南到北,越靠近極點,形變就越大。<br />
感謝wiki,我們不用自己去導出投影的公式,wiki已經幫我們列出來了:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxrmHEVpCuvUnly2P1_bdzLp-V4yYXxpbm5WCrFrekm8Rurf8znLugq_vexgk-l7HPkGCl9tI4gP2ezOMRhlAQVcprfhlY3qP3-Vh3xs5QzhvpiaFbMm3e4rStJUeuzWQuJpOQ_QoZqX8/s1600/functions.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxrmHEVpCuvUnly2P1_bdzLp-V4yYXxpbm5WCrFrekm8Rurf8znLugq_vexgk-l7HPkGCl9tI4gP2ezOMRhlAQVcprfhlY3qP3-Vh3xs5QzhvpiaFbMm3e4rStJUeuzWQuJpOQ_QoZqX8/s320/functions.jpg" width="221" /></a></div>
<br />
上半部是由經緯度計算出x及y的值,下半部是由x跟y的值反算出經緯度,由於我們要將經緯度用在GoogleMap圖片的像素值上,因此我們只要再加上一些參數做修正其實就可以了。<br />
<br />
<b>結果</b><br />
我花了一點時間實作了一下,結果在這邊:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://labs.medialand.com.tw/jason/flash/googlemap/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="252" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnmAzE6TgoaiXA3tz647BHZJTDKCP6ylRDQLeUYKm8MWSnTFb46hfclxMPqgcVw5BxcddiSmC8IJbQIXeJ2THPRS67ZujFTF910LtrH0smnokmvJO4uygs9I1V6VfT8X6rji8zQ03Iouw/s320/maps.jpg" width="320" /></a></div>
<br />
<a href="http://labs.medialand.com.tw/jason/flash/googlemap/" target="_blank">http://labs.medialand.com.tw/jason/flash/googlemap/</a><br />
<a href="http://labs.medialand.com.tw/jason/flash/googlemap/gmap_flash.rar" target="_blank">原始檔下載</a><br />
輸入經緯度及放大級數,這flash就會把周邊的地圖載入進來。<br />
其它的,例如:拖動地圖…等等的,我就沒時間再寫了,反正都已經能正確取得圖片及計算出座標值,其它的就是另外一種工作了。<br />
比較需要注意的是<br />
1.<span class="Apple-tab-span" style="white-space: pre;"> </span>這只是簡單的地圖,畢竟不能跟完整個GoogleMap相比(當然你要寫得超屌也可以)<br />
2.<span class="Apple-tab-span" style="white-space: pre;"> </span>經過測試,無法去draw載進來的地圖,crossdomain的關係。<br />
3.<span class="Apple-tab-span" style="white-space: pre;"> </span>一樣是crossdomain的關係,其它的GoogleMap api,像是地址反查這種功能,在web的flash裡也無法直接去做query,可能還是得透過js去做中繼。<br />
4.<span class="Apple-tab-span" style="white-space: pre;"> </span>這是旁門左道,非必要的話還是請愛用GoogleMap v3。<br />
<br />
<br /><div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com0tag:blogger.com,1999:blog-3534534690154025021.post-16529997595302231532012-02-16T01:38:00.000-08:002012-02-16T01:38:09.072-08:00JS+CSS練習 - 米蘭數位官網HTML版本<br />
持續的玩CSS及JS中。<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://labs.medialand.com.tw/jason/html/ml/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="214" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvBdK7caLoIxVcxVcK4pdOe4Z1ZzxE5OlBS9l9pBPStLH3NVpej_oJqYydziK0imoIUMXH09v0q67Ubm8LkkChNI7zEQXjw_CNOUW3Quzxwr4pWByK2C2y6fFJTOIH3yIJnaDjDI26Jpc/s320/ml.jpg" width="320" /></a></div>
<br />
<br />
因此拿了米蘭的官網來練習。<br />
米蘭官網連結在這ㄦ - <a href="http://medialand.com.tw/home.htm" target="_blank">http://medialand.com.tw/home.htm</a><br />
練習結果在這ㄦ - <a href="http://labs.medialand.com.tw/jason/html/ml/" target="_blank">http://labs.medialand.com.tw/jason/html/ml/</a><br />
<br />
比官網少了一些單元,因為跟資料庫要資料的部份我(目前)懶得去寫…。<br />
一開始我傻傻的,想說在畫面上轉來轉去的那些球,「搞不好」可以直接用dom來跑就好,畢竟只是scale的縮放,沒有複雜的變形,只要把透視給算好就ok了。<br />
於是就試寫了第一版,下場就是效能十分之慘。<br />
苗頭不對之下,只好乖乖的用canvas來處理這些轉圈圈,效能果然好很多了。但由於老IE不支援canvas,所以我仍然保留原本的dom版本,只要判斷瀏覽器不支援canvas,就會把dom拿出來跑…。<br />
<br />
練習的作品我是盡量把它寫得很像原本flash版本的效果,我也是用像寫AS的概念一樣去安排配置畫面上的東西,但只能盡量,多少還是有一點點的差異,不過畢竟是練習作,練習中學到的經驗比較重要。<br />
主要的一些(奇怪的)心得就是:<br />
1.<span class="Apple-tab-span" style="white-space: pre;"> </span>把div當成DisplayContainer來用XD…。<br />
2.<span class="Apple-tab-span" style="white-space: pre;"> </span>空白的div可以拿來當按鈕感應區…。<br />
3.<span class="Apple-tab-span" style="white-space: pre;"> </span>還沒找到很好用的tween(好啦,我自己也沒很用心的去找),現在只能自己用setInterval去跑,或是簡單的就交由JQuery的animate去跑。<br />
4.<span class="Apple-tab-span" style="white-space: pre;"> </span>Canvas要判斷滑鼠是否over到某顆球上的這件事,小麻煩啊…,尤其是兩顆球如果疊在一起就更討厭了,現在只是球狀還好,之後如果寫到複雜圖案的時候,就會又點傷腦。<br />
5.<span class="Apple-tab-span" style="white-space: pre;"> </span>除了canvas以外,其它的東西其實一熟練的話處理起來還算快,反正遇到困難的結構就是二話不說多加幾個div來當DisplayContainer!!(但我先說,這可能不是很正統的做法XD)<br />
<div>
<br /></div><div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com3tag:blogger.com,1999:blog-3534534690154025021.post-42786548202352371332012-01-16T19:13:00.000-08:002012-01-16T19:14:50.416-08:00Javascript用prototype進行繼承會發生的奇怪現象<br />
<div class="MsoNormal">
這問題真的很奇怪,而且很難理解。<br />
測試網址如下(code很簡短,可直接看原始碼):<br />
<a href="http://labs.medialand.com.tw/jason/html/inheritance/test1.html" target="_blank">http://labs.medialand.com.tw/jason/html/inheritance/test1.html</a><br />
<br />
狀況是,<br />
1.<span class="Apple-tab-span" style="white-space: pre;"> </span>建立一個Test的類別,在建構子時宣告並初始化一個陣列testValue。<br />
2.<span class="Apple-tab-span" style="white-space: pre;"> </span>在Test類別建立一個function addValue,用來將傳入的值push到testValue裡。<br />
3.<span class="Apple-tab-span" style="white-space: pre;"> </span>在Test類別建立一個function destroy,用來將testValue清空。<br />
4.<span class="Apple-tab-span" style="white-space: pre;"> </span>建立一個AA類別繼承Test類別。<br />
5.<span class="Apple-tab-span" style="white-space: pre;"> </span>實體化一個AA類別,變數名稱a1,呼叫a1.addValue(123)將123這個值push到a1.testValue裡。<br />
6.<span class="Apple-tab-span" style="white-space: pre;"> </span>呼叫a1.destroy()來清空a1.testValue。<br />
7.<span class="Apple-tab-span" style="white-space: pre;"> </span>目前看起來都正常,怪的來了。<br />
8.<span class="Apple-tab-span" style="white-space: pre;"> </span>實體化另外一個AA類別,變數名稱a2。<br />
9.<span class="Apple-tab-span" style="white-space: pre;"> </span>直接取得a2.testValue,居然不是空值,而是123!!!<br />
照道理說,testValue裡有123這個值,不管怎樣也是屬於a1這個instance的,不應該會出現在新new出來的instance裡。更何況在a1的時候已經執行過一次destroy來清掉testValue了。<br />
無法理解。<br />
這種情況目前測試,只發生在testValue非一般常數型態的變數上,數字跟字串不會發生這種情況,在array或object上就會發生這種異常的狀況。<br />
<br />
解決方法應該有很多,目前我覺得我自己最喜歡的方式,就是在AA類別的建構子裡再一次強制呼叫父類別Test的建構子,就像AS3裡的super();一樣。<br />
再測過一次後這個問題就會被解決。<br />
修正過後的測試網址如下(差別只在於AA的建構子裡多了一行):<br />
<a href="http://labs.medialand.com.tw/jason/html/inheritance/test2.html" target="_blank">http://labs.medialand.com.tw/jason/html/inheritance/test2.html</a><br />
<br />
<br /></div><div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com2tag:blogger.com,1999:blog-3534534690154025021.post-89847561414264491152011-12-07T00:04:00.001-08:002011-12-07T00:06:42.108-08:00用CSS取消上層dom物件的滑鼠感應<br />
因為之前寫ZooKeeper的關係,其實有一個地方有點困擾,就是html的dom沒有辦法像flash的movieclip一樣改變滑鼠感應區,所以導致z-index在較高的dom會擋到下方的dom讓它無法被點擊到。<br />
這兩天想到了這個問題又繼續在google上找解法。<br />
<br />
找來找去好像並沒有找到太有用的解,倒是找到了一個CSS語法可以將整個dom的滑鼠感應區取消掉。<br />
<span class="Apple-style-span" style="background-color: white;"><b><span class="Apple-style-span" style="color: #e06666; font-size: large;">pointer-events:none;</span></b></span><br />
把這一行加到要被取消的dom元件裡的CSS就好了。<br />
這個東西好像是SVG的東東,所以目前只有FF/Chrome/Safari有支援,IE很杯具的7/8/9都不適用。所以並不是很好的解,但目前為只大概也只能先這樣(攤手)。<br />
<div>
<br /></div><div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com1tag:blogger.com,1999:blog-3534534690154025021.post-91629955887287271142011-11-29T02:31:00.001-08:002011-11-29T02:40:59.832-08:00CSS+JQuery練習ZooKeeper(寶石方塊)<br />
好久沒動這個Blog了,草都長得跟人一樣高了。
<br />
<br />
最近在玩CSS跟JQuery,玩一玩覺得挺有趣的,JQuery果然十分的強大,用JQuery來寫js真的可以省下很多事。CSS的position有時雖然有點惱人,但是把它當成一整個display container的話,其實也沒有想像中的麻煩,加上JQuery的話甚至可以把它當成flash來寫…。
<br />
<br />
所以就給自己一個練習,寫了一個ZooKeeper(我習慣叫這種遊戲叫「寶石方塊」XD,圖案是直接拿ZooKeeper來用),沒有加入GameOver及分數的判斷,因為那純粹只是邏輯,跟練習CSS+JQuery無關。效能上也沒有tune過,就是用陣列一直掃就對了。
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://labs.medialand.com.tw/jason/html/jem/" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEywsdYmhBXZQRvfZOyTPep3VbT0cAGU7DJa1UodwmcoCo0XqB5So_GaISIXTlH3rzoV7EbCIM23nWUNChr5temMnRIOH04yCAzH6glHrsr3tAfjSDYGxVpiEgkXtZuG02-N8XwAGSIJw/s1600/zookeeper.jpg" /></a></div>
<br />
有興趣的可以點過去玩玩,Code都在原始碼裡
<br />
<a href="http://labs.medialand.com.tw/jason/html/jem/" target="_blank">CSS+JQuery練習ZooKeeper</a><div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com3tag:blogger.com,1999:blog-3534534690154025021.post-33514477476012173792011-05-17T00:29:00.000-07:002011-05-17T00:29:32.627-07:00A*尋路法 (AS3)前一陣子想寫個遊戲來玩,所以難免一定會遇到在地圖上的人物怎麼找路走的問題,所以看了一下A*。<br />
參考資料是這一篇:<br />
<a href="http://www.lihuasoft.net/article/show.php?id=3523">http://www.lihuasoft.net/article/show.php?id=3523</a><br />
原文是:<br />
<a href="http://www.policyalmanac.org/games/aStarTutorial.htm">http://www.policyalmanac.org/games/aStarTutorial.htm</a><br />
<br />
其實在上面的文章裡面已經把這個演算法說明得很清楚了,所以似乎不太需要再多做說明。<br />
基本上的原則就是:<br />
<b>1.<span class="Apple-tab-span" style="white-space: pre;"> </span>每次抓取一個點,計算該點附近接鄰點的F值,這個F值是G(移動到該點要花費的移動點數)+H(該點到終點的垂直距離+水平距離總合)。</b><br />
<b>2.<span class="Apple-tab-span" style="white-space: pre;"> </span>將被計算的點放到一個open list陣列裡,並將那些點的父節點指向到目前的節點,然後將目前的節點放到close list裡(表示已經走過並計算完成)。</b><br />
<b>3.<span class="Apple-tab-span" style="white-space: pre;"> </span>從所有的open list裡抓取F值最小的一個節點出來,重覆1~2步驟,直到計算到終點為止。</b><br />
<b>4.<span class="Apple-tab-span" style="white-space: pre;"> </span>取得終點的父節點,再取得父節點的父節點(依此類推),這些被取出的父節點list就是路徑。</b><br />
<br />
我寫了一個AS3的版本,如下(點圖開啟swf):<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://labs.medialand.com.tw/jason/flash/astar/astar.swf" target="_blank"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcImGQzPSpUE5utE46vRLRopwJFO13f2mrRGtoR-TuCYQvldRx3M7eZbKR40s7IsThHMUuepNKDKM398NDloCKztuCfeqMdAJjYeD-Dr4Hcp1dV5JptHUCuMeFYr7nmI9MqOE9QcKljRg/s320/astar.jpg" width="320" /></a></div>黑色框框是不可經過的點,點選空白的方框可以設定起始點,再點選另一個方框後就是設定終點,勾選DebugMode之後,一次按一下NextStep來觀看每次尋找路徑的計算過程。點New Map會隨機產生新地圖。<br />
原始檔可在此下載:<a href="http://labs.medialand.com.tw/jason/flash/astar.rar">下載</a><br />
<br />
心得:其實這版的A*似乎是很簡易版的,尋找出來的路徑有時在人類的眼中看起來似乎有點怪異(ex:會繞路),但是基本上對於簡易遊戲來說應該已經很足夠。如果需要更符合自己遊戲的話可以依這個演算法的邏輯去加一些判斷或變數。<div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com0tag:blogger.com,1999:blog-3534534690154025021.post-41799190708480485552011-05-11T19:58:00.000-07:002011-05-13T13:35:14.434-07:00FB.Event.subscribe事件沒有被觸發有時(通常是IE),會發生FB.Event.subscribe裡面的事件沒有被觸發的情況。找了一下資料,原來後來Facebook在document裡有多了一個Custom Channel URL。 <br />
<a href="http://developers.facebook.com/docs/reference/javascript/FB.init/">http://developers.facebook.com/docs/reference/javascript/FB.init/</a></p><p>只要在原本的網站上多放一個叫做channel.html的檔案,裡面就只放一行code: <br />
<script src="http://connect.facebook.net/en_US/all.js"></script></p><p>然後在init的時候指定channelUrl到這個檔案: <br />
FB.init({<br />
appId : 'APP ID',<br />
channelUrl : 'http://xxx.com/channel.html' // custom channel<br />
});</p><br />
就解決了。(至少我的電腦上測試是解決了)</p><div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com8tag:blogger.com,1999:blog-3534534690154025021.post-45813814047691748632011-01-26T02:01:00.000-08:002011-01-26T02:06:29.183-08:00Google Image Search自己弄api<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvTj7pORNKS5kapsvm0YjHbQVEvDC-g2THnBowz3bWmcirl05TZM2TMwEsYGO5SMvxRG7LUwkaN75XCanB76Ewaiabkw883WBWxQvw-EyeZrYTlguK2y42sH6mxfzx_n8Qt32Lb6A3-ew/s1600/googleimagesearch.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="257" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvTj7pORNKS5kapsvm0YjHbQVEvDC-g2THnBowz3bWmcirl05TZM2TMwEsYGO5SMvxRG7LUwkaN75XCanB76Ewaiabkw883WBWxQvw-EyeZrYTlguK2y42sH6mxfzx_n8Qt32Lb6A3-ew/s320/googleimagesearch.jpg" width="320" /></a></div><br />
最近常被企劃問到可不可以直接在活動網站上直接Google圖片,然後拿那些圖片來玩耍。<br />
我想應該就是前一陣子一個日本網站害的,所以搔搔頭說聲我不確定我study一下,就上google code上面去翻。結果當然是沒有提供這個服務。<br />
所以我想了一下,這功能大概又是要土法練鋼了…。<br />
<br />
<a name='more'></a><br />
基本上原則就是直接去解析Google圖片搜尋頁的結果頁。<br />
如果我們搜尋的關鍵字是「這是什麼鬼」,那Google搜尋頁的實際網址會是:<br />
<a href="http://www.google.com.tw/images?hl=zh-TW&source=imghp&biw=1440&bih=787&q=%E9%80%99%E6%98%AF%E4%BB%80%E9%BA%BC%E9%AC%BC&gbv=2&aq=f&aqi=&aql=&oq="><b>http://www.google.com.tw/images?hl=zh-TW&source=imghp&biw=1440&bih=787&q=這是什麼鬼&gbv=2&aq=f&aqi=&aql=&oq=</b></a><br />
<br />
其中hl很明顯是語系,q也很明顯就是關鍵字。語系可有可無,其它變數仍未明也就不管它,所以直接把上面那個網址簡化成這樣試試:<br />
<a href="http://www.google.com.tw/images?q=%E9%80%99%E6%98%AF%E4%BB%80%E9%BA%BC%E9%AC%BC"><b>http://www.google.com.tw/images?q=這是什麼鬼</b></a><br />
<br />
跑出來的結果差不多,那就先醬吧,其它的變數有空再研究。<br />
<br />
<br />
接下來就是分析頁面的原始頁面了。<br />
Google所搜尋出來的圖,都是以以下這種格式的方式存在於html裡的:<br />
<b><a href=/imgres?imgurl=aaaa><img src=bbbb width=ccc height=ddd style="border:1px solid #ccc;padding:1px"></b><br />
其中imgurl應該是此圖的原始位置,後面bbb的src則應該是Google快取下來的位置,ccc及ddd則顧名思義是寬高囉。<br />
通常imgurl這個網址直接連的話很多圖都早就掛了,所以要安全一點還是取用src就好。<br />
因此只要掃過整個html頁面把符合以上條件規格的tag全抓出來就可以找到需要的圖了。<br />
<br />
我這邊寫了一個flash版本的,有興趣的可以下載回去。但是只能在本機跑喔!因為讀取google這個網域是跨網域了,所以不能在web上跑。如果要把這東西用在網站上的話,就依照同樣原則請server端那邊去把Google那邊的圖幹回來就可以了。<a href="http://labs.medialand.com.tw/jason/flash/googleimagesearch/googleimagesearch.zip">點此下載</a><br />
<br />
補充:<br />
1. 我這樣抓的資料一頁是20筆,似乎跟Google網頁上呈現的有一點點不太一樣,還不知道為什麼。(也不會想去找出原因吧XD)<br />
2. 要跳頁可以,有個變數好像叫start,可以指定要從第幾個開始顯示。<br />
3. 其它似乎還有很多變數,但我沒再繼續深入了…。<div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com2tag:blogger.com,1999:blog-3534534690154025021.post-76569930820319009462010-12-09T18:48:00.001-08:002010-12-09T18:48:16.804-08:00[廣告] 米蘭創意種子(實習生)招募中!!<span class="Apple-style-span" style="border-collapse: separate; color: black; font-family: Arial; font-size: small; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><span class="Apple-style-span" style="color: #666666; font-family: Arial,PMingLiU; font-size: 12px; line-height: 18px; text-align: left;"><span style="color: brown;">實習不只為了學分,更為了灌溉自己<br />
這次的實習生招募,不限於寒暑假,希望是更深入的培育<br />
<br />
米蘭期待找到這樣的種子↓<br />
數位向陽性;<br />
內含許多有趣的idea成分;<br />
對新事物能產生一連串化學變化;<br />
並有努力想成長茁壯的積極熱血。</span><br />
<br />
<strong>1.實習需求</strong><br />
<br />
<u>創意企劃實習 1~2名</u><br />
<br />
<span style="color: purple;">內容說明:</span> <br />
米蘭的創意企劃工作範疇,著重在創意發展,也講究細節規劃<br />
如果你很積極,你可以學習到<br />
如何發展一個網路廣告或病毒影片的腳本<br />
如何規劃一個網站或網路活動的玩法、單元內容、頁面文案撰寫、動線思考…<br />
如何思考一個數位行銷的創意<br />
甚至 更多!!<br />
<br />
<span style="color: purple;">評估依據<span class="Apple-converted-space"> </span></span><br />
創意 (30%):作品的策略思考、創意概念、文案與畫面的整體表現<br />
認知 (30%):平常對於網路生態、廣告傳播的觀察和了解<br />
熱忱 (30% ) :對創意與數位的熱忱<br />
反應能力(10%):臨場表現和清楚的表達能力<br />
<br />
聯絡與收件窗口:Carol 電話:27390000轉131<br />
carol@mail.medialand.com.tw<span class="Apple-converted-space"> </span><br />
信件主旨:[應徵米蘭創意種子-企劃實習,我是<span style="color: blue;"><<你的姓名>></span>]<br />
<br />
<u>設計實習 1~2名</u><br />
<br />
<span style="color: purple;">內容說明:</span> <br />
米蘭設計師工作範疇,著重在設計執行及視覺創意表現<br />
如果你很積極,你可以學習到<br />
如何完成一個高質感與創意兼具的作品<br />
如何執行一個完整專案從創意發想、動線思考、單元頁面到完成上線<br />
如何整合設計資源做最有效的發揮<br />
甚至 更多!!<br />
<br />
<span style="color: purple;">評估依據<span class="Apple-converted-space"> </span></span><br />
技術 (30%) :軟體熟悉度及呈現的質感<br />
創意 (30%) :個人作品呈現的方式與內容<br />
熱忱 (30% ):對於設計的用心與堅持<br />
表現度(10% ): 臨場表現,應對之間表現的談吐及態度<br />
<br />
聯絡與收件窗口:Cheney 電話:27390000轉162<br />
cheney@mail.medialand.com.tw<span class="Apple-converted-space"> </span><br />
信件主旨:[應徵米蘭創意種子-設計實習,我是<span style="color: blue;"><<你的姓名>></span>]<br />
<br />
<strong>2.報名期間:</strong><span class="Apple-converted-space"> </span>11/25(四)~01/17(一) 24:00止<br />
<strong>3.面試期間:</strong><span class="Apple-converted-space"> </span>01/18(二)~01/26(三),錄取通知:1/27(四)<br />
<strong>4.實習時間:</strong><span class="Apple-converted-space"> </span>02/14 Start,預計至6月底結束,每周至少來三天<br />
<strong>5.應徵文件:</strong>參與應徵者請務必提供以下內容<br />
<span style="color: brown;">A.個人基本資料</span><span class="Apple-converted-space"> </span><br />
姓名、生日、聯絡方式、學經歷、待修學分list、並附上近期清晰照片乙張<br />
<span style="color: brown;">B.我的網路履歷表<span class="Apple-converted-space"> </span></span><br />
i.使用網路的年資<br />
ii.使用或造訪過哪些網站,其中最喜歡哪個網站?為什麼?<br />
iii.你的個人平台連結與介紹 (例如:Blog、Plurk、twitter、FunP、facebook、flickr、delicious、黑米…)<br />
iv.你在虛擬的網路中,有哪些傲人的身分或成績?<br />
(例如:線上遊戲團長或幹部、巴哈姆特Lv3等級以上、噗浪的Karma超高、擔任過批踢踢小天使或版主、在youtube或blog上的作品曾經被廣為傳閱…)<br />
<span style="color: brown;">C.個人作品集(或作品網站、部落格)<br />
D.我的熱情宣言</span><br />
i. 你所認知的米蘭,以及想來米蘭實習的原因<br />
ii. 你最喜歡米蘭的作品及原因<br />
<br />
<span style="color: red;"><strong>本次的實習期間屬於學期中實習,也請報名者先考量課業loading喔 ^^</strong></span></span></span><div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com0tag:blogger.com,1999:blog-3534534690154025021.post-54753250747387109802010-11-03T02:56:00.000-07:002010-11-03T02:56:53.012-07:00HTML5 Canvas初試玩心得前一陣子試玩了一下HTML5的Canvas,有一點心得。<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://labs.medialand.com.tw/jason/html5/canvas1/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgExdqGUjeJEw53Op4e_ND8hdAT6G2vDCan5XUAp-p7JV05T1t-Fw7m7-OohrbYTNbC9b4kGKTIGsj75bYVH09s-lZKOcGQDvdaJbjzHe1n_sx7OYl34jAdy5oYEck6ab0x8vZ7C9TF1Rg/s320/html5_canvas.jpg" width="320" /></a></div><br />
<br />
基本上Canvas讓我感覺有點像flash的graphic加上matrix的配合畫出一張bitmapdata,Canvas的東西畫上去就是畫上去了,沒辦法只單獨針對裡面的某個物件進行控制,也就是說如果Canvas裡有個東西的座標或狀態改變的話,需要整張Canvas清空再重繪一次。<br />
而且因為Canvas裡的東西是『畫上去的』,所以不像flash的display tree一樣可以給予裡面物件一些事件(ex:滑鼠事件),因此如果需要跟user互動的話,可能需要隨時算出該物件理論上該存在的座標,然後在Canvas上面疊一個透明的dom上去充當按鈕感應區吧!? 不確定,不過這是我目前想到的solution。<br />
<br />
如果沒有寫成類別的話,要純粹用Canvas來玩一些東西其實還挺累的哩…。<br />
<br />
<br />
<a name='more'></a><br />
<br />
不過也只是比較累而已啦,Canvas搞懂了之後還算挺簡單的。<br />
<br />
1. Canvas所有進行繪製的動作都是透過Canvas. getContext('2d')這個物件來實作的,有點像是flash裡MovieClip.graphic一樣。<br />
<br />
2. Canvas裡的層級是由Canvas. getContext('2d'). globalCompositeOperation這個屬性來決定的,我使用的是『destination-over』,也就是說最先畫到Canvas上的東西層級會越高,因此如果想要層級顯示正確,就要依照正確的順序把所有東西依序畫到Canvas裡。各種不同globalCompositeOperation的特性可以google一下或是去這裡參考一下:https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html。<br />
<br />
3. 善用Canvas. getContext('2d').save()及Canvas. getContext('2d').restore(),別被這兩個function的字面意思搞混了,翻成白話的意思其實可以解釋成『鎖定目前圖層』,尤其是接下來要畫進Canvas裡的東西需要旋轉或變形時,一定要先執行Canvas. getContext('2d').save(),將原本已經畫好的部份儲存起來,再進行變形的動作,這樣變形只會影響到接下來要繪製的物件身上,不會影響到整個已經畫好的Canvas,如果不執行Canvas. getContext('2d').save(),則整個Canvas都會一起被套用變形。畫完當下的物件後記得要再Canvas. getContext('2d').restore()以解除鎖定。這功能還是要自己實作試試看才可以比較理解箇中的傲妙。<br />
<br />
我自己做了一個demo,網址在此:<a href="http://labs.medialand.com.tw/jason/html5/canvas1/" target="_blank">http://labs.medialand.com.tw/jason/html5/canvas1/</a><br />
按下test鈕會另開視窗顯示當下的截圖。<br />
所有的code我都直接寫在html上,有興趣的可以直接copy回去修改看看,就大概可以知道我上面三點所講的意思。<div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com1tag:blogger.com,1999:blog-3534534690154025021.post-26144262080983439822010-09-16T02:41:00.000-07:002010-10-21T20:22:30.872-07:00FlashPlayer10 SampleDataEvent的音調及音色大家都知道FlashPlayer10開始可以利用SampleDataEvent事件來產生8-bit的聲音。<br />
雖然我相信真的會去發出8-bit聲音的機會很低(因為真的很難聽),但還是記錄一下如何抓取音程及改變音色。<br />
<br />
大略講一下聲音跟波的概念。<br />
基本上音調的高低是由聲音的頻率所決定的,即使是不同的東西振盪空氣造成不同的聲波,只要它們的頻率是一樣的,那麼聽起來也許音色不同,但會是同一個音調,頻率越大音調就越高越尖,頻率越短則音調就越低越沉。<br />
而聲音的大小則是由振幅所決定的,振幅越大聲音就越大聲。<br />
至於聲音的音色則是由波形來決定的。<br />
以一個正弦波來講的話,X軸的部份當波形再次重覆時這段距離是波長,頻率基本上跟波長是倒數,頻率越大波長越短,Y軸的大小就是振幅,它的形狀就是它的波形。<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjONxSwFiMPCRxe4NHqpsTd8dnGz92zdSPGbJb1p0j7f6UOWGDx52-suqH5C1eF6X8AUjwi0CLLPABtUcDU7W9bdWjV2T1NBaXOwTnJjy-4eewNj-yl50jyDs7iEik3tBY8zlXbgY7s_V0/s1600/sin.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjONxSwFiMPCRxe4NHqpsTd8dnGz92zdSPGbJb1p0j7f6UOWGDx52-suqH5C1eF6X8AUjwi0CLLPABtUcDU7W9bdWjV2T1NBaXOwTnJjy-4eewNj-yl50jyDs7iEik3tBY8zlXbgY7s_V0/s320/sin.jpg" /></a></div><br />
<br />
<a name='more'></a><br />
<br />
大概就是這樣,接下來就講一下怎麼把音階給抓出來。<br />
一般我們使用樂器時,跟普遍大家唱歌習慣直接用Do(音名C)來抓第一個音是不太一樣的,通常在幫一個樂器調音時應該都是從基準音A(唱名是La)來調音,A的頻率剛好是440Hz,但一些古典樂器,例如小提琴的話,它們的A是442Hz而不是440Hz,但基本上差異不大,所以還是先用440Hz來寫。<br />
而,一個八度的音,剛好也是相差440Hz,也就是說「A」跟「高音A」的頻率剛好分別是440Hz及880Hz。<br />
但是這所謂的八度音並不是平均分配在440~880之間,而且八度音不是真的只有八個音,應該拆成半音來看。<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGAzSSuNoPbU1EUqicnCySJWpHecraObeI5c8d2TAkp8Mq0_AnhgkUowZKVllcKMsKyrrduY1o0EY7Z7kfqOVxYjp5NuwCoiZ8-jNb6-3LZHMVbxtLaXj7sIhcSUYyVV9Li88Tn3BWCgc/s1600/keyboard_staff.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGAzSSuNoPbU1EUqicnCySJWpHecraObeI5c8d2TAkp8Mq0_AnhgkUowZKVllcKMsKyrrduY1o0EY7Z7kfqOVxYjp5NuwCoiZ8-jNb6-3LZHMVbxtLaXj7sIhcSUYyVV9Li88Tn3BWCgc/s320/keyboard_staff.jpg" /></a></div><br />
看一下鋼琴琴鍵就比較容易瞭解,在一個八度裡其實一共有12個半音(白鍵加黑鍵),並不是每兩個音之間都是全音,例如E跟F就是半個音程而已,也就是說升E就等於F,降F也等於E,B跟C之間也是半個音程,所以全部才會是12個半音不是14個。<br />
而每個半音之間的頻率則是「等比數列」不是「等差數列」,因此我們要先算出這個等比數列的公比值是多少,例如A要升12個半音才會到達高音A,因此就等於440Hz要承上12次的公比才會到達880Hz:<br />
<b>440x(公比的12次方) = 880</b><br />
<br />
公比真正的值並沒有必要算出來,我們只要知道這個關係就好。<br />
從這個關係我們就可以得到每個音階的頻率了。<br />
例如我們要知道Do(音名為C)的頻率,C比A還低音,跟C差了一共9個半音,因此C的頻率應該是:<br />
<b>440 * Math.pow(2, -9 / 12) = 261.6255653005986</b><br />
其它的音就依此類推。<br />
<br />
這樣就可以把所有的音程全部推算出來並放出聲音來了:<br />
<textarea class="javascript" name="code" style="height: 256px; margin-bottom: 2px; margin-left: 2px; margin-right: 2px; margin-top: 2px; width: 581px;"><br /> _sound = new Sound();<br /> _sound.addEventListener(SampleDataEvent.SAMPLE_DATA, sampleData);<br /> _sound.play();<br /> private function sampleData(e:SampleDataEvent):void {<br /> //算出頻率<br /> var _frequency:Number = 440 * Math.pow(2, -9 / 12);<br /> //設定音量(就是振幅)<br /> var _volume:Number = 1;<br /> for ( var i:int = 0; i < 2048; i++ ) {<br /> var _data:Number = Math.sin(_frequency * (Number(i + e.position) * (Math.PI * 2)) / 44100);<br /> e.data.writeFloat(_data * _volume);<br /> e.data.writeFloat(_data * _volume);<br /> }<br /> } </textarea><br />
<br />
至於音色,就是由波形決定了,只要頻率不變,音色隨便怎麼變都可以。<br />
上面的例子是以一個標準的正弦波所發出的,有興趣的自己可以套入不同的波形試試看。<br />
我這邊寫了一個範例隨便亂搞波形弄了兩個音色出來。(都很難聽)<br />
要記得,因為是8-bit的聲音,想要弄得像mp3一樣的音色是不太可能的,所以玩玩就好。<br />
<br />
<a href="http://labs.medialand.com.tw/jason/flash/sampledataevent_1/sound_test.swf" target="_blank">Demo在這邊</a>,只弄了一個八度,按住對映的琴鍵播放,放開就停止:<div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com1tag:blogger.com,1999:blog-3534534690154025021.post-83709120492179692022010-08-30T19:46:00.000-07:002010-08-30T19:46:29.637-07:00[廣告]米蘭數位科技上海分公司徵才<span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">職務名稱: Flash actionscript 互動設計師(上海)</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">需求人數: 1人</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">職務類別: 多媒體動畫設計師、Internet程式設計師</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">職務說明: 如果你:</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">1. 對於互動技術有強烈熱情,追求技術與創意完美結合</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">2. 具有遠大的抱負與開疆闢土的野心</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">3. 有志前往上海,進入國際大舞台</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">請立刻加入上海米蘭(米狄兰营销策划上海有限公司)!</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">我們需要的是:</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">1. 需熟悉ActionScript3及物件導向,能熟練常見網站行銷用途的class,能獨立完成互動專案</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">2. 不需要會視覺設計,不需要懂Server端語言或資料庫, 但要有概念。</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">3. 實作過Flash任一種3D引擎,AR類別庫,VR效果者優先。</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">4. 喜歡與團隊合作的默契,我們喜歡打群架不要定孤支。</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">5. 具有克服問題,協調溝通的能力。</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">6. 樂天且積極的態度 - 工作中不忘記笑聲,閒下來時仍不時想要充實自己。</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">7. 自認對於異地工作能適應者。</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">應徵流程:</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">1. 履歷中必須能附上作品或是能展示能力的任何東西</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">2. 書面審核通過後需接受電話訪談</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">3. 待遇結構面議</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">應徵方式</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">職務聯絡人:林鴻儒先生</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">聯絡e-mail:rainey@mail.medialand.com.tw ; welson@mail.medialand.com.tw</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;">也可以寄給我jason@mail.medialand.com.tw</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><br />
<span class="Apple-style-span" style="color: #666666; font-family: Arial, PMingLiU; font-size: 12px; line-height: 18px;"><br />
</span><div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com0tag:blogger.com,1999:blog-3534534690154025021.post-27337091187768166512010-08-19T04:11:00.001-07:002010-08-19T04:16:23.636-07:00控制Facebook FB.ui跳出的對話框大小Facebook Graph的js api有一個很好用的東西,那就是FB.ui。<br />
FB.ui基本上就是叫出一個對話框,裡面可以塞入很多你想塞進去的東西,最常用到的就是把stream.publish給塞進去,或者是跳一些alert訊息。<br />
要塞到FB.ui裡的東西主要是以FBML為主,目前為止我實驗了一下,只有like button我怎麼塞都塞不進去,其他的好像大置上都ok。<br />
<br />
FB.ui有另一個可以解決長久以來flash在wmode=transparent之下輸入中文的問題,因為FB.ui可以強迫該對話框是要以「iframe」的形式或是「popup」的形式呈現,預設是iframe。iframe的話就是一般facebook的對話框直接疊在畫面上,但是一但flash的wmode=transparent的話,該對話框會因為flash的關係而變得破碎甚至有些東西不能點,因此我們可以指定對話框改用popup的方式出現,這樣一來對話框就會變成另外的跳出視窗。<br />
<br />
但是如果把FB.ui的對話框指定成popup的話,雖然大部份的時候都很正常,但是還是會遇到一些問題:<br />
1. 一定要有滑鼠的點擊事件觸發才可以叫出對話框,否則會被瀏覽器擋下來。<br />
2. 如果是stream.publish的話,在某些電腦的IE8上會被視為是cross-site script attack,沒辦法正常呈現發佈頁面。<br />
3. Bookmark的功能被放到popup裡會出現程式錯誤(不知道facebook修好了沒)<br />
4. 即使帶入寬高的變數,它仍然不理你。<br />
<br />
嗯,這篇就是要解決第四個問題。<br />
<br />
原理很簡單,有點tricky。其實就是直接去改變js api裡面FB.ui對話框的大小預設值,然後呼叫FB.ui跳出視窗,然後再馬上把預設值還原,以免影響其它FB.ui的正常大小。<br />
以下的code我是把邀請朋友的畫面塞到popup裡:<br />
<textarea class="javascript" name="code"><br /> //取得原本預設大小<br /> var originalSize = FB.UIServer.Methods["fbml.dialog"].size;<br /> //指定你要的大小<br /> FB.UIServer.Methods["fbml.dialog"].size = {width:750, height:600};<br /> <br /> var str = "<fb:fbml><fb:request-form action=' http://xxx/xxx.asp ' method='POST' invite='true' type='This is a test' content='Accept Invite<fb:req-choice url=\"http://apps.facebook.com/xxx/\" label=\" Accept Invite \" />'>";<br /> str += "<fb:multi-friend-selector showborder='false' actiontext='It’s a testing'>";<br /> str += "</fb:request-form></fb:fbml>";<br /> var content = {<br /> method: "fbml.dialog",<br /> fbml: str,<br /> width: 750,<br /> height: 600<br /> };<br /> //指定為popup視窗<br /> content.display = "popup";<br /> FB.ui(content);<br /> //再把預設大小還原成原本的設定<br /> FB.UIServer.Methods["fbml.dialog"].size = originalSize;<br /> </textarea><br />
<br />
<br />
<a name='more'></a><br />
<br />
FB.ui is very convenient when we use new Facebook Graph js api. We can assign the content and let it show up in a dialog by calling FB.ui, like stream.publish. The content mush be FBML form. Though I didn’t successfully put the like button into the content, I think FB.ui is already good enough.<br />
<br />
Also, FB.ui allows us to assign the dialog to be “iframe” or “popup”. Setting the dialog to “popup” can solve the flash localization keyboard input problems when wmode=transparent.<br />
But we will meet some other problems if the dialog becomes a popup window:<br />
1. It needs to be triggered just after the mouse clicking happens, or the popup would be block by most browsers.<br />
2. It might occur cross-site attack with IE8 when we do stream.publish.<br />
3. Bookmark doesn’t work.(not sure if it’s a facebook bug or not)<br />
4. We can not change the size of the popup window.<br />
<br />
And this article is to solve the fourth problem.<br />
The concept is simple and tricky. It’s just directly change the facebook FB.ui default size. After calling FB.ui, just change the default size back to original.<br />
<br />
Take the “invite friends” for example:<br />
<textarea class="javascript" name="code"><br /> //Get the original default size<br /> var originalSize = FB.UIServer.Methods["fbml.dialog"].size;<br /> //Assign a new size you want<br /> FB.UIServer.Methods["fbml.dialog"].size = {width:750, height:600};<br /> <br /> var str = "<fb:fbml><fb:request-form action=' http://xxx/xxx.asp ' method='POST' invite='true' type='This is a test' content='Accept Invite<fb:req-choice url=\"http://apps.facebook.com/xxx/\" label=\" Accept Invite \" />'>";<br /> str += "<fb:multi-friend-selector showborder='false' actiontext='It’s a testing'>";<br /> str += "</fb:request-form></fb:fbml>";<br /> var content = {<br /> method: "fbml.dialog",<br /> fbml: str,<br /> width: 750,<br /> height: 600<br /> };<br /> //Set the dialog to be popup<br /> content.display = "popup";<br /> FB.ui(content);<br /> //Restore the default size immediately <br /> FB.UIServer.Methods["fbml.dialog"].size = originalSize;<br /> </textarea><div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com8tag:blogger.com,1999:blog-3534534690154025021.post-48428122083999732622010-08-17T02:00:00.000-07:002010-10-21T20:25:31.030-07:00使用ByteArray做一些基本的檔案保護這一篇的概念很簡單,應該也已經有許多人都這樣在用了。基本上只是一種做心安的保護動作。<br />
<br />
不知道為什麼只要遇到bytearray的東西我都覺得很有興趣,雖然這東西說穿了就是直接改binary,沒什麼太大的學問,但是我總覺得光改binary就可以玩很多東西。例如AS3Swf、LivePDF、FZip等等的東西,都是用bytearray玩出來的。<br />
<br />
以上說的那些都需要詳讀相關的specification,才能知道哪一種檔要在binary的哪一個地方塞入什麼值,要自己去寫一個的話是很耗時跟耗工的,感謝國外的強者們。<br />
<br />
這一篇要說的相反,要保護一個檔案,最簡單的方法就是把它binary搞亂,亂到電腦看不懂,其它人就很難直接把你的檔案拿去用。<br />
因為把binary搞亂了,自然無法直接在電腦上跑,因此如果flash裡要使用的話,就還得先把檔案讀進來重新還原到原本的狀態才可以使用,這是比較麻煩的部份,因為寫code時就要多加一道decode的程序。一般來說會這樣搞的機率不大,swf也都有現成的軟體可以加密保護,但是像mp3這種東西就沒有了。<br />
之前遇到的案子是客戶希望在網站上播放的音樂要保護起來,但是又沒錢買FMS,那怎麼辦?<br />
那就只好把mp3的binary搞亂了。<br />
<br />
點下面這裡看範例:<br />
<a href="http://labs.medialand.com.tw/jason/flash/mp3protect/">Demo</a><br />
原始檔下載:<br />
<a href="http://labs.medialand.com.tw/jason/flash/mp3protect/mp3Protect.zip">Source</a><br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.medialand.com.tw/demo/jason/jasonlab/mp3protect/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjurjyM2z6InDfTTCkSa4fnPj-N9jpsZFDTPKYP1GyJOHGmYR68Nzw3UxnlOAMkyb22YJPtYC358wy_rgbI6IeRBH3_CNpc-TSnbZK7FSoLPpAU3OuHXAzbgSMZ3m7HggxkkN8HHu0V2CE/s320/mp3protect.jpg" /></a></div><br />
<br />
在Encode的地方選檔案並另存後,可以試播看看,基本上會是聽不到什麼的,用其它player播放即使聽得到聲音也只會是一些怪聲音。<br />
在Decode的地方選擇剛剛編碼過的檔案後再另存,就可以發現檔案已經回覆到原來的狀況可以直接播放。<br />
我這個範例裡只是純粹的將mp3每100個binary互相倒置,把binary的順序搞亂而已。<br />
如果要用更複雜的編碼也是可以,同樣的道理而已。<br />
<br />
這種方法只是做心安的,只要被人crack到原本的編碼方式,對方又會寫程式的話,也是會被還原回來的。<br />
但我想這樣已經可以擋掉大多數的網路使用者用現成的工具抓取mp3回去聽了。<br />
<br />
<br />
<br />
<a name='more'></a><br />
<br />
<br />
This is an example how to protect your mp3 on your site by using bytearray.<br />
The concept is quite simple. I just change the sequence of the segments in the binary every 100 bits.<br />
To play the encoded mp3 in flash, just change the sequence again.<br />
Very simple but useful for most situations.<br />
<br />
Try demo here:<br />
<a href="http://labs.medialand.com.tw/jason/flash/mp3protect/">Demo</a><br />
Source:<br />
<a href="http://labs.medialand.com.tw/jason/flash/mp3protect/mp3Protect.zip">Source</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="http://www.medialand.com.tw/demo/jason/jasonlab/mp3protect/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjurjyM2z6InDfTTCkSa4fnPj-N9jpsZFDTPKYP1GyJOHGmYR68Nzw3UxnlOAMkyb22YJPtYC358wy_rgbI6IeRBH3_CNpc-TSnbZK7FSoLPpAU3OuHXAzbgSMZ3m7HggxkkN8HHu0V2CE/s320/mp3protect.jpg" /></a></div><div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com0tag:blogger.com,1999:blog-3534534690154025021.post-20253200657085636252010-08-12T03:20:00.000-07:002010-08-12T03:20:39.507-07:00Facebook取得某個網頁被按了多少次「讚」及有誰按「讚」之前因為沒特別有這個需求,因此就沒去測,今天測了一下,發現有點有趣。<br />
拿我blog裡其中一篇文章來測的話,這篇:http://blog.iamjason.com/2010/07/aniclip.html<br />
<br />
基本上要取得讚的東西應該都是直接走FQL了,所以我先去object_url這個table取得對映到這個網址的object_url:<br />
<b>Select id from object_url where url='http://blog.iamjason.com/2010/07/aniclip.html'</b><br />
<br />
跑出來的結果得到這個網址的object_id=410602097134。<br />
然後再去like這個table撈一下有哪些人按過讚:<br />
<b>Select user_id from like where object_id=410602097134</b><br />
<br />
出來的筆數有三筆,可是facebook的social plugin顯示的是四筆,查到的三個人裡面有兩個是我的朋友,另一不是,我猜最後那個「失蹤」的使用者可能隱私權設得比較高吧?<br />
因此看樣子不能直接從這裡得到按了讚的總人數,因為可能會有誤差。<br />
<br />
所以如果要得到按讚的總人數,就只好透過link_stat這個table了:<br />
<b>Select like_count from link_stat where url='http://blog.iamjason.com/2010/07/aniclip.html'</b><br />
<br />
這樣出來的結果就正確了。<br />
<br />
至於能不能不透過social plugin就可以按讚(例如在flash裡)?<br />
目前似乎沒有開放,但是既然都是透過http在傳資料,很多東西都是有跡可循的,以下這篇(<a href="http://labs.byhook.com/2010/08/03/facebook-like-button-in-flash/">http://labs.byhook.com/2010/08/03/facebook-like-button-in-flash/</a>)就是觀察按了讚之後送出的資料來反推,再去判斷從flash裡要送出哪些參數,但是作者也說了,他很多參數不知道是代表什麼意思,只是盡量讓它能work而已。<br />
所以我暫時不打算去試,就看facebook到時會不會開放了。<br />
不開放就再做打算…><。<br />
<br />
<br />
<br />
<br />
<br />
<a name='more'></a><br />
<br />
<br />
I was trying to get the users list who had clicked the “like” button, and found something interesting.<br />
<br />
Take one of my article here for example. I have to query the ‘object_url’ table first to get the object_id for the article:<br />
<b>Select id from object_url where url='http://blog.iamjason.com/2010/07/aniclip.html'</b><br />
<br />
The value return is ‘410602097134’.<br />
So now we can use this object_id to get the user_id from ‘like’ table:<br />
<b>Select user_id from like where object_id=410602097134</b><br />
<br />
There are three users. Two of them are my friends and one is not. But the number is not correct, since the like social plugin shows that there are four people had clicked it. I think perhaps it’s because of the user’s privacy settings.<br />
Hence, it seems that it’s not safe to get the like number from ‘like’ table.<br />
So I tried to query ‘link_stat’ for correct result:<br />
<b>Select like_count from link_stat where url='http://blog.iamjason.com/2010/07/aniclip.html'</b><br />
<br />
Yes, the result is correct now.<br />
<br />
I’ve never tried to send like via flash, and it seems that facebook don’t want us to do so yet. But someone here(<a href="http://labs.byhook.com/2010/08/03/facebook-like-button-in-flash/">http://labs.byhook.com/2010/08/03/facebook-like-button-in-flash/</a>) had successfully send a like to facebook in flash. By observing the http request when we click the like button, we can find out what parameters are posting to facebook, and then we can simulate the similar parameters in flash. But as the author said, he doesn’t know what those parameters are, so please use it carefully if you want to do so.<div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com9tag:blogger.com,1999:blog-3534534690154025021.post-82425802276468481112010-08-05T00:28:00.000-07:002010-08-05T01:24:46.394-07:00讀取相片的Exif資訊 - Exif library for AS3<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSK7aMhlbic2CZxekBGg8pO92i2wT66qdJR4rwpXMGAI4BqQWzwFEYJMM9u3GZQD5bKDM7kzuI3jbxTYngHXJKVzoChVbVfG5012WoKPNV2vF_5jq8g2UxVRzLwAcjFKBdyFfsojAPnwg/s1600/exif.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSK7aMhlbic2CZxekBGg8pO92i2wT66qdJR4rwpXMGAI4BqQWzwFEYJMM9u3GZQD5bKDM7kzuI3jbxTYngHXJKVzoChVbVfG5012WoKPNV2vF_5jq8g2UxVRzLwAcjFKBdyFfsojAPnwg/s320/exif.jpg" /></a></div><br />
要讀取Exif資訊其實不會很難,直接用bytearray去拆解就可以,但是很費工,今天偶爾看到這個,有人已經寫好現成的類別了,那就省事多了,照片裡有經緯度的話也讀得到,所以直接標在地圖上也是很ok的。<br />
(只不過它的授權是限非商業用途…使用時請注意~)<br />
<br />
Demo網頁:<br />
<a href="http://shichiseki.jp/as3/exif_info.html">http://shichiseki.jp/as3/exif_info.html</a><br />
<br />
Google Code:<br />
<a href="http://code.google.com/p/exif-as3/">http://code.google.com/p/exif-as3/</a><br />
<br />
有興趣自己寫拆解Exif資料的朋友,下面這個是Exif的格式:<br />
<a href="http://park2.wakwak.com/~tsuruzoh/Computer/Digicams/exif-e.html">http://park2.wakwak.com/~tsuruzoh/Computer/Digicams/exif-e.html</a><br />
<br />
<br />
<br />
<br />
<a name='more'></a><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSK7aMhlbic2CZxekBGg8pO92i2wT66qdJR4rwpXMGAI4BqQWzwFEYJMM9u3GZQD5bKDM7kzuI3jbxTYngHXJKVzoChVbVfG5012WoKPNV2vF_5jq8g2UxVRzLwAcjFKBdyFfsojAPnwg/s1600/exif.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSK7aMhlbic2CZxekBGg8pO92i2wT66qdJR4rwpXMGAI4BqQWzwFEYJMM9u3GZQD5bKDM7kzuI3jbxTYngHXJKVzoChVbVfG5012WoKPNV2vF_5jq8g2UxVRzLwAcjFKBdyFfsojAPnwg/s320/exif.jpg" /></a></div><br />
It won't be too difficult to extract Exif data from pictures. One can easily get the information by reading bytearrays. Though it's easy, but it takes much time reading the specifications.<br />
Someone have already done the package for us.<br />
Note that it's for uncommercial use.<br />
<br />
Here is the demo page:<br />
<a href="http://shichiseki.jp/as3/exif_info.html">http://shichiseki.jp/as3/exif_info.html</a><br />
<br />
And here is the source:<br />
<a href="http://code.google.com/p/exif-as3/">http://code.google.com/p/exif-as3/</a><br />
<br />
Exif specification here:<br />
<a href="http://park2.wakwak.com/~tsuruzoh/Computer/Digicams/exif-e.html">http://park2.wakwak.com/~tsuruzoh/Computer/Digicams/exif-e.html</a><br />
<div><br />
</div><br />
<br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com0tag:blogger.com,1999:blog-3534534690154025021.post-2177036543061350642010-07-24T09:51:00.000-07:002010-07-29T02:19:02.821-07:00改善向量動畫造成的效能問題 - AniClip類別這並不是什麼新概念也不是新東西,而且大家也都知道點陣圖對cup造成的負擔比向量圖來得少。<br />
簡單的說,就是將MovieClip裡每一個影格的畫面都事先用bitmapdata畫起來,再依序播放,這樣雖然吃記憶體,但是很多時候可以減輕cpu的loading,讓整個網站跑起來不會卡卡的。<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghIUN0jIuzYaNhmoOU8k4tW6LSH2GYrIEwz40Mt2tYZiy0ujDFGjd87WPHMs0gYs_XrG9nVroKtSOnOqGviGbN10PWIN5Q4Ikwzw-W4_7LUjs5Ig9AXmmacYcHmq75kpomQzfY2be0ffg/s1600/aniClip.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghIUN0jIuzYaNhmoOU8k4tW6LSH2GYrIEwz40Mt2tYZiy0ujDFGjd87WPHMs0gYs_XrG9nVroKtSOnOqGviGbN10PWIN5Q4Ikwzw-W4_7LUjs5Ig9AXmmacYcHmq75kpomQzfY2be0ffg/s320/aniClip.jpg" /></a></div><br />
最早之前是看到bytearray部落格上發表的Banana Slice元件(<a href="http://www.bytearray.org/?p=117">http://www.bytearray.org/?p=117</a>),真的很久了,兩年前了。當時由於自己本身十分不喜歡用元件的關係,所以想說有空自己再來寫一個類別。結果,人嘛…惰性,時間久了,工作上遇到相關的問題時,也都想辦法先用別的方式解決掉,就一直沒有要把它寫一個真正的類別檔出來。<br />
<br />
<a name='more'></a><br />
<br />
這兩天比較有空了,也想起了這個東西,就想說,以後遲早要處理這東西的,所以就花時間寫了一下,寫了兩種版本,一種是可以讓現有的MovieClip直接繼承,只要在library裡設一下就好了,適合不需要太多code偏設計師使用的版本;另一種則是寫code去指定繪製某個MovieClip,比較適合純寫code時使用。<br />
<br />
跟bytearray那一篇的文章一樣,還是要有對照組才看得出來效果,因此我也模仿弄了幾個demo用的swf。<br />
首先是都沒經過處理的,一共放九個動畫在場景上,最後三個加上一些filter增加cpu的負擔。<br />
<a href="http://iamjason.googlecode.com/files/normal.swf" target="_blank">點這裡去看看實際上跑出來的fps會是多少。</a><br />
<br />
然後就是經過處理的,兩種版本我分別做了兩個demo檔,針對這九的動畫都改變了它們的播放速度(從慢到快)。<br />
以下這個是AniClipExt版本(使用library繼承的版本):<br />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" height="500" width="500"> <param name="movie" value="http://staticx.myweb.hinet.net/jasonblog/20100725/AniClipExtDemo.swf" /><param name="quality" value="high" /><embed src="http://staticx.myweb.hinet.net/jasonblog/20100725/AniClipExtDemo.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="500" height="500"></embed> </object><br />
看不到的可以點過去看:<a href="http://iamjason.googlecode.com/files/AniClipExtDemo.swf" target="_blank">AniClipExtDemo.swf</a><br />
原始檔下載: <a href="http://iamjason.googlecode.com/files/AniClipExtDemo_2010_07_29.rar" target="_blank">AniClipExtDemo.rar</a><br />
另一個AniClip版本(純寫code的版本)跑起來的結果差不多,所以就不放了,有興趣的可以下載原始檔回去: <a href="http://iamjason.googlecode.com/files/AniClipDemo_2010_07_29.rar" target="_blank">AniClipDemo.rar</a><br />
<br />
對照一下應該可以看得出來效能上的差別,至少在我的電腦上跑起來是有差,沒處理過的fps大約跑到40,有處理過的fps會拉高到約60。<br />
如果是更複雜的動畫,效果應該會更明顯。(請記得若要比較要就是都用standalone flash player開啟,或是分別放到瀏覽器裡看,基準點才是一樣的,因為standalone flash player跑起來效能會比較好)<br />
<br />
<br />
<br />
接下來是一些心得:<br />
<br />
1. 由於是將每個影格都畫起來,因此如果MovieClip裡面還有其它的Children是動畫或按鈕,都會失效,所以這類別只能用來專門處理非巢狀式的動畫。<br />
<br />
2. 因為都畫成點陣圖了,因此原本的hitArea將會變成點陣圖的範圍(方形),因此如果要針對這個動畫加上滑鼠事件,要小心hitArea的問題。<br />
<br />
3. 有些動畫由於是用flash內建的繪圖工具畫的,線條的粗細不會被判別到實際的寬高裡,所以有可能會早成畫出來的圖有被邊緣切到的感覺,因此我只好大略設了一個「邊框」的變數,會多往外繪製4pixel的範圍,如果覺得4pixel還不夠的朋友請自己去類別檔裡去修改_border這個變數值。<br />
<br />
4. 由於有些設計師在繪製動畫時會畫到x跟y是負值的地方去,因此這部份我有做調整,動態偵測MovieClip的有效Rectangle,再去校正點陣圖該繪製及擺放的區域。AniClipExt由於是被display tree裡的東西直接繼承,因此就只好這樣,而AniClip類別則是可以在指定繪製時多帶入一個Rectangle變數去指定要繪製的區域,確保可以將想要繪製的區域都畫到。<br />
<br />
5. Bitmapdata在繪圖時會暫時耗去很多cpu的資源,因此若是動畫的範圍過大,可能一開始會有短暫的cpu衝高現象,這很難避免,我也設定了若是動畫的影格數超過20的話,每畫20個frame就會休息100 ms再去繪製接下來的20個影格,希望能避免cpu一下子處理不來造成的不良結果。<br />
<br />
大概就是這樣。<br />
<br />
PS:動畫部份是出自於Titan大師手筆,我只是借用。<br />
<br />
<span class="Apple-style-span" style="color: #990000;">---------------------</span><br />
<span class="Apple-style-span" style="color: #990000;">版本更新:</span><br />
<span class="Apple-style-span" style="color: #990000;">1. 2010/07/29 : 修正了一些bug,增加了改變draw細致度的功能setDetail method。</span><br />
<span class="Apple-style-span" style="color: #990000;">有需要的朋友請重新下載,前一版的在某些情況下會發生Bug。</span><br />
<br />
<br />
<br />
It's no new idea or concept, since you all know bitmap animations cost less cpu than vector ones in flash.<br />
To improve the efficiency is to simply draw every frame of the movieclip first, and then put the right bitmapdata to stage. Although it would need more memory but somehow can reduce the loading of cpu, the flash animation will run smoothly.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghIUN0jIuzYaNhmoOU8k4tW6LSH2GYrIEwz40Mt2tYZiy0ujDFGjd87WPHMs0gYs_XrG9nVroKtSOnOqGviGbN10PWIN5Q4Ikwzw-W4_7LUjs5Ig9AXmmacYcHmq75kpomQzfY2be0ffg/s1600/aniClip.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghIUN0jIuzYaNhmoOU8k4tW6LSH2GYrIEwz40Mt2tYZiy0ujDFGjd87WPHMs0gYs_XrG9nVroKtSOnOqGviGbN10PWIN5Q4Ikwzw-W4_7LUjs5Ig9AXmmacYcHmq75kpomQzfY2be0ffg/s320/aniClip.jpg" /></a></div><br />
It came to me two years ago when I read the blog of ByteArray.org, who introduced his Banana Slice Component which is doing the same thing. Yes, two years ago. I was busy then and basically I personally really don't like to use component, so I decided to make one my own later some day. But you know, busy, and the thought was just a thought util now.<br />
<br />
Sooner or later I have to face the efficiency of the animation, so I took one day to finish my classes. Two classes, one is for the movieclips which already exist in the stage. Just set the movieclips to extend the AniClipExt class in the library window and the class will automatically replace the frames into bitmapdata.<br />
Another class is for programers. You can new a AniClip instance and asign which movieclip to be drawn.<br />
<br />
As ByteArray.org, we need demos to show the efficiency difference between vector animations and bitmap ones. So the demos are below.<br />
First is the original one. Just animations. I placed nine same vector animations to stage, and added some filters to the last three ones to make cpu cry louder.<br />
<a href="http://iamjason.googlecode.com/files/normal.swf" target="_blank">Please click here to see the fps.</a><br />
<br />
And here is AniClipExt demo. In this demo I additionally change the fps for each clip.<br />
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" height="500" width="500"> <param name="movie" value="http://staticx.myweb.hinet.net/jasonblog/20100725/AniClipExtDemo.swf" /><param name="quality" value="high" /><embed src="http://staticx.myweb.hinet.net/jasonblog/20100725/AniClipExtDemo.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="500" height="500"></embed> </object><br />
If you can't see the demo, please click here.<a href="http://iamjason.googlecode.com/files/AniClipExtDemo.swf" target="_blank">AniClipExtDemo.swf</a><br />
Download the source files:<a href="http://iamjason.googlecode.com/files/AniClipExtDemo_2010_07_29.rar" target="_blank">AniClipExtDemo.rar</a><br />
AniClip version gets almost the same fps.<br />
Download the AniClipDemo source files:<a href="http://iamjason.googlecode.com/files/AniClipDemo_2010_07_29.rar" target="_blank">AniClipDemo.rar</a><br />
<br />
I believe you can see the difference between them. At least I got improvement on my pc. The original swf is around fps 40, and the fps is aound 60 after bitmapdata drawing.<br />
The difference would be larger if the animation uses more complicated objects.<br />
<br />
<br />
Below are some notes:<br />
<br />
1. Because we draw every frame, the children of the movieclip will lose their properties or methods, if they are also animations or buttons.<br />
2. The hitarea will be changed. Same reason, bitmapdata.<br />
3. The linestyle thickness won't be count as the width or height of the movieclip, so I have to add one property named "_border" to draw larger area than the width/height values. You can change the value if you need.<br />
4. Sometimes designers would make the animations to x < 0 or y < 0, so I had to get the really rectangle of the movieclip to make the bitmapdata to draw the entire area at runtime. But you can change the rectangle while you use AniClip.<br />
5. Cpu may go high when the bitmapdata is drawing. It can't be solved yet. AniClip/AniClipExt class will draw 20 frames and then rest 100 ms for another 20 frames to prevent the overloading of cpu at the same time.<br />
<br />
That's it.<br />
Hope it can help.<br />
<br />
PS: The animation of demos is by Titan Lee. Thanks to him.<br />
<br />
<span class="Apple-style-span" style="color: #990000;">---------------------</span><br />
<span class="Apple-style-span" style="color: #990000;">Updates:</span><br />
<span class="Apple-style-span" style="color: #990000;">1. 07/29/2010 : Fix some bugs, and add a new method "setDetail" to redraw the frames.</span><br />
<span class="Apple-style-span" style="color: #990000;">Please download the new one if you had downloaded the previous version.</span><div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com0tag:blogger.com,1999:blog-3534534690154025021.post-66681649483811654482010-06-30T09:03:00.000-07:002010-06-30T09:44:30.290-07:00Facebook OpenGraph的js及Flash AS3類別庫編寫完成 + 心得筆記<div class="separator" style="clear: both; text-align: center;"><a href="http://apps.facebook.com/jasonlab/" target="_blank" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHF_vYOr94RvVhll9EA-xlb6FoR7VYugGxH5G29qnjJdmMFI9ZXCddtm0J3xk_Rj9e6SKdLynxT7qRVj4jkQNVmTS865N9n_6GnE-4NrjfdWgxdJcY3LO2or1rt3LnVfEQoWPN24e43Oc/s320/jasonlab.jpg" /></a></div>Facebook OpenGraph的js及Flash AS3類別庫編寫完成 + 心得筆記<br />
<br />
由於Facebook說他們要開始使用New Data Model的Deadline是六月三十號(連結在這<a href="http://developers.facebook.com/blog/post/392">http://developers.facebook.com/blog/post/392</a>),因此一些之前已經寫好並且正在線上的iframe、connect app的使用者權限方式要做改變,否則將會發生要什麼資料就沒什麼資料的冏境。雖然說New Data Model仍然可以使用舊的Facebook Connect的permissionDialog來額外讓使用者同意New Data Model的一些新permission,但是我總覺得麻煩,而且希望畢其工於一役,要改就一次改,免得之後又來個什麼東東的deadline,就又要焦頭爛額的去改。<br />
<a name='more'></a><br />
因此,原本還想觀望一下graph api的我(因為之前bug實在太多),就乾脆直接建立一個js及as3的graph api類別庫,js的部份一併處理並簡化登入的判斷及一些access_token的取得,以及跟flash之間溝通傳值的運作,as3的部份則是簡化api呼叫的方式並且將一些常用的呼叫分別寫成類別以方便使用。一方面希望能加速我們團隊未來開發OpenGraph的速度,另一方面由於我們之前已經為了Facebook Connect建立了一套類別庫,因此這次編寫OpenGraph的類別庫的方向就是盡量在類別名稱及method、properties的使用方式都跟前一套相同,就可以進行無痛轉移。<br />
由於這套類別庫是團隊內部專案要使用,因此抱歉暫時無法分享出來(而且搞不好還有很多bug),我大概用這個類別庫寫了一個測試用app(方便自己測試及debug用),列舉一些常用到的命令,其實基本的核心就是graph api及FQL的搭配組合,flash裡可以選擇這個命令是要使用flash直接呼叫graph api或是透過js使用js sdk。<br />
有興趣的可以去玩一玩參考一下,透過httpWatch看一下的話應該就可以清楚的知道哪些命令我是怎麼去跟facebook要資料的。<br />
<a href="http://apps.facebook.com/jasonlab/">http://apps.facebook.com/jasonlab/</a><br />
<br />
<br />
接下來記錄一下這之間遇到的問題及心得,希望遇到同樣問題的人可以得到一點幫助:<br />
1. 原本Flash在IE裡透過https去要資料會造成IOError,這bug Facebook已經不知不覺把它修好了,可以放心使用。<br />
<br />
2. 但是IE仍然有get的長度限制,可是偏偏graph api取得資料是用get在取得的(post是送出資料),因此有某些狀況下IE直接用graph api無法很正確的取得資料(例如一次查詢一百多個好友資料時,得送出一百多個uid),但是如果透過js sdk卻可以查詢成功,因此一但知道自己要送出大量資料量時,可以考慮透過js sdk。<br />
<br />
3. 在使用者已經登入facebook且已經授權使用你的app時,一進入到你的app頁面,如果沒有先去執行FB.getLoginStatus的話,cookies裡是不會存有access_token的。<br />
<br />
4. IE在iframe執行FB.getLoginStatus無效的bug也在不知不覺中被Facebook修好了,但是另一個問題就產生了,IE在iframe下即使跑完FB.getLoginStatus,cookies裡仍然沒有access_token。(第五點會講解法)<br />
<br />
5. 官方文件裡告訴我們只要判斷FB.getLoginStatus裡的response.session是否有值就可視為是否已經登入,但是後來我好奇trace了一下,發現response.session裡藏了很多有用的東西,有uid、access_toke、session_key、secret等等…。後兩者可以讓舊的Facebook Connect的Flash使用,access_token及uid則是可以直接在這邊取得,不需要再去從cookies裡找,uid也不用再額外的跑一次graph api來取得。<br />
<br />
6. 又是IE!!! 使用FB.ui跳出stream.publish dialog時,在某些電腦下的IE8會被擋掉,理由是偵測到cross-site script attack,目前這問題我還沒找到解法…。<br />
<br />
7. 現在透過FB.ui來跳出對話框的時候,可以強迫指定跳出來的對話框是要像以前一樣,或是變成一個像登入視窗一樣的popup,這麼一來,flash也許就不一定要設成wmode=transparent了,但是聽說popup的大小控制好像有時不會很聽話,不過我測了一下,如果是stream.publish的話它都會自動調整大小,會出現大小有問題的狀況是我把邀請好友的介面塞到FB.ui裡會發生。<br />
<br />
8. Graph api的一些資料裡的屬性名稱會跟FQL的名稱不一樣…(幹嘛不統一一下??) ,例如個人資料裡的姓別在graph api裡叫gender,在FQL裡叫做sex,偏偏很多資料也只能靠FQL才能取得或是只有Graph api才能取得,因此這部份交叉使用時要小心。<br />
<br />
9. Graph api說要取得一個人的照片很簡單,只要http://graph.facebook.com/me/picture就可以取得,這是事實,但是如果是透過flash去讀取圖片然後又不小心要用BitmapData去draw它的話,會發生安全性錯誤(即使已經把loaderContext的checkPolicy給設成true也一樣) ,因為事實上這圖片的實際位置是在另一個地方的,因此我最後只好捨棄這個簡易的方式,仍然乖乖的去跟FQL要實際的圖檔位址。<br />
<br />
10. Graph api裡理論上每個東西都有一個id,這id其實叫做object_id,但是真正的還有另一個id,例如每個相簿有自己的aid,這個aid跟object_id一定不一樣,跟FQL要資料時,FQL認的是aid不是object_id。<br />
<br />
<br />
其它想到再補充…<div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com19tag:blogger.com,1999:blog-3534534690154025021.post-88580519912881198852010-05-26T00:17:00.000-07:002010-05-26T00:17:30.828-07:00[徵才廣告] 米蘭數位徵才米蘭就是我現在待的公司,要徵人~ 有興趣的或有認識的朋友想轉跑道的歡迎來試試啊~<br />
兩個職務:<br />
<br />
=============================================<br />
<b>ActionScript3互動技術程式設計師</b><br />
<br />
如果你:<br />
1. 對互動技術或RIA具有莫名的熱情與執著<br />
2. 希望與強力的互動團隊一起討論及開發日新月異的新技術,並樂此不疲深陷其中<br />
3. 尋求一個舞台可以將你的技術與創意完美結合<br />
請立刻加入我們!<br />
<br />
<br />
我們需要的是:<br />
1. 需熟悉ActionScript3及物件導向<br />
2. 不需要懂Server端語言或資料庫, 但要有概念<br />
3. 樂天且積極的態度 - 工作中不忘記笑聲,閒下來時仍不時想要充實自己<br />
4. 喜歡與團隊合作的默契 - 米蘭是個大家庭,團隊之間互相協助幫忙讓工作更不像是工作<br />
5. 具有克服問題的能力 - 工作上一定會遇到難題,要如何克服問題而不是被問題卡住,即使舉手尋求幫助也是克服問題的一種方法<br />
6. 履歷中希望能附上作品或是能展示能力的任何東西<br />
<br />
履歷請寄: jason@mail.medialand.com.tw<br />
<br />
想瞭解米蘭數位:<br />
米蘭數位官網 - http://www.medialand.com.tw/<br />
米蘭數位Blog - http://medialand.com.tw/blog/<br />
<br />
<br />
=============================================<br />
<b>資深Internet程式設計師</b><br />
<br />
1.具程式開發能力3年以上<br />
2.熟悉ASP、ASP.NET、VB.NET、C#<br />
3.熟悉ADO.NET Entity Framework 或 LINQ<br />
4.熟悉SQL Server資料庫設計及維護能力<br />
5.了解AJAX、jQuery、Javascript、CSS<br />
6.了解MS平台架構,具備伺服器架構及管理經驗<br />
7.擅長Web Base系統開發架構規劃設計及需求分析<br />
8.具溝通協調能力、熟悉Team Work開發模式<br />
9.責任制,視專案狀況需配合加班<br />
<br />
履歷請寄:<br />
tang@mail.medialand.com.tw<br />
或jason@mail.medialand.com.tw皆可<div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com3tag:blogger.com,1999:blog-3534534690154025021.post-25302034991901026642010-05-17T07:04:00.000-07:002010-05-17T07:04:29.845-07:00Facebook Open Graph的登入授權方式上一篇有說過,Open Graph的登入授權已經不像是以前Facebook Connect一樣。在Connect的時候,我們需要取得session_key以及動態的secret,而現在Open Graph則主要只需要一個key值,他們叫它access_token。<br />
老實說我不知道這樣會不會比較安全,但是既然Facebook這樣做,我們靠它吃飯的也只好跟著做,不過至少,Open Graph取得access_token的方式可說是十分簡易呢,不用像Connect時代一樣傷透腦筋。<br />
<br />
就像剛說的,要取得access_token很簡單。官方文件寫很多,但是歸納起來就是兩種方法而已,一個是透過網頁導向授權取得,另一種則是透過JS Api來取得。最常使用的當然是用JS Api,但是一定有某些因素Facebook才會提供導向式的方式取得授權,也許是某些application需要使用者一開始就是登入狀態,或是一些Desktop application無法使用JS Api… etc。<br />
<br />
<br />
<a name='more'></a><br />
<br />
<b>從網頁導向取得:</b><br />
網頁導向的有兩種,一種是這for Web Application的:<a href="http://developers.facebook.com/docs/authentication/">http://developers.facebook.com/docs/authentication/</a><br />
往下拉去看「Authenticating Users in a Web Application」。<br />
另外一種是for Desktop的:<a href="http://developers.facebook.com/docs/authentication/desktop">http://developers.facebook.com/docs/authentication/desktop</a><br />
(還有for Mobile device的,但大同小異)<br />
<br />
但是基本上我覺得第一種實在太麻煩了…。它要先導向到某頁面,然後Facebook會丟一個code給我們,我們再用這個code去跟Facebook的某頁面取得真正的access_token,步驟不少。<br />
第二種比較直覺,直接把參數帶一帶,導過去,Facebook就會把access_token帶在網址後端回傳回來了。原本Facebook的文件裡說要傳一個type=user-agent的參數,結果我試了老半天怎麼試都不ok,最後才發現應該是type=user_agent才對,現在的文件終於寫對了。<br />
第二種感覺雖然比較直覺,但是我發現在IE上跑會導不回來(我是用IE6測試的,不確定其它版本的IE是否也會這樣),所以如果第二種方法遇到了IE6就死路一條,永遠得不到access_token…。(雖然我知道IE6早就是人神共憤了,可是偏偏客戶很愛啊…)<br />
<br />
<b>從JS Api取得:</b><br />
Open Graph的JS Api處理登入的部份真的簡單到很可愛,基本上只要照前一篇文章的方法把JS的code放到html裡,然後處理一下是否登入的事件判斷:<br />
<textarea class="javascript" name="code"><br /> <div id="fb-root"><br /> </div><br /> <script><br /> var api_id = “你申請的application id”;<br /> window.fbAsyncInit = function() {<br /> FB.init({appId: api_id, status: true, cookie: true, xfbml: true});<br /> FB.Event.subscribe('auth.sessionChange', function(response) {<br /> if (response.session) {<br /> //使用者登入,資料寫入cookies裡<br /> } else {<br /> //使用者登出,cookies被清掉 <br /> }<br /> });<br /> };<br /> (function() {<br /> var e = document.createElement('script'); e.async = true;<br /> e.src = document.location.protocol + '//connect.facebook.net/zh_TW/all.js';<br /> document.getElementById('fb-root').appendChild(e);<br /> }());<br /> </script><br /> </textarea><br />
<br />
在if(response.session)成立時,表示使用者進行登入的動作成功,這時我們就需要在這邊來拿取我們所要的access_token。<br />
Open Graph會把一些資訊儲存在cookies裡,其中就包含了access_token。Open Graph是把資料存在名為”fbs_”+你的api_id的cookies裡,裡面會是一堆aaa=abcd&bbb=bcde的字串資料,access_token就埋在裡面,所以我們只要取出access_token=xxx就好。<br />
<br />
取得了access_token之後,就可以直接使用這個access_token來跟Graph Api進行溝通。<br />
但是我目前還不是很確定我們取得的這個access_token的「使用範圍」,這就是我對於access_token是否安全會有疑問的地方。假設我現在是用chrome來取得access_token,理論上這個access_token應該只能在同一個session的瀏覽器中才可以被使用(一般web的既定想法是這樣),但是我卻可以使用這個access_token在Firefox上…。所以就是說,我可以先開一個視窗取得access_token之後,把這個access_token拿去別的地方使用也可以work。<br />
<br />
<br />
嗯,對的,Flash裡也可以用。<br />
所以這一點順便解決了Flash裡處理Open Graph認證的問題。<div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com14tag:blogger.com,1999:blog-3534534690154025021.post-34955295644963651082010-05-10T07:55:00.000-07:002010-05-10T09:02:50.923-07:00Facebook Open Graph試玩心得<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNDjF0WID3k0sBiueMPUyNd5Er0sLujCPWHSPiM3pHmTZIBHb9UVoBwOKU2rFyZ77ZcNI-v0Eir_HgoYtQI7oU6NMXkmURRa75FmQpfM1KPJIVnaT7W_b4DEMi3WgdmdEQGJGii9i0fxk/s1600/opengraph.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNDjF0WID3k0sBiueMPUyNd5Er0sLujCPWHSPiM3pHmTZIBHb9UVoBwOKU2rFyZ77ZcNI-v0Eir_HgoYtQI7oU6NMXkmURRa75FmQpfM1KPJIVnaT7W_b4DEMi3WgdmdEQGJGii9i0fxk/s320/opengraph.jpg" /></a></div><br />
<br />
Facebook前一陣子宣佈了Open Graph這東西,說實在反應很兩極化,多半都是跟隱私權有關係,另一個部份就是跟使用者行為的精準度分析有關,一但讓Facebook的手滲透入大部份使用者的網站或Blog之後,Facebook所能得到的資料可是非常值錢的東西啊…。 <br />
<br />
<br />
不過這種邪惡的趨勢及商業行為的東西不是今天這篇要聊的。 <br />
<br />
<br />
<br />
今天試玩了一下Open Graph,所以就來寫寫心得。 <br />
<br />
<br />
<a name='more'></a><br />
<br />
<b>所以Open Graph是…? </b><br />
其實Open Graph跟Facebook Connect感覺起來「差不多」,畢竟是要來取代Facebook Connect的,基本上大概分兩部份: <br />
<br />
<b>1. Graph API:</b>資料查詢的api,使用的是<a href="http://opengraphprotocol.org/">Open Graph Protocol</a> ,目前為止查詢的資料還是以Facebook裡的資料為主,但既然已經有了semantic的雛型…以後等資料量夠多時,應該就可以跟Google一拼了吧…。 <br />
<br />
<b>2. Social Plugin:</b>大部份的人最喜歡的應該就是這個了,可以很簡單的把一些Facebook的東西放到自己網站上。不過說穿了這個就是Facebook Connect裡的XFBML。所以為了要讓更多人可以很方便的在自己的網站上放入Social Plugin,Open Graph已經不需要放置一個xd_receiver.htm檔,所以現在連Blog也可以置入Social Plugin,我試了一下,在這個blog的每篇文張都放了個「讚」跟「分享鈕」,而且沒花很多時間,很容易就可以上手…。 <br />
<br />
<br />
<br />
<b>登入認證方式的改變 </b><br />
這應該是最讓人「驚恐」的部份,從Open Graph開始,登入權限的認證方式改用OAuth 2.0,舊式取得Session的方法將會在Facebook正式廢掉Connect之後失效。(好想哭啊… 光是要改寫舊有的一些案子就要改死了…)<br />
<br />
更讓人冷汗直冒的,就是一想到如果將來連一些舊有的api都要改成Graph API來查詢資料時,那... 就很哭哭了。希望Facebook可以「慢慢的」廢掉Connect。 <br />
<br />
<br />
<b>實作時間 </b><br />
<b>1.申請Application:</b>嗯,Open Graph一樣要申請Application,申請頁面變成這裡:<a href="http://developers.facebook.com/setup/">http://developers.facebook.com/setup/</a>。申請完後的管理介面一樣會跟你現有的一些App一樣,所以我不曉得為啥申請的位置不同,我想應該只是進入點不同而已吧? <br />
<br />
<b>2.初始化OpenGraph:</b>嗯,跟Facebook Connect一樣,還是要初始化(當然啊),因為OAuth2.0的認證方式我還沒仔細去看,所以這邊就直接很簡單的照Facebook官方建議的寫法去寫就好了: <br />
<br />
在html的body裡放置以下這一段code。 <br />
要修改的只有把application id取代成你自己的就好。 <br />
<br />
<textarea class="javascript" name="code"> <br /> <div id="fb-root"></div><br /> <script><br /> window.fbAsyncInit = function() {<br /> FB.init({appId: '你申請的application id', status: true, cookie: true, xfbml: true});<br /> };<br /> (function() {<br /> var e = document.createElement('script');<br /> e.type = 'text/javascript';<br /> e.src = document.location.protocol +<br /> '//connect.facebook.net/zh_TW/all.js';<br /> e.async = true;<br /> document.getElementById('fb-root').appendChild(e);<br /> }());<br /> </script><br /> </textarea><br />
<br />
<br />
就好了!! <br />
<br />
<b>3.放一個「讚」的鈕試試:</b>在html的body裡放上這個<br />
<textarea class="javascript" name="code"> <fb:like></fb:like></textarea><br />
然後重讀一下頁面,沒意外的話就會看到一個讚的鈕了。有沒有很快?這種快速把facebook的功能plugin到其它網頁的方法讓我感到很害怕。<br />
<br />
<b>4.還有其它一些Social Plugin</b>,可以去這邊看<a href="http://developers.facebook.com/plugins">http://developers.facebook.com/plugins</a> <br />
<br />
目前有八個,其實應該更多,以前Connect的XFBML其實都可以拿來用,而且如果Facebook要快速擴大這個版圖,一定會再出一些方便的Plugin給非開發人員來用。 <br />
<br />
<br />
題外話, <br />
<br />
我個人是很喜歡comments這個Plugin,因為它沒限制你一個網站能放幾個,所以跟本就可以直接拿來當免費的留言版來用…XD。 <br />
<br />
還有… 「讚」這功能有點小麻煩,Facebook說我們可以盡量把「讚」放到使用者想點「讚」的東西旁邊,可是這個讚是直接針對網址在讚的啊…,所以如果是要讚文章裡的某一段話或是網頁上的某一個東西還不行咧… (其實可以,要生出相對映的「實際網頁」去讓讚去讀就是了)。<div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com4tag:blogger.com,1999:blog-3534534690154025021.post-10251802653148220752010-04-28T10:28:00.000-07:002010-04-28T10:37:24.685-07:00AS3裡出現不Single的Singleton<div class="MsoNormal"><span class="Apple-style-span" style="font-family: inherit;">簡單的來說,就是有時候明明是使用</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">Singleton.getInstance()</span></span><span class="Apple-style-span" style="font-family: inherit;">但取得的</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">instance</span></span><span class="Apple-style-span" style="font-family: inherit;">就偏偏不是同一個。</span></div><div class="MsoNormal"><span class="Apple-style-span" style="font-family: inherit;">一樣是一個開發上常會遇到的問題,今天我又遇到了,一下子以為是程式哪裡有</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">bug</span></span><span class="Apple-style-span" style="font-family: inherit;">,後來再看一下發現原來自己忘了會有這種情況發生,所以這次要記得寫下來放在</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">blog</span></span><span class="Apple-style-span" style="font-family: inherit;">上,免得以後自己又犯。</span></div><div class="MsoNormal"><span class="Apple-style-span" style="font-family: inherit;"><br />
</span></div><div class="MsoNormal"><span class="Apple-style-span" style="font-family: inherit;">這問題會在這樣的結構下發生:</span></div><div class="MsoNormal"><span class="Apple-style-span" style="font-family: inherit;">假設有一個載體</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">A.swf</span></span><span class="Apple-style-span" style="font-family: inherit;">,它會載入</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">B.swf</span></span><span class="Apple-style-span" style="font-family: inherit;">及</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">C.swf</span></span><span class="Apple-style-span" style="font-family: inherit;">,然後有一個</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">Singleton Class</span></span><span class="Apple-style-span" style="font-family: inherit;">,就叫</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">Singleton</span></span><span class="Apple-style-span" style="font-family: inherit;">好了。</span></div><div class="MsoNormal"><span class="Apple-style-span" style="font-family: inherit;">其中,</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">B.swf</span></span><span class="Apple-style-span" style="font-family: inherit;">及</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">C.swf</span></span><span class="Apple-style-span" style="font-family: inherit;">都會使用</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">Singleton.getInstance()</span></span><span class="Apple-style-span" style="font-family: inherit;">來取得實體進行資料交換的動作,但是如果</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">A.swf</span></span><span class="Apple-style-span" style="font-family: inherit;">沒有先進行</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">Singleton.getInstance()</span></span><span class="Apple-style-span" style="font-family: inherit;">的話,</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">B.swf</span></span><span class="Apple-style-span" style="font-family: inherit;">跟</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">C.swf</span></span><span class="Apple-style-span" style="font-family: inherit;">所取得的實體會是不一樣的,這樣就一點都不</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">single</span></span><span class="Apple-style-span" style="font-family: inherit;">了。</span></div><div class="MsoNormal"><span class="Apple-style-span" style="font-family: inherit;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span></div><div class="MsoNormal"><span class="Apple-style-span" style="font-family: inherit;">解決方法一種就像剛剛講的,先在</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">A.swf</span></span><span class="Apple-style-span" style="font-family: inherit;">去取得</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">Singleton</span></span><span class="Apple-style-span" style="font-family: inherit;">的實體,但是這樣一來</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">A.swf</span></span><span class="Apple-style-span" style="font-family: inherit;">就永遠沒辦法跟</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">B.swf</span></span><span class="Apple-style-span" style="font-family: inherit;">及</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">C.swf</span></span><span class="Apple-style-span" style="font-family: inherit;">進行鬆綁,是挺爛的一個解決方法。</span><br />
<span class="Apple-style-span" style="font-family: inherit;"><br />
</span></div><span class="Apple-style-span" style="font-family: inherit;">另一個比較標準的解決方法就是在載入</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">B.swf</span></span><span class="Apple-style-span" style="font-family: inherit;">及</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">C.swf</span></span><span class="Apple-style-span" style="font-family: inherit;">時順便把</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">LoaderContext</span></span><span class="Apple-style-span" style="font-family: inherit;">的</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">applicationDomain</span></span><span class="Apple-style-span" style="font-family: inherit;">設成</span><span lang="EN-US"><span class="Apple-style-span" style="font-family: inherit;">ApplicationDomain.currentDomain</span></span><span class="Apple-style-span" style="font-family: inherit;">就好了。</span><div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com4tag:blogger.com,1999:blog-3534534690154025021.post-66998841859390632152010-03-04T06:36:00.000-08:002010-03-04T06:58:18.900-08:00試作TTS (Text-To-Speech) for Flash今天有朋友分享一個Flash的Text-To-Speech服務,網址在這<br />
<a href="http://www.flashrealtime.com/real-text-to-speech-for-your-flash-apps/">http://www.flashrealtime.com/real-text-to-speech-for-your-flash-apps/</a>。<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwPRbmrgvj3cMeeLY5t-2zk0qKrzhQtY0WO6v7JcEGBU_QeHGmsHTIFcQSvcH-gtVc6ximMhhve3SpFaX7hU6017AY7BNYuWLWGjrHDJuS2rQl51IP65j9oDx6ZpN9oZmQ8uoKAS27D5k/s1600-h/logo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwPRbmrgvj3cMeeLY5t-2zk0qKrzhQtY0WO6v7JcEGBU_QeHGmsHTIFcQSvcH-gtVc6ximMhhve3SpFaX7hU6017AY7BNYuWLWGjrHDJuS2rQl51IP65j9oDx6ZpN9oZmQ8uoKAS27D5k/s320/logo.jpg" /></a></div><br />
<br />
<br />
這讓我突然想起來,之前因為專案的需求,曾經找過類似的資料,當時由於忙別的東西,所以就停了下來沒把這TTS寫出來。<br />
其實這種TTS的服務有一個遠在天邊近在眼前,那就是Google。<br />
<br />
Google並沒有真的「公開」的提供TTS的api給大家用,但是它卻有一個服務是有TTS功能的,而且TTS因為是聲音檔的關係,所以並不需要crossdomain policy就可以播放(當然,如果你要把它丟進mixer裡就是另一回事了)。因此這個服務即使Google沒有置放crossdomain.xml,也可以「不要太明目張膽」的使用。(<b><span style="color: #990000;">如果要商業上使用請小心啊... 最好不要亂用...</span></b>)<br />
喔對,這個服務就是「Google翻譯」。<br />
<br />
不過不管是上面那個FlashRealtime的TTS或是Google翻譯TTS,<b>都.不.支.援.中.文</b>!!<br />
<br />
但我還是寫了一下powered by Google的TTS。 <br />
<div class="separator" style="clear: both; text-align: center;"></div><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgefwJovzHmJ7T77ZJyBVjigJmvQPSWcXC2eWNVamnG-_RfmvWkqBrBRnOFH7SMtO-GjeMv3p0p_8Lpsp8nzgy30Up_1S41PS7GlHfJ68nMWuXGUg7yekGSTkGJCnyUiSL0k64-htDgZlo/s1600-h/tts_small.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgefwJovzHmJ7T77ZJyBVjigJmvQPSWcXC2eWNVamnG-_RfmvWkqBrBRnOFH7SMtO-GjeMv3p0p_8Lpsp8nzgy30Up_1S41PS7GlHfJ68nMWuXGUg7yekGSTkGJCnyUiSL0k64-htDgZlo/s320/tts_small.jpg" /></a></div><a href="http://staticx.myweb.hinet.net/jasonblog/20100304/tts.swf">swf在這裡</a><br />
<br />
整個程式十分簡單,就是直接new一個Sound類別去load一串網址而已:<br />
http://translate.google.com.tw/translate_tts?tl=en&q=whatever you want to speek<br />
<br />
就結束了。<br />
<br />
因為之前有寫好了mp3切割及串接的類別檔,想說既然是可以直接用Sound類別讀進來,那應該就是mp3格式了吧?<br />
於是順便的Google丟出來的東西丟到我的類別檔裡,但是結果卻發現它不是正確的mp3格式!?<br />
這個問題目前還是無解,挺怪。<br />
<br />
另外一個奇怪的問題,在本機寫這個TTS的時候,我送出request一直收到IOError,但是一擺到瀏覽器裡去看就ok!?<br />
我猜Google應該是有做了什麼手腳限定一定要用瀏覽器才給資料吧?<br />
<br />
總之就是這樣。<div class="blogger-post-footer"><fb:like></fb:like></div>Anonymoushttp://www.blogger.com/profile/01924633745117298977noreply@blogger.com1