ソーシャルゲームに生かすFlash Lite制作テク
ソーシャルゲームに生かすFlash Lite制作テク(2)

アニメーターのためのFlash Lite用ActionScript入門


山崎 基央
2010/10/13

スクリプトで市松模様を繰り返して描くには

- PR -

 領域一面に市松模様を並べるのは、もちろん手動で(Flash Proなどのオーサリングツールで)作ることもできますが、スクリプトを使うことで、市松模様でない別の模様にするときに、変更するムービークリップが1つで済みます。

新規ファイル作成

 [ファイル]メニューの[新規作成]から[モバイル]を選び、ステージサイズを指定しましょう。詳しくは、前回の記事を参照してください。

インスタンス名を付ける

 最初に準備として、24px×24pxの以下のような市松模様ベースを描いてください。

  シンボルに変換して「mc_ichimatsu」という名前を付けます。これを、ステージの1フレーム目のステージ外に置きます。

 配置した後、シンボルを選択して、インスタンス名を付けます。インスタンス名は、シンボルの[プロパティ]パネルで設定できます。

 インスタンス名に「ichimatsu」と入力します。

スクリプトを書く

 スクリプトを書いて、画面を市松模様で埋めましょう。以下のようなスクリプトをキーフレームに書いてください。スクリプトの解説は後述するので、取りあえず無心でアクションパネルの中に書いていきましょう。

count = 0;

for(i=0;i<10;i++){
for(j=0;j<10;j++){
count++;
copy_ichimatsu = "ichimatsu" add count;
duplicateMovieClip("ichimatsu",copy_ichimatsu,count);
tellTarget(copy_ichimatsu){
_x = _root.j * 24;
_y = _root.i * 24;
}
}
}

実行結果

 [Ctrl]+[ENTER]キーを押すと、以下のような画面になっていると思います。

市松模様になりました!

 もし「エラーが出てどうにもならない!」となった場合は、サンプルの.flaファイルをこちらに置いておきますので、ダウンロードしてFlash Proで読み込んで参考にしてみてください。

スクリプトのコード解説

 コードについて説明します。

count = 0;

 1行目では、「count」という変数に「0」という値を入れています。

処理を繰り返す「for文」

 3〜4行目では、for文を使って、「繰り返し」をさせています。for文の構文は、以下のように一般的なものです。

for(【初期値】;【繰り返し条件】;【繰り返されたときにどうするか】)

 サンプルの3行目のfor文を日本語で読み解くと、「変数iは初期値0、変数iが11よりも小さい間処理を繰り返す。ただし、1回の処理が終わるごとに変数iには1を足す」という意味です。

1を足す「インクリメント」

 5行目で出てくる、「count++;」でも使っている「++」は「インクリメント」といって、「いまある数字に1を足す」という意味です。

文字列を連結する「add」

        copy_ichimatsu = "ichimatsu" add count;

 6行目では、変数copy_ichimatsuに文字列「ichimatsu」に変数countをつなげたものを代入するということをしています。Flash Lite 1.1では文字列の連結に「+」を使えません。文字列の連結は「add」を使用します。

インスタンスのコピーを作る「duplicateMovieClip」

 さて、ここからが今回の肝となるスクリプトです。

        duplicateMovieClip("ichimatsu",copy_ichimatsu,count);

 7行目のduplicateMovieClip()は、「すでに用意されているインスタンスのコピーを作りますよ」という命令です。以下のような使い方をします。

duplicateMovieClip(【コピー元のインスタンス名】,【新しいインスタンスの名前】,【深度】)

 7行目を日本語で読み解くと、「インスタンス名 ichimatsu を copy_ichimatsu という名前で、深度 count に置きます」というふうになります。

座標の位置を合わせる

        tellTarget(copy_ichimatsu){
_x = _root.j * 24;
_y = _root.i * 24;
}

 ついに最後のコードです。先に日本語で解釈を書いておきます。8〜11行目は「インスタンス『copy_ichimastu』の _x座標と_y座標を、iとjの値を使って位置を合わせる」という意味です。

 tellTarget()という命令は、その中に入れたインスタンス名を使って、インスタンスのプロパティ(“属性値”のこと。例えば、先述の「_x」「_y」など)にアクセスできます。「_root.」という記述がありますが、これはtellTarget()を使うときの“おまじない”だと思ってください。

 mc_ichimatsuの中身を点滅するようなアニメーションにすると、ステージ全体が同じように動きます。

 また今回は、敷き詰めるようなコードにしましたが、duplicateMovieClip()を使うと、インスタンス1つを用意するだけで、適宜、必要なだけインスタンスを増やせるので、そういう意味でも便利です。

 次ページでは、for文を使わずに、市松模様を左はじから右下まで順々に敷き詰めるようにアニメーションさせます。

2/3

 INDEX
ソーシャルゲームに生かすFlash Lite制作テク(2) 
アニメーターのためのFlash Lite用ActionScript入門
  Page1
Flashアニメーターがソーシャルゲームを作るために
そもそも、ActionScriptってどこに書くの?
Page2
スクリプトで市松模様を繰り返して描くには
  Page3
タイムラインを使って繰り返し処理を実装するには
実は、これが「プログミラング」
おまけTips!「“剰余計算”もプログラミングの役に立つ」

[an error occurred while processing this directive]

 Smart&Social フォーラム トップページへ



Smart & Social フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

Smart & Social 記事ランキング

本日 月間