DoCoMoみたいなFlashメニュー。

あったかくなってきましたね。
管理人のツノッチです。

DoCoMoのトップページのような、スライドして画像と連動する
メニューはよく見かけるけど、スペースを抑えられる意味でも
とても需要はあると思います。
だから挑戦してみました。

今回はとりあえずタブの部分のみを作りました。
タブにマウスオーバーしたときに画像が変わって、
クリックすると、ページが移動します。

Flashのスライドメニュー（タブ）サンプル»

スクリプトは汚いけどこんな感じです。

/*************************
基本情報
*************************/
var myXML:XML;
var xmlPath:String = "menu.xml";
var xmlRequest:URLRequest = new URLRequest(xmlPath);
var xmlLoader:URLLoader = new URLLoader(xmlRequest);
var loader:Loader;
var imgNum:uint = 4;
var imgOnArray:Array = new Array();
var imgOffArray:Array = new Array();
var urlArray:Array = new Array();
xmlLoader.addEventListener(Event.COMPLETE, xmlLoadComplete);
function xmlLoadComplete(event:Event):void{
    myXML = new XML(event.target.data);
    setOnImg();
    setOffImg();
    setURL();
}
function setOnImg():void{
    for(var i:uint = 0; i <= imgNum - 1; i++){
        loader = new Loader();
        imgOnArray.push(loader);
        imgOnArray[i].load(new URLRequest(myXML.item[i].on));
        this["tab" + (i + 1)].tab_on.addChild(imgOnArray[i]);
    }
}
function setOffImg():void{
    for(var i:uint = 0; i <= imgNum - 1; i++){
        loader = new Loader();
        imgOffArray.push(loader);
        imgOffArray[i].load(new URLRequest(myXML.item[i].off));
        this["tab" + (i + 1)].tab_off.addChild(imgOffArray[i]);
    }
}
function setURL():void{
    for(var i:uint = 0; i <= imgNum - 1; i++){
        urlArray.push(myXML.item[i].url);
    }
}
/*************************
自動関数
*************************/
var time:uint = 0;
var timeEnd:uint = 240;
var indexNum:uint = 1;
this.addEventListener(Event.ENTER_FRAME, setTimeEnter);
function setTimeEnter(event:Event):void{
    if(time == timeEnd){
        time = 0;
        autoLoop();
    } else {
        time++;
    }
}
function autoLoop():void{
    if(indexNum == imgNum){
        indexNum = 1;
    } else {
        indexNum++;
    }
}
/*************************
画像の切り替え
*************************/
for(var i:uint = 1; i <= imgNum; i++){
    this["tab" + i].buttonMode = true;
    this["tab" + i].mouseChildren = false;
    this["tab" + i].addEventListener(MouseEvent.ROLL_OVER, setTabOver);
    this["tab" + i].addEventListener(MouseEvent.ROLL_OUT, setTabOut);
    this["tab" + i].addEventListener(MouseEvent.CLICK, setTabClick);
}
function setTabClick(event:MouseEvent):void{
    var url:String = urlArray[event.target.name.substr(-1, 1) - 1];
    var request:URLRequest = new URLRequest(url);
    navigateToURL(request);
}
/*************************
タブチェンジ関数
*************************/
function setTabOver(event:MouseEvent):void{
    time = 0;
    indexNum = event.target.name.substr(-1, 1);
    changeTab(event.target);
}
function setTabOut(event:MouseEvent):void{
    changeTabOff(event.target);
}
function changeTab(obj:Object):void{
    var targetTab:String = "tab_on";
    obj.setChildIndex(obj.getChildByName(targetTab), (obj.numChildren - 1));
}
function changeTabOff(obj:Object):void{
    var targetTab:String = "tab_off";
    obj.setChildIndex(obj.getChildByName(targetTab), (obj.numChildren - 1));
}
/*************************
矢印の動き
*************************/
var arrowY:Array = new Array(0, 19, 56.5, 93.5, 131);
arrow_mc.addEventListener(Event.ENTER_FRAME, setArrowEnter);
function setArrowEnter(event:Event):void{
    arrow_mc.y = arrow_mc.y + 0.2 * (arrowY[indexNum] - arrow_mc.y);
}