背景が変わる水平ナビゲーション

マウスオーバーすることによってボタンの背景が色や大きさを変えながら移動するナビゲーションメニューの作り方です
解説はつづきから

今回はTweenMaxを使います
詳しくは以前の記事参照

新規ファイル作成
ステージ設定はサイズを400×200、フレームレートは30に

まずは背景を作成
400×100の矩形を描き、ステージの下半分に配置
#FFFFFFから#CCCCCCの色でグラデーション

新規レイヤーを追加し、静止テキストでボタンの文字を記入
それをムービークリップシンボルに変換し、インスタンス名をnewsに

同じように他のボタンも作成し、それぞれインスタンス名をつけ、ステージに均等に配置

新規レイヤーを作成し、ダイナミックテキストで矩形を描く
インスタンス名をtxtにし、ステージ中央下のほうへ配置

新規シンボル作成からActionScriptに書き出しにチェックを入れて、クラス名をButtonBackgroundに
9スライスの拡大/縮小〜にチェックを入れる

矩形プリミティブツールで任意の大きさ、色の矩形を描く
矩形の角丸の半径を3に

シーン1に戻り、新規レイヤーを追加しActionScriptを記述

//TweenMaxをインポート
import gs.*;
import gs.easing.*;

//それぞれのボタンを配列に格納
var buttonList:Array = new Array(news,image,movie,map,mail);

//それぞれのボタンの背景色設定
news.myColor = 0x00CCFF;
image.myColor = 0xCC99FF;
movie.myColor = 0xFFFF33;
map.myColor = 0x00FF99;
mail.myColor = 0xFF6699;

//それぞれのボタンにイベント追加
for (var i:uint = 0; i < buttonList.length; i++) {
    buttonList[i].buttonMode = true;
    buttonList[i].addEventListener(MouseEvent.MOUSE_OVER, moHandler);
    buttonList[i].addEventListener(MouseEvent.CLICK, clickHandler);
}

//ボタンの背景の初期設定
var button_bg:ButtonBackground = new ButtonBackground();
//ボタン背景をnewsの位置に
button_bg.x = news.x;
button_bg.y = news.y;
//ボタン背景の大きさをnewsよりちょっと大きく
button_bg.width = news.width +30;
button_bg.height = news.height +10;
//ボタン背景追加
addChildAt(button_bg,0);
//色をnewsの背景色に
TweenMax.to(button_bg, 0.1, {tint: news.myColor});


//マウスオーバーイベント設定
function moHandler(e:Event):void {

    //e.targetをMovieClip型に変換
    var button:MovieClip = MovieClip(e.target);
    //マウスオーバーされたボタンの幅と高さ
    var targetW:Number = button.width + 30;
    var targetH:Number = button.height + 10;

    //トゥイーン設定
    TweenMax.to(button_bg, 0.7,       //ボタン背景を0.7秒間で
    {x: button.x, y: button.y,        //マウスオーバーしたボタンの位置に
    width:targetW, height:targetH,    //幅と高さを設定値に
    tint: button.myColor,             //色を設定値に
    ease:Cubic.easeOut});             //イージング設定
}


//クリックイベント設定
function clickHandler(e:Event):void {
    //txtにクリックされたボタンのインスタンス名と
    //was clicked ! を表示
    txt.text = e.target.name + " was clicked ! ";
}

これでムービープレビューすると以下のようになってるかと思います

以上、背景が変わる水平ナビゲーションの作り方でした