Ｆｌａｓｈで画像のトランジション

質問

http://www.gohawaii.jp/
このサイトのFlashで画像が波で切り替わるのですが
どうしたらこの様なトランジションが出来るのですか？
アクションスクリプトでするのですか？

宜しくおねがいします。

回答No.3

notebleu · ベストアンサー

アルファの事はとりあえず忘れて、マスクを使って画像を切り替える事に専念しましょう。
■材料■波Ａ、波Ｂ、画像Ａ、画像Ｂ・・・波Ａは画像Ａのマスク。Ｂも同様。
■流れ■
(1)マスクが重なっていない画像Ａは表示されず、画像Ｂのみ見える
波Ａ～～～～
　　　　　　画像Ａ
　　　　　　波Ｂ～～～～
　　　　　　画像Ｂ

(2)波Ａが画像Ａに重なって、徐々に見えてくる。
　　　波Ａ～～～～→
　　　　　　画像Ａ
　　　　　　波Ｂ～～～～
　　　　　　画像Ｂ

(3)完全に画像Ａが表示されるので、画像Ｂは完全に隠れる。
　　　　　　波Ａ～～～～
　　　　　　画像Ａ
　　　　　　波Ｂ～～～～
　　　　　　画像Ｂ

(4)続いて画像Ｂに切り替えたい時は、波Ｂ・画像ＢをＡの上に持ってくる。
　この時、波Ｂはずらして配置。その為、画像Ｂは見えず、画像Ａが見え続けている
波Ｂ～～～～
　　　　　　画像Ｂ
　　　　　　波Ａ～～～～
　　　　　　画像Ａ

このループで２枚の画像を交互に表示できます。

とりあえず、１枚でやった場合、徐々に画像が表示されますか？
つまり、マスクの設定や使い方は把握していますか？
基本的なテクニックはNo.2の回答のサイトに載っています。
必要ならいくらでも説明しますので、がんばって下さい。

お礼

notebleu様

本当にありがとうございました。
マスクだったんですね！

ご丁寧に説明していただきありがとうございました。

回答No.2

notebleu

基本構造だけ簡単に説明すると
(1)すでに表示されている画像Ａの上に、マスクＢをずらして見えない状態で画像Ｂを配置。
(2)マスクＢを画像Ｂ上に移動していくと、画像Ｂが見えていく。
(3)再度画像Ａを表示させる場合は、画像ＡとマスクＡを画像Ｂの上に配置して(1)に戻る。

・画像Ａ、画像Ｂは移動していない。深度(どちらが前面か)のみ変更。
・画像Ａ、画像Ｂの入れ替えは深度で管理する方法が楽。(ActionScript)
・波は同じ動きしかしなくて良いならモーショントゥイーン。
マスクの参考にどうぞ。どうやらサンプルもある模様です。
http://www.strive-ex.com/cgi-bin/mt/blog/2006/05/flash.html

■波の描き方
(1)線ツール(Ｎ)でギザギザを描く。
(2)選択ツール(Ｖ)で線付近(カーソルの下に「ノ」が表示れる)からドラッグ。
※選択状態(網掛け)になってる時は出来ません。何もないところをクリックして解除して下さい。
(3)直線が引っ張られて曲線になるので、波っぽくする。
(4)細かい修正はダイレクト選択ツールを使用(ベジェ曲線をハンドルで微調整できます)
(5)中を塗りつぶす。
他にもいっぱい方法がありますが、正確性を求めなければこれが楽。

というか、長くなってしまいましたが分かりにくいですね。
ご不明な点や、単語の意味など分からなかったら気軽にどうぞ。

補足

notebleu様
度々ご丁寧に回答していただきありがとうございました。
すみません、お言葉に甘えて
もう一度整理しておしえてください・・・

画像ＡとＢを波の画像（右から左）で切り替える場合

●質問１・・・画像の配置は下記でいいのですか？

レイヤ３・・・画像Ｂ
レイヤ２・・・ここに波型の画像（マスク？）
レイヤ１・・・画像Ａ

●質問２・・・モーショントゥイーンは下記でいいのですか？

レイヤ３・・・画像Ｂ（透明度０→１００）
レイヤ２・・・ここに波型の画像を左から右（マスク？）
レイヤ１・・・画像Ａ（透明度１００→０）

これだと何となく見えるのですが、波が左から右にＡの
画像を消しながらＢの画像に切り替わるではありません。
（波を境いにＡ・Ｂが綺麗に切り替わらない）

多分、このやり方ではないのでしょうね・・
すみません度々・・申し訳ありません。。。

回答No.1

notebleu

アクションスクリプトでもモーショントゥイーンでも可能です。
少ない画像ならば後者の方が楽でしょう。

これは波の形のマスクを動かしながらアルファを変えて表現されています。

補足

notebleu様
早速の回答ありがとうございました。
例えば
ＡＢの画像を上記のサイトにしたい場合

レイヤ３・・・画像Ｂ
レイヤ２・・・ここに波型の画像（モーショントゥイーン？）
レイヤ１・・・画像Ａ

レイヤ２の波型の画像をどう作成し、どう動かせばいいのか？
波型の画像を下記の様に左から
透明｜波｜透明
の様に作成して、左から右に動かしてもただＢの写真が出るだけで、
Ａの写真がスライドになりません。
この方法では無いのは分かるのですが、他にレイヤ２をどうすれば
綺麗なスライド？っぽくなるのですか？

大変分かり難い説明と思いますが、宜しければ教えてください。