ほとんどのFlashムービーで有効な、透明なボタンの作り方を勉強しましょう。

[You must be registered and logged in to see this image.]


1.まず、新しいドキュメントを開きます。
次に、ボタンインスタンスを作成します。
Ctrl+F8を押せば、新しいシンボルが作れます。
シンボルのタイプをボタンにして、名前を”invisible button”としてください。

[You must be registered and logged in to see this image.]


2.さて、ボタンインスタンスの中に入りました。
”ヒット”フレームを選択した状態で、F6を押してください。新しいキーフレームが挿入されたはずです。ここで、長方形を書きましょう。
普段は、ムービー内であまり使わない色、明るい緑なんかを使います。
プロパティボックスで、X,Yの位置を0に、幅を100ピクセル、高さを25ピクセルにしましょう(もちろん違う位置、サイズでもよいのですが、このチュートリアルではこの設定でいきましょう)。
これで、透明なボタンができあがりました。ただ、ヒットするエリアを設定しただけです。アップ、ダウンといったステータスは与えずに、透明にできました。
このテクニックは、毎回新しいボタンを作成する代わりに、新しいアクションを加えるだけで、手間を省いてくれます。
例えば、リンクのリストをページに作るときには、テキストの上に重ねて、それぞれのURLを変えていけばよいことになります。
これはあなたがページを作成するときに大いに役立つでしょう。

[You must be registered and logged in to see this image.]


3.ボタンを作成したら、それが動作するか確かめてみましょう。
シーン1をクリックして、Rootタイムラインに戻ります。ライブラリが開いていなければ、Ctrl+Lで開いて、ボタンシンボルをステージにドラッグしてください。
ボタンの色はあなたが使った色ではなく、透明な青になっているはずです。これはボタンが透明であることを示しており、パブリッシュ後は、見えなくなります。
Ctrl+Enterでテストムービーを走らせて、確認してみてください。

[You must be registered and logged in to see this image.]


4.次にこのボタンをどのように活用するべきかを考えていきます。
まず、ユーザーにボタンがあることを知らせなければいけません。単純に、前に少し触れたようにリンクのリストをつくるのはよいでしょう。
イメージのように(ここでは3つ)、あなたが、よく使用するページのタイトルを羅列してみてください。
ここに並べた3つのテキスト上には、透明なボタンが重ねてあります。
このボタンの便利なところは、その大きさを自由に変えられることにもあります。この場合は、テキストの幅に合わせてみました。

[You must be registered and logged in to see this image.]


5.ここで、ボタンにアクションを加えましょう。
ボタンインスタンスを1つずつ選択して、アクションパネルを開いて次のように書いてください。

on(press) {
getURL("http://www.spoono.com", _blank, "POST");
}

これによって、www.spoono.comへの移動がおこなわれます。同じように全てのボタンに、その行き先を指定してください。


6.とても簡単にできることがわかったと思います。
私は、この手のボタンをほぼ全てのムービーに使用しています。
もしわからないことがあれば、何でも尋ねてください。
あなたの力になることができれば幸いです。


ダウンロード



引用:Web Design Library著者:Jacob Bullock翻訳:atuk]