Xml管理のナビゲーション

2008年5月13日 17:15 青 | | コメント(1) | トラックバック(0)
今月はフラッシュでナビゲーションをイッパイ作ろうと言う事で、とりあえず仕事で使いそうなナビゲーションを作ってみました。

ザックリとバグチェックはしましたが、アニメーションあたりで調整が必要かも、、、、、、。

あと、javascrioptと組み合わせてlocation.hrefの値をFlashVarsにいれてアレすればナビゲーションだけフラッシュのサイトでも他のページに飛んだ時どこにいるかわかるようにできますよね。
ってこの説明わかりずらいですね。(笑)

で中身ですが、ライブラリにメニュー用のムービークリップとプルダウン用のムービークリップを作り、リン
ケージで最初に書き出しと識別子を「menu」と「menuChild」にしてあります。
格ムービークリップの中にダイナミックテキスト「titleTxt」と「pullTxt」を作ってあります。
で最初のフレームにコードが書いてあります。

アニメーションにはFusekitをつかっています。
使い方はtrick7さんのブログで紹介してましたのでこちらで、、、、

サンプルswf

追記 2008/5/14

プルダウンされたメニューをクリックすると<menuNode title="works2" url="works2.html" />のurlの値をで確認できるようにしました。
.htmlになってますが、外部画像やswfをロードにも使えると思います。


XML

<?xml version="1.0" encoding="utf-8"?>

<mainNavi>

<menu title="Works">
    
    <menuNode title="WEB" url="web.html" />
    <menuNode title="Graphic" url="graphic.html" />
    
</menu>
<menu title="Profile">
    
    <menuNode title="profile1" url="profile1.html" />
    <menuNode title="profile2" url="profile2.html" />
    
</menu>

<menu title="Contact">
    
    <menuNode title="仕事依頼" url="order.html" />
    <menuNode title="お問い合わせ" url="ask.html" />
    
</menu>

<menu title="FAQ">
    
    <menuNode title="aについて" url="FAQ1.html" />
    <menuNode title="bについて" url="FAQ2.html" />
    <menuNode title="Cについて" url="FAQ3.html" />
    <menuNode title="dについて" url="FAQ4.html" />
    
</menu>

<menu title="Blog">
    
    <menuNode title="Ao Labs" url="Blog1.html" />
    <menuNode title="デザイン" url="Blog2.html" />
    <menuNode title="社長" url="Blog3.html" />
    <menuNode title="経理" url="Blog4.html" />
    <menuNode title="総務" url="blog5.html" />
    
</menu>

</mainNavi>


ActionScriptコード（汚いです）

//FuseKitをインポート
import com.mosesSupposes.fuse.*;
ZigoEngine.register(Fuse,PennerEasing,FuseFMP);

//メニューボタンの情報配列
var menuList:Array = new Array();
//格プルダウンの情報配列
var childList:Array = new Array();
//格プルダウンの情報配列
var menuTitle:Array = new Array();
//プルダウンの初期設定
var pm:MovieClip;

var home = this;
//プルダウンをアタッチする空のムービークリップ
var pullBox:MovieClip;

var ID:Number;
//XMLをロードしてパースしてメニューを展開

var xml:XML = new XML();
xml.ignoreWhite = true;

xml.onLoad = function() {
    //メニュー
    menuNode = this.firstChild.childNodes;
    //サムネイルの
    menuChild = this.firstChild.firstChild.childNodes;
    //trace(menuChild);

    //メニューの数とタイトルを取得
    //trace(menuChild.length);
    for (var i = 0; i < menuNode.length; i++) {

        menuList.push(menuNode[i].childNodes);

        menuTitle.push(menuNode[i].attributes.title);

        //プルダウンの数とタイトルを取得
        for (var a = 0; a < menuChild.length; a++) {

            childList.push(menuNode[i].childNodes[a].attributes.title);
        }

    }
    attachMenu(menuList,menuChild,menuTitle);
    //trace(childList);


};

//メニューボタンを横に並べる

function attachMenu(menuList:Array, menuChild:Array) {

    var menuMax:Number = menuList.length;
    var xPos:Array = new Array();
    var yPos:Array = new Array();

    //trace(childList);

    for (var i = 0; i < menuMax; i++) {

        var mc:MovieClip = home.attachMovie("menu", "menu" + i, i);
        mc._alpha = 0;
        mc._y = 50;
        mc._x = (mc._width * i + 10);
        ID = mc.ID = i;
        mc.titleTxt.text = menuTitle[i];
        xPos.push(mc._x);
        yPos.push(mc._y);

        var f:Fuse = new Fuse();
        f.push({target:mc, delay:0.1 * i, alpha:100, ease:"easeOutExpo", x:100 + (mc._width * i ), time:0.4});
        f.start();

        mc.onRollOver = function() {

            if (pm != undefined) {

                var f:Fuse = new Fuse();
                f.push({target:pullBox, delay:0, alpha:0, ease:"easeOutExpo", time:0});
                f.start();
                removeMovieClip(pullBox);

            }

            rolled(this.ID,menuNode,xPos,yPos);

        };

    }

}

//メニューボタンをロールオーバー時にプルダウンを展開

function rolled(ID:Number, menuNode:Array, xPos:Array, yPos:Array) {


    nodesMax = menuList[ID].length;
    nodesX = xPos[ID];
    nodesY = yPos[ID];
    pullBox = new MovieClip();

    pullBox = this.createEmptyMovieClip("pullBox", 1000);

    //trace(xml.firstChild.childNodes[ID].childNodes[1].attributes.title);



    for (var i = 0; i < nodesMax; i++) {

        pm = pullBox.attachMovie("menuChild", "menuChild_mc" + i, i + 10);
        pm._y = 50 + pm._height;
        pm._x = nodesX + (pm._width * i) + 200;
        pm._alpha = 0;
        pm.pullTxt.text = xml.firstChild.childNodes[ID].childNodes[i].attributes.title;
        pm.pullID = i;

        var f:Fuse = new Fuse();
        f.push({target:pm, delay:0.1 * i, alpha:100, ease:"easeOutExpo", x:nodesY + 38 + (pm._width * i + 10), time:0.4});
        f.start();

        pm.onRelease = function() {

            pmReleased(this.pullID,ID);

        };

    }

}


function pmReleased(pullID:Number, ID:Number) {

    trace(xml.firstChild.childNodes[ID].childNodes[pullID].attributes.url);
    linkText.text = xml.firstChild.childNodes[ID].childNodes[pullID].attributes.url;



}


xml.load("data.xml");



カテゴリ:

トラックバック(0)

このブログ記事を参照しているブログ一覧: Xml管理のナビゲーション

このブログ記事に対するトラックバックURL: http://alwaysfinetuning.com/mt/mt-tb.cgi/34

コメント(1)

xtube :

Wow what was this guy doing to me I asked myself. He slid a couch pillow under my ass to raze my ass higher in the air. xtube

2008年12月 7日 17:42

コメントする

このブログ記事について

このページは、青が2008年5月13日 17:15に書いたブログ記事です。

ひとつ前のブログ記事は「 ActionScript2 + xmlでFlvプレイヤー」です。

次のブログ記事は「gif画像が表示されない、、、。」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。