ページの切り替えのフェードイン/フェードアウトについて

質問

Flash8で１つのタイムライン上に
フレーム1～３０にフラグ名Ａ
フレーム３１～６０にフラグ名Ｂ
フレーム６１～９０にフラグ名Ｃと設定しています。
各フラグの最後のフレームにはstop();が入っています。

そしてフレーム１～９０にボタンＸ，Ｙ，Ｚを配置し、
ボタンＸはフラグ名Ａ
ボタンＹはフラグ名Ｂ
ボタンＺはフラグ名Ｃに
on (release) {
gotoAndPlay( "フラグ名" );
}
で移動するようにしています。

ボタンによるフレームの移動の際に、
今表示されている画面に移動先の画面をフェードインしながら表示させたいのですが、どうすればいいのでしょうか。

例えば、フラグ名Ａの３０フレームの画面が表示されていて、（ストップしていて、）
ボタンＺでフラグ名Ｃに移動する際に、
フラグ名Ａの３０フレームの画面からフラグ名Ｃの画面に徐々に切り替わるような感じにしたいです。

ボタンの押す順番などは決まっていないため、どんな順番でボタンを押したとしても、
今表示されている画面に移動先の画面をフェードインしながら表示させたいのです。

お分かりになる方ぜひ教えて下さい！

よろしくお願いします。

使用環境
Flash8 WindowsXP SP2

回答No.1

noname#35109 · ベストアンサー

フラグ ではなくて，
フレームラベルだと思いますよ。
細かいことはさておき，
ご質問で書かれていらっしゃる内容自体はよく理解できました。

何にしてもその方法では書かれていらっしゃることを実現するのは無理です。
根本的にムービーのしくみ全体を作りなおさないとできません。

フレーム1～30 を ムービークリップA内に作成
フレーム31～60 を ムービークリップB内に作成
フレーム61～90 をムービークリップC内に作成して，
各ムービークリップを 上下（前面背面）にならべて，
他のムービークリップを今見えているムービークリップの上に徐々に表示させる。
というようなしくみを作る必要があります。
（ムービークリップA，B，C は仮称です。）
そしてさらに，
ムービークリップA，B，Cの背景（ムービークリップ内の最下レイヤー）には，何かを置くか描くかしておかないとなりません。

イメージはわかりますでしょうか。
このページ↓にある半透明の赤・緑・青のようなムービークリップの深度移動が必要です。

Flashゲーム講座＆ASサンプル集【深度について】
「深度を変更する」
http://hakuhin.hp.infoseek.co.jp/main/as/z.html#Z_01

↑これのさらに複雑版のようなものです。

というわけで，
簡単な作り方例を説明します。

新規ドキュメントを作成して，
ステージ全体に 赤い塗りの長方形 を描き，
その 赤い塗り を ムービークリップ に変換します。
そして，
その赤ムービークリップに 「mc0」 というインスタンス名を付けます。

以下にも登場する mc および MC はムービークリップ（MovieClip）の略の意味です。

その「mc0」をダブルクリックして，「mc0」内のタイムラインの編集に移ります。
「mc0」内には赤い塗りがあると思いますから，
その赤い塗りのあるレイヤーの上に新規レイヤーを追加して，
「緑色のボタン」と「青色のボタン」を作成します。
そこまでできたら，「編集」→「ドキュメントの編集」で _root の編集に戻ります。

赤ムービークリップ「mc0」 のあるレイヤーの "下" に新規レイヤーを追加して，
赤ムービークリップ「mc0」 のあるレイヤーを ロック＆非表示 状態にして，
新規レイヤーのステージ全体に 緑の塗りの長方形 を描き，
その 緑の塗り を ムービークリップ に変換します。
そして，
その緑ムービークリップに 「mc1」 というインスタンス名を付けます。

その「mc1」をダブルクリックして，「mc1」内のタイムラインの編集に移ります。
「mc1」内には緑の塗りがあると思いますから，
その緑の塗りのあるレイヤーの上に新規レイヤーを追加して，
「赤色のボタン」と「青色のボタン」を作成します。
そこまでできたら，「編集」→「ドキュメントの編集」で _root の編集に戻ります。

そしてさらに，
緑ムービークリップ「mc1」 のあるレイヤーの "下" に新規レイヤーを追加して，
緑ムービークリップ「mc1」 のあるレイヤーを ロック＆非表示 状態にして，
新規レイヤーのステージ全体に 青の塗りの長方形 を描き，
その 青の塗り を ムービークリップ に変換します。
そして，
その青ムービークリップに 「mc2」 というインスタンス名を付けます。

その「mc2」をダブルクリックして，「mc2」内のタイムラインの編集に移ります。
「mc2」内には青の塗りがあると思いますから，
その青の塗りのあるレイヤーの上に新規レイヤーを追加して，
「赤色のボタン」と「緑色のボタン」を作成します。
そこまでできたら，「編集」→「ドキュメントの編集」で _root の編集に戻ります。

そして，
「mc0」～「mc2」があるレイヤーより上に，新規レイヤーを追加して，
そのフレームにActionScriptを書くことにします。
ここまでで，_root のタイムラインのレイヤーは次のような状態になっています。

　□　レイヤー　筆・・|○| ←ActionScript用
　□　レイヤー　筆・・|●| ←赤の「mc0」
　□　レイヤー　筆・・|●| ←緑の「mc1」
　□　レイヤー　筆・・|●| ←青の「mc2」

そして，ActionScript 用レイヤーには次のように書きます。

----------------------------------
// 深度を表す変数 dps の初期化
dps = 0;
//
// １フレーム進む時間ことに毎回実行
_root.onEnterFrame = function() {
for (i=0; i<=2; i++) {
// もし mc? のアルファが 100 以上であれば
if (_root["mc"+i]._alpha>=100) {
// mc? のアルファを 100 で固定
_root["mc"+i]._alpha = 100;
} else {
// それ以外であれば 10 ずつ加算(※可変)
_root["mc"+i]._alpha += 10;
}
}
};
----------------------------------

そして再び各ムービークリップ内の編集に戻り，
作成したボタンにスクリプトを書いて行きます。

緑の「mc1」と，青の「mc2」の中にある，
「赤色のボタン」には次のように書きます。

---------------------------------
// 赤色のボタン クリックで
on (release) {
// mc0（赤MC）のアルファを 0 にする
_root.mc0._alpha = 0;
// mc0（赤MC）の深度を _root.dps に変更
_root.mc0.swapDepths(_root.dps);
// mc0（赤MC）のフレームを1に戻してplay
_root.mc0.gotoAndPlay(1);
// _root.dps の値に 1 を加算する
_root.dps++;
}
---------------------------------

赤の「mc0」と，青の「mc2」の中にある，
「緑色のボタン」には次のように書きます。

---------------------------------
// 緑色のボタン クリックで
on (release) {
// mc1（緑MC）のアルファを 0 にする
_root.mc1._alpha = 0;
// mc1（緑MC）の深度を _root.dps に変更
_root.mc1.swapDepths(_root.dps);
// mc1（緑MC）のフレームを1に戻してplay
_root.mc1.gotoAndPlay(1);
// _root.dps の値に 1 を加算する
_root.dps++;
}
---------------------------------

赤の「mc0」と，緑の「mc1」の中にある，
「青色のボタン」には次のように書きます。

---------------------------------
// 青色のボタン クリックで
on (release) {
// mc2（青MC）のアルファを 0 にする
_root.mc2._alpha = 0;
// mc2（青MC）の深度を _root.dps に変更
_root.mc2.swapDepths(_root.dps);
// mc2（青MC）のフレームを1に戻してplay
_root.mc2.gotoAndPlay(1);
// _root.dps の値に 1 を加算する
_root.dps++;
}
---------------------------------

そして，パブリッシュしてもらうと，
各色のボタンクリックによって，その色のムービークリップが徐々に出てくるものができると思います。

長く書きましたが，
単純作業の繰り返しです。

各ムービークリップを単フレームではなく，
複数フレームにすれば良いわけです。
今現在作られているフレーム1～９０まであるアニメーションにも，
新しいレイヤーと新しいムービークリップを作成して，
そのムービークリップ内に既存のものをコピペできますから無駄にはならないと思います。

第15回　アニメーション作成の手抜きテクニック
http://itpro.nikkeibp.co.jp/article/COLUMN/20060705/242544/
→ フレーム全体をコピーする

以上で書いたように，
ムービークリップ内に色々なアニメーションを用意した方が，
いろいろと面白いことが可能になります。

特にこのご質問にあるように面白いことをする場合は，
以降もムービークリップを活用する方向でムービー全体の構造を考える方が良いと思います。

お礼

sassakun様
本当にいつも有難うございます。
教えて頂いたように作り直しました！

基本的には無事に動いたのですが、
わからない点が２つありましたので、
新しく質問を投稿しています。
もしよろしければ教えて下さい。

質問ＵＲＬ
http://okwave.jp/qa3066417.html

補足

sassakun様
いつもご回答有難うございます！本当に助かります。

＞ フラグ ではなくて，
＞ フレームラベルだと思いますよ。

すみません（汗）

作ってみたのですが・・・
もう、まさにこの通りです！
ムービークリップは便利ですね！
早速、コピペして作ってみます。

～少々あつかましいですが・・・～

今日質問させて頂いた後に長時間ネット検索をしていたところ、
”画面キャプチャを利用しフレームの切り替え時にクロスフェードさせる。”
というページを発見しました。

ＵＲＬ
http://d.hatena.ne.jp/hororiholy/?of=10

ダウンロードしたScreenEffect.as とFLAファイルを同じフォルダにおいて
”ScreenEffect.crossFade( 20 ); //切り替えに要する時間を20とする。”を
ボタンＸ、ボタンＹ、ボタンＺに貼り付けてハブリッシュしても
フレーム１、フレーム３１、フレーム６１に貼り付けてハブリッシュしても
クロスフェードできませんでした。

画面をキャプチャーすると書いていたので、
文字をムービークリップにはしていません。
使用写真はＪＰＧではなくＰＮＧです。

また、ダウンロードした（本家の）FLAファイルでも
ScreenEffect.crossFade( 20 ); の20の部分を50にしたら
クロスフェードになりませんでした。

もし解決方法がお分かりになる場合はぜひ教えて頂きたいです。

よろしくお願いします。