フラッシュで作る地図

質問

すみませんが、下記のアドレスのような地図をフラッシュで作りたいと思いますが、初心者でも分かりやすい、解説の載った本やサイトをご存知でしたら紹介していただけないでしょうか。
http://flash.xtaro.com/sozai/shops/sample1/map.htm

回答No.3

BlurFiltan · ベストアンサー

＃１ で大ボケをしてしまった者です。

> 初心者でも分かりやすい、解説の載った本やサイトをご存知でしたら

そのままそっくりはおそらくどこにもないと思います。

しかし，
ご質問で書かれていらっしゃる URL のものは別に難しい物ではないので，
初心者向けの本やサイトでしたら，どこにでも書いてあると思います。
簡単なメソッドやFlashのしくみを自分なりにどう使うかを考えるだけです。

例えば，
「○○駅」にロールオーバーしたときに出てくるものは，
ボタンを利用すればできますよね↓。

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

つまり「○○駅」にロールオーバーしたときに出てくるものは
ActionScript のようなものは要らないということになります。
ボタンの性質を自分なりにどう使うかを工夫するだけです。

その他の物で Flash 内の動きに関しては，

on (release) {
MovieClip.gotoAndStop(フレーム番号);
}

だけで出来ます。
Flash 内の動きだけでなく他のページにリンクがかかってる部分もありますが，
その部分は，

on(release){
getURL("リンクしたいページ");
}

でできます。

こここまでは説明できても，具体的な方法が文字だけではなかなか回答が難しいのですよね...。

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

文字だけの説明では難しいので簡単な例を説明します。

例えば，
新規ドキュメントを作成して，
ステージ上に赤い塗り四角を描きます。
大きさは適当でかまいません。

その赤い四角を全て選択して，
「修正」→「シンボルに変換」 で ムービークリップ に変換します。

その ムービークリップ を選択して，
ステージ下のプロパティインスペクタで左横の方にある

　<インスタンス名>

となっているグレーの文字部分にインスタンス名を付けます。
例えば 「myMC」 というインスタンス名を付けます。

その 「myMC」 というインスタンス名を付けたムービークリップをダブルクリックして，
ムービークリップ内の編集に移ります。

このとき，
ムービークリップ内のレイヤーは１レイヤー１フレームで次にようになっているはずです。

　レイヤー　・・・・|●|

上の ● を選択して右に１つドラッグして，次のような状態にします。

　レイヤー　・・・・|○|●|

これでムービークリップ内のタイムラインのフレームは 2フレーム になったということになります。

このタイムラインの フレーム1 の ○ を選択した状態で，
下のアクションパネルに次のように書きます（コピペでもかまいません）。

stop();

これでこのムービークリップ内は自動再生されなくなります。

そして，
ステージ上の何もない部分をダブルクリックして，
メイン（_root）のタイムラインの編集に戻ります。

メイン（_root）のタイムラインの編集に戻ると，
赤い四角は消えて ○ がステージ上に残っていると思います。
これが上で作成した 「myMC」 というインスタンス名を付けたムービークリップです。

その ○ の横辺りにでも，
適当な塗りの四角を描いて，
今度は「修正」→「シンボルに変換」でボタンに変換します。

そのボタンを選択して，
下のアクションパネルに，

on (release) {
_root.myMC.gotoAndStop(2);
}

と書きます。
この意味は，

　ボタンをクリックしたとき
　_root にあるインスタンス名myMC のムービークリップを
　フレーム2に進めてストップ

という意味になります。

ここで，
「制御」→「ムービープレビュー」します。

すると，
後に作成したボタンだけが表示されると思いますから，
そのボタンをクリックしてみます。

すると，
「myMC」 というインスタンス名を付けたムービークリップがフレーム2に進んで，
赤い四角が表示されるようになると思います。

この赤い四角の部分に色々表示させたい文字やボタンなどを配置すれば，
ボタンをクリックしたときメニューのようなものが表示されるしくみができます。

次に「閉じるボタン（×ボタン）」の作成方法です。

「myMC」 というインスタンス名を付けた ○ 状態のムービークリップを再びダブルクリックして，
「myMC」 内のタイムラインの編集に戻り，

　レイヤー　・・・・|○|●|

という状態に新規レイヤーを追加して，
２レイヤー ２フレーム にします。

　レイヤー　・・・・|○　[]|
　レイヤー　・・・・|○|●|

上のレイヤーのフレーム2を選択して，
「右クリック」→「キーフレームの挿入」で
上のレイヤーのフレーム２もキーフレームにします。

　レイヤー　・・・・|○|○|
　レイヤー　・・・・|○|●|

その上のレイヤーのフレーム2の空白キーフレーム○を選択した状態で，
ステージ上に 赤い四角より も小さな 黄色い塗りの四角 を描きます。

その黄色い塗りを選択して，
「修正」→「シンボルに変換」でボタンに変換します。

その黄色いボタンを選択した状態で，
下のアクションパネルに次のように書きます。

on (release) {
this.gotoAndStop(1);
}

この意味は，

　ボタンをクリックしたとき
　このボタンのある ムービークリップを
　フレーム1に進めてストップ

という意味になります。

そして，
ステージ上の何もない部分をダブルクリックして，
メイン（_root）のタイムラインの編集に戻ります。

ここで，
「制御」→「ムービープレビュー」します。

するとさっきと同様，
作成したボタンだけが表示されると思いますから，
そのボタンをクリックしてみます。

すると，
「myMC」 というインスタンス名を付けたムービークリップがフレーム2に進んで，
赤い四角が表示されるようになると思います。
それと同時に，小さな黄色いボタン も表示されるはずです。

その 小さな黄色いボタン をクリックすると，
「myMC」 というインスタンス名を付けたムービークリップはフレーム1に戻るので，
「myMC」 は見えなくなります。

こんな感じで作成していけば，
ご質問で書かれていらっしゃるようなものも作成できます。

文字ばかりの説明で難しいかもしれませんが，
この原理がわかるとどんどん色々なものが作成できると思います。

回答No.2

BlurFiltan

＃１です。

すみません。
回答の投稿ミスです。
＃１の回答は全て無視してやってください。
別の方の別の質問に対する回答を間違って書いてしましました。

お礼

BlurFiltanさん

わざわざ書き直していただいてありがとうございます。
参考にさせていただきます。

回答No.1

BlurFiltan

アクションスクリプトを勉強中ということでしたら、
ActionScript は共通ですし理論も共通なので
Adobe Flash 用のサイトではありませんが次のURLを参考にされてみてはいかがでしょうか。

「簡易3D回転メニュー」
http://suzupara.iinaa.net/3d_rotation.html

> （マウスの位置で回転速度が変わるアクションは考えていません）

ということでしたら、
上記ページの　「説明サンプル3」　までで良いということになります。

上記ページでは、
「説明サンプル1」 で１つのもの（MC）を真円に回転させて、
「説明サンプル2」 で１つのもの(MC)を楕円状に回転させて、
「説明サンプル3」 で複数のもの(MC)を楕円状に回転させる。
というように、
実際の作成手順を追って説明してあります。

また、
ご質問で書かれていらっしゃるURLの「商品情報」も、
上記のページに書かれているレベルの回転で終わっています。

------------------

さらに透視変換を使って遠近感を出すレベルになると次のページになります。

「本格3D回転メニュー(透視変換・投影)」
http://suzupara.iinaa.net/3d_rotation_r.html

ご使用の Flash のバージョンを書かれていらっしゃいませんが、
ここまででしたら Flash MX でも作成できます。

------------------

さらにぼかしをかけて空気遠近法まで演出する場合は次のページになります。

「3D回転メニュー(BlurFilter)」
http://suzupara.iinaa.net/3d_rotation_cc.html

ただし Adobe Flash でここまでするには（BlurFilterクラスを使うには）、
Flash 8 以上が必要になります。

～・～・～・～・～・～・～・～・～

質問者さんのご年齢などがわかりませんが、
ActionScript 以前に、ある程度（高校レベル）の数学は必要となります。
もし三角関数を習われていなければ、
ActionScript よりも前に数学をする必要があるということです。
それなしでは理解も応用も無理です。

私自身も、
３Ｄ風に回転させるものを作るときだけでなく、
実際に他のものを作る場合でも、
普通はこんな感じで少しずつ考えたり調べたりして着実に作成していきます。

お礼

BlurFiltanさん、詳しいコメントありがとうございます。よく読んで参考にさせていただきます。