繪製 API 範例:演算法視覺產生器Flash Player 9 以及更新的版本,Adobe AIR 1.0 以及更新的版本 演算法視覺產生器範例會以動態方式在舞台上繪製數個「衛星」,或是讓幾個圓形繞著圓形軌道運行。這裡要特別探討的重點包括:
上一節中的範例使用 Event.ENTER_FRAME 事件,製作單個「衛星」的動畫。本範例則以此為基礎加以擴充,建立包含一系列滑動軸的控制面板,可以立即更新數個衛星的視覺顯示。此範例將程式碼寫成外部類別,然後將每個衛星的參考儲存在 satellites 陣列中,以將建立衛星的程式碼納入迴圈中。 若要取得此樣本的應用程式檔案,請參閱 www.adobe.com/go/learn_programmingAS3samples_flash_tw。您可以在 Samples/AlgorithmicVisualGenerator 檔案夾中找到應用程式檔案。此資料夾包含下列檔案:
設定偵聽程式應用程式首先會建立三個偵聽程式。第一個會偵聽來自控制面板的傳送事件,此事件告知需要重新建立衛星。第二個會偵聽 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 來產生影像。它使用了行數相對較少的程式碼,來建立可顯示相當複雜的互動式視覺效果。即使如此,此範例仍舊可透過些微更改來延伸其效果。下列是幾個可行的作法:
當您想要在 Flash 編寫環境中建立視覺效果時,另一個作法就是使用繪圖 API 在執行階段繪製基本形狀。但是這種作法也可運用在建立手繪所無法辦到的各種不同視覺效果。ActionScript 作者只要運用繪圖 API 以及一點點的數學知識,就可以將生命注入許多令人耳目一新的創作作品中。 |
|