マウスオーバー時のボタンの重なりを防ぐ

質問

あまりflashについてわかっておりません。。。
四角いボタンが平行に3つ並んでいて、各々、マウスオーバー時には、130%くらい拡大した大きさで四角を表示。(選ばれていない四角は、そのままの大きさで表示)クリック時には、各々リンクを張ってあるURLへとぶ。といったものを作りたいのですが、どのようにして、ボタンを作ればよいのでしょうか。
アップ時の3つ並んだ状態を、全てのボタンアップ時に設定し、オーバー時のみ、各々を拡大したものを設定してみたのですが、試してみると、重なりあってうまく表示されません。

回答No.2

noname#35109

しばらく，何を言われているのかよく理解できませんでした。
平面に３つの物がひっついて並んでいて，１つが大きくなったら他のに重なるに決まっている…
重ならないというのは，どういうことなんだろう？
Flash以前の問題ではないのかな？　　と言う感じでよくわかりませんでした。

でも，しばらく考えているとなんとなくわかってきました。
Flashに限らず，HP上ではあまりしないことをされようとしているのですね。
マウスオーバーで大きくなるボタンは普通は他の物と間を空けますから。

これが何もしていない状態で，
　┌───┬───┬───┐
　│ボタンA│ボタンB│ボタンC│
　└───┴───┴───┘

ボタンAを拡大したときにボタンBとCを移動させて重なりを回避したい。

　　　そのまま　　　移動→　　移動→
┌─────┬───┬───┐
│←ボタンA→│ボタンB│ボタンC│
└─────┴───┴───┘

　←移動　　　そのまま　　　　移動→
┌───┬─────┬───┐
│ボタンA│←ボタンB→│ボタンC│
└───┴─────┴───┘

　←移動　　←移動　　そのまま
┌───┬───┬─────┐
│ボタンA│ボタンB│←ボタンC→│
└───┴───┴─────┘

↑こんな感じのことをしようとされているのですね。
もしそうだったら，各ボタンのrollOver時などで，他のボタンをスクリプトなどで移動させなければなりません。

例ですが，以下のようなスクリプトで，上の図のようなことはできます。

まず，それぞれのボタンに「インスタンス名」を付けてください。
ボタンを選択し，下のプロパティパネルから，左の方にある　＜インスタンス名＞　となっているところを書き換えます。
例では左から「buttonA」，「buttonB」，「buttonC」というインスタンス名にしました。

インスタンス名を付けたあと，
１フレーム目などのフレームアクションとして，

idoukyori = 12

と書いておきます。
「idoukyori (移動距離)」は今勝手に決めた変数名で，後で「12」の部分を調節してください。

buttonAのスクリプトとしては以下のように書きます。
-----------------------------------
on (rollOver) {
_root.buttonB._x += idoukyori;
_root.buttonC._x += idoukyori;
}
on (press) {
_root.buttonB._x -= idoukyori;
_root.buttonC._x -= idoukyori;
}
on (release) {
//**ココに動作するスクリプトを書く**
_root.buttonB._x += idoukyori;
_root.buttonC._x += idoukyori;
}
on (rollOut) {
_root.buttonB._x -= idoukyori;
_root.buttonC._x -= idoukyori;
}
-----------------------------------

buttonBのスクリプトとしては以下のように書きます。
-----------------------------------
on (rollOver) {
_root.buttonA._x -= idoukyori;
_root.buttonC._x += idoukyori;
}
on (press) {
_root.buttonA._x += idoukyori;
_root.buttonC._x -= idoukyori;
}
on (release) {
//**ココに動作するスクリプトを書く**
_root.buttonA._x -= idoukyori;
_root.buttonC._x += idoukyori;
}
on (rollOut) {
_root.buttonA._x += idoukyori;
_root.buttonC._x -= idoukyori;
}
-----------------------------------

buttonCのスクリプトとしては以下のように書きます。
-----------------------------------
on (rollOver) {
_root.buttonA._x -= idoukyori;
_root.buttonB._x -= idoukyori;
}
on (press) {
_root.buttonA._x += idoukyori;
_root.buttonB._x += idoukyori;
}
on (release) {
//**ココに動作するスクリプトを書く**
_root.buttonA._x -= idoukyori;
_root.buttonB._x -= idoukyori;
}
on (rollOut) {
_root.buttonA._x += idoukyori;
_root.buttonB._x += idoukyori;
}
-----------------------------------

要は「rollOver」とか「rollOut」とかのとき，自分以外のボタンを，idoukyori分，右や左に動かしているのです。
idoukyoriは，書かれたボタンの大きさや，拡大率によってかわってくるので適当に変えてください。
また，idoukyoriを変数として用意せず，

_root.buttonA._x -= 10;
_root.buttonB._x -= 15;

という感じで数字を直接書いても良いです。

お礼

お返事が遅くなって申し訳ありません。御丁寧かつわかりやすい御説明、本当にありがとうございました!!とても嬉しいです。flashがわからないので、質問自体、経験者の方からすると意味が解りにくかったと思います。でも、ご理解頂けたその通りのことを求めていました!!ありがとうございました。

回答No.1

datemaki

ロールオーバーした方のボタンが常に最前面に来るようにするということですか？
だとすればアクションスクリプトの
「swapDepths();(flash5以降対応)」を使ってオブジェクトの深度を変え、重なり順を変えてみるといいかも知れません。
深度というのは言葉通り深さであり、flashではオブジェクトを作った場合、自動的に-16383という数値から上に重ねて行きます、って私もそんなに詳しくないのですが（＾＾；

とりあえず私が前に作った方法だと、まず、ボタンを作るのではなく、ムービークリップを作って、それをボタンと同じ機能を持たせる方法をとってます。（当方環境がMacXのflashMXなので、もしかしたら操作に若干違いが出るかも知れませんがご了承ください。）
例えば
まず四角を一つ描き、それをムービークリップに変換します。仮に「A」としますね。
このムービークリップAを選択した状態でアクションパネルを開き、アクションを記述します。

on (release) {
getURL("httpxxx～");
}

と。これで「Aをクリックしたら『httpxxx～』というURLにジャンプする」という命令がなされます。この時点でAはボタンとして機能するはずです。ムービープレビューしてAをクリックすると指定したURLに飛ぶはずです。

次にムービークリックAをダブルクリックしてオブジェクトの編集画面に移ります。キーフレームを二つ作り、フレームの一番目には通常の大きさの四角をそのままに、二番目のフレームには130%の大きさの四角、つまり一番目が何もしない場合のボタンのイメージ、二番目がロールオーバーした際のイメージですね。そしてアクションを記述する為のレイヤーを新規します。このレイヤーもキーフレームを二つ作り、一番目のフレームを選択してアクションパネルを開き、

stop();
init();
this.onRollOver = function() {
this.swapDepths(++_global.depth);
gotoAndPlay(2);
};
this.onRollOut=function(){
gotoAndPlay(1);
};

と、記述します。意味としては
「止まれ（止めないと次のフレームに行ってしまいます）
カーソルがこの四角の上にあるとき（ロールオーバー時）
この四角の深度を『最前面』にして
２番目のフレームに進む。
カーソルがこの四角の上にないとき（ロールアウト時）
1番目のフレームに進む。」
と言うような感じでしょうか。

次にアクション記述用のレイヤーのフレーム二番目を選択してアクションパネルを開き
stop();

と記述します。そうしないとフレームの一番目に戻ってしまいます。
これでボタン「A」の完成ですね（w

同じ行程を二回繰り返して「B」「C」を作り並べてプレビューしてみてください。
ロールオーバーしたボタンが最前面の状態で130%の大きさになるはずです。

以上。ちょっと分かりづらいですかね（’’；
長文の上、もし的外れの回答でしたらすいません。

お礼

とてもわかりやすかったです。ありがとうございます。理解しずらい質問に、適格、丁寧に対応して下さって、本当に嬉しいです。flash初心者なので、アクションスクリプトに慣れておらず、困っていましたので、助かりました。