Flashラボ

ボタンシンボルでボタンを制作

ボタンシンボルでボタンを制作

それぞれの「シンボル」(前項参照)は、それぞれの役目があります。その一つ、「ボタンシンボル」は、書いて字のごとく「ボタン」の役目を果たします。

Flash MXからムービクリップシンボルにも「クリック」したときや、「ロールオーバー」したときのアクションをつけられるようになったので、今ではあまりボタンシンボルを使うことはなくなりましたが、基本事項なので覚えておきましょう。

上のメニューから「挿入」→「新規シンボル」または、「CTRL(マック:アップルマーク)」+「F8」で新規シンボルを作成。シンボルの種類は、ボタンを選択しましょう。

ボタンシンボルの作成

すると上のようなボタンシンボルの編集画面が表示されます。タイムラインには、「アップ」、「オーバー」、「ダウン」、「ヒット」という項目があり、アップにだけ「キーフレーム」がうたれています。

タイムライン」については、また後で説明しますが、「レイヤー1」と書いてあるものの右側の部分がタイムラインで、上の図は、アップにだけ「箱(キーフレーム)」ができています。これをフレーム(キーフレーム)と呼びます。

ボタンシンボルだけは、役割が「ボタン」と明確に決まっていることから、フレームがはじめから下のようになっています。

ボタンシンボルを編集

それでは、上のように「オーバー」の部分をクリックしてみましょう。すると色が変わるのがわかります。

そこで、「F6」または、「挿入」→「タイムライン」→「キーフレーム」を押すと、「オーバー」にキーフレームを挿入することができます。同じようにして、「ダウン」、「ヒット」にもキーフレームを挿入しましょう。

左に「レイヤー1」とありますが、勘のいい人はもうおわかりでしょう。PhotoShopのように、レイヤーを作成して、それぞれのレイヤーに違うオブジェクトを入れることができます。

ボタンシンボルを編集2

レイヤーを増やすのは、レイヤーパネルの左下のアイコンをクリックします。

「レイヤー1」と「レイヤー2」の違いは、レイヤー2は、「アップ」のみが「キーフレーム」で、その他はただの「フレーム」なのに対して、「レイヤ−1」は全てが「キーフレーム」。「キーフレーム」って何?と思うかもしれませんが、今はとりあえず、そういうものがあると、覚えておきましょう。

ボタンシンボルを編集3

同様に、「オーバー」、「ダウン」、「ヒット」にも違う色の適当な四角を書いてみましょう。そして、「レイヤ−2」にはテキストツールで「TOP」と書いてみましょう。

ボタンシンボルを編集4

さて、上のようになったでしょうか。ちなみに、レイヤーには、名前を付けることができ、それぞれ、「テキスト」、「ボタン」とつけました。

これでボタンの完成です。前にも説明しましたが、「シーン1 ボタンテスト」と書いてある左上のアイコンの、「シーン1」をクリックして、「シーン1(ルート)」の編集画面に戻りましょう。
戻ったら、ライブラリーから、ボタンをステージにドラッグアンドドロップして、書き出してみましょう。

ボタンをロールオーバー、クリックするとボタンの色が変わるのがわかります。
つまり、「アップ」は通常の状態。「オーバー」はロールオーバーの状態、「ダウン」はクリックした時の状態で、ヒットは、選択範囲になります。


サンプルボタン

TOPという文字が変わらないのは、それぞれに「キーフレーム」ではなく、フレームをつけたからです。つまり、キーフレームは、それぞれ違ったオブジェクトを格納することができ、フレームは、同じオブジェクトを格納することができるということです。

サンプルボタンは、お決まりの「Yahoo」にリンクをはってみました(笑)。アクションスクリプトといっても、ある程度のものは、タグを打つよりも簡単です。ルールさえ覚えてしまえば、恐るるに足らず。アクションスクリプトの詳細は、別項で説明しますが……。

スクリプトを追加

上のように、ステージに配置したボタンをクリックして、「F9(win)」を押すと、アクションスクリプトの編集パネルが表示されるので、そこで、上のような簡単なアクションスクリプトを書くだけです。

Copyright (c) Penta Creation All rights reserved.