マスクを使った画像の切り替え表示



今回はメニューボタンをクリックすると画像が飛び出すように切り替わる
ムービーを作ります。
画像切り替え
上の画像をクリックすると実際のフラッシュファイルが開きます。

今回は画像が表示される画面に角丸長方形のマスクを掛けて
その中に画像が納まるようにしたのがポイントです。

手順1:
まず、メニュー画面を表示させるムービー「menu_movi」を新規シンボルとして作成します。
上図がそのタイムラインです。
料理の画像を「photo」レイヤーに配置し、その上にマスクとなる角丸長方形を配置します。
そして、上のレイヤーで下の画像をマスクします。
(マスクレイヤーを右クリック→「マスク」を選択)

手順2:
「photo」レイヤーは画像の枚数だけキーフレームで区切り、画像が切り替わるようにします。
そして、上のレイヤーに画像を指定するラベルレイヤーを新規に挿入して、それぞれフレーム名をつけます。
更に、上の「action」レイヤーには画像の再生を停止させるためにフレームごとに「stop」アクションを設定します。

手順3:
次に「menu_movi」の「photo」レイヤーに配置する動きのあるムービーを「photo_movi」としてそれぞれ画像の枚数だけ 新規に作成します。(下図)

「action」レイヤーでフレームの最後に「stop」アクションを設定し、 画像が徐々に大きくなっていくモーショントゥインを設定します。
そして、「menu_movi」の「photo」レイヤーに配置します。

手順4:
最後に、画像を切り替えるためのボタンをそれぞれ新規に作成して、「menu_movi」の「btn」レイヤーに配置し、 下記のアクションを記述して、完成した「menu_movi」をシーンに配置して、完成です。

HOME