[Blog] Google Code Prettify

• Google Code Prettify

之前就有考慮要syntax highlighter來輔助程式碼的顯示，但是總感覺loading太重，所以還是選擇用抓圖的形式來顯示程式碼。最近看到了Google Code Prettify感覺還算可以，有興趣的人可以用用看。

官方頁面如下:

http://code.google.com/p/google-code-prettify/

安裝方式請參考下面的網頁：

http://google-code-prettify.googlecode.com/svn/trunk/README.html

當一切設定好之後，你會發現code的顏色的確有改變，但是總覺得有點不完善，這時你可以修改你的html範本，增加CSS Code如下：

code {
display: block;
font-family: 'Verdana';
font-size: 8pt;
font-weight: bold;
overflow: auto;
white-space: nowrap;
border: 1px solid #7F7F7F;
padding: 10px 10px 10px 21px;
max-height: 600px;
line-height: 1.5em;
letter-spacing: 0px;
color: #000000;
background: #fbfaf7 url(http://sites.google.com/site/xinyu0123/Home/BG_CODE.gif) left top repeat-y;
}


最後那個background設定目的是要在程式碼左邊顯示一條code的標籤，你可以不用加上它。儲存完範本之後，每當你使用code標籤貼上程式碼就會有如上的效果。

PS. 每當我切換blog的撰寫模式之後，整個code的排版又被歸零，看來只能再尋找更好的方法，或者是哪天想不開自己用Flash寫好了。


Web Color Code的部份可以參考下面的網頁：

http://www.computerhope.com/htmcolor.htm

http://html-color-codes.com/

關於CSS語法部分可以參考下面的網站:

http://www.w3schools.com/Css/

[Flash] Flash Socket & C++/Java Socket

• Flash Socket & C++/Java Socket

Download: SocketComm.zip Java_C_Comm.zip

根據Google Analytics資料顯示，我的部落格點閱率最高的文章竟然是[C/C++] Socket Connection ，為此我決定再增加Flash Socket的部份。

這一篇是最簡單的範例，只是實做讓Flash Socket與C++/Java Socket互通，因為Flash Socket僅有Client的連線功能，Server的部份我們必須仰賴C++/C#/Perl/Java/PHP等語言來完成。預覽畫面如下(Flash Client Side)：

Server-Side (Server的部份則是直接沿用[C/C++/JAVA] Socket Communication Between JAVA and...這篇的程式碼)

Waiting for Connection......
Connected from 192.168.2.49/192.168.2.49:1899
Hello! I'm Flash Client


程式碼的部份其實很單純，唯一要講解的只有傳送的部份：

private function sendData():void{
var buff:ByteArray = new ByteArray();
buff.writeMultiByte(input.text+"\n","unicode");
socket.writeBytes(buff);
socket.flush();
output.appendText(input.text);
input.text = "";
}

可以看到我們在傳送數據時用的是writeBytes而不是writeUTFBytes，這麼做的原因是要解決中文會亂碼的問題。傳送完之後記的要呼叫flush()，如此才能正常傳送出去。

關於編碼的資料可以參考下面的網頁：

http://livedocs.adobe.com/flash/9.0/ActionScriptLangRefV3/charset-codes.html

Policy File的資訊請參考下面的網頁：

http://www.adobe.com/devnet/flashplayer/articles/fplayer9_security_print.html

有了上面的簡單概念之後，你可以將Flash的介面稍加修改，再配合之前的聊天程式的片段，就可以組合成聊天室了。

[Flash] Screen Wall

• Screen Wall

Download: ScreenWall.zip

要在Flash裡面實現Screen Wall是一件很簡單的事，最常見的手法就是將影片轉成嵌入式的MovieClip來擺放。這裡我使用Flash CS4的3D視角旋轉功能，再加上簡單的VideoPlayer應用，參考畫面如下:(你可以點選這個連結來實際預覽畫面)



左邊畫面的翻轉是直接使用Flash CS4的編輯工具達成，而右邊畫面翻轉則是以ActionScript來完成，中間則為主要畫面來源，使用VideoPlayer Class，兩旁的畫面則是透過BitmapData的形式複製過來，為了不處裡Security Sandbox Violation的問題，我把所有檔案都放在同個Domain下。

影片來源: 電影Once 的預告片，更多Once的資訊可以參考下面的網頁:

http://www.foxsearchlight.com/once/

http://www.imdb.com/title/tt0907657/

程式碼很單純，如下:



詳細資訊請參考原始碼。

[Flash] Bitmap Selection

• Bitmap Selection

Download: BitmapSelection.zip

這是一個簡單的Bitmap Class的應用，結合上一篇的SymbolButton和自製的DupBmpImg類別合成的，這個程式的功能只是簡單的將你所框起的範圍給複製出來，效果如下(你可以點選這個連結來預覽實際效果):

雖然只是小小的框起複製的效果，但裡面仍然有許多細節要注意，之後再進一步一一說明。有興趣者可以再將此程式改寫，讓複製後的圖片做一些處理等等。詳細資訊還是請參照原始碼。

[Flash] Custom Button

• Custom Button

Download: SymbolButton.zip

在Flash裡面要製作按鈕除了使用fl component和手動繪製之外，還可以完全使用actionscript來完成。這裡為了方便我直接沿用SimpleButton這個類別來設計，參考畫面如下:

SymbolButton.as 片段程式碼:

這裡我們使用了fl.motion.Color的類別，在Flex裡將無法支援。





為了節省程式碼的撰寫，將每一種功能的圖案結合在下面的函式裡。

在Flash裡面測試SymbolButton:



詳細部分請參考原始碼

[UTips. 66] HardInfo

• HardInfo

雖然在ubuntu裡面很少有機會要去看硬體資訊，但你還是可以透過這個小工具來偵測。

sudo apt-get install hardinfo

[Flash] pass by reference

• pass by reference

在過去的Actionscript設計過程中幾乎都沒有需要用到像是c語言的pointer的特性，直到最近才針對此問題做了一個小小的檢測，由於測試環境在Linux底下的Flex SDK 3，所以程式碼顯得有點囉唆。

下面是一個典型的swap範例：

輸出結果：

a:1 b:2

由此可知在actionscript裡的參數傳遞是pass by value(javascript也是如此)，為了達到兩數交換的目的，在actionscript裡就不行使用原生型態，要改以Object型態來傳遞，如下：

輸出結果：

a:2 b:1

雖然成功將數值給交換，但是這種撰寫方法反而不方便，只好期待actionscript 4.0能夠支援像python的數值交換的寫法：

[a,b] = [b,a]

從ECMAScript 4.0的規範裡來看似乎很有希望。