ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

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月の人気記事ランキング