22 背景のカラーバーが伸縮するメニュー | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて


22 背景のカラーバーが伸縮するメニュー
制作・文=北川貴清







【1】新規のM.C. 「menu1_mc」を作成する。背景に使用する黒色の長方形を描画し、その上にカラーバーのM.C. 「bar」を配置する。さらにその上に白色でメニューのテキストを記述する。また、2フレーム目はテキストカラーを黒色に変える。他のメニューのM.C.も作成し、シーン1のステージに並べて配置する。



【2】AS 3.0で配列した「menuList」にメニューのインスタンスを格納する。メニューごとにマウスの処理を設定しよう。カラーバーのスケールを格納しておく変数scaは最初「0(0%)」にしておき、文字が白色になるようフレームを停止し、マウスの処理に関するイベントリスナーを登録する。



【3】各メニューにロールオーバーしたときはカラーバーを伸ばして、文字を黒色に、ロールアウトしたときはカラーバーを縮めて、文字が白色になるように変数を設定し、フレームを移動する。そしてonEnterframeメソッドでカラーバーのXスケールをイージングさせる処理を設定しよう。Xスケールだけをイージングさせるので、バーは横に伸縮する。


[INDEX]
●Flashの動き表現のアイデア
>>> 21 パターン画像を重ねたビデオ
>>> 22 背景のカラーバーが伸縮するメニュー
>>> 24 リアルなボールのバウンド
●注目のSilverlight 3の新機能
>>> 01 長針・短針・秒針が動くアナログ時計
>>> 02 オブジェクトのフェードイン・アウト
>>> 03 ブラウザ外でも動作するアプリ


twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在