アド企画 制作部
アド企画 制作部
 

Flash:シンボル・インスタンスを作成して、ActionScript3.0で動かしてみるサンプル

Flash:シンボル・インスタンスを作成して、ActionScript3.0で動かしてみるサンプル

Flash:インスタンス名でつまづく

 

Flashでは、「シンボル」をライブラリに登録して、それらを「インスタンス」として配置する。
同じシンボルを複数配置するという事は「1つシンボル」と「複数のインスタンス」という事になる。

シンボルとインスタンス別物であることなんかはわかっているが、作業していてドハマリした。
特にテストでは1つのシンボルを登録し、1つのインスタンスを配置して動かそうと作業していたので、ハマるハマる。

結局、「インスタンスの名前をつけているつもりが、一生懸命シンボルの名前をつけていた」「インスタンスのプロパティをみているつもりが、一生懸命シンボルのプロパティをみていた」というマヌケなお話。


とにかく「Flashでシンボル・インスタンスを作成して、AcrionScript3.0で配置したインスタンスのプロパティを変更して動かすまで」のサンプルを作成してみる。

新規作成

[ファイル]→[新規]で、種類を「ActionScript3.0」で、新しいFlashデータを作っていく。

ActionScript3.0で新しいFlashデータを作成

 

ActionScript3.0で新しいFlashデータを作成

シンボルを作り、インスタンスを配置…

まずは「シンボルを作成して、インスタンスを配置する」

適当な図形を描いて、右クリックして「シンボルに変換」とする。

ムービークリップを作成

シンボルのプロパティには「名前」を入力、種類は「ムービークリップ」にして、OK。

ムービークリップを作成

これで「シンボル」が作成され「インスタンス」が配置される。

私にとってはこれがワナだった。「プロパティ」で設定したのはシンボルの名前。決してインスタンスの名前ではない。
考えなくてもわかること、なのに…すっかりインスタンスの名前を付けた気になっていた。
画面上に配置されているのはシンボルではなく、インスタンス。シンボルを引っ張りこんだインスタンス。説明が難しい…。

ここでは、シンボルの名前に「mc」とつけてしまいました。これも間違いのもと…?

インスタンスの名前を設定

繰り返しになるが、前項で設定したプロパティは「シンボルの」プロパティ。
これからインスタンスのプロパティに、インスタンスの名前を設定していく。


配置されているインスタンスをクリックして、青い四角で選択された状態にして、「プロパティ」インスペクタを開く。
初期設定の作業画面なら、右側の「ライブラリ」の隣にある「プロパティ」タブ。
ない場合は、上メニューの[ウィンドウ]→[プロパティ]で表示できる。

インスタンスのプロパティを設定

 

インスタンスの名前を設定

ちなみに上の図で赤い下線を引いた部分。
『インスタンス:mc [入れ替え]』となっていて、表示が紛らわしい。
まるで「mc」というインスタンスができているように見えるが、「このインスタンスは『mc』というシンボル(オブジェクト)を引っ張りこんで使っていますよ」という意味。
(あまり正しい説明じゃないかも。あくまでも、そんなイメージで、という事で。)


この状態ではまだインスタンスには名が付いておらず、インスタンス名を入力する場所には『<インスタンス名>』となってるので、ここにインスタンス名を入力する。
このインスタンスの名前が、後にActionScriptでも使用するインスタンス名。
ここでは「instance_mc」としてみた。

20160116_c3

ActionScript3.0で動かしてみる

この配置したインスタンスを、ActionScript3.0で動かしてみる。
使用するコードは、次のコード。


import flash.events.Event;

addEventListener(Event.ENTER_FRAME, kaiten);
/*
(1)「addEventListener」で監視。何を? → フレームが読み込まれるのを(Event.ENTER_FRAME)。
(2)監視にひっかかったら → 「kaiten」というfunctionを実行する。 
*/


function kaiten(evt: Event): void {
    instance_mc.rotation += 10;
    /*
    インスタンス「instance_mc」のプロパティ「rotation」の値に10足す == 10度回転する
    */
}

ここで考えるのが、このコードを「どこに記述するのか」という事。
スクリプトはメインのタイムラインのフレームにも、シンボルのタイムラインのフレームにも記述できる。

正解はメインのタイムライン。
メインのタイムラインに配置したインスタンスなので、メインのタイムラインにコードを記述する。
「instance_mc」という名前のインスタンスはシンボル「mc」の中には存在しないので、シンボルのタイムラインに記述したら「インスタンスが見つかりません」的なエラーで動かない。

メインのタイムラインの最初のフレームを右クリックして、「アクション」を選択する。

ActionScript3.0を記述

アクションウィンドウで先のコードを記述する。

ActionScript3.0を記述

これで、上メニューから[デバッグ]→[ムービーをデバッグ]→[FlashProfessionalを使用]とすると…

デバッグで確認

ぐりんぐりん回っていれば成功

デバッグで確認

…ですが、基準点を調整するの忘れましたね。
デフォルトのまま左上が基準点のシンボル作っちゃったので、左上を基準にぐりんぐりん…画面からはみでてしまった。