076_077【PDFダウンロード】

メニュー＆ナビゲーション
● Photoshop
● Flash MX
NETA No.037
6.0
キッチンタイマーの取っ手が
回転してリンクを指し示す
Check Point!
トビラの向こうで
手を振るキャラクター
Check Point!
●とびらを開くしぐさをナビゲーションに適用
●SWFをリンクの数だけ複製してHTMLに配置
制作・文：野中健一
制作・文：野中健一
シーンに戻って「土台」レイヤーに土台のグラフィックを配
置する。次に、
「リンク」レイヤーを新規作成し、土台に対し
て45度ずつずらしながら
「LINK1」∼「LINK8」の文字を配置する。
新規「取手」レイヤーを作成し、取っ手の部分を配置する。
2
1
「取手」レイヤーに配置した取っ手が1フレームにつき45度回転する
フレームアニメーションを作成する。
「リンク」レイヤーで「LINK1」
の文字の上に四角のボタンシンボルを作成。プロパティインスペクタで［カ
ラ ー ］の［ アル ファ］の 値 を「 0 ％ 」にして 透 明 ボ タン にし、
「 L I N K 2 」∼
「LINK8」の文字の上に複製する。
通常、透明ボタンは［ヒット］
フレームのみにオブジェクトを配置して作
成するが、ボタンシンボルを［アルファ：0％］で透明にすることでも簡単に
作成できる。
076
Chapter03 機能的なメニュー＆ナビゲーションのネタ
4
「LINK1」の上に配置した透明ボタンに以下
のスクリプトを記述する。
on (rollOver) {
gotoAndStop(1);
まず、Illustratorでアニメーションに必
要なパーツを作成する。
Flashのステージを［幅：240px］
、
［高さ：240px］
、
［フレームレート：
12fps］
に設定し、Illustratorで作成したパ
ーツを読み込む。トビラが少し開き、2フレ
ームで腕を回転させて腕を振るアニメーシ
ョンを作成し、ムービーシンボル化する。
2
新規に「とびらオープン」という名前でムービークリップシンボル
を作成し、
「とびら」
レイヤーに で作成したムービーシンボルを
2
配置。11フレームからトビラを開くフレームアニメーションを1フレーム
ずつ作成する。新規に「キャラクター」レイヤーと背景用のレイヤーを作
成し、13フレーム目にキャラクターとトビラのシンボルを
［着色：100％］
にした背景をそれぞれ配置する。次に「キャラクター」
レイヤーの18フレ
ーム目に「HELLO」の吹出しを配置する。フレームアクション用のレイヤ
ーを追加し、18フレームにフレームアクション「stop();」を記述する。リ
ンクする場合は、
「stop();」のあとに「getURL("");」を追加する。
3
3
● Illustrator 9.02
● Flash MX
●身近にあるオブジェクトをナビゲーションに使用
●透明ボタンによりナビゲーションの動きを制御
キッチンタイマーの写真をスキャナーやデジカメから取り込む。取り込んだ画像を
Photoshopで開き、取っ手の部分と本体の部分を別々に分けて編集して保存する。
Flashのステージを［幅：500px］、
［ 高さ：500px］、
［ フレームレート：6fps］に設定し、
Photoshopで作成した画像を読み込んでグラフィックシンボルに変換する。取手の部分をトレ
ースし、マスクをつくる。取っ手は作成したマスクをマスクレイヤーに配置してFlash上で抜け
て見えるようにし、グラフィックシンボル化しておく。
1
NETA No.038
シーンに戻り、1フレーム目にグラフィックシンボルにしたトビラを、2フレーム
目に「とびらオープン」ムービークリップシンボルを配置する。新規に「透明ボタ
ン」レイヤーを作成し、トビラと同サイズの四角いボタンシンボルを作成して配置、
［アル
ファ：0％］
に設定する。透明ボタンには以下のスクリプトを記述する。次にスクリプト用
にレイヤーを追加し、1フレーム、2フレームのそれぞ
on (rollOver) {
れにフレームアクション「stop();」を記述する。これで、
gotoAndPlay(2);
マウスをオーバーするとトビラが開き、雪だるまが
}
on (rollOut) {
「HELLO」というアニメーションが完成する。あとはパ
gotoAndPlay(1);
ブリッシュしたSWFファイルをリンクの数だけ複製し
}
てHTMLに配置すればOKだ。
4
これにより
「LINK1」の文字の上にマウスが重なっ
た時にフレーム1にタイムラインが移動する。同様
に他の「LINK」の上に配置した透明ボタンにリンク
ナンバーと同じフレーム数を指定していく。最後に
アクション用のレイヤーを作成し、1フレーム目に
フレームアクション「stop();」を記述する。各リン
クの上の透明ボタンにリンク先を指定して完成だ。
Webアクション＆エフェクトのネタ帳
077