2011年01月30日

普段は見えないボタン

KoolMovesのサポートフォーラムで、FlashKitというところで見つけたネタです。

マウスが外れると透明になるボタンです。

KoolMovesのファイルもダウンロードできますので、挑戦してみました。

そのままでは大きいので、ムービーサイズは、240x150にしました。

まず透明になる外側の領域を作ります。

長方形を作成し"f"を押し塗りつぶし、ムービークリップに変換します。アイテムの名前は、mc1となります。

mc1を選択した状態で、キーボードの"p"を押します。

図形のプロパティのダイアログが開きますので、Framesボタンを押します。

長方形の名前は、S1となっています。

S1の内側に、ボタンとなる一回り小さな長方形を描き別の色で塗りつぶします。これはS2となります。

S2の内側に入るように、"ボタン"と文字を入れます。

全体を選択し、ムービークリップに変換します。名前がmc2となりますが、ここで、名前をcontentsと変更します。

"p"ボタンを押し、Framesボタンを押します。

S2とボタンの文字を選択し、ボタンに変更します。

"p"ボタンを押し、Statesボタンを押します。Hintが出てきますが、☓で閉じます。

OverとDownの時のそれぞれのボタン色を設定します。

このままではボタンの外側が見えなくなるので、領域の上に文字を入れます。

最後にActionScriptでコードを書き込みます。

"a"キーを押し、以下のコードを記入します。

mc1.contents.alpha=0;

mc1.addEventListener(MouseEvent.MOUSE_OVER,showBar);
mc1.addEventListener(MouseEvent.MOUSE_OUT,hideBar);

function showBar(e:MouseEvent){
mc1.contents.alpha=.5;
}

function hideBar(e:MouseEvent){
mc1.contents.alpha=0;
}



それで出来上がったものがこれです。

写真などの上に置くボタンとして、ぴったりではないですか?







以下は上記のソースです
hiddenbutton.zip
posted by hirano at 00:39| 埼玉 ☁| Comment(0) | TrackBack(0) | Koolmoves | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/183095111

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。