描画 API の例:Algorithmic Visual GeneratorFlash Player 9 以降、Adobe AIR 1.0 以降 この例に示す Algorithmic Visual Generator は、ステージに複数の「サテライト」(円軌道を移動する円)を動的に描画します。ここでは、次の機能について説明します。
前のサブセクションの例では、Event.ENTER_FRAME イベントを使用して、単独の「サテライト」をアニメーション化しました。この例では、前の例を拡張して、複数のサテライトのビジュアル表示を即時に更新する一連のスライダーがあるコントロールパネルを作成します。 この例では、コードを外部クラスに形式化し、サテライト作成コードを、各サテライトへの参照を satellites 配列に格納するループにラップします。 このサンプルのアプリケーションのファイルを入手するには、www.adobe.com/go/learn_programmingAS3samples_flash_jp を参照してください。 このアプリケーションのファイルは、Samples/AlgorithmicVisualGenerator フォルダーにあります。 このフォルダーには次のファイルが含まれます。
リスナーの設定このアプリケーションは、まず 3 つのリスナーを作成します。 最初のリスナーは、サテライトを再構築する必要がある、コントロールパネルから送出されるイベントを監視します。 2 番目のリスナーは SWF ファイルのステージのサイズ変更を監視します。3 番目のリスナーは 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 を使用したビジュアルの生成方法の基本的な概略を示しています。 比較的少ない行数のコードを使用して、とても複雑に見えるインタラクティブ機能を作成しています。 それでも、この例を少し変更して拡張できます。 いくつかのアイデアを示します。
描画 API は、実行時に基本的なシェイプを描画する、Flash オーサリング環境で視覚効果を作成する代替機能として使用できます。 また、手動で作成するのが不可能な変化やスコープの視覚効果を作成するのにも使用できます。 描画 API と若干の数式を使用することで、ActionScript 作成者は斬新な作品を実現できます。 |
|