for文によるループ処理を学ぼう！

効果的なトランジションの作成

　Flashでは、2つの画像を転換する際に「トランジション」と呼ばれる画像切り替えのエフェクトがよく使われます。

　今回は、これまでの連載で学んだActionScriptを応用して、効果的なトランジションを作成しましょう。サンプルファイルはこちらからをダウンロード（http://www.thinkit.co.jp/images/article/81/4/8142.zip）できます（8142.zip/238 KB）。

　最初に素材の準備を行います。シーンのレイヤーに2枚の画像を配置します。それぞれをムービークリップとしてシンボル化し、インスタンス名を「photo1」「photo2」とします。全体の仕組みとしては、上のレイヤーに配置したphoto2に「動きをつけたマスク」をかけます。そしてマスクでphoto2が消えていき、その下のphoto1がだんだん表示されてきます。

　この消えていくマスクは、先ほど使用したひし形を使います。マスクにあたるひし形が拡大していく動きは、前回の波紋の拡大を流用します。さらにひし形を斜めに連続配置していくのですが、この動きはfor文によるループ処理とattachMovieを使います。これまでに学んだことを組み合わせることで、このような効果的なエフェクトが作れます。

　では、ひし形の拡大ムービーから作成していきましょう。前ページのムービークリップ「shape」を今回のファイルにコピーします。前回の波紋の拡大を思い出してください。中心から拡大していく必要があったので、ムービークリップの基準点を中心に設定していました。

　今回は縦横30pxのひし形なので、シンボル内の配置をX座標「-15px」、Y座標「-15px」とします。これでシンボルの基準点がひし形の中心になります。

　このシンボル内にActionScript用のレイヤーを追加して、リスト2を記述します。「var percent」にあたるひし形の拡大率は、スピードを速めるために20%ずつにしました。前回と同様比率「0」から拡大していき、最大値「max」にあたる300%を越えるとこのムービークリップのonEnterFrameが停止します。

for文とattachMovieでひし形を斜めに並べる計算式

　次にひし形のマスクをステージ上に配置していきます。前ページではひし形のX座標「_x」プロパティを指定して、横1列に並べましたが、今度は右上がりに配置する必要があるのでY座標「_y」プロパティも指定します。

　図2を見てください。ひし形が縦横30pxずつ右上がりに斜めの列を作り配置されています。実際はこの配置をムービークリップ内のタイムラインでコマごとに記述していき、横に30pxずつ複製していくことで、流れるトランジションが表現できます（リスト3）。

　attachしたインスタンスを横に並べるX座標の計算は、前ページと同じで変数「i」に30をかけて横並びにします。今度はひし形の基準点を中心にするために、X座標を-15px移動したので、this["shape"+i]._xには、「30*i+15」を代入します。値に15pxを足す理由は、基準点が15pxずれたからです。

　次にY座標の計算をします。こちらは変数「i」に-30をかけることで右上がりの配置ができます。ただこのままではすべてのインスタンスがステージ上の外に出てしまうので、this["shape"+i]._yには、「-30*i+195」を代入します。それぞれのインスタンスにY座標195pxを足すことで、ステージの下から上まで並ぶ斜めの列ができました。