伊沙熊的學習筆記本

　　Adobe Labs宣佈了一個重要的訊息:Flash Professional CS5 BETA版將在2009年底前開放下載, 也就是說離正式版的推出也不遠了, 這個消息真是讓人又愛又恨, 很多人可能CS4還沒摸熟, CS5就又要出了, 難道不怕CS4系列變成過渡產品嗎, 也或許這正是Adobe的意思, 自從推出Flex後, 編輯器Flex Builder更新頻仍, 後來改名Flash Builder, 已經有和Flash IDE整併的意味, 現在又宣佈Flash CS5將內建Flash Builder, 原本開發路線分歧讓使用者選邊站並非良策, 只會分散愛好族群而已, 能夠合併真是個好消息, 但也要期待整合性能完善一點, 希望不要只是造出一隻更肥大的怪物。

　　在Facebook裡開發應用程式, 有分為Iframe和FBML二種作法, 前者直接用iframe嵌入, 開發起來較直覺; 後者則是用Facebook的預設語法來產生介面, 可以製造出和Facebook較一致的介面。

　　在FBML中也可以嵌入flash, 使用的標籤是fb:swf (?), 但是render出的flash卻有一個小問題：無法輸入中文, 這是因為預設的wmode是透明模式(transparent), 只要把wmode設為window就可以解決。只是設為window後還是會有個小問題, 就是在做內建的publish story等會跳出視窗的動作時, 底下的flash會消失, 這可能是因為Facebook要解決flash和div無法相疊的問題 (flash會壓在div上), 還好視窗關閉後就會重新回到flash, 不會造成太大問題。

　　工作至今已數個月, 自開始接觸flash以來, 算一算也剛好滿一年了, 在這期間學了好多東西, 這次玩的是三人連線互動, 進行默契大考驗, 獎品還滿誘人的, 第一週有PSP :D

　　上面這個部落貼是將3D標籤雲, 略加修改而成的應用, 這次Art廖伯用了很多向量圖, 所以檔案量很小, 但是效能上的微調也就更加重要, 除了快取點陣圖外, 還要做動畫的管理; 連線互動是第一次嘗試, 偏偏案子實際交到手上時, 只剩下不到3天的工作日, 差點沒爆肝..XD, 不過總算是"準時"完工。這次動用的技巧頗多, 可以說是滿難得的一次經驗。

　　昨天Google Maps的台灣、葡萄牙及瑞士版street view(街景)功能上線囉, 目前台灣版本只有台北地區有街景資訊。street view真的是很酷的功能, 有了它, 在實際踏進一個區域前, 就可以事先找路、找店家、找停車點, 所謂「秀才不出門，能知天下事」在今日的科技加持下, 顯得更容易了。

　　在原本的地圖控制列上有一個小人, Google稱之為「衣夾人」, 如果地圖中有街景資訊, 衣夾人就會從灰色變橘色, 把衣夾人拖進地圖中, 路線會變藍色, 把衣夾人的陰影放到要看的點即可。放進去後衣夾人底下會出現指標, 代表面向的方位。

　　街景圖記錄了人間百態, 難免會有不少有趣的畫面, 國外的street view版本出得比較早, 所以討論也很多, 像這篇, 有一些照片縫合產生的詭異圖像、意外拍到的上空女郎、疑似外星人,甚至是正在翻牆的小偷, 也難怪有些人會對街景圖產生了侵犯隱私權的疑慮, 所以Google對於人臉和車牌都做了模糊的處理, 連肯德基爺爺都不放過：

　　WordPress有一款名為WP-Cumulus的外掛, 可以將文章標籤展現為3D雲的形式, 很喜歡這個效果, 於是用papervision3D仿做了類似的動態, 順便寫了一點程式, 可以預覽並產生部落貼語法, 貼在樂多的自由欄位中, 就可以自動取代內建的標籤雲轉為3D版本, 效果見左側欄位, 分享給一樣喜歡立體特效的樂多部落客們。

預覽結果：

延伸閱讀：
‧3D標籤雲不再是WordPress獨有 » 樂多也可以

步驟一：點選上傳個人照。
步驟二：移動、縮放、旋轉照片, 以紅線為置中線, 滑鼠停留在Flash可觀看結果。

　　點子來源是地圖日記的左右臉製造機, 不過懶得申請帳號, 只好自己寫一個 (雖然好像花了更多時間XD), Flash player 10 的 FileReference 類別 load()、save() 函式可以支援直接上傳/下載本機檔案, 而不用經過伺服器端, 剛好可以玩一下。

　　既然Flash有支援全螢幕模式, 不好好利用實在浪費, 想到一個小點子, 做了一個線上版的LCD螢幕測試工具, 可以用來檢查亮點、對比等資訊的應用, 很簡單但是應該還夠用。至少不需要把測試軟體帶來帶去, 螢幕還在亮點保固內的可以偶爾瞄一瞄, 用很久的就算囉XD

測試步驟主要有3大部份

1. 第一部份是單色及RGB色彩漸層, 可用來檢查亮點, 以及色彩分佈是否均勻。
2. 然後是對比度, 螢幕最好能調整到可以分辨出每個色塊
3. 再來是螢幕掃描與精準度, 越好的螢幕在網點部份波動越少; 顯示精準度尤其是四個邊角, 注意是否有扭曲。

　　和【技術】嵌入全畫面的Flash並設定最小高與寬這篇不同, flash有展開至全螢幕的功能。把Flash擴展到整個螢幕, 只是有一些限制: 非AIR模式時, 鍵盤輸入除了方向鍵、空格鍵和 Tab 鍵、ESC (Windows 和 Mac)、Control+W (Windows)、Command+W (Mac) 以及 Alt+F4 外, 都會被停用, 還有文字輸入欄位也會失效。

　　基本上, Adobe的文件已經寫得很清楚, 見http://help.adobe.com/的Adobe ActionScript 3.0 * 使用全螢幕模式, 在這裡做個備忘。

　　好久沒有玩點基礎的東西了, 有時候會想: 技術和創意成正比嗎? 實際體驗後的結論是: 不見得。新奇的技術會讓使用者產生新鮮感, 但是不見得能傳達出正確的核心想法, 很多優良的海報型廣告, 光靠一個靜態畫面就能吸引目光、展現訴求, Flash多了動態, 照理說可以表達出更多東西, 可是有時卻是相反, 有些網站技術超群, 看了之後總是: 哇 好炫! 怎麼做的？有趣。卻反而使人轉移焦點, 關掉網站後, 連網站內介紹的是什麼都忘了, 當目光不是放在網站的內容(what)而是技術(how), 這樣就很可惜了。創意和技術就好比是電影的劇情與特效, 有劇情沒特效可以是小品, 沒有劇情空有特效卻很空虛, 要怎麼拿捏很重要。過與不及都不算好, 就好像太過華麗的文案會讓使用者一頭霧水; 太多物件的畫面會讓視覺失焦, 技術面也是一樣的道理。

　　並不是說技術不重要, 何況身為一個技術人員, 技術面當然是越深越好, 但是如果能把簡單的技術玩得有趣也很是厲害, 舉例來說, 最基本的beginGradientFill()函式, 稍微改變一下focalPointRatio和旋轉填色方向, 就多了些動態變化, 可以做動態背景或者3D的貼圖, 用法很有創意空間。

JavaScript偶爾會寫一點, 但是老是忘東忘西, 也來備忘一下好了。

效果如下：
有浮水印的文字欄位：

<input name="textfield" type="text"  value="浮水印自訂文字" style="color: #AAAAAA;" onfocus="if (this.value == '浮水印自訂文字') {this.value = ''; this.style.color='#333333'}" onblur="if (this.value == '') {this.value = '浮水印自訂文字'; this.style.color='#AAAAAA'}" >

另外, Flash也可以這樣玩

SwirlX3D Viewer
http://www.pinecoast.com/swvdownload.htm
‧優點: 可讀取VRML, X3D, Collada, 3DS, OBJ, PLY, STL等格式
‧缺點: 它可讀取的Collada不一定能被papervision3D接受, 有時是反過來

MAD VERTICES - DAE File Viewer
http://www.madvertices.com/2008/02/dae-file-viewer.html
‧優點: 使用papervision3D建置, 檔案能不能支援一目瞭然
‧缺點: 不能指定檔案

daeviewer (AIR)
http://code.google.com/p/daeviewer/
‧優點: AIR應用, 可拖曳檔案讀取
‧缺點: 操作介面是用slider, 不是我想要的方式

　　加上先前關注的VizualPV3D雖然已經宣告支援Collada載入功能, 但停留在Alpha版且未釋出, 只好自己先寫一個簡單的小工具了。

　　3D的應用不時都會和2D結合, 上一篇的Big and Small有部份是將2D的影像以粒子(particle)等方式置於場景中，一樣有z深度, 也會因為場景的移動而被遮蓋、縮放, 本質上還是MovieClip, 這是2D置入3D畫面的方法; 有時的應用則是需要3D置於2D之上, 因全3D畫面的運算負荷過重, 所以把2D畫面當主軸, 需要時才轉換, 這時候就要用對位的方式, 讓3D物件從2D畫面銜接上來, 聽起來似乎很難, 但其實是很簡單的公式就能達成。

【觀看範例】2D部份是影格動畫, 按下"3D"後隱藏物件並換上3D圖 (隨滑鼠轉動)

公式參考來源: Everyday Flash | demo

　　寫Flash程式和用介面製作相比，最麻煩的就是無法預覽，每每都得重編來看結果，偏偏Flash IDE或Flex的編譯效能都不是很好，只要改個小地方就要重頭到尾重編一次，程式一多就會很耗時，如果能夠有介面能預覽程式效果不知有多好；尤其是3D程式設計，實際應用裡不可能全3D，常常要和一些平面選單或圖形相結合，可是立體畫面要精準地對位到2D畫面很不容易，primitive貼圖有沒有貼歪、攝影機位置要怎麼拿捏都是困擾…

　　但是有需求就有供應，真的有高手開發了這樣的工具：VizualPV3D。可以在類似3D編輯軟體的預覽畫面中調整各種參數，雖然現在剛釋出陽春的ALPHA版，但是依設計格局來看顯得很有野心，未來應該還會大幅加強，真的是開發者一大福音阿。

• VizualPV3D
• 連結: www.juxtinteractive.../vizualpv3d/
• 下載: www.juxtinteractive.../vizualpv3d.zip
• 釋出版本: 0.9.084 ALPHA 測試版
• 功能簡介: 目前為全Flash介面、讀取/寫入場景xml、新增/編輯primitive、plane、向量svg、text及貼圖(支援影像檔或打包輸出的swf)，燈光(一組)、攝影機調整。

　　Google在4月21日釋出了O3D，光看它的摘要說明就可以了解：An open-source web API for creating rich, interactive 3D applications in the browser。可以在瀏覽器上執行3D程式，不是透過Flash，而是安裝瀏覽器外掛，所以能夠突破較多限制，甚至可以支援硬體加速，讀取的模型檔是COLLADA(*.dae)，還可以將要讀入的媒體檔壓縮打包成tgz格式，介面則是透過JavaScript控制，目前還沒有支援Flash的跡象。

1. root.loaderInfo
2. LocalConnection
3. ExternalInterface

這篇算是【介紹】在Flash中開啟新視窗(AS 2 & 3) 中第二個作法的延伸：開啟置中的小視窗。搭配更完整的javascript語法。

範例如下：

JavaScript函式宣告：(toolbar=no/yes...等參數可以設定小視窗外觀)

function winopen(url,winN,winW,winH){
        winX=(screen.width-winW)/2;
        winY=(screen.height-winH)/2;
        popwin = window.open(url,winN,'left='+winX+',top='+winY+',width='+winW+',height='+winH+',toolbar=no,scrollbars=auto,resizable=no,directories=no,status=no,location=no');
        popwin.focus();
}

ActionScript 呼叫：(TARGET.html置換成目標網頁,newwin只是名稱)

var jscommand:String = "winopen('TARGET.html','newwin',180,50);";
var url:URLRequest = new URLRequest("javascript:" + jscommand + " void(0);");  
navigateToURL(url, "_self");

一個小小應用。

　　Flash程式競賽有越來越微型化的傾向，以前有　4K Game　比賽，先前的　25lines.com　舉辦了25行程式碼的比賽，後來又陸陸續續辦了幾次，參賽作品越來越令人驚豔…25行程式碼看似相當少，但　gskinner　決定舉行一個更短的程式競賽，一下子縮減到限制在140個字元內，這麼少的長度，光是加一句addEventListener就用去了十分之一強，放在文章裡頂多2行，140字元到底能做出什麼？當然做出來的一定不如25lines的成品，但是仍然有程式高手做出很棒的作品，創意五花八門，有的還可以和滑鼠、聲音，甚至攝影機做互動。

比賽規則很簡單：

　　#tweetcoding: code something cool in <=140 characters of AS3

獎品：Adobe Flash CS4軟體一套

比賽連結：tweetcoding

1. 將嵌入flash語法中的width、height設為100%。
   優點：簡單易用。
   缺點：無法限定最小寬度與高度，解析度不夠的時候一些內容會消失。
   
2. 用JavaScript抓取瀏覽器長寬，監聽resize事件調整flash。(見範例一)
   優點：可以做到限定最小及最大長寬。
   缺點：有時邊緣並不是那麼準確。(有改善空間)
   
3. 用CSS擴充第1個方法中的作法，只是加入min-width等屬性。(見範例二)
   優點：可以做到限定最小及最大長寬。
   缺點：目前沒有。
4. *Update：發現一個很棒的 script 套件 - swffit，用法見官網連結的Example Pages，這是屬於JavaScript的作法，相容於各大瀏覽器，除了能限定最小/大的長寬值外，還提供了更多功能函式，值得列入開發工具箱裡。

　　日本財經雜誌《Theory Business》集結企業領導人、藝術創作者、學者等各行各業頂尖人士， 送給年輕上班族突破職場瓶頸的關鍵句，培養「閱讀空氣」的能力：

一、發生意見不同的爭論時，先把那股氣Hold住

　　年輕人常常沒聽完對方的話，覺得被誤解，就急急辯駁，而不把話聽完，反而留給人不好的印象。

　　其實，任何會感動大眾的作品，都是以團隊的力量才能完成，不管你多麼有才華、有創意，光靠一個人的本事是無法達成的。因此，不要因為一時的情緒衝動，毀了團隊之間的感情與互信。