Flash：シンボル・インスタンスを作成して、ActionScript3.0で動かしてみるサンプル2
前回は、単純な図形を書いてシンボルにして、インスタンスのプロパティ値を操作する事で、図形がぐりんぐりん回るシンプルなものを作成してみました。
今回はその応用編。図形を画像にして、数を増やしてみます。
さらに今回は回転するのではなく、ルーレットの様に延々と横に動かしてみます。
（スタート・ストップボタンが付くのは、また別の回で）
YouTubeで紹介しています。
今回の作業を、YouTubeでも公開してみました。
よかったら参考にしてみてください。
サンプル
今回作成したサンプルのFlashファイルです。
サンプル
準備
まずは新規作成でActionScript3.0のFlashファイルを作成します。
そこに「いぬ」「うし」「ねこ」…の画像をネットで拾ってきて、それぞれシンボルに登録。
すべてのインスタンスを、整列パネルを駆使して「横幅あわせ・縦あわせ・均等揃え」で同じ大きさで、同じすき間を持たせて横一列に整列して配置します。
動物は画像ファイルなので、シンボルの動物たちはグラフィックタイプで登録されています。
動物たちをムービークリップのシンボルに変換していきます。
（ここで作成したシンボルたちの名前は、それぞれひらがなで「いぬ」「うし」… としました）
現在ステージ上には、ひらがな名のシンボルを引っ張ってきている、名前のないムービークリップ「インスタンス」たちが並んでいる状態です。
名前のないムービークリップのインスタンスに、それぞれ名前をつけていきます。
インスタンスを選んで、プロパティインスペクタでインスタンスの名前をつけます。
（インスタンス名はローマ字で「inu」「ushi」[neko]…としました）
※ シンボルとインスタンスの違い・名前の付け方は、前回の記事を参考にしてください。
インスタンス間のすき間サイズを控える
※ 以下、数値はこの例の場合です。
動物のインスタンスの大きさと、インスタンスとインスタンスのすき間の大きさを控えておきます。
最初に動物のインスタンスの大きさを全て同じに調整したはずですので、インスタンスを１つ選択してプロパティインスペクタを確認します。
「位置とサイズ」に「width:201.00」となっていますので、横幅が178pxである事がわかります。
また、インスタンスを２つ選択した状態でプロパティの「位置とサイズ」を見てみると「423.55」となっています。
この数値は、インスタンス２つ分と その間のすき間も含めた値になってます。
423.55px = 犬(201.00px) + すき間px ＋ 牛(201px)
なので、
すき間 = 423.55px - ( 犬 201px ＋ 牛 201px ) = 21.55px
（適当にやったので、キリの悪い数字で申し訳ない。）
このすき間のサイズをメモしておきましょう。
ここで控えた、インスタンス間のすき間は、次のActionScript3.0で動かす時に使用します。
配置したインスタンスをまとめたインスタンスを作成する
ここから少しややこしくなります。
ズラリとならんだ動物インスタンスを、まとめて１つのシンボルにします。
マウスでドラッグして、配置された全てのインスタンスを選択。
右クリックして、「シンボルに変換」を選択。名前を「ライン」としておきます。
これで、ステージ上には「ライン」というシンボルを引っ張ってきている１つの名前のないインスタンスが配置されている状態になりました。
この名前のないインスタンスに、プロパティインスペクタでインスタンス名をつけます。
ここでは「line1」としました。
「ライン」シンボルのインスタンスを増やす
前項で作成したインスタンス「line1」は、「ライン」というシンボルを引っ張ってきています。
「ライン」というシンボルの中には「inu」「ushi」「neko」…といった絵柄のインスタンスが含まれていますので、インスタンス「line1」の中には「inu」「ushi」「neko」…の絵柄のインスタンスを含んでいます。
では、インスタンス「line2」を追加してみます。
ライブラリには先ほど作成したシンボル「ライン」がありますので、それをドラッグして新しいインスタンスとして配置してください。
配置したら、そのインスタンスの名前を「line2」とします。
インスタンス「line2」もシンボル「ライン」を引っ張ってきていますので、「inu」「ushi」「neko」…の絵柄のインスタンスを含んでいます。
「inu」「ushi」「neko」…の絵柄は同じ名前のインスタンスですが、「line1」の中の「inu」と「line2」の中の「inu」は別物です。
わかりにくいですが、この後AcrionScript3.0を使って、別々に動かしてみるところまで行くとイメージしやすくなってくると思います。
アクション：ActionScript3.0の記述
メインのタイムラインの最初のフレームを右クリックして「アクション」を選択
アクションウィンドウに、次の様なコードを書いていきます。
（詳しいコードの記述方法は省略します）
import flash.events.Event;
import flash.display.MovieClip;
//シンボル「ライン」の持つ、各動物のインスタンス名を控えておく
var doubutu: Array = ["inu", "ushi", "neko", "buta", "sai"];
//先に控えておいたインスタンス間のすき間（ピクセル）
var sukima: int = 21.55;
//スクリプトに計算させてもＯＫ
// var sukima: int = 427.8 - (201 * 2);
//移動させる量（ピクセル）
var idou_px: int = 10;
//フレーム毎に実行
addEventListener(Event.ENTER_FRAME, Kaiten);
function Kaiten(evt: Event): void {
//動物のインスタンス名を順に処理
//特に定義していないのでキー名は数字だが、namae はString型
var namae: String;
for (namae in doubutu) {
//インスタンス「line1」と、動物インスタンス名を順番に渡す
Hidari(line1, doubutu[namae]);
//インスタンス「line2」と、動物インスタンス名を順番に渡す
Migi(line2, doubutu[namae]);
}
}
//左に動かす
function Hidari(mc: MovieClip, doubutu_namae: String): void {
//受け取った対象のラインのインスタンスと、動物インスタンス名で対象を特定
var tg: MovieClip = mc[doubutu_namae]; // tg は動物インスタンス
//移動させる(座標のX軸をずらす)
tg.x -= idou_px;
//300px以上領域外に出ていたら、右はじに移動
if (tg.x < -300) {
//現在の座標Xに、ラインのインスタンス幅 ＋ すき間 を足して移動させる
tg.x = tg.x + mc.width + sukima;
}
}
//右に動かす
function Migi(mc: MovieClip, doubutu_namae: String): void {
//受け取った対象のラインのインスタンスと、動物インスタンス名で対象を特定
var tg: MovieClip = mc[doubutu_namae]; // tg は動物インスタンス
//移動させる(座標のX軸をずらす)
tg.x += idou_px;
//300px以上領域外に出ていたら、左はじに移動
//stage.stageWidth で表示領域（ステージ）の横幅を取得
if (tg.x > stage.stageWidth + 300) {
//現在の座標Xに、ラインのインスタンス幅 ‐ すき間 を引いて移動させる
tg.x = tg.x - mc.width - sukima;
}
}
上メニューから、[デバッグ]→[デバッグ]で確認してみて、上の列は右に、下の列は左に動物たちが動いていれば成功です。
YouTubeで紹介しています。
今回の作業を、YouTubeでも公開してみました。
よかったら参考にしてみてください。
