Flash for Fun
有趣的 Flash CS 3

學習筆記

‧2008年9月11日

  這裡的介面雖然清新,但是另一方面也可以說實在太簡陋了,決定把文章轉移到一般的部落格裡,這裡就當免費空間用好了。身為一個資訊人,不玩看看部落格好像不太像樣阿,哈。

[網誌連結] http://blog.roodo.com/esabear

‧2008年9月2日

  為了某個目的,需要用到傾斜面彈開的技術,剛好『Flash ActionScript 3.0 動畫製作大師』這本書的第十章就是在談這個,簡單的講,就是在碰撞偵測時,旋轉整個系統的座標系,把傾斜面轉換成水平或垂直以方便計算,計算完再旋轉回去,這次練習不再從章節範例中修改,而是自己撰寫,只有參考其演算法部份的程式。

傾斜面彈開實驗 | 原始檔下載

‧2008年9月1日

  這次練習再次修改senocluar.com的範例,將動態選擇框轉為AS3的語法,Flash前輩的作法有時真令人嘆為觀止,運用簡單而巧妙的圖形和語法,就能創造出千變萬化的應用來,真是了不起。簡單筆記一下其中ActionScript 2.0和3.0的顯著不同點:
  (1) 顯示物件不再自動顯示,需以addChild()將之加入顯示列表。
  (2) 內嵌圖片載入方式不同。
  (3) 增加Sprite類別,相當於沒有時間軸概念MovieClip。
  (4) 各種事件(如:按下滑鼠)要另外在程式中註冊使用(addEventListener函式)。

動態選擇框練習 | 原始檔下載

‧2008年8月18日

  今天到監理站看到電子式的走馬燈,突然有個靈感,仿照一般常見的走馬燈,做了一個Flash版,字體應用光暈濾鏡的inner glow效果,且可自訂參數,滑鼠移上文字會停止捲動。在ActionScript 3.0 抓網頁傳值參數的語法是 this.loaderInfo.parameters["text"] ,"text"是自訂名稱,如此例

走馬燈範例 | 原始檔下載

‧2008年8月17日

  終於忍不住想要開始進行3D的旅程了,在senocluar.com上看到此3D Picture Box範例後,決定來試看看到目前所學是否能夠負荷,果然,貼圖是最麻煩的部份,在改成正立方體以外的形狀時屢次失敗,原因在於貼圖座標和變形向量是不同的,在貼圖時"面"不管3角、4角形都可能是任意形狀,貼圖來源則是矩形,光是對應關係部份的處理就很頭大,只好暫時放棄改變形狀的嘗試,這次練習除了把語法改成AS3,同時也略為變動資料結構,儘管看起來相似,其實是做了不少更動,包括了背面去除的演算法,值得注意的是程式中並沒有設定 focal length (fl,視點至投影面的距離),更沒有攝影機鏡頭的轉換,以3D引擎而言,還差得十萬八千里,經過這次練習,我決定以後若要創作3D作品時,還是得乖乖使用目前開發進展較完善的PV3D、FIVe3D...等Package,本次練習只是作為初學3D的入門窺探,程式很難看,但也顧不得了。

3D立方體練習 | 原始檔下載

‧2008年8月16日

以下整理幾個常用的語法與對應import,免得每次忘記就得翻找程式頗為麻煩。

 語法                                                                                           import                                                 參數說明與備註                     
stage.scaleMode = StageScaleMode.NO_SCALE     flash.display.StageScaleMode     固定舞台大小
stage.align = StageAlign.TOP_LEFT                             flash.display.StageAlign                 舞台對齊於上、左側
addEventListener(Event.ENTER_FRAME, ???)      flash.events.Event                             進入下一個Frame的事件
                      ...MouseEvent.MOUSE_DOWN...            flash.events.MouseEvent               按下滑鼠事件
                      ...KeyboardEvent.KEY_DOWN...            flash.events.KeyboardEvent        按下鍵盤事件
graphics.beginGradientFill(...)                                      (無)                                                           beginFill() + 支援漸層
GradientType.LINEAR                                                      flash.display.GradientType           用於上個函式中做為參數
graphics.endFill()                                                                (無)                                                           執行此函式才會實際填色
this.loaderInfo.parameters["???"]                                 (無)                                                           執行時傳入的參數
mouseX                                                                                    (無)                                                           滑鼠X軸座標
Matrix 類別                                                                             flash.geom.Matrix                             (無)
Point 類別                                                                                flash.geom.Point                                (無)
Sprite 類別                                                                               flash.display.Sprite                           無時間軸的Movie Clip
Math.random()                                                                     (無)                                                           亂數(0~1, 不包含1)

  沒有表格功能還真是不方便阿。import 欄若為(無)則代表不需要任何 import 動作,... 是將重覆或參數部份省略,??? 指的是自訂名稱,上表的列舉型變數通常不會只有一種,例如 StageScaleMode.NO_SCALE 還有幾個兄弟姊妹: EXACT_FIT、NO_BORDER、SHOW_ALL 等,在程式碼StageScaleMode上按下F1就能查到相關細節;而像Math類別底下有許多實用函式,如:sqrt()、cos()、atan2()、abs() 等等,在Math.後按下 show code hint 功能,就會出現完整提示,所以上表不一一列出,Flash的說明檔和提示功能其實相當完善,好好利用就不必買太多書。

‧2008年8月15日

  今天看了幾個範例後,注意到Flash提供的濾鏡相當有趣,可用的顯示濾鏡共有9種:斜角濾鏡 (BevelFilter)、模糊濾鏡 (BlurFilter)、投影濾鏡 (DropShadowFilter)、光暈濾鏡 (GlowFilter)、漸層斜角濾鏡(GradientBevelFilter)、漸層光暈濾鏡 (GradientGlowFilter)、顏色矩陣濾鏡 (ColorMatrixFilter 類別)、迴旋濾鏡 (ConvolutionFilter)、置換對應濾鏡 (DisplacementMapFilter)等,斜角可以應用於製作按鈕,模糊不用說就是模糊,投影可以製造陰影,光暈有點類似投影的簡化,漸層斜角和漸層光暈則是加上漸層的支援,顏色矩陣可以玩飽合度、色相、亮度等效果…最有趣的就是剩下的二種:迴旋和置換對應濾鏡,前者可以產生模糊、銳利化和浮雕各種效果,後者能實現的效果也很豐富,但是不太容易解釋,公式為下:

        dstPixel[x, y] = srcPixel[x + ((componentX(x, y) - 128) * scaleX) / 256, 
                                                           y + ((componentY(x, y) - 128) * scaleY) / 256]

  其中的componentX和scaleX等,是依照設定的參數,component是和原圖不同的另一張參照圖,可以在x軸和y軸分別設定參照的色頻(ARGB)。整體公式在口語上來說,就是先計算參照的component該點(x, y)的顏色(範圍0~255),減掉128,乘上放大率,再除以256後加到原座標,得到新的座標值(x', y'),再將原圖(x, y)點換成(x', y')點的顏色。聽起來還是有點模糊,需要實際體驗看看,才能知道可以應用在哪裡。

  這次練習是參考Adobe的線上教學手冊,ActionScript 3.0 程式設計 > 以濾鏡處理顯示物件 > 可用的顯示濾鏡 > 置換對應濾鏡一節,原本範例只有放大效果,原理是x軸參照往右遞減的紅色,y軸參照往下遞減的藍色,因此可以將二側及上下的像素擠往中央,形成放大鏡的效果;然後再參考senocluar.com的魚眼效果範例,這個範例的參照圖是事先製作的圖形,如何而來就不得而知。練習中修改官方範例,再擷長補短採用動態方式製作魚眼效果的參照圖,所以參數可自由調整,不過我調了好久才得以相似,這個練習的延伸應用可以是水滴、哈哈鏡…等,鏡射或折射的光學效果,在senocluar.com裡的下一個範例還示範了一個模擬3D的應用,變化可以說相當廣泛。

魚眼效果練習 | 原始檔下載 | 圖片下載

  濾鏡的參數調整若沒有一定的熟悉是相當費力的,好在Adobe提供了一個工具:FilterWorkbench,介面以Flash製作,所見即所得,且提供多種預設效果,調整完還可以產生原始碼以供複製,不過不支援置換對應矩陣,畢竟其變化太多了。非常好用的工具!見官方說明檔

‧2008年8月14日

  看到『Flash ActionScript 3.0 動畫製作大師』這本書的第12章,作者以Jared Tarbell的Node Garden動態圖作品為靈感來源,利用重力與彈射這二種不同的運動方式,做了另一種節點運動版本,我看了之後,也想來依樣畫葫蘆做另一個改版,只是改成節點在點陣圖上記錄運動軌跡,二個可調參數分別為質點重量和彈力係數,感覺上是全然不同,不算是什麼樣的成品,就當作是一個階段性的練習。

節點花園 | 原始檔下載

‧2008年8月3日

  呼~終於等到軍中放假了。

  物體運動較熟悉後,開始練習碰撞,碰撞會讓物體更有存在感,但是卻會耗費大量計算,越是奇形怪狀的物體,要計算物體間是否接觸的代價就越高,因此大部份的實作方式都是以一個簡易外廓來代替物體原有的形體,尤其以圓最容易實作,在檢查時只要二者中心點距離小於或等於二者半徑和,就可以開始碰撞行為,在本例中,碰撞會使二圓各從接觸面反方向彈回,並維持動量守恆,又由於求出球接觸面的垂直向量後,再依動量計算速度分量十分麻煩,所以程式中把二中心點旋轉到水平線,將二維碰撞簡化為一維計算。本練習重點在於:動量守恆公式、旋轉座標系、物體相疊合時的修正,以及物件的移除(清除按鍵和點擊的圓波效果)。

  實作時遇到的問題則是在重繪球的填色時,效能突然大幅減低,後來發現原來是忘了加上 graphics.clear(),以至於先前的繪圖動作仍有作用,雖然會被蓋過去,但還是吃掉了CPU資源,改良後發覺球數可以輕易加到100顆+,不知在其它電腦上表現如何。其實碰撞公式熟悉後,實作相當快速,反而是介面的設計花了不少工夫。

  在程式中,重力調成負值,球和牆面接觸設定減少10%的速率,所以全體總動量會持續下降,可由滑鼠點擊增加速度(和距離成反比),按任意鍵可增加球,值得注意的是,球數多時容易出現相疊情況,造成球體位置不穩定,這是很難避免的狀況,畢竟和現實不同,球與球之間的檢查通常只用二層迴圈跑完所有配對,但是每次配對的修正可能會造成新的矛盾(例如又重疊到其它顆球),除非不斷的跑迴圈進行微調,但為了程式效能考量只能將就點了。

 多重碰撞練習 | 原始檔下載

  先前像素噴泉練習中提到一個網站:http://www.senocular.com/,今天決定把其中的電視機雜訊特效也改成ActionScript 3.0版本,程式中使用 BitmapData 的 noise() 來產生雜訊,另外還用了mask(遮罩)來遮掉多餘畫面,先前程式都是寫在獨立的.as檔裡,缺點是得自行import一些有的沒的,優點是程式維護與擴充性較高,這次算是將程式寫在單一*.fla檔的一個小小練習(似乎是本末倒置了,哈哈)。

 電視機雜訊效果展示 | 原始檔下載

‧2008年7月26日

  想當初約一個月前,嘗試在網路上學習Flash時,不斷地在網路上搜刮範例和教學,說實在滿艱苦的,對於基礎語法不熟悉,卻直接看成品,往往欲速則不達。http://www.senocular.com/是找到的其中一個好網站,在Flash區有許多實用的特效,當時迷上其中一個範例:像素噴泉。那時心中正構思某個計畫,當我看到它時,就想:就是它了,我以後會用到。於是著手把它改造成想要的樣子:取消以滑鼠點擊改成自動隨機播放、移除彈跳、發射點置中、增加色彩。以當時的能力,改好它就不禁沾沾自喜了,不過很快卻發現一件笨事,當我嘗試以找來的ActionScript 3.0(AS3)語法加入音效時,卻總是失效,再仔細一看,赫然發現它根本是AS2的語法,接下來在改成AS3之路連遭挫敗,畢竟是要從頭寫起,不像改寫,一點也取巧不得,這才下定決心買一本書回來看,雖然書裡提到有關BitmapData部份不多,但好險原本程式就不難,不過作法的概念相當漂亮,可以說是點陣圖應用的典範。Flash動畫一旦舞台上的角色元件越多,動畫效能就越差,尤其像繪圖板之類的應用,每個筆畫層層疊疊,其實可以直接把覆蓋的部份去掉(除非要實作undo功能),這時用單張點陣圖就可以解決,從頭到尾,就只是點陣圖上的像素在變色,再複雜的圖都能維持相同效能,另外,程式中以調整alpha來去除舊點、更新圖形也是很好的方式。終於,以AS3改寫完成,心中一塊大石頭總算放下囉!

彩色像素噴泉示範 | 原始檔下載

  再來進入到『Flash ActionScript 3.0 動畫製作大師』的第六到八章,這本書的重點才剛要開始,這三章介紹彈跳、磨擦、互動、漸進與彈射。以物理理論而言,這些都是很簡單的,但是加到Flash中的物體運動後,運作更顯自然,簡單而好用,何樂而不為呢?這次練習改自書中原本的3顆球互相彈射(TripleSpring.as),大幅改寫程式結構成可以動態增加球,加上邊界彈回與自然磨擦,算是一個綜合演練,在示範中可以看到一些有趣的特性,球增加到一定數量後,因為無法取得內平衡,會開始暴衝;而撞到邊界後,不是整體彈回,而是碰觸到的球才彈回,然後又被其它球擠回,若加點剛性連結,或許可以把一團球再模擬成一顆擬真彈力球吧。

多球互相彈射 | 原始檔下載

‧2008年7月25日

  Bitmap類別有一些有趣的應用,包括色彩轉換(Color transforms)、濾鏡特效(Filters),可以把照片等做特殊效果,『Flash ActionScript 3.0 動畫製作大師』的作者提到,有關Bitmap的應用與深度多到可以再寫一本書了,所以書中也只有帶過,在這個練習中,只是想看看Color transform的效果,再加上書中附的拉棒(Slider)來動態調整參數,十分陽春的介面。八根拉棒前四個是乘數(Multiplier),後四個是偏移量(Offset),這四個分別為紅、綠、藍、alpha值,轉換公式是:新色=舊色*乘數+偏移量。雖然官方手冊說明乘數範圍是0.0~1.0,但是其實也可以給予負值,會有意想不到的效果,偏移量範圍介於-255~255,在範例中,把3色的乘數調成最低(-1.0),偏移量調成最高(255),就是前一個練習中的負片效果。

Bitmap色彩轉換展示 | 原始檔下載

  根據官方的線上文件,Bitmap點陣圖在應用時可以用預先寫入到螢幕外的方式,來增加效能,有空應該研究一下,範例:使用螢幕外點陣圖製作Sprite動畫 | 教學PDF下載

‧2008年7月24日

  跟著『Flash ActionScript 3.0 動畫製作大師』來到第四章「著色技術」,做了一個可以隨機進行漸層填色的小玩意,並應用第八章提到的漸進變化,原本只是想練習一下,沒有想過用途,不過調整高度後做為背景或分隔、裝飾線似乎都滿理想的。若再調整顏色數量、變化間隔、放射狀填色,可以再增點變化。

 隨機漸層填色範例

 載入內嵌圖形

  要讓ActionScript中載入圖形,在Flash CS3主要有二個方法,一個是動態載入外部檔案,用URLRequest()等函式載入,是常見到的方法;另一種方法是先將圖片匯入元件資料庫(Library)再做處理,關於這個方法,由於在其它的Flash開發環境如:Flex和FlashDevelop SDK方法又不同,書中只略為帶過,讓我試了好久還是不成功,找了半天終於找到解法。

  在Flash介面下,以File>Import>Import to Library將圖片匯入,再到Library下以右鍵點元件,選Linkage後勾選Export for ActionScript,在Class中填寫自訂名稱(範例中名稱為Picture),Base class則改為flash.display.Bitmap,之後再加入以下關鍵程式碼:

       import flash.display.Bitmap;

       var pic:Picture = new Picture(320,240); // 320和240為寬與高
       var bit:Bitmap = new Bitmap(pic);
       addChild(bit);

大功告成囉~
不過令我不解的是改變寬與高似乎沒有作用,希望能知道原因...
範例中加入colorTransform,效果只能說"酷"!

載圖與效果展示 | 原始檔下載 

‧2008年7月14日

  自從Adobe Flash CS3出了之後,ActionScript的語法大改版並加強了效能,開始有了學習的動機,在市面上找了好久,終於買下第一本書『Flash ActionScript 3.0 動畫製作大師』,這本書剛好切合我要的學習主題:由於有程式設計背景,加上網路上就有許多介面操作和動畫的教學,我要的書不可以談太多類似的介紹,主要以ActionScript為主軸,尤其一定要3.0版,說到這點,很多名為CS 3的新書,翻開仔細看竟有很多仍然用2.0以前的語法,實在是有欺騙消費者的嫌疑。加上書中講了一些簡單的3D和物理引擎的背景知識,對於已經熟悉於3D理論的人可能多餘了點,對我而言卻是剛剛好,呵。

  作者是bit-101的主人,上面有很多有趣的特效範例供人下載,不過大多數是使用AS2.0以前的語法。書中的知識其實只是冰山一角,但足夠做出好玩的東西來了,以下隨著書中練習來進行一些實作。