FLASH作成ソフト「Suzuka」のスプライト‐ボタン化‐getURLについて

質問

たとえば、
http://www.inadajuku.co.jp/cgi-bin/view/index.cgi
のような、「４歳～小学２年生の方へ」に
１．ロールオーバーしたとき、画像が入れ替わると同時に、
２、右側に新たな画像が現れ、
３、さらにその画像にロールオーバーしたとき、画像が入れ替わり、
４、クリックしたら指定したページに飛ぶ。

と、いうFLASHを作成したいと思っています。

スプライトを作成し、その中にボタン化した画像（通常時、通過の設定）とgetURLの設定、フレームアクションの設定等をしたところ、１、２までは動作したのですが、３，４がうまくいきません。スプライト内のプレビューでは３，４も動作してくれるのですが、メインのプレビューや実際にアップしても１，２まで動作して、クリックしても指定したページに飛んでくれません。

スプライト内ではボタン化はあまり意味がないのでしょうか？
それともスクリプトの設定がほかに必要なのでしょうか。

どなたかお力添えをお願いいたします。
Suzuka Ver.0.8.1を使用しています。

回答No.1

BlurFiltan · ベストアンサー

「プルダウンメニュー」 とか 「ドロップダウンメニュー」 と呼ばれる物の一種ですね。
Flash 版のものよりも、JavaScript や CSS 版のものをよく見かけます。
(Flash ではそういう型にはまったメニューにこだわる必要がないのであまり見かけないのだと思いますが。)

プルダウンメニューの作成は、書かれていらっしゃる通り、
「スプライトの中に画像が切り替わるボタンを入れる方法」
で良いと思います。

その方法を延長させる例を書きます。

１セットのプルダウンのボタンは４つあったとします(実際はいくつでもかまいません)。
１つは「最初から表示されているボタン」で、
残りの３つは「後から出てくるボタン」だとします。

スプライト内の フレーム1 のレイヤーに、
「最初から表示されているボタン」を追加します。
そして例えば「btn_1」というインスタンス名を付けます。

スプライト内の フレーム2 のレイヤーに、
３つの「後から出てくるボタン」を追加します。
そして例えば各ボタンに「btn_1_1」「btn_1_2」「btn_1_3」というインスタンス名を付けます。

　_root(メインのタイムライン)
　　　└スプライト(ボタン入り)
　　　　　　├ btn_1(フレーム1 と 2 にある)
　　　　　　├ btn_1_1(フレーム2 にある)
　　　　　　├ btn_1_2(フレーム2 にある)
　　　　　　└ btn_1_3(フレーム2 にある)

「最初から表示されているボタン」と「後から出てくるボタン」は
ピッタリひっつけて配置する方が作成は楽です。

アクションレイヤーを追加して、
そのアクションレイヤーの フレーム1 には次のように書きます。

----------------------------------------------
// このスプライトのタイムラインを変数化
var sp = this;

//このスプライトの再生を停止
sp.stop();

// 「btn_1」ロールオーバー時
btn_1.onRollOver = function(){
//
// このスプライトをフレーム2で停止
sp.gotoAndStop(2);
//
// このスプライトにマウスが動いたときの動作を定義
sp.onMouseMove = function(){
// もしこのスプライトがマウスに接触していなければ
if(!sp.hitTest(_root._xmouse,_root._ymouse,true)){
// このスプライトをフレーム1で停止
sp.gotoAndStop(1);
// マウスが動いたときの動作定義を削除
delete sp.onMouseMove;
}
};
};
----------------------------------------------

アクションレイヤーの フレーム2 を キーフレーム に変換して
その フレーム2 には次のように書きます。

----------------------------------------------
// 各ボタンで共通の動作をユーザ定義関数に定義
// (引数は各ボタンから渡されるURL)
function commonWork(url){
// このスプライトをフレーム1で停止
sp.gotoAndStop(1);
// マウスが動いたときの動作定義を削除
delete sp.onMouseMove;
// 引数のURLを別窓で開く
getURL(url,"_blank");
}

// 「btn_1_1」クリック時の動作を定義
btn_1_1.onRelease = function(){
// 共通動作の関数を実行(引数「"AAA.html"」)
commonWork("AAA.html");
};

// 「btn_1_2」クリック時の動作を定義
btn_1_2.onRelease = function(){
// 共通動作の関数を実行(引数「"BBB.html"」)
commonWork("BBB.html");
};

// 「btn_1_3」クリック時の動作を定義
btn_1_3.onRelease = function(){
// 共通動作の関数を実行(引数「"CCC.html"」)
commonWork("CCC.html");
};
----------------------------------------------

これでできあがりです。

スクリプトの細かいことはどうでも良いです。
書き方も色々ありますし、動作も色々あります。
細かいことではなく大まかな原理(大きな流れ)を理解してみてください。

まず、
スプライト内のフレーム1には「最初から表示されているボタン」のみがあって、
とりあえずそのフレームで停止させます。

そして、
「最初から表示されているボタン」にロールオーバーすると、
スプライト内をフレーム2に進めるとともに、
「マウスが動いた時に実行する動作」を定義します。

「マウスが動いた時に実行する動作」とは上に書いた次の部分です。
　　　　　↓↓↓
　// もしこのスプライトがマウスに接触していなければ
　if(!sp.hitTest(_root._xmouse,_root._ymouse,true)){
　　　　// このスプライトをフレーム1で停止
　　　　sp.gotoAndStop(1);
　　　　// マウスが動いたときの動作定義を削除
　　　　delete sp.onMouseMove;
　}
　　　　　↓↓↓
ボタン入りスプライトからマウスが離れたら、
スプライト内をフレーム1で停止させて「最初から表示されているボタン」のみに戻す。
ということです。

スプライト自体に
on (press) {}
on (release) {}
on (releaseOutside) {}
on (rollOver) {}
on (rollOut) {}
や、そのフレーム記述版
onPress = function() {};
onRelease = function() {};
onReleaseOutside) = function() {};
onRollOver = function() {};
onRollOut = function() {};
を定義すると、
そのスプライト内に配置したボタン機能は死んでしまいます。
つまり
「ボタン機能の入れ子はできない。入れ子にすると親のボタン機能が勝つ。」ということです。

ですから、
その入れ子状態を回避するために、
ロールアウトを別の方法を使うということです。

接触判定「hitTestメソッド」を使わなくても、他にも方法はあります。

↓このページの最後の図のように
http://jr6bij.hiyoko3.com/flash_tips/drop_menu2.php
フレーム2 のボタン群の周囲を囲むような透明ボタンを用意して
その透明ボタンに
on (rollOver) {
gotoAndStop(1);
}
などと書いても良いと思います。
※ 上のページは図のみ参考になります。
　 スクリプトは全く別物ですから参考にはなりません。

その他，まだ方法はあります。

あと、上で、

> 「最初から表示されているボタン」と「後から出てくるボタン」は
> ピッタリひっつけて配置する方が作成は楽です。

と書きましたが、
隙間が開いていると、その隙間をマウスが通過するときに、
いったんスプライトからロールアウトしてしまうからです。
ですから、隙間を開けない方が良いです。

でも、決してボタンどうしの間に隙間をあけてはならないことはありません。
フレーム2 以降にボタン群全体を覆うような透明な画像(PDR)でも置いておけば、スプライトからロールアウトしませんから。

またこの説明ではスプライト内を２フレームにしているだけです。
もっと多くのフレームにして、
各ボタンをトゥイーンで出してもかまいません。

とにかく、
細かいことではなく大まかな原理(大きな流れ)を理解すると
そこから先は考えて色々なものが作成できると思います。

お礼

とてもわかりやすく、丁寧なご説明ありがとうございます。
ここ1ヶ月ぐらいずっと悩んでたことが解決しそうです。
さっそく、このあとに設定してみたいと思います。
それができれば、透明ボタンやその他の方法も順にやってみたいと
思います。