伊沙熊的學習筆記本

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等屬性。(見範例二)
   優點：可以做到限定最小及最大長寬。
   缺點：目前沒有。

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

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

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

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

　　Adobe Flash不用多解釋，只要有在上網的使用者，一定有接觸過Flash，可能現身為網頁裝飾，可能是個廣告，也可能是個小遊戲；Microsoft Silverlight 則是微軟的產品，中文譯作「銀光」，和Flash同樣是Web前端應用程式，今年又大動作地推出Silverlight 2，大有分庭抗禮的意味。事實上火藥味也早就開始彌漫，對於網頁開發者而言，這二道「光」的較勁遲早會有結果，要不要趁早擁抱Silverlight已經是個值得思考的問題了。

　　以目前的主流來看，畢竟Flash早在Silverlight出現的十年前就存在了，經過十次以上的大改版，以及為數龐大的背景資源（作品平台、教學網站、類別Package的開發與分享、業界共識），已經是很成熟且不可或缺的應用了，Flash現在正穩坐Web前端多媒體的寶座，誰知道竟然殺出程咬金－微軟。

在Flash中，25行程式碼可以做出什麼作品？特效？遊戲？３Ｄ？

答案是都可以！

www.25lines.com在網站上舉辦了這樣一項競賽，Flash裡只有程式碼，也就是包括圖形和互動都由程式包辦，雖然只有短短25行，但是參賽者做出來的成品相當驚人！從近百件投稿裡篩選至12件，然後再進行投票，於12/16公佈了投票結果，勝利者是 Marius Heil 所做的一個文字遊戲 SmilieBounce 25，並贏得了一份 Adobe CS4 Master Collection 做為獎品，看看他的作品完整且具趣味性，相信是最適當的人選了，而其它前十二名的作品也相當不賴，以下依照名次由左至右排列，點圖片可觀看對應的作品：

　　LocalConnection類別，可以在Flash檔之間傳遞訊息，只是功能有所限制，傳送是單向的，一方傳送一方接收，若要雙向溝通，需同時建立二個管道，範例與使用方式可以看官方的教學：

1. 一開始所有的程式嘗試連接同一通道
2. 由搶到client權的程式收集所有程式的唯一ID
3. 將ID列表傳送至每一個參與程式，並依照每一個ID建立獨立通道
4. 每一個程式都取得其它程式的通道資訊，可以開始進行廣播

　　在Flash中，事件驅動是整體架構的核心機制，包括Timeline中影格的交替、按鈕的點擊、游標的移動…等。除了內建的事件(Events)，在ActionScript裡，還可以自己定義事件，在開發自己的類別(class)時很有用處，因為有時類別內要載入或定時執行某些動作，但是使用該類別的外部程式，通常不能獲得這些事件資訊，因此需要另外丟出事件…