縦にスライドするナビゲーション

マウス位置でメニューの位置もかわるナビゲーションの作り方です
解説はつづきから

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

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

まずは300×220、角丸半径10の矩形を描きムービークリップシンボルに変換
基準点を左上にし、インスタンス名をmaskMCに

新規シンボル作成からActionScriptに書き出しにチェックを入れて、クラス名をMenuItemに

300×25、色#3399CCの矩形を描き、左上に基準点がくるように位置を0,0に

ダイナミックテキストでテキストを入力、x位置を10に(あとは任意)
インスタンス名をmenuLabelに

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

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

//メニューの数
const num:int = 20;
//メニューをいれるMC
var base:MovieClip = new MovieClip();
//baseにマウスオーバーしてるかどうか
var onBase:Boolean = false;
//baseの初期位置をマスクと同じ位置に
base.x = maskMC.x;
base.y = maskMC.y;
//baseにマスク適用
base.mask = maskMC;
//baseを設置
addChild(base);

for (var i:int = 1; i<=num; i++) {
    //メニューを作成、位置、透明度設定
    var menuItem:MenuItem = new MenuItem();
    menuItem.x = 0;
    menuItem.y = (i-1) * menuItem.height * 1.05;
    menuItem.alpha = 0.5;

    //メニューのテキスト設定(10以下の場合は頭に0をつける)
    if (i<10) {
        menuItem.menuLabel.text = "Menu Label 0"+ i;
    } else {
        menuItem.menuLabel.text = "Menu Label "+ i;
    }
    //テキスト部分のマウスの反応を消す
    menuItem.mouseChildren = false;

    //メニューにマウスオーバー、マウスアウトイベント追加
    menuItem.addEventListener(MouseEvent.MOUSE_OVER, onOverM);
    menuItem.addEventListener(MouseEvent.MOUSE_OUT, onOutM);

    //baseにメニューを設置
    base.addChild(menuItem);
}

function onOverM(e:Event):void {
    //マウスオーバーで透明度とテキストの位置を変える
    TweenMax.to(e.target, 0.5, {alpha:1, ease:Cubic.easeOut});
    TweenMax.to(e.target.menuLabel, 0.5, {x:190, ease:Cubic.easeOut});
}

function onOutM(e:Event):void {
    //マウスアウトで透明度とテキストの位置を元に戻す
    TweenMax.to(e.target, 1, {alpha:0.5, ease:Cubic.easeOut});
    TweenMax.to(e.target.menuLabel, 1, {x:10, ease:Cubic.easeOut});
}

//baseにマウスオーバー、マウスアウトでonBaseを切り替え
base.addEventListener(MouseEvent.MOUSE_OVER, mouseOverMenuF);
base.addEventListener(MouseEvent.MOUSE_OUT, mouseOutMenuF);

function mouseOverMenuF(e:Event):void {
    onBase = true;
}
function mouseOutMenuF(e:Event):void {
    onBase = false;
}

//エンターフレームイベント追加
addEventListener(Event.ENTER_FRAME, loop);

function loop(e:Event):void {
    //onBaseがtrueのとき
    if (onBase) {
        //マウス位置がマスクの高さ分移動するとき
        //baseはbaseとマスクの高さの差分移動するように
        //targetYを設定(端はmenuItemの高さ分調整)
        var dis:Number = mouseY-maskMC.y;
        var dif:Number = base.height-maskMC.height;
        var per:Number = dis/(maskMC.height-menuItem.height);
        var targetY:Number = -(dif*per)+maskMC.y+menuItem.height/2;

        //baseをtargetYの位置に移動
        base.y += (targetY-base.y)/2;

        //端にいったときはそれ以上いかないように設定
        if (base.y>maskMC.y) base.y = maskMC.y;
        if (base.y<maskMC.y-dif) base.y = maskMC.y-dif;
    }
}

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

以上、縦にスライドするナビゲーションの作り方でした