人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

FLASH日本地図を作りたいのですが、誰か作り方を教えてください。

↓こんな感じのが作りたい
http://map.livedoor.com/

機能としては、
日本地図から地方を選ぶ
地方から県を選ぶ

というのができれば十分です。

まずは、作成に必要な素材
白地図は入手しました。

所持ソフトは
Macromedia FlashMX
PhotoShop
Illustrator
などがあります。

最初
白地図の日本地図に地方ごとに色塗りして、
それをFlashに読み込んで色にイベントをつければ
簡単じゃんと思ったのですが、
読み込んだ画像は編集できないので
そんな簡単にはいかないみたいですね。

誰か教えてください。
お願いします。

●質問者: hiyarihatto
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:Flash Illustrator Macromedia Photoshop イベント
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● aiaina
●27ポイント

まずはマップを用意してフレーム1にムービークリップで配置し

フレームを追加して、文章と写真の説明文を作成配置。(動き無しなら同じフレームにキーフレームに変換後どんどん追加でいいと思いますが、動き足すならフレーム分けした方がいい)

ボタン用のフレームを追加。ピックアップしたい箇所(ようは説明したい箇所)にはボタンを配置。

アクションフレームを追加。ジャンプ先ごとにキーフレームで仕切り命令文を入れる。

一番簡単なのは「gotoAndPlay("フレーム名");」で、次のアクション前にはちゃんと「stop();」を入れる

ちなみにボタンに「on(release) {gotoAndPlay("フレーム名"); }」を入れてOKです。

◎質問者からの返答

こめんとありあがとうございます。

簡単そうですね。

出来れば

文字クリックではなく

地図の大陸部分だけクリックできて、

関東地方や東北地方でリンク分けをしたいのですが、(omMouseOcverの地方は色変化)

これをするにはどうしたらいいのですか?

yahooマップでは

Flashを使わず

地図のgif画像を用意してクリックした場所をjavascirptで調べてクリックした県を識別しているみたいですね(推測)


2 ● esecua
●27ポイント

ご存知かと思いますが、一応Googleで公開されているAPIを利用すれば簡単に自分のホームページ上に地図を作成することができます。


http://www.cybergarden.net/blog/images2/google_maps2.html

http://www.cybergarden.net/blog/2005/11/google_maps_api.html


FLASHではなくJavascriptを使ったAjaxという技術でリロードなしで連続してデータを読み取ります。

参考になれば幸いです。

◎質問者からの返答

コメントありがとうございます。

GoogleMap、知っていますよ(^^;

ざっくりと地図で選びたいので、

Flashが最適かなと思っています。


3 ● chiyodaku
●26ポイント ベストアンサー

まず、IllustratorかFireworksで、分割したいエリアや県をペンツールなどでトレースして、パーツにして、それぞれ別名で保存して書き出します。(Flashで作業するならpng形式をお勧めします)

次に保存したそれぞれのエリアや県をFlashのライブラリに読み込みます。

下絵となる元画像を一番下のレイヤーに配置します。

ライブラリに読み込んだパーツをボタンシンボルに変換します。

ボタンシンボルの編集で、「アップ」「オーバー」「ダウン」などのフレームが出てきますので、「オーバー」のフレームで、「アルファ」か「着色」でシンボルの設定を変えてください。

(ご質問のあったライブドアの地図は「アルファ」の設定を下げていますね)

元画像の上にレイヤーを追加して、変換したボタンシンボルをそれぞれ、下にある元の地図と同じ位置に配置すれば完成です。

◎質問者からの返答

コメントありがとうございます。

参考にさせていただきます。

chiyodakuさんのコメントを見てトレースを調べたのですが、

イラレって画像データをベクターデータに変換するオートトレースというのがあったのですね。

こんな便利な機能、今まで知りませんでした。

ありがとうございます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ