XMLファイルを使ったナビゲーションメニュー 【前編】

外部XMLファイルを使ったナビゲーションメニューの作り方です
これも2回に分けて
解説はつづきから

今回もTweenMaxを使います
詳しくは前回参照

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

ステージに150×30の矩形を描く、色は#FF6600

基準点を左上にし、ムービークリップシンボルに変換
ActionScriptに書き出しにチェックを入れてクラス名をMenuItemに

シンボルをダブルクリックしてシンボル編集画面にし、新規レイヤー追加

目安なので適当な文字を打ち、設定を画像のように

シーン1に戻って、シンボルをステージから削除
新規レイヤーを追加して、ActionScripを記述

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

var i:uint = 0;    //カウンター

function createMenu():void {

    for  (i=0; i<5; i++) {    //XMLファイルを作成してないので暫定的にforで
        var menuItem:MenuItem = new MenuItem();    //menuItem作成

        //ボタン配置
        menuItem.x = 50;
        menuItem.y = 65 + i*35;

        menuItem.buttonMode = true;    //カーソルを指の形に
        menuItem.mouseChildren = false;    //子要素(この場合文字)に反応しないように

        //マウスオーバー時の動作
        menuItem.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
        //マウスアウト時の動作
        menuItem.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
		
        addChild(menuItem);    //menuItem追加
    }
}

//マウスオーバー時の設定
function mouseOverHandler(e:Event):void {
    //1秒間で幅2倍に、バウンド動作のイージング
    TweenMax.to(e.target, 1,{
    scaleX:2,
    ease:Bounce.easeOut
    });
}

//マウスアウト時の設定
function mouseOutHandler(e:Event):void {
    //1秒間で幅をもとの大きさに、バウンド動作のイージング
    TweenMax.to(e.target, 1,{
    scaleX:1,
    ease:Bounce.easeOut
    });
}

これでムービープレビューするとマウス動作で横に伸縮するメニューバーが出来たかと思います

次回はXMLファイルとリンクを作成したいと思います

【後編】へつづく