例 : Algorithmic Visual Generator

この例に示す Algorithmic Visual Generator は、ステージに複数の "サテライト" (円軌道を移動する円) を動的に描画します。ここでは、次の機能について説明します。

描画 API を使用した、動的な外観を持つ基本的なシェイプの描画
描画に使用するプロパティとユーザー操作との連動
各フレーム上のステージをクリアして再描画することによる、アニメーションの表示

前のサブセクションの例では、Event.ENTER_FRAME イベントを使用して、単独の "サテライト" をアニメーション化しました。この例では、前の例を拡張して、複数のサテライトのビジュアル表示を即時に更新する一連のスライダがあるコントロールパネルを作成します。この例では、コードを外部クラスに形式化し、サテライト作成コードを、各サテライトへの参照を satellites 配列に格納するループにラップします。

このサンプルのアプリケーションファイルを入手するには、www.adobe.com/go/learn_programmingAS3samples_flash_jp を参照してください。このアプリケーションのファイルは、"Samples/AlgorithmicVisualGenerator" フォルダにあります。このフォルダには次のファイルが含まれます。

ファイル	説明
AlgorithmicVisualGenerator.fla	Flash (FLA) のメインアプリケーションファイル。
com/example/programmingas3/algorithmic/AlgorithmicVisualGenerator.as	ステージにサテライトを描画する機能や、コントロールパネルからのイベントに応答して、サテライトの描画に影響する変数を更新する機能など、アプリケーションの主要な機能を提供するクラス。
com/example/programmingas3/algorithmic/ControlPanel.as	複数のスライダを使用したユーザー操作を管理し、それに応答してイベントを送出するクラス。
com/example/programmingas3/algorithmic/Satellite.as	中心点の周囲の軌道内を回転する表示オブジェクトを表すクラス。現在の描画状態に関連するプロパティが含まれます。

リスナーの設定

このアプリケーションは、まず 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 を使用したビジュアルの生成方法の基本的な概略を示しています。比較的少ない行数のコードを使用して、とても複雑に見えるインタラクティブ機能を作成しています。それでも、この例を少し変更して拡張できます。いくつかのアイデアを示します。

doEveryFrame() 関数で、サテライトのカラー値を増やします。
doEveryFrame() 関数で、サテライトの半径を時間の経過と共に縮小または拡大します。
サテライトの軌道は円である必要はありません。たとえば、Math クラスを使用して正弦波に沿ってサテライトを移動します。
他のサテライトとのヒット検出を使用します。

描画 API は、実行時に基本的なシェイプを描画する、Flash オーサリング環境で視覚効果を作成する代替機能として使用できます。また、手動で作成するのが不可能な変化やスコープの視覚効果を作成するのにも使用できます。描画 API と若干の数式を使用することで、ActionScript 作成者は斬新な作品を実現できます。

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート

現在のページ: http://livedocs.adobe.com/flash/9.0_jp/main/00000183.html