見たい箇所にカーソルを合わせると写真が表示！！

質問

いつもお世話になっております。
フラッシュ初心者でこのような事をするのは難しいですかね…？

下記のサイトの様な
http://www.guilty.ne.jp/info.html

店内図を作ってカーソルを合わせると詳細の画面、写真や文章が出てくる様なものを作りたいです。

どなたか分かる方がおられればよろしくお願いします。
また、分かりやすく解説した参考サイトなどがあれば教えてください。

回答No.5

noname#35109 · ベストアンサー

＃３です。

ボタンの「オーバー」フレームを利用することはできましたか。
それは何よりです。

> 下の内容の方法をもう少し詳しく教えてくれませんか？

＃４ の方が書かれていらっしゃいますので，
不要かもしれませんが私なりに書いてみたいと思います。
しかし，
画像的な説明はココでは難しいので，
簡単なものの作成の方法を書きます。

これも理解すれば，何でも応用できると思います。

まず，新規ドキュメントを作成して，
大きな赤色の塗りを１つと，
小さめの 赤・青・黄・緑 の塗りを用意します。

　□□□□□□□□□□□□□□□□□
　□■■■■■■■■■■■■■■■□
　□■■■■■■■■■■■■■■■←←赤
　□■■■■■■■■■■■■■■■□　 い
　□■■■■■■■■■■■■■■■□　 塗
　□□□□□□□□□□□□□□□□□　 り
　□■■■□■■■□■■■□■■■□
　□■■■□■■■□■■■□■■■□
　□□□□□□□□□□□□□□□□□
　　　　↑赤　　　↑青　　　↑黄　　　↑緑

そして，
大きな赤色の塗り全体を選択して，
「右クリック」→「シンボルに変換」で， ムービークリップに変換します。
シンボル名 や 基準点 は今回の場合全く関係ないので適当でかまいません。

ムービークリップに変換しましたら，
その ムービークリップ を選択した状態で下のプロパティインスペクタを表示させ，
左の方でインスタンス名を付けます。

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

となっている部分を，

　歯車　[ムービークリップ　　ｖ]
　　　　　[myMC　　　　　　　 ]

となるように <インスタンス名> の部分を myMC に書き替えてください。
これでこのムービークリップに「myMC」というインスタンス名が付いたことになります。
「myMC」という名前が気に入らなければ，
べつに「Tarou」でも「Jirou」でも「ultraman7」でも何でも良いのですが，
この説明では「myMC」というインスタンス名を付けたこととしておきます。

そして，
赤い塗りのムービークリップ「myMC」をダブルクリックして，
「myMC」内のタイムラインの編集に移ります。

「myMC」内のステージ上にはさっき描いた「赤い塗り」があるだけのはずです。
上のタイムラインに目を移して，
赤い塗りのレイヤーの フレーム2～4 をドラッグして選択します。

　　　　　　　　　　　　　 １　　　　　 ５
　□　レイヤー　筆・・|●|/////|
　　　　　　　　　　　　　　　↑選択

そして選択した部分を「右クリック」→「キーフレームに変換」で，
すべてをキーフレームにします。

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

そして，フレーム2 の 赤い塗り を，
バケツツールなどで「青い塗り」に塗りかえます。
次に，フレーム3 の 赤い塗り を，
バケツツールなどで「黄色い塗り」に塗りかえます。
次に，フレーム4 の 赤い塗り を，
バケツツールなどで「緑の塗り」に塗りかえます。

そして，
このムービークリップの再生が勝手に進みださないように，
新規レイヤーを追加して，
その新規レイヤーの フレーム1 を選択した状態で，
下のアクションパネルを表示させて，白いスクリプトを書く部分に，

stop();

と書いておきます。

　　　　　　　　　　　　　 １
　□　レイヤー　筆・・|○　　　　 []| stop(); を書く
　□　レイヤー　筆・・|●|●|●|●| 赤・青・黄・緑

ここまでできましたら，
ムービークリップの作成は終わりですから，
塗りなどを描いていない部分をダブルクリックするか，
もしくは，
「編集」→「ドキュメントの編集」で，メインムービーのタイムラインの編集に戻ります。
（メインムービーのタイムラインに戻ると，
レイヤーは１つだけで，フレームも1つだけだと思います。）

「myMC」 の下に描いた４つの小さめの 赤・青・黄・緑 の塗りがあります。
次にこれらの編集に移ります。

赤・青・黄・緑 の塗りのそれぞれを１つずつ選択して，
それぞれを別のボタンシンボルに変換します。
「赤いボタン」，「青いボタン」，「黄色いボタン」，「緑色のボタン」を作成するということです。

そして，
「赤いボタン」を選択して，下のアクションパネルを表示させて，
スクリプトを書く部分に次のように書きます。
-----------------------------
// このボタンにロールオーバーすると
on (rollOver) {
// _root の myMC を フレーム1 へ移動
_root.myMC.gotoAndStop(1);
}
-----------------------------

「青いボタン」には次のように書きます。
-----------------------------
// このボタンにロールオーバーすると
on (rollOver) {
// _root の myMC を フレーム2 へ移動
_root.myMC.gotoAndStop(2);
}
-----------------------------

「黄色いボタン」には次のように書きます。
-----------------------------
// このボタンにロールオーバーすると
on (rollOver) {
// _root の myMC を フレーム3 へ移動
_root.myMC.gotoAndStop(3);
}
-----------------------------

「緑色のボタン」には次のように書きます。
-----------------------------
// このボタンにロールオーバーすると
on (rollOver) {
// _root の myMC を フレーム4 へ移動
_root.myMC.gotoAndStop(4);
}
-----------------------------

そして，
「制御」→「ムービープレビュー」 してもらうか，
SWF をパブリッシュしてもらうと，上で作ったものの動作確認ができると思います。

「赤いボタン」にマウスを持っていくと，
「myMC」が赤くなると思います。
また，
「青いボタン」にマウスを持っていくと，
「myMC」が青くなると思います。
また，
「黄色いボタン」にマウスを持っていくと，
「myMC」が黄色くなると思います。
また，
「緑色のボタン」にマウスを持っていくと，
「myMC」が緑色になると思います。

「myMC」の中には，
赤青黄緑の塗りを用意するのではなくて，
実際は，写真や文字を用意すれば良いですね。

また，
ムービークリップの各フレームには，
塗りや写真や文字という静止したものを置くだけでなく，
中身が動くムービークリップを置くこともできます。
すると，
ご質問で書かれていらっしゃる URL のように動かないものではなく，
もっと Flash らしい動くものも作成可能となります。

また，
ムービークリップの各フレームには，
黄色なら黄色の塗りしか用意していませんが，
ムービークリップの中にさらにボタンとムービークリップを置いても良いですね。

　店内図の紳士服コーナーにマウスを持っていく
　→紳士服コーナーがmyMCに拡大表示される
　　　紳士服コーナーのネクタイエリアにマウスを持っていく
　　　→ネクタイに関する写真や詳細情報が表示される

というような情報の階層構造も視覚的に表現・提示することができます。
ボタンシンボルのインスタンスではこのようなことは無理です。
ムービークリップを利用するからこそ面白いものができます。

つまり Flash を使えば，
ご質問で書かれていらっしゃる URL のレベル以上のものを簡単に作れるということです。
理解さえできれば簡単なことです。
むしろ「良い写真」を撮ったり，「良いコピー（言葉）」を考えたり，「良いデザイン」を創造することの方が，ずっとずっと難しいことだと思います。
それさえなんとかできれば Flash 自体は極めて簡単ですから，どこでもここでも Flash Flash なわけです。

上に書いたことは，ムービークリップ活用法のほんの極一部の極一例ですが，
Flash において私は，「ムービークリップを征する者がFlashを征す」　と思っています。
これは単なるアニメーションでもActionScriptでも同じ事です。
ムービークリップをうまく使えない人はActionScriptだけをいくら頑張っても良いものやすごいものはできません。
ムービークリップをよく理解してムービークリップを有効に使うことによって，多機能高機能ハイレベルな Flash が作成可能となります。

ムービークリップをどんどん活用する方向で色々考えたり作ったりしてみてください。

回答No.4

suzuko

＃１です。あら、サンプルはクリックすると写真が固定されるのですね。^^;

>カーソルをボタンの上においた時に
写真が表示するのはイイんですが
ボタンからカーソルを離すとすぐに消えてしまいます…

ということはボタンを作られたのですね。それなら、次に＃３さんが言っているように
>その 写真や説明用のムービークリップ のフレームを gotoAndStop() させる
てみましょう。

１、シーンに表示させたい写真分のフレーム数を伸ばす。
２、新しいレイアー（アクション）を作って、空白フレームに
this.stop();
とアクションを書く。フレームごとにキーフレームをつくり、全てのフレームに同じアクションを書く。
３、新しいレイアー（写真）を全ての上に作り、2フレーム目にキーフレームを作る。
４、写真1を表示するボタンの中の「オーバー」のキーフレームを「フレームのコピー」をする。
５、「シーン１」の戻り、（写真）レイアーの２フレーム目で「フレームのペースト」をする。
６、写真1を表示するボタンに
on (release) {
gotoAndStop(2);
}
とアクションをつける。（※フレーム番号よりフレームラベルのほうがもっといいんですが・・・・）
７、写真ごとに繰り返す。

初心者が簡単に「カーソルがオーバーのとき表示」「クリックのとき固定」を作るとしたらこんなところでしょうか？（ということは雑でもあるということです）
＃３さんのは、もっとすっきりした形です。

回答No.3

noname#35109

> この店内図はフラッシュではないんですか？

Flash ではないようですね。
私も最初見たときてっきり Flash かと思いました。

> 詳しく説明した何か参考サイトなどはありませんか？
> お手数ですがよろしくお願いします。

＃１の方の書かれていらっしゃることの補足になりますが，
Flash でも似たようなことは簡単にできます。

店内図の各エリアにその形のボタン（ボタンシンボルのインスタンス）を作って，
そのボタンの「オーバー」フレームに写真や説明文を用意すれば良いのです。

「第17回　ボタンの仕組みを利用しよう」
http://itpro.nikkeibp.co.jp/article/COLUMN/20060720/243797/

上のURLのページで，
最初の 「図1：ボタンを使ったムービー」 の乗客キャラにマウスを当ててみて，
まず＃１の方の書かれていことを理解してください。
そして，この原理を利用して，
上記URLの 「図8：ポップアップサンプル」 のようなものを作れば良いのです。
ご質問で書かれているサイトのものによく似ているでしょう。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

上記の方法は簡単ですが，
実際に作ってみると，レイアウト変更などが面倒です。
また，ご質問で書かれている物とは動きが少し違います。

ですから，普通は上のようなボタンの特性をそのまま利用するのではなく，
店内図の各エリアにその形のボタン（ボタンシンボルのインスタンス）を作って，
それとは別に，
写真や説明用のムービークリップを作成して，
その 写真や説明用のムービークリップ のフレームを gotoAndStop() させるのが一般的だと思いますが，
ご質問内容からずれて来ますので，省略いたします。

お礼

早速やってみましたが少し自分のやりたかった事と違いがありました…

下の内容の方法をもう少し詳しく教えてくれませんか？

回答No.2

suzuko

#1です。

一部はFLASHが使われていますが、ご質問部分はFLASHではありません。
「表示」から「ソース」を見てもらえば、

※見たい箇所にカーソルを合わせると<br>
写真が表示されます

の上の
<img src="images/photo_layout.gif" ・・・・部分が「写真や文章が出てくる」操作をしています。
これの解説は、HTMLならいっぱい見かけますが、FLASHでという解説はあまり見たことはありません。^^;
＃１で説明したやり方は、ボタンの作り方の応用です。ボタンの解説サイトを上げておきます。

参考URL：

http://www.1art.jp/flash2/chapter/8/8.htm

お礼

またまた回答して頂きありがとうございます。

早速やってみましたが少し自分のやりたかった事と違いがありました…

それは何かと言うとカーソルをボタンの上においた時に
写真が表示するのはイイんですが
ボタンからカーソルを離すとすぐに消えてしまいます…

ココをクリックなどをして写真がずーっと表示される方法などはありませんか？

あつかましい質問だとは思いますがどうかお願いします。

回答No.1

suzuko

全てFLASH上でするのですよね。（参考に上げているURLはFLASHではありませんよね）

色々やり方はあると思います。
簡単に作れる方法としては、
１，「entrance」「floor」など文字だけの描画をし、ボタンシンボルに変換。
２，ボタンシンボルの「オーバー」と「ヒット」にキーフレームを作る。
３，「オーバー」に文字の色違いと、フロアーの色違い、写真を配置する。
４，「ヒット」に文字の大きさ分だけの塗りを配置。

いかがでしょう？

お礼

早速の返事ありがとうございます！！
誰からも回答してもらえないと思ってました…（笑）

この店内図はフラッシュではないんですか？

当方フラッシュの初心者なものでsuzukoの回答なんですが頭の中が？マークです…

詳しく説明した何か参考サイトなどはありませんか？
お手数ですがよろしくお願いします。