Flash 常用程式碼快速產生工具

以往在 Flash ( ActionScript 3.0 ) 裡要增加一個按鈕

必須先寫上冗長的事件偵聽(addEventListener)，再新增一個 function

之後才能開始寫按下後真正要做的事

如果想做精緻一點的互動元件、而且元件數量很多，這個過程就會變得十分繁瑣

於是這個 Flash 的方便小工具就誕生了

有以下功能：

• 滑鼠點擊事件
• 滑鼠移入事件
• 滑鼠移出事件
• ENTER_FRAME 迴圈事件
• 鍵盤按下事件
• TweenLite.to　(需有TweenLite檔案)
• 載入 SWF 檔
• 滑鼠拖曳物件
• Timer計時器
• 選取多物件時，可以選擇是否要整合到同一個function裡 (Individual / All in one)

• 產生符合場景大小的方形
• 產生空白的影片元件　(多用於當作動態產生元件的 container)

(備註：所有程式碼都會產生在第一個圖層的第一影格)









安裝方法：

1. 下載完檔案後，解壓縮，將 SWF 檔放到下方資料夾中：(Windows 7)
   
   C:\Users\你的使用者名稱\AppData\Local\Adobe\Flash CS6\zh_TW\Configuration\WindowSWF\
   
   ( AppData資料夾是隱藏的，進了使用者名稱資料夾後，路徑自己加上 \AppData 按 Enter 即可進去 )
   
   
2. 重開 Flash
3. 在Flash的工具列 --> 視窗 --> 其他面板 --> GrassTools

檔案下載：http://vealab.com/works/flashgrasstools/GrassTools.zip

PhotoGrid 相片編輯App (WindowsPhone)

第一次嘗試做手機 App，這是一個十分簡單又好用的相片軟體軟體

可以隨時隨地調整框線、顏色、花紋、濾鏡效果！

每個樣式都是精心挑選過的，所以怎麼做都好看。

但目前只有在 Windows Phone 上架，有 Windows Phone 的人可以下載來玩玩！

PhotoGrid 更多詳細介紹和下載

iPad Light Paint 3D

用iPad來畫3D的光影像不是我發明的，網路上已有非常多作品了。例如

原理很簡單，就是讓 iPad 播放文字由前到後的截面影片，同時緩緩移動，再配合相機長曝光即可。

有興趣的人可以 Youtube 搜尋:"iPad Light Paint"

不太清楚別人是怎麼做出那段截面影片的(可能是做26個2D截面影片)，但現在有個 iPad app 直接可以幫你做

只要輸入文字，它就會產生一段截面的影片，十分方便！App示範影片

但幾乎都是文字，所以想說來嘗試看看真正的 3D 物件。



(Frustum:平截投影示意圖) 上圖引用於 http://paulbourke.net/miscellaneous/frustum/

利用用 3D 攝影機的 Near Clip Plane 和 Far Clip Plane 似乎可以達到。

　Near Clip Plane：是攝影機所能看到最近的距離，近於這個距離的東西就不會被算出來。

　Far Clip Plane ：是攝影機所能看到最遠的距離，遠於這個距離的東西就不會被算出來。

所以直接 Key 上面這兩項的參數就可以有剖面的動畫了。



為了調整方便，用了兩個平面來代表最近和最遠。

這樣直接 Key 平面的位置就方便多了！

算出來的影片：(前2秒空白是去按快門的預留時間，曝光 10 秒)




有了影片之後，放到 iPad 上播放並緩緩移動，同時用長曝光攝影，就會得到3D的光影像了！

Nodify

一開始是在試作 Photoshop 中的色彩範圍選取功能，成功了之後，忽然想加上些圓圈看看，後來又把圓圈連線起來。

就成了常見的節點連線的畫面，有興趣的人可以搜尋 " Node Garden "。

這次將節點集中到某個色彩區域，點和線的顏色使用原本的圖片上的色彩，就形成了滿有趣的畫面。

使用的是 WPF(C#)



第二天為了實驗多一點效果，做了一個介面。後來想試試看串成連續的影片，於是加上了批次算圖的功能。

又自拍了一些影片來作測試，看起來還滿有趣的。



建議開 720P (線條比較清楚一些)

(有個小技巧的地方在於：每一張並不是全部重畫，與上一張相同範圍的點會留在原地，所以畫面比較不會一直亂跳動。)

VScanner 掃描、分割的好夥伴

一次奇妙的機會下去當一天的文書工讀生，大部分的工作是打字、核對資料和掃描發票。

發票一共有上百張，每一次都放入一張進掃描-->"預視"-->等待-->框選-->掃描-->等待-->下一張，這樣反覆交替。

就算一次把把多張一起掃，到繪圖軟體裡剪裁時，還是得一張一張剪，一張一張存，實在有點耗損青春。

於是這個 VScanner 的構想就浮現出來了。


「 VScanner 可以一次掃描所有東西之後，快速選取、直接自動分開儲存各個部分。」

用起來十分方便容易，比起一張一張掃描應該快上不少。

具體的操作看下面的影片就能了解了：




做文書工作的人，可能常常要掃描很多份證件之類的，這就會是個很方便的工具。


「什麼人做什麼樣的程式。」是我常常拿來開玩笑的一句話。

每次做完一個程式時，最後我都會多一個步驟叫做"貼心化"，這個步驟有時候還更花時間

就待有緣人去體會了。


下載：

　　VScanner 下載 (Vista & Window7)

　　VScanner_xp 下載 (xp)

ColorViewer

直接預覽調整算圖後的顏色。

可以在線上給夥伴、上司、客戶選擇要的顏色，或者當顏色喬不定，而花一堆時間反覆算出來看時，這會是一個很方便的工具。

(下方flash如沒出現，請稍候 30 秒 )





這三張其實各有用意 (得要很仔細看)：

‧第一張：從反射的影像顏色不變，說明不是單靠改變整張色相來達成的。

‧第二張：FG中，物體間相互反彈的滲色(地板上)，也會跟著改變。

‧第三張：反射到其他物體上的鏡像，也會跟著變色。



雖然看起來很厲害，但其實只是依照著 RGB 光的三原色的原理而已，成本是先算出四張。

如下圖分別是：紅、綠、藍、黑(黑很容易被忽略掉)



把上述四張圖疊在一起，"紅、綠、藍"的混和模式改成"加亮(lighten)"，黑色則不動當底。

這時就會得到一張白球的圖片，原理看如下圖左邊就能了解。

接著各自調整圖層的透明度，也就是改變三色的比例，就可以調成各種顏色了。

可以直接在 Photoshop 做也行。




其實這次真正難的是選顏色的圓盤，因為改色的原理是 RBG，但選色是用 HSV (只因讓人比較好選)

HSV 和 RBG 之間的轉換比起想像中複雜，也超過我能解釋的範圍。

有興趣的人可以搜尋一下：rgb hsv convert

3DScanner

市面上有一種3D實物掃描的機器，一台相機和一個會旋轉的檯子

只要把真實的物件放上去，相機就會開始邊轉邊拍，最後到電腦上就好像有了一個會轉的3D物件一樣。

如果在加上紅外線掃瞄就可以得到距離，借此算出真的3D模型，並用相片自動上貼圖。《參考:NextEngine》

再進一步就是結合打光，變成一個大球體，也就是著名的 Light Stage 了。《參考:LightStage》

但這裡要討論的是沒有紅外線的版本，也就是只單純照了很多張照片，再依據互動來依序播放，感覺起來就像是真的3D物件一樣。

市面上已經有這樣的產品了，這次合作的台大昆蟲系也有這樣的器材。



先說明一下這事要做的目標，是使用 Flash 呈現一隻能自由轉動的3D蝴蝶。

由於 Flash 的3D效能還是無法呈現精緻的蝴蝶，所以使用假的3D效果是比較可行的方案

於是就得在3D軟體( Maya )裡製造出類似3D實物掃描的機制，把每個角度的圖片算出來

匯入到 Flash 裡面，讓 ActionScript 去依照互動方式決定要播哪一張

---

首先是 Maya (Python)

這次嘗試使用 Python 來編寫，也算是藉機來學習一下。

一開始第一個想到的解決方式，是使用球狀的攝影機陣列，如下圖(左)。

產生出來攝影機陣列十分壯觀，任何東西都不需要轉動，只要依次算出下個攝影機的影像即可

看似容易，但剛做完便想起 MEL/Python 控制算圖實在太過麻煩，於是就放棄了這個做法。




第二個方法是實物掃瞄機的相反，如上圖(右)

也就是移動攝影機來拍攝，而不是轉動物件。

最後採用了這種方法，困難度較低，算出攝影機有key的範圍即可





這就是算出來的圖片，原先設定經緯各36格(上圖n=36)，算出來的圖片就是 36*36 = 1296張

由於想要能夠背景透明，最後輸出是 800px*800px (PNG)

---

瘦身

1296 張帶著 alpha 圖層的圖片，真的不是個小數目。

匯入到 Flash 裡只要超過 470 張就會當機，於是就得想辦法減肥一下。

　‧降低經緯數：降太多會感到不順暢的感覺，所以只把縱向的數目減半 ( 18*36 = 648 )

　‧對稱圖像鏡射：由於蝴蝶是左右對稱的，也就是可以左右共用同一張圖，所以橫向也減了將近一半 ( 18*19 = 342 )



最後總張數一共是 342 張，比起原本的 1296 少了 3/4。

---

接著是 Flash ActionScript 的部分

真正難度較大的部分其實是在 ActionScript 如何去判斷該顯示哪一張

為了節省圖片，所以還需要判斷鏡射，鏡射完還得右移，增加了許多難度。

由於實在太多張圖，曾經嘗試了三種匯入的方式：

　1.全部匯入到影格內，依編號移動到對應的影格上：操作順暢，匯入、輸出花時間。

　2.一開始載入全部圖片：等待載入太久，大約要1~2分鐘以上，不可行。

　3.即時載入對應圖片：載入需費時，會出現閃耀，操作不順。



最後只好選擇第一個方法，雖然每次測試時都要等上個 2~3 分鐘，但操作還算順暢。



製作了一個叫做 3DScannerMir 的類別，只要給它 x,y 的位置，它就會傳回對應的圖片編號

得到編號後，再移動到該影格即可

最後產生出來的 swf 檔大小為 6MB 左右

後來精緻了蝴蝶模型，翅膀加入透明漸層和翅脈，檔案大小一下子膨脹到 22MB



342 張 PNG 差不多是 Flash 的極限了，時常會記憶體不足

整個做下來比我想像中的還要複雜一些

最後要用上的時候是彩色的，由於只是測試，所以只用單色

整個做得完整一點的話，算是個滿好用的展示 3D 物件的方法，不用開 Maya，在網路上即可呈現精緻的模型。

下面放的是最後 6MB 版本的成品嘍。 可以使用滑鼠拖曳看看 -end