Flashに詳しい方お願いします…

質問

私は趣味で少しずつフラッシュを学んでいるところです。

それでお聞きしたいことがあるのですが

・画像の上にマウスが来たときに違う画像に切り替わるようにしたいのですがどうすればよろしいのでしょうか？（ボタンしかやり方がわからなくて、ボタンですればやりたいようにできませんのでお願いします）

・上記のに加えて、さらにクリックしたときに動きをつけたいと思っています。

・さらに上記のことを三つ同じようにしたいのですが、アクションスクリプトや画像でレイヤーを分けたりどうすればいいのでしょうか？

今、手元にいくつかの参考書があり、今日は結構ＨＰなども探して見つけようとしているのですがなかなか探しきれなくて。どうか力をお貸しください。よろしくお願いします。

回答No.4

noname#35109 · ベストアンサー

＃２＆３ です。

すみません。
先に＃３の参考URLのURLを訂正させていただきます。
ページの題名と実際のURLがずれていました。

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

でした。

> ムービークリップの中のボタンが反応しません。

これは，
ムービークリップ自体がボタンになってしまっているので，
先にそっちに反応して，
中にあるボタンに優先権がないためです。

ボタンどうしを重ねた場合もそうです。
on(release) などの on イベントハンドラは上にあるものが勝ちます。
逆にそうならないと困りますよね。
下のボタンまでボタンの機能がはたらしてしまっては，
ボタンの下の見えないボタンまで動作してしまうという現象にもなってしまいます。

> やはりこれもボタンではなくムービークリップで作った
> ほうが良いのでしょうか？

そうですね。
ムービークリップには，hitTest というメソッドもあります。
ボタンインスタンスより，ムービークリップの方が，
メソッド も プロパティ もはるかに多いのです。
また，ムービークリップは１つのオブジェクト階層を持ちますから（フォルダのようなもの），
インスタンスを入れ子状態にして，
その中のインスタンスを管理するのが楽にできます。

hitTest に関しては，上と同じサイト内では，
次のページが参考になると思います。

「Flashゲーム講座＆ASサンプル集【当たり判定について】」
http://hakuhin.hp.infoseek.co.jp/main/as/hittest.html

ご質問のケースですが。
まず，
ムービークリップ内のボタンをムービークリップで作成して，
そのムービークリップにインスタンス名を付けます。
インスタンス名は，
ムービークリップを選択した状態で，
ステージの下のプロパティインスペクタ（プロパティパネル）の左の方の

　歯車　[ムービークリップ　 ｖ]
　　　　　[ <インスタンス名>　]

となっている <インスタンス名> を変えると付けることができます。

この説明では，
ムービークリップ内に，ボタンであるムービークリップが２つあって，
そのうちの１つに 「MC_btn1」 ，
もう１つに 「MC_btn2」 というインスタンス名をつけておいたとします。

そして，

　// もし MC_btn1 がマウスにヒットしていれば
　if (this.MC_btn1.hitTest(_root._xmouse, _root._ymouse, true)) {
　　　// 実際はここに何か違う動作を書く
　　　this.MC_btn1._alpha = 20;
　}

というように，
if文 で，マウスとの当たり判定を取れば良いことになります。
この if文 判定をするタイミングは，
おそらく，マウスをクリックしたとき，on (release) 時だと思います。

したがって，
＃３のスクリプトをさらに書き替えると次のようになります。
さらに変更した箇所には ● マークを書いています。

//////////////////////////////////////////////////////
// ★このムービークリップが表示されたとき
onClipEvent (load) {
// ★変数 dps にこのムービークリップの深度を保存
dps = this.getDepth();
}
// このムービークリップにロールオーバーしたとき
on (rollOver) {
// このムービークリップをフレーム2へ進めてストップ
this.gotoAndStop(2);
}
// このムービークリップからロールアウトたとき
on (releaseOutside, rollOut) {
// ★元の深度に戻す
this.swapDepths(dps);
// このムービークリップをフレーム1へ戻してストップ
this.gotoAndStop(1);
}
// このムービークリップをクリックしたとき
on (release) {
// ★ 深度を 0 にする
this.swapDepths(0);
// ● もし MC_btn1 がマウスにヒットしていれば
if (this.MC_btn1.hitTest(_root._xmouse, _root._ymouse, true)) {
// ●実際はここに何か違う動作を書く
this.MC_btn1._alpha = 20;
// ● もし MC_btn1 がマウスにヒットしていれば
} else if (this.MC_btn2.hitTest(_root._xmouse, _root._ymouse, true)) {
// ●実際はここに何か違う動作を書く
this.MC_btn2._alpha = 20;
}
// このムービークリップをフレーム3へ進めてプレイ
this.gotoAndPlay(3);
}
//////////////////////////////////////////////////////

お礼

返答ありがとうございます。

とても勉強になることばかりで作業はかなりスムーズに行えて、flash自体の恐怖心も結構なくなりました！
こんなに詳しく書いていただき、さらに質問の連続で申し訳ありません。なんとお礼をいったらいいのかわからないですが、また困ったときはよろしくお願いします。本当にいろいろとありがとうございました。

回答No.3

noname#35109

＃２ です。

別のムービークリップがあるのでしたか。
それでは，ムービークリップはコピペで増やせませんでしたね。
３つのムービークリップを別々に作る必要があります。
失礼しました。

＃２ の補足の件に関しましてですが，
これは swapDepths という，ムービークリップクラス（ムービークリップオブジェクト）のメソッドを使って，
深度 を変更してやれば，問題は解決すると思います。

＃２ の２つめのスクリプトを書き替えるとすれば，
次のようになります。
書き足した部分には ★ マークをつけています。

-----------------------------------------------
// ★このムービークリップが表示されたとき
onClipEvent (load) {
// ★変数 dps にこのムービークリップの深度を保存
dps = this.getDepth();
}
// このムービークリップにロールオーバーしたとき
on (rollOver) {
// このムービークリップをフレーム2へ進めてストップ
this.gotoAndStop(2);
}
// このムービークリップからロールアウトたとき
on (releaseOutside, rollOut) {
// ★元の深度に戻す
this.swapDepths(dps);
// このムービークリップをフレーム1へ戻してストップ
this.gotoAndStop(1);
}
// このムービークリップをクリックしたとき
on (release) {
// ★ 深度を 0 にする
this.swapDepths(0);
// このムービークリップをフレーム3へ進めてプレイ
this.gotoAndPlay(3);
}
-----------------------------------------------

こういうスクリプトを使える点においても，
ボタンはボタンシンボルのインスタンスで作るより，
ムービークリップで作る方が色々融通が利いて良いのです。
作るのは手間ですが。

参考 URL
「Flashゲーム講座＆ASサンプル集【深度について】」
http://hakuhin.hp.infoseek.co.jp/main/as/movieclip.html

お礼

返答ありがとうございます。

すごいです！！！なりました。感動です。
こんな丁寧にありがとうございます。

一つ聞き忘れたことがあったのですが、もしお答えいただければありがたいです。
今まで教えてもらったものを作ったのですが、ムービークリップの中のボタンが反応しません。やはりこれもボタンではなくムービークリップで作ったほうが良いのでしょうか？

それと参考サイトを教えていただきありがとうございます。深度の意味が明確にわかったほか、これからも使えそうなサイトです！

回答No.2

noname#35109

１つずつしっかり考えればできると思いますよ。

> 画像の上にマウスが来たときに
→ on(rollOver)

> 違う画像に切り替わる
→ gotoAndStop(違う画像のフレーム);

> さらにクリックしたときに
→ on(release)

> 動きをつけたい
→ gotoAndPlay(動く画像のフレーム);

> さらに上記のことを三つ同じようにしたい
→ 上で作った物をコピペで３つに増やす

ということだと思うのですが。

まず，
最初の画像をムービークリップに変換します。
そのムービークリップをダブルクリックして，
ムービークリップ内のタイムラインの編集に入ります。

このとき，
ムービークリップ内のタイムラインは次のようになっていると思います。

　　　　　　　　　　　　　 １
　□　レイヤー　筆・・|●| ←画像が フレーム1 にある

フレーム2 を選択して，
右クリック→「空白キーフレームの挿入」でフレーム2を空白キーフレームにします。

　　　　　　　　　　　　　 １
　□　レイヤー　筆・・|●|○|

その フレーム2 のステージ上に，違う画像を置くか描くかします。

　　　　　　　　　　　　　 １
　□　レイヤー　筆・・|●|●|

そして，
フレーム3～フレーム○までを選択して，
右クリック→「フレームの挿入」でさらにタイムラインを伸ばします。

　　　　　　　　　　　　　 １　　　　　　５
　□　レイヤー　筆・・|●|●///////////////[]|

そして，
フレーム3 を選択して，
右クリック→「空白キーフレームに変換」をします。

　　　　　　　　　　　　　 １　　　　　　５
　□　レイヤー　筆・・|●|●|○　　　　　　　　　[]|

この３フレーム以降にクリックしたときのアニメーションを作成します。
当然，複数レイヤーにしてもかまいませんが，
ここでの図示は１レイヤーのみにしておきます。

　　　　　　　　　　　　　 １　　　　　　５
　□　レイヤー　筆・・|●|●|●-------->[]|●|
　　　　　　　　　　　　　　　　　　　　　↑アニメーション

そして，
ヒットエリアとして，最初の画像と同じ大きさくらいの透明な塗りを下のレイヤーに描いておきます。

　　　　　　　　　　　　　 １　　　　　　５
　□　レイヤー　筆・・|●|●|●-------->[]|●|
　□　レイヤー　筆・・|●////////////////[]|
　　　　　　　　　　　　　　 ↑透明な塗り

次に ActionScript を書くためのレイヤーを追加し，
最後のフレームを空白キーフレームにします。

　　　　　　　　　　　　　 １　　　　　　５
　□　レイヤー　筆・・|○　　　　　　　　　　　[]|○|
　□　レイヤー　筆・・|●|●|●-------->[]|●|
　□　レイヤー　筆・・|●////////////////[]|

そして，その ActionScript を書くレイヤーの，
フレーム1 と 最終フレーム に，

stop();

を書いておきます。

これで，
ムービークリップ内のタイムラインの編集は終わりですから，
ステージ上の何も書いていない部分をダブルクリックして，
メインムービーのタイムライン（ドキュメント）の編集に戻ります。

そして，
作ったムービークリップを選択して次のように書けば，
ご質問で書かれているような内容のことができます。

---------------------------------------
// このムービークリップにロールオーバーしたとき
on (rollOver) {
// このムービークリップをフレーム2へ進めてストップ
this.gotoAndStop(2);
}
// このムービークリップをクリックしたとき
on (release) {
// このムービークリップをフレーム3へ進めてプレイ
this.gotoAndPlay(3);
}
---------------------------------------

実際にやってみると，動きが変だと思うと思います。
私流に勝手に上のスクリプトを書き替えると次のようになります。

---------------------------------------------
// このムービークリップにロールオーバーしたとき
on (rollOver) {
// このムービークリップをフレーム2へ進めてストップ
this.gotoAndStop(2);
}
// このムービークリップからロールアウトたとき
on (releaseOutside, rollOut) {
// このムービークリップをフレーム1へ戻してストップ
this.gotoAndStop(1);
}
// このムービークリップをクリックしたとき
on (release) {
// このムービークリップをフレーム3へ進めてプレイ
this.gotoAndPlay(3);
}
---------------------------------------------

マウスプレス時の画像もあった方が良いとか，
まだ変だと思う部分がありましたら，
ムービークリップ内のタイムラインを編集するとか，
スクリプトを変更するとかすれば良いと思います。

onイベントハンドラ はたくさんありますので，
色々違うものを表示できます。

ムービークリップを押す
on (press)

ムービークリップを離す
on (release)

外側でムービークリップを離す
on (releaseOutside)

ロールオーバー
on (rollOver)

ロールアウト
on (rollOut)

ドラッグオーバー
on (dragOver)

ドラッグアウト
on (dragOut)

など。

※ボタンにしか使えなかったこの onイベントハンドラ が
　 ムービークリップに使用できるようになったのは，
　 Flash MX 以降です。
　 Flash 5 以前のバージョンではできません。

お礼

返答ありがとうございます。

とてもとても詳しく書いていただき感謝です。こんなにことこまかに本当にありがとうございます。この通りしたら結構上手くいきました。

しかし何個かお聞きしたいとこがあるのですが、もしよろしければ回答をお願いします。
説明するのがものすごく難しくてわかりにくいと思いますが…

まずフルフラッシュで作っています。先に質問したことはトップページで使用させていただきました。それでトップページを三等分しています。例えるならホールのケーキを切り分けた感じで一つ一つが三角をしていて大きさとかが違います。
その一つの三角にマウスが乗るとカラーになり、クリックするとその三角が画面を覆ってメニューへ、みたいにしてます。
そこでお聞きしたいのですが、そのトップページに仕切り線を別レイヤーに作っているのですが、クリックをしたときにその線がなくなるようにしたいのですがどうも上手くいかなくて。
それと、そのトップを三つに分けていて、それぞれが動くようにしたのですが、やはりレイヤーを分けているので他の二つが動いたとしても前のレイヤーのオブジェクトが邪魔で見えません。

わかりにくいところだらけだとは思いますが、よろしくお願いします。

回答No.1

noname#39970

１つずつ解決を試みる

>画像の上にマウスが来たときに違う画像に切り替わるようにしたい
・画像の上にマウスが来た時に検知する方法を習得
・実行ボタンを押すなりした時に特定の位置に有る画像をすげ替える

>クリックしたときに動きをつけたい
・クリックしなくても　単体で動く物を作成する

>三つ同じようにしたい
・オブジェクトという概念を理解する。
前項で行った物をオブジェクトとして操作できるように書き換える事によって実現できる

お礼

返答ありがとうございます。

なるほど！一つずつ考えればとてもわかりやすいです。