ささきち流 Suzuka & ParaDraw 講座
Suzuka & ParaDraw
TOP
PROFILE
ActionScript Editor
LINK
BBS


フリーのFlash作成ソフト SuzukaParaDraw でFlashな生活を楽しもうというサイトです。
Suzuka 基礎・基本 ナビゲーションボード(Flash案内板)

 各細胞小器官や細胞質基質にカーソルを合わせると,下にその説明が出る細胞ナビゲーションボード(Flash案内板)です。ただそれだけのシンプルな物です。

 

  サンプルの作成などに使用した ParaDraw のバージョンは Ver.0.3a4, Suzuka のバージョンは Ver. 0.8.0.0 です。
 細胞を説明したいような人はまずいないでしょうね。当然のことですが,細胞は単なる一例です。
 実際は細胞を説明するのではなく,「施設の案内板」 とか 「ショッピングフロア案内図」 などに使えると思います。

 使用しているスクリプトは,onイベントハンドラ と gotoAndStop() のみです。
 説明文字が登場する動きは,Suzuka のテキストエフェクトを使用させてもらいましたので,こちらも使う側としてはノースクリプトです。
 このサンプルでは,贅沢にもたくさんのテキストエフェクトパターンを使用させていただきました。
 こういう使い方はちょっともったいない気もします。

 _root のフレームは 1フレーム しか使用していません。
 要は説明文表示の部分がスプライトでできていて,
 例えばミトコンドリアにカーソルを合わせると,説明文スプライトを,ミトコンドリア説明フレームに移動させるというしくみです。

 例:ミトコンドリアボタン(スプライト製ボタン)のスクリプト↓

// このスプライトがロード(表示)されたとき
onClipEvent(load){
	// このスプライトのタイムラインを停止
	this.stop();
}
// ロールオーバー&クリック時
on (rollOver, release) {
	// このスプライトのタイムラインをフレーム2に進めて停止
	this.gotoAndStop(2);
	// setumei スプライトのタイムラインをフレーム8に進めて停止
	_root.setumei.gotoAndStop(8);
}
// ロールアウト&ドラッグアウト時
on (rollOut, dragOut) {
	// このスプライトのタイムラインをフレーム1に戻して停止
	this.gotoAndStop(1);
}

 説明スプライト(インスタンス名 setumei)内のタイムライン↓

説明スプライト内

 そして,例えばそのミトコンドリア説明フレームには,ミトコンドリア説明文が動いて出てくるというアニメーション(テキストエフェクト)が入ったスプライトを配置しています。

 例:ミトコンドリア説明スプライト内のタイムライン↓

ミトコンドリア説明スプライト内

 このようにして,説明文をテキストエフェクト機能で登場させています。

 このページのサンプルでは,_root の各細胞小器官ボタンには,on (release) {} で何かを動作させるようにはしていませんが,クリックするとさらに詳細な説明が出てくるようなページに getURL させたり,フレームに gotoAndPlay() させても良いと思います。

 また,ロールオーバーで説明を表示させるのではなくて,クリックで説明を表示させて,さらにその説明の中に別の詳細説明を表示させるボタンを用意しても良いと思います。

 発展のさせ方は考えれば考えるだけ,無数にいろいろな方法がありますが,ここではかなりシンプルでオーソドックスなパターンのナビゲーションボードのサンプルを紹介させていただきました。

 

 

 

サンプルダウンロード
PDRファイル・CSFファイル在中
「kiso161.zip」 21.0 KB (21,531 バイト)