顯示具有 Flash 標籤的文章。 顯示所有文章
顯示具有 Flash 標籤的文章。 顯示所有文章

2012年2月23日 星期四

既然Flash版GoogleMap不再發新的key…



總覺得自己老是在走偏門…=_=。

自從GoogleMap Flash版停止再發送key值之後,GoogleMap的Flash版本等於正式走入歷史,也因此我們要在flash裡使用GoogleMap的話會變得很頭大。
雖然說以後全flash的網站「理論上」會越來越少,應該都會是flash搭配html一起邁向美好的未來,但是有時難免客戶(或設計師)為了整體視覺著想(或其它因素),一定要在flash使用GoogleMap的話,那就是我們要苦往肚子裡吞的時候了。
這兩天研究了一下,想說看有沒有辦法弄一個簡單的GoogleMap到flash裡,結果似乎是可行的。
說穿了,原理其實就是計算經緯度,然後跟Google「偷偷」的拿取該經緯度下的圖片,再呈現在flash裡而已。

GoogleMap的圖片區塊
可以先參考一下這一篇:
http://code.google.com/intl/zh-TW/apis/maps/documentation/javascript/v2/overlays.html#Google_Maps_Coordinates
要取得圖片的網址很簡單,瞄一下httpWatch的話就會知道,格式類似這樣:
http://mt0.googleapis.com/vt?lyrs=m@170000000&src=apiv3&hl=zh-TW&x=1&y=1&z=15&s=G&style=api|smartmaps
Google把地圖切分成很多區塊,每一個區塊(Tile)的圖片大小是256X256,在不同級數之下會有不同數量區塊,數量的增加是以2的次方在增加的。

也就是說,在縮放等級(zoom)是0的情況之下,世界地圖只有2的0次方=1張的圖片,zoom=2的時候,x軸及y軸各有2的2次方=4張圖,一共16張圖。
有了這個概念的時候,我們就可以依照zoom的大小,配上實際經緯度投射到平面座標上的點,來找出目前該經緯度所對應到的圖片,然後再從Google那邊把圖抓回來就對了,剛剛上面的圖片網址裡,x及y就是代表該區塊的index值,z則是縮放值。

經緯度的投射座標
既然已經知道地圖被切成多少區塊,就很方便取得了,但麻煩的在於經緯度。
GoogleMap使用的是「麥卡托投影法」來計算經緯度,請參考wiki:
http://zh.wikipedia.org/wiki/%E9%BA%A5%E5%8D%A1%E6%89%98%E6%8A%95%E5%BD%B1
這種投影法將地球投影成圓柱狀體,也因此,經度的部份是從最左邊的-180到最右邊的180度,平均均分地圖上的所有x軸距離。
於是我們可以很簡單的計算出某一個經度應該對應到實際像素裡的哪一個x值,因為經度是平均切割整個世界地圖的,所以純粹只是比例的換算而已。
麻煩的在於緯度。
緯度並不是平均切割地球的從南到北,越靠近極點,形變就越大。
感謝wiki,我們不用自己去導出投影的公式,wiki已經幫我們列出來了:

上半部是由經緯度計算出x及y的值,下半部是由x跟y的值反算出經緯度,由於我們要將經緯度用在GoogleMap圖片的像素值上,因此我們只要再加上一些參數做修正其實就可以了。

結果
我花了一點時間實作了一下,結果在這邊:

http://labs.medialand.com.tw/jason/flash/googlemap/
原始檔下載
輸入經緯度及放大級數,這flash就會把周邊的地圖載入進來。
其它的,例如:拖動地圖…等等的,我就沒時間再寫了,反正都已經能正確取得圖片及計算出座標值,其它的就是另外一種工作了。
比較需要注意的是
1. 這只是簡單的地圖,畢竟不能跟完整個GoogleMap相比(當然你要寫得超屌也可以)
2. 經過測試,無法去draw載進來的地圖,crossdomain的關係。
3. 一樣是crossdomain的關係,其它的GoogleMap api,像是地址反查這種功能,在web的flash裡也無法直接去做query,可能還是得透過js去做中繼。
4. 這是旁門左道,非必要的話還是請愛用GoogleMap v3。


2010年7月24日 星期六

改善向量動畫造成的效能問題 - AniClip類別


這並不是什麼新概念也不是新東西,而且大家也都知道點陣圖對cup造成的負擔比向量圖來得少。
簡單的說,就是將MovieClip裡每一個影格的畫面都事先用bitmapdata畫起來,再依序播放,這樣雖然吃記憶體,但是很多時候可以減輕cpu的loading,讓整個網站跑起來不會卡卡的。


最早之前是看到bytearray部落格上發表的Banana Slice元件(http://www.bytearray.org/?p=117),真的很久了,兩年前了。當時由於自己本身十分不喜歡用元件的關係,所以想說有空自己再來寫一個類別。結果,人嘛…惰性,時間久了,工作上遇到相關的問題時,也都想辦法先用別的方式解決掉,就一直沒有要把它寫一個真正的類別檔出來。

2010年6月30日 星期三

Facebook OpenGraph的js及Flash AS3類別庫編寫完成 + 心得筆記


Facebook OpenGraph的js及Flash AS3類別庫編寫完成 + 心得筆記

由於Facebook說他們要開始使用New Data Model的Deadline是六月三十號(連結在這http://developers.facebook.com/blog/post/392),因此一些之前已經寫好並且正在線上的iframe、connect app的使用者權限方式要做改變,否則將會發生要什麼資料就沒什麼資料的冏境。雖然說New Data Model仍然可以使用舊的Facebook Connect的permissionDialog來額外讓使用者同意New Data Model的一些新permission,但是我總覺得麻煩,而且希望畢其工於一役,要改就一次改,免得之後又來個什麼東東的deadline,就又要焦頭爛額的去改。