スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

HomeFlash講座 > 透明なボタン

透明なボタン

投稿日:2006年6月16日   レベル:初級    ソフトウェア:Flash






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

500_501_013_1.jpg


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

500_501_013_2.jpg


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

500_501_013_3.jpg


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

500_501_013_4.jpg


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

500_501_013_5.jpg


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

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

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


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


ダウンロード


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



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング