每月封存: 五月 2008

 C L I C K
可以用鍵盤,當然也可以用滑鼠囉!此外,還加上 Loading 的功能。
寫法跟 奶綠茶的作法 不太一樣,幾乎完全是用 PV3D 的 Class;
圖檔的 Loading 是用 BitmapFileMaterial 的 FileLoadEvent;
滑鼠功能是讓每個 Plane 發佈 InteractiveScene3DEvent 事件。
原來,要用 PV3D 的物件寫滑鼠事件得要在兩個地方啟動互動功能!?
一個是在 material 下 interactive = true
一個是在建構 viewport 時,把建構值 interactive 改為 true
為了這個功能寫了一整天,主要原因就是 viewport 的建構值沒改!?
要讓游標變手指則是要對 Viewport 下 buttonMode = true
也是利用 Plane 的 InteractiveScene3DEvent 事件;
去改變 viewport 的 buttonMode 狀態。

 C L I C K
禮拜六課程結束前,老師給了個 Homework,要我們實作講義上的簡易相簿。我當然不會只是做個『簡易』相簿囉!?
沒有做任何按鈕,圖片上點擊也不會有作用;我只用鍵盤上的左右方向鍵而已!
其實老師要我們練習的是用 Loader 做動態載入,跟這個 demo 有不少落差。
我只顧著寫這個動態,就寫到一整個忘我了!
以前一直不屑用 tweener,所有的 tween 都是自己一字一字寫。
這次嘗試用老師提供的 tweener,功能和效果還真是讚呀!
查一下 addTween 的 transition 參數就知道!!!
看來,以後是不可能再自己寫 tweener 了!?

 C L I C K
有了圓,有了螺旋;當然還要來個『球』囉!
為了算 theta、phi 和 xyz 座標轉換花了不少功夫呀!?
但也從這個 demo 找到個經驗,原來 3D 物件的旋轉是相對於自身的!
害我為了推算 xyz 三個方向的旋轉想到一個頭兩個大。
既然是相對座標系,那就針對 theta、phi 旋轉兩個方向就好了嘛!?
也是因為這個原則,球體的旋轉就不能用兩個方向去轉了!
不能轉球,那就移動 camera ;參考 Basic Mouse Interaction,搞定!

 C L I C K
即然能算圓環,再多一個方向的平移就是螺旋囉!?
看起來跟圓環差不了多少,但主要的不同在於:
Planes 不是直接放在 Scene 裡,而是包在一個 Container 下,再放進 Scene。
所以只要旋轉外層的 Container 就可以了!
圓環的 EnterFrame 就要一直去算每個 Plane 的位置和旋轉。
故意放一百多個 Plane,想試試效能如何?
可能是只有旋轉一個 Container 的關係吧?
跑起來還真順!

 C L I C K
這禮拜按照 奶綠茶部落格 裡的教學把 FlashDevelop 和 PV3D 都安裝完成;
此外,還參考了幾個官方部落格:
pv3d.orgpv3d 2.0 tutorial list
papervision2.comTutorial List
總算、總算,有了第一個 PV3D 的小作品了!?
奶綠茶在部落格裡提到 PV3D 的資源很多;
實際摸索後,PV3D 的學習資源果然不少!

 C L I C K
前一篇提到 ConvolutionFilter ,那就來 demo 一個吧!?
在網路上找到 這篇,然後試著自己寫一個。
ConvolutionFilter 是以一個 3×3 的矩陣來跟 BitmapData 裡每個 pixel 做運算。
相當耗費效能,應該是我用的 particle 數量太大了吧!?
連續寫了好幾個 BitmapData 特效,瀏覽器已經撐不住囉!?
想到 奶綠茶部落格 有做原視窗開啟 Flash Player 的功能,看了一下原始碼,發現 Lightbox++ at Codefidelity
按照網頁教學把我的部落格也加上相同的功能,因為主色系是黑色,就把顏色改了一下而已。
如果效能跟得上的話,ConvolutionFilter 應該不只能製造煙霧效果;
想到以前用 MatLab 偵測影像邊緣也是用類似的方法;
搭配 BitmapData.threshold 一定可以再做點什麼東西吧!?
但是這禮拜六就要上課了,得先預習一下 PV3D 才是!

 C L I C K
這個效果網路上普遍歸類為「水波紋」,但因為我前一篇就叫這個名字了,所以稍為做一點區別,改叫「水漣漪」。
除了自動產生的漣漪以外,也可以用滑鼠產生,直接單響就可以了!
效果‥‥‥普普,應該是底圖的關係吧?如果用照片應該就會好很多!
程式上還是以 DisplacementMapFilter 為主,只是不用 PerlinNoise 了。
水波紋只是用深淺不一的同心圓,再帶一點 Blur 去模擬的。
問 Google 大神可以找到很多同樣效果的教學,但寫法跟我大不相同;反倒是跟 奶綠茶這篇 差不多。
看了一下原始碼,還是不太能理解裡面的細節;不過,看到一個沒用過的 ConvolutionFilter ;有空就來研究研究吧!

 C L I C K
昨天提到水波紋是吧?那今天就來寫個水波紋特效吧!
跟火焰特效的寫法一模一樣,只是對參數與顏色做調整而已。
當然,為了調出像水波紋的感覺,又是花了不少功夫呀!
Google Search 「DisplacementMapFilter」找到下面這篇:
[教學] 變形特效怎麼玩~XD (DisplacementMapFilter原理&應用)
此外,還發現 DisplacementMapFilter 也可以拿來做以往 Flash 做不到的透視。改天來試試吧!

 C L I C K
最近寫程式寫到 on Fire。不是寫到火大,而是寫出火焰特效啦!
之前看過 奶綠茶的火焰效果 後,就一直想學著做一個。
但是他沒分享程式碼,試著問 Google 大神,好像也沒有很直接的教學?
好不容易找到了 這篇教學;不是在講火焰,而是旗幟飄揚的效果。
文章最後提到 PerlinNoise、DisplacementMapFilter,這可是非常受用的。
這兩項加起來,我想不只是火焰,水波紋也可以做得到吧!?
調整參數和顏色花了不少時間,但成就感卻是未曾有過的。

前一篇文字點陣化的效果給朋友看過後,有人問我為什麼只能打一個字?
後來想想~雖然一次只能 show 一個字,但也可以分批跑完呀!?
今天就寫了這個進階版! C L I C K
Demo 的日期還是下在昨天,反正主程式是一模一樣的!
差別在於:先把字串用 String.split(“”); 拆成陣列,再用 Array.shift(); 從第一個字開始用 interval 一個字一個字抓出來!