繪製 API 範例:演算法視覺產生器

Flash Player 9 以及更新的版本,Adobe AIR 1.0 以及更新的版本

演算法視覺產生器範例會以動態方式在舞台上繪製數個「衛星」,或是讓幾個圓形繞著圓形軌道運行。這裡要特別探討的重點包括:

  • 使用繪圖 API 來繪製具有動態外觀的基本形狀

  • 連接使用者互動與繪圖中所使用的屬性

  • 在每個影格中清除舞台並重新繪製來表現動畫

上一節中的範例使用 Event.ENTER_FRAME 事件,製作單個「衛星」的動畫。本範例則以此為基礎加以擴充,建立包含一系列滑動軸的控制面板,可以立即更新數個衛星的視覺顯示。此範例將程式碼寫成外部類別,然後將每個衛星的參考儲存在 satellites 陣列中,以將建立衛星的程式碼納入迴圈中。

若要取得此樣本的應用程式檔案,請參閱 www.adobe.com/go/learn_programmingAS3samples_flash_tw 。您可以在 Samples/AlgorithmicVisualGenerator 檔案夾中找到應用程式檔案。此資料夾包含下列檔案:

檔案

說明

AlgorithmicVisualGenerator.fla

Flash Professional 中的主要應用程式檔案 (FLA)。

com/example/programmingas3/algorithmic/AlgorithmicVisualGenerator.as

此類別可提供應用程式的主要功能,包括在舞台上繪製衛星並回應來自控制面板的事件,以便更新會影響衛星繪製效果的變數。

com/example/programmingas3/algorithmic/ControlPanel.as

此類別可透過數個滑動軸來管理使用者互動,並在發生互動時傳送事件。

com/example/programmingas3/algorithmic/Satellite.as

此類別不只可用來代表繞著軌道中心點旋轉的顯示物件,其中更包含與其現有繪圖狀態相關的屬性。

設定偵聽程式

應用程式首先會建立三個偵聽程式。第一個會偵聽來自控制面板的傳送事件,此事件告知需要重新建立衛星。第二個會偵聽 SWF 檔的舞台大小變更。第三個則是偵聽在 SWF 檔中每個通過的影格,並使用 doEveryFrame() 函數來重新繪圖。

建立衛星

一旦設定好這些偵聽程式,就會呼叫 build() 函數。這個函數會先呼叫 clear() 函數,清空 satellites 陣列並清除舞台上先前完成的所有繪圖。這是必要的步驟,因為每當控制面板傳送事件時,就會重新呼叫 build() 函數,例如當顏色設定已經變更時,執行這項作業。在這種情況下,必須移除所有的衛星並重新建立衛星。

函數會接著建立衛星、設定建立時所需的初始屬性 (例如可在軌道的任意點位置上開始的 position 變數,以及在此範例中,就算建立了衛星,也不會改變的 color 變數)。

每建立一個衛星,就會將相關參考加入 satellites 陣列中。呼叫 doEveryFrame() 函數時,該函數就會更新陣列中的所有衛星。

更新衛星位置

doEveryFrame() 函數是應用程式動畫程序中的核心。每個影格都會呼叫它,其呼叫速率等於 SWF 檔的影格速率。由於繪圖的變數會稍微變更,這個函數可用來傳達動畫的外觀。

此函數首先會清除先前的所有繪圖,並在背景重新繪圖。然後,它會重複執行每個衛星容器,並遞增每個衛星的 position 屬性,接著更新在使用者與控制面板互動中可能發生變化的 radius orbitRadius 屬性。最後,衛星會呼叫 Satellite 類別的 draw() 方法,將自己更新至新的位置。

請注意, i 這個計數單位,只能遞增到 visibleSatellites 變數為止。這是因為假如使用者已經透過控制面板限制了要顯示的衛星數量,則不應該重新繪製迴圈中剩餘的衛星,而是應該加以隱藏起來。如果負責繪圖的迴圈後面馬上跟著另一個迴圈,就會出現這個情況。

當 doEveryFrame() 函數完成工作後,螢幕上的 visibleSatellites 數量就會隨著位置更新。

回應使用者互動

使用者互動必須透過 ControlPanel 類別所管理的控制面板才能產生。此類別會在設定偵聽程式時,一併設定每個滑動軸的個別最小、最大與預設值。每當使用者移動這些滑動軸時,就會呼叫 changeSetting() 函數。此函數會更新控制面板的屬性。如果變更要求重新建立顯示,則會傳送事件並在主應用程式檔中處理該事件。隨著控制面板的設定變更, doEveryFrame() 函數也會使用更新的變數來繪製每個衛星。

進一步自訂

此範例僅簡單說明如何使用繪圖 API 來產生影像。它使用了行數相對較少的程式碼,來建立可顯示相當複雜的互動式視覺效果。即使如此,此範例仍舊可透過些微更改來延伸其效果。下列是幾個可行的作法:

  • 使用 doEveryFrame() 函數來遞增衛星的顏色值。

  • 使用 doEveryFrame() 函數,隨著時間變動縮減或展開衛星半徑。

  • 衛星半徑不一定非得沿著圓形軌道移動;例如,它可以使用 Math 類別沿著正弦波形移動。

  • 衛星可以使用感應區偵測功能來偵測其它衛星。

當您想要在 Flash 編寫環境中建立視覺效果時,另一個作法就是使用繪圖 API 在執行階段繪製基本形狀。但是這種作法也可運用在建立手繪所無法辦到的各種不同視覺效果。ActionScript 作者只要運用繪圖 API 以及一點點的數學知識,就可以將生命注入許多令人耳目一新的創作作品中。