イメージ画像の変更

質問

FLASH MX 2004 を使用している“oi99aaac”と申します。
よろしくお願いいたします。

早速ではございますが、下記のサイトを参考に説明させていただきます。
http://www.smart-j.com/index2.html
常日頃からこのようにかっこよく、イメージ画像（参考サイトは車画像）を差し替えていくFLASHを制作したいと考えており、参考サイトの場合、小さな四角がいくつも左上から右下に広がってゆき、次の画像（車）が出現しているように見せるには、実際どのように制作すればよいのでしょうか。
アクションスクリプトで処理する方法ってあるのでしょうか。
ご教授の程よろしくお願い申し上げます。

回答No.1

perse

マスクを使用します。ちょっと説明がわかりにくいかもしれませんが、

タイムラインのレイヤー名部分(レイヤー１とか書かれた部分)で右クリックをすると
[マスク]と書かれた部分があるのでクリックします。
するとなんか絵柄が変わります。これがマスクです。

次にレイヤーを追加して、それをマスクの下にドラッグ＆ドロップします。
そうするとそのレイヤーが一段下がって表示されます。
これがマスク対象のレイヤーです。

----------------------------------------------
レイヤー1　　　|○
　　レイヤー2　|○
----------------------------------------------

こんな状態になると思います
レイヤー1がマスクレイヤー、レイヤー2がマスク対象レイヤーです。

レイヤー1に四角を描きます。ちょっと大きめに。
レイヤー2なんか適当に絵を描きます。レイヤー1の四角と多少かぶる様に。

そしてパブリッシュプレビューしてみてください。
レイヤー2に書かれた絵がすべて表示されていないと思います。
そうです。レイヤー1に書かれた四角の部分だけ見えるのです。

これを応用して、
----------------------------------------------------------------
レイヤー1　　　|○　　←ここに四角いマスク
　　レイヤー2　|○　　←レイヤー1のマスクと同サイズの車Aの写真
レイヤー3　　　|○　　←レイヤー2のマスクと同サイズの車Bの写真
----------------------------------------------------------------
レイヤー1：マスクレイヤー
レイヤー2：マスク対象レイヤー
レイヤー3：普通のレイヤー

という構成にすると、
最初は車Aの写真が見えます。車Bは車Aの陰になっているので見えません。
(車Bはレイヤー1のマスクとは無関係ですが、今マスクと重なっている車Aが見えているので
その下にある車Bは見えません)
ここでレイヤー1の四角が徐々に右側にトゥイーンで移動していくとします。
マスク対象である車Aはレイヤー1の四角と重なったトコだけが見えるのですから、
左側から徐々に見えなくなっていきます。
と同時に車Aの陰になっていた車Bが見えてきます。
コンナ具合です。

ちなみにマスクレイヤーにおけるのは1つのシンボルだけです(確か)。
またマスクレイヤーに置いたシンボルは形のみが有効であって色をつけても何の意味もありません。

ASでも出来ますが私なら地道に作ります。
そのサイトで説明すると、

■■■■■■■■
■■■■■■■■
■■■■■■■■
■■■■■■■■　　図１

とFlashがあります。
■がマスクの働きをするMC(以下、mask_mc)だと思ってください。
その■がたくさん集まってFlash全体を覆っています。
しかしマスクレイヤーには一つのMCしか置けないので
■の集まりもMC(以下、mainmask_mc)にします。

mask_mcの中身はコンナ感じ
----------------------------------------------
レイヤー1　　|●───→●
----------------------------------------------
最初に四角があって徐々に小さくなって最後に無くなるアニメーションです。
これが一コマのマスクの役割をします。
最後のフレームにthis.stop()を忘れずに。

mainmask_mcの中身はコンナ感じ
----------------------------------------------
レイヤー1　　|●　　　　
レイヤー2　　|　●　　　
レイヤー3　　|　　●　　
レイヤー4　　|　　　●　
レイヤー5　　|　　　　●
----------------------------------------------

と全体を覆えるだけのmask_mcを徐々にずらして配置します。
図1の■を一つづを順番に配置するのです。
徐々にずらしているのは一度にマスクがアニメーションしないようにです。
そのサイトでは左上から徐々に写真が変わっていっていますよね。

レイヤー1とかの途中に空白フレームを入れないでください。
それぞれのMCは最後のフレームまで配置しておきます。
最後のフレームにはもちろんthis.stop()です。

ここまで出来れば後は先ほどの車A,Bの例で使ったタイムラインをちょっと変えて
レイヤー1：mainmask_mc
レイヤー2：最初の車の画像
レイヤー3：次の車の画像
って風に配置すれば出来るはずです。
(ここまで説明していますが、実際には試していないので保障はしません。)

お礼

perseさま
ありがとうございます。
小さな四角のMCを使用し、制作していくのですね。
レイヤーの設定の仕方など、とてもわかり易い説明で助かりました。
本当にありがとうございます。