PR

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

2008年6月24日(火)
米倉 明男

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

 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を足すことで、ステージの下から上まで並ぶ斜めの列ができました。

Webデザイナー。印刷会社、Web制作会社などのデザイナー/ディレクターを経て、2007年からフリーランスとして活動。デジタルハリウッド講師。http://www.morethanwords.jp

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています