アクセシビリティ

Flashクイックスタート：ActionScript 3.0を使用したプログラミング

シンボルとドキュメントクラスの使用

ActionScriptコードは、アクションパネルに入力されると、現在選択されているFLAファイルのフレームにリンクされます。SWFファイルは、コードの複雑さの一因ですが、タイムラインのフレーム上のコードであるフレームスクリプトによってのみ存在するコードからコンパイルできます。ただし、フレームスクリプトコードの使用にはいくつか難点があります。

ActionScriptを外部ファイルで記述すると、これらの難点を回避できます。外部ファイルはオーサリングツールがなくても編集でき、そのためデザイナーとデベロッパーが協力して作業できます。形式化された構造はコードの品質向上も促進し、将来のFlashプロジェクトとFlexプロジェクトでの再利用が容易になります。

外部ActionScriptへのFLAファイルのリンク

外部のActionScriptにFLAファイルをリンクするには、ドキュメントクラスを指定します。そのためには、選択してあるすべてのステージアイテムの選択を解除し、プロパティパネルを開きます。このパネルには、背景色やフレームレートなど、ドキュメントに関連する設定が含まれます。また、「ドキュメントクラス」フィールドもあります。このフィールドに、AS拡張子を除いた外部ファイルの名前を設定します。このファイルには、AS拡張子より前のファイル名と一致する名前のパブリッククラスが含まれる必要があります。

例えば、新しいFLAを作成し、TestFile.flaという名前で保存します。Flashまたは任意のテキストエディタを使用して新しいASファイルを作成し、FLAファイルと同じディレクトリにMyClass.asという名前で保存します。MyClass.asに次のコードを入力します。

package
{
   import flash.display.Sprite;
   
   public class MyClass extends Sprite
   {
      public function MyClass() {
         trace("Hello World");
      }
   }
}

TestFile.flaのプロパティパネルで、「ドキュメントクラス」フィールドに「MyClass」を設定して保存します。ムービーをプレビューすると、「Hello World」が出力パネルにトレースされます。

注意：MyClass.asの読み込みステートメントは、flash.*名前空間の他の読み込みと同様に、タイムライン上で記述されるコードには必要ありません。Flash CS3 Professionalは、コンパイルの前にこれらのパッケージを自動的に読み込みます。外部ファイルでは自動的に読み込まれないため、flash.*名前空間のクラスを使用する外部ActionScriptファイルのコンパイルを正常に行うには、読み込みステートメントが不可欠です。

トップへ戻る

ライブラリシンボルおよびドキュメントクラス用のActionScriptの作成

デフォルトでは、Flashドキュメントのライブラリ内のムービークリップシンボルのインスタンスは、動的には作成できません（つまり、ActionScriptから作成されます）。これは、ActionScriptで使用するために書き出される各シンボルにより、SWFファイルのサイズが大きくなるためです。このため、ActionScriptでシンボルを使用できるようにするには、シンボルがActionScript用に書き出されるよう指定する必要があります。

ActionScript用にシンボルを書き出すには：

  1. ライブラリパネルでシンボルを選択し、シンボルプロパティダイアログボックスを開きます。
  2. ライブラリパネルでシンボルを選択し、シンボルプロパティダイアログボックスを開きます。
  3. 「リンケージ」セクションで、「ActionScriptに書き出し」チェックボックスをオンにします。
    4. これにより、「クラス」フィールドと「基本クラス」フィールドが使用可能になります。デフォルトのままにするか、またはそれぞれに適切な名前を入力します。
  4. 「OK」ボタンをクリックして、変更を保存します。

デフォルトでは、「クラス」フィールドには、シンボル名からスペースを除いたものが挿入されます（例えば、シンボル名「Tree House」は「TreeHouse」になります）。シンボルがビヘイビアとしてカスタムクラスを使用するよう指定するには、パッケージ名を含めたクラスの完全な名前をこのフィールドに入力します。ActionScriptでシンボルのインスタンスを作成できる必要はあるがビヘイビアを追加する必要はない場合は、クラス名をそのままにしておくことができます。

リンケージ設定を変更すると、Flashは、「クラス」フィールドで指定されているクラスの定義を外部ActionScriptファイルで検索します。定義が見つからない場合は、警告が表示されます。MovieClipクラスの機能以外の追加ビヘイビアが必要ない場合は、この警告を無視して構いません。クラスは自動的に生成されます。自動的に生成されるクラスは、次のような内容になります。

package
{
   import flash.display.MovieClip;
   
   public class ExampleMovieClip extends MovieClip
   {
      public function ExampleMovieClip() {
      }
   }
}

基本クラスの値のデフォルトはflash.display.MovieClipです。外部クラスの機能を使用する自動的に生成されるクラスを使用しない場合は、このデフォルトを使用します。基本クラスは拡張と同じ意味ではありません。それ自体が別のクラスを拡張するカスタムクラスを指定する場合、そのスーパークラスを基本クラスとして指定する必要はありません。この場合は、デフォルトのflash.display.MovieClipで十分です。ただし、例えば機能は同じでスキンが異なる２つのシンボルRedFishとBlueFishが必要な場合は、オーサリングツールを使用して異なる外観を作成した後、それらの基本クラスをFishに設定し、外部のFish.asファイルのFishクラスを使用して両方の魚に機能を提供します。

カスタムクラスを作成するときは、自動的に生成されるクラスと同じ構造の外部ファイルを作成し、適切なプロパティとメソッドをそのクラスに追加します。例えば、幅が50ピクセルで高さが50ピクセルの円を含むムービークリップシンボルがあり、このシンボルをCircleという名前のクラスでActionScriptに書き出すよう指定するものとします。次のコードは、FLAファイルと同じディレクトリに保存されるCircle.asファイルに記述されると、MovieClipクラスを拡張し、追加メソッドgetArea()およびgetCircumference()を含むシンボルを提供します。

package 
{
    import flash.display.MovieClip;
    
    public class Circle extends MovieClip
    {
        public function Circle()
        {
        }
        
        public function getArea():Number
        {
            // The formula is Pi times the radius squared.
            return Math.PI * Math.pow((width / 2), 2);
        }
        
        public function getCircumference():Number
        {
            // The formula is Pi times the diameter.
            return Math.PI * width;
        }
    }
}

次のコードは、Flashドキュメントのフレーム１のキーフレームに配置され、シンボルのインスタンスを作成して画面に表示します。

var c:Circle = new Circle();
addChild(c);
trace(c.width);
trace(c.height);
trace(c.getArea());
trace(c.getCircumference());

このコードは、個別のアセットをステージにドラッグする方法の代わりとなる、ActionScriptベースのインスタンス化を示しています。この例では、ムービークリップのすべてのプロパティに加えて、Circleクラスで定義されているカスタムメソッドも持つ円が作成されます。

トップへ戻る

カスタムクラスの使用

タイムライントゥイーンは、数が増えると、作成と管理が困難になる場合があります。特に、最初のトゥイーンとアニメーションの開始が異なるフレームの場合です。外部クラスを使用すると、このプロセスを単純化し、変更が容易になります。

例えば、雪が降るアニメーションの作成について考えてみます。可能性のあるワークフローの１つは、タイムライントゥイーンとフレームスクリプトを使用することです。この方法では、雪片のシンボルを作成し、舞い落ちてくるシンボルの一連のトゥイーンを提供します。その後、複数のインスタンスをステージの上部に横に並べて配置します。ムービーを実行すると、複数の雪片が舞い落ちてきます。

この時点では、個々の雪片の外観とアニメーションがまったく同じなので、それほどリアルな降雪には見えません。個々の雪片を選択してアルファプロパティを変更することで、変化を付けることができます。また、雪片のシンボルを複製し、ゆっくり落ちてくる雪片や横に広がる雪片を新しく作成することもできます。ただし、この方法には欠点があります。最後の雪片を作成しているときに、最終キーフレームでアルファプロパティを０に設定すれば消えていく雪片を表現できることに気付いた場合、各雪片のムービークリップを変更する必要があります。オーサリングツールを使用してこのような方法で多様性を追加することは可能ですが、それによって得られるメリットは時間と手作業の精度に依存し、その後の変更はあっという間に時間のかかる困難な作業になってしまいます。

これに代わる方法として、ActionScriptを利用できます。複数の雪片のムービークリップを作成してそれぞれを異なるトゥイーンにする代わりに、ActionScriptに書き出すものを１つ作成し、そのシンボルプロパティでSnowflakeという名前のカスタムクラスを指定します。次に、自動生成されるクラスをモデルとしてActionScriptファイルを作成します。最後に、雪片のビヘイビアを定義するプロパティとメソッドを追加します。プログラムによるアニメーションは、オーサリングツールで作成される多数のトゥイーンの代わりに使用できます。

以下に示すのはカスタムSnowflakeクラスの例であり、このクラスではEvent.ENTER_FRAMEイベントを使用して雪片の位置を更新しています。

package {
   import flash.display.Shape;
   import flash.events.Event;
   import flash.filters.BlurFilter;

   public class Snowflake extends Shape {
      private var stageWidth:int = 550;
      private var stageHeight:int = 450;
      private var highestDropSpeed:uint = 16;
      private var dropSpeed:int = Math.round(Math.random() * Math.random() * highestDropSpeed);
      private var incrementer:int = Math.round(Math.random() * 100);
      private var shades:Array = [ 0xFFFFFF, 0xCCCCCC, 0x999999, 0x666666 ];
      private var windSpeed:int = 2;
      
      public function Snowflake() {
         graphics.beginFill(shades[ Math.ceil(Math.random() * shades.length) ]);
         graphics.drawCircle(0,0,4);
         graphics.endFill();
         
         filters = [ new BlurFilter(1,dropSpeed,1) ];
         addEventListener(Event.ENTER_FRAME,update); 
         reset();
      }
      private function reset():void {
         y = Math.random() * stageHeight * -1;
         x = Math.random() * stageWidth - (windSpeed*100);
         scaleX = scaleY = 0.25 + (Math.random() * Math.random() * 0.75);
      }
      private function update(e:Event):void {
         y += dropSpeed;
         x += windSpeed + Math.sin(incrementer/10) * (1/(dropSpeed/3));
         if (y > stageHeight) {
            reset();
         }
         incrementer++;
      }
   }
}

雪が降るアニメーションを作成するには、黒い背景のFLAファイルに次のコードを追加します。

for(var i:uint; i<800; i++){
   var snowflake:Snowflake = new Snowflake();
   addChild(snowflake)
}

結果

Alertこのコンテンツを視聴するには Flash が必要です

今すぐ無償Flash Playerをダウンロード！

Flash Player を入手

この例のソースファイルをダウンロードするには、ここをクリックします。

トップへ戻る

合計800個の雪片が作成され、それぞれの雪片は異なるサイズ、速度、および色の特性を持っています。また、外部クラスを変更すると、視覚表現に大きなエフェクトを付けることができます。結果的に、オーサリングツールを使用して手動で作成したものよりも、よりリアルな降雪に見えます。

ActionScriptへのタイムライントゥイーンの移行

タイムラインを使用して作成されたアニメーションは、適用可能なイージングおよびフィルタを保持したまま、モーションXMLエレメントを使用してActionScriptに移行できます。これを行うには、トゥイーンを囲んでいる一連のフレームを選択し、Flashの「コマンド」メニューから「モーションXMLの書き出し」を選択します。書き出された基本的なXMLファイルは、次のようになります。

<Motion duration="10" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
<source>
<Source frameRate="31" x="0" y="0" scaleX="1" scaleY="1" rotation="0" elementType="movie clip" symbolName="Symbol 1">
<dimensions>
<geom:Rectangle left="0" top="0" width="10" height="10"/>
</dimensions>
<transformationPoint>
<geom:Point x="0" y="0"/>            </transformationPoint>
</Source>
</source>

<Keyframe index="0">
<tweens>
<SimpleEase ease="0"/>
</tweens>
</Keyframe>

<Keyframe index="9" x="10">
<tweens>
<SimpleEase ease="0"/>
</tweens>
</Keyframe>
</Motion>

ステージでオブジェクトを選択して「モーションXMLの読み込み」コマンドを実行するか、Animatorクラスを使用して、コードによってモーションXMLエレメントを表示オブジェクトに適用することにより、XMLをオーサリング環境に読み込み直すこともできます。

次の例では、Animatorクラスを使用して、モーションXMLエレメントを、ステージ名ボックス上にある表示オブジェクトに割り当てています。

import fl.motion.Animator;

var motionXML:XML =
<Motion duration="10" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
<source>
<Source frameRate="31" x="0" y="0" scaleX="1" scaleY="1" rotation="0" elementType="movie clip" symbolName="Symbol 1">
<dimensions>
<geom:Rectangle left="0" top="0" width="10" height="10"/>
</dimensions>
<transformationPoint>
<geom:Point x="0" y="0"/>
</transformationPoint>
</Source>
</source>

<Keyframe index="0">
<tweens>
<SimpleEase ease="0"/>
</tweens>
</Keyframe>

<Keyframe index="9" x="10">
<tweens>
<SimpleEase ease="0"/>
</tweens>
</Keyframe>
</Motion>

var animator:Animator = new Animator(motionXML,box);
animator.play();

トップへ戻る

関連するFlashクイックスタート

著者について

Buck DeForeは、アドビドキュメンテーションチーム所属の開発者兼ライターです。

次のステップ

Flashデベロッパーセンターホーム
Flash Design Center
Flash習得ガイド*
Flashクイックスタート
Flashチュートリアル
3D/アニメーション*
アクセシビリティ*
ActionScript*
アクティブコンテンツ
コンポーネント*
製品間の統合*
データ統合*
描画（Design Center）
Flash Playerの検知*
ファーストステップガイド*
グラフィックエフェクト*
JavaScript API*
移行*
モバイル＆デバイス
RIA*
セキュリティ*
テンプレート*
テスト/ユーザビリティ*
ビデオ*
Webサービス*
Flashサンプル
Flashダウンロード
Flashコミュニティ
その他のリソース
Flashサポートセンター
Flashドキュメンテーション
Flashサポートフォーラム
Flashブログ*
Flashイベント
Flashオンラインイベント*
Adobe Labs*
アドビ コミュニティエキスパート*

関連リソース

すべての製品のデベロッパーセンター*

すべてのテクノロジセンター*