サイト内検索

メインメニュー

ログイン
ユーザID または e-mail:

パスワード:

IDとパスワードを記憶

パスワード紛失

新規登録

オンライン状況
20 人のユーザが現在オンラインです。 (17 人のユーザが ウェブログ を参照しています。)

 登録ユーザ: 0
 ゲスト: 20

もっと...

ウェブログ カレンダー
« « 2007 10月 » »
30 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 1 2 3

最新ブログ記事

最近のコメント

最近のトラックバック

|
ウェブログ - ひろゆきの記事
|
 ひろゆきの記事配信

2006/01/21 Sat
 XMLで管理したスライドするメニュー (1)
カテゴリ: flash : actionscript : 
XMLを読み込んで、指定された画像を表示するような
スライド・メニューを作ってみた。


まず、ムービークリップ(リンケージ識別子: menuBase) を用意。
menuBase には、テキストフィールド(インスタンス名: menuTitle) を配置。
さらに、ムービークリップ(インスタンス名: menuThumb)・ボタン(インスタンス名: menuBtn)を配置。

_root に、ムービークリップ(インスタンス名: photoBase) を配置。
photoBase には、ムービークリップ(インスタンス名: photo, mark)を配置。
さらに、テキストフィールド(インスタンス名: memo) を配置。

_root 第1フレームに

// 外部XMLの読み込み
var objXML:XML = new XML();
objXML.ignoreWhite = true;
objXML.onLoad = function(success:Boolean):Void {
    if (success) {

        parse(this);
    }
};

// XMLデータ格納のための配列生成
var menuArray:Array = new Array();
// XMLの解析関数
function parse(objXML:XML):Void {
    var dataNode:XMLNode = objXML.firstChild;
    var menuNodes:Array = dataNode.childNodes;
    for(var n:Number = 0; n < menuNodes.length; n++) {
        var menuNode:XMLNode = menuNodes[n].childNodes;
        var titleName:String = menuNode[0].firstChild.nodeValue;
        var thumbPath:String = menuNode[1].firstChild.nodeValue;
        var photoPath:String = menuNode[2].firstChild.nodeValue;
        var mark:String = menuNode[3].attributes.mark;
        var memo:String = menuNode[3].firstChild.nodeValue;

        menuArray[n] = {title: titleName, thumb: thumbPath, photo: photoPath, mark: mark, memo: memo};
    }
    setMenu(menuArray);
}
objXML.load("data.xml");

// XMLデータ配列を元にしたメニュー生成関数
function setMenu(menuArray:Array):Void {
    var max:Number = menuArray.length;
    for(var n:Number = 0; n < max; n++) {
        var menu_mc:MovieClip = this.attachMovie("menuBase", "menuBase"+n, n);
        menu_mc._x = 15;
        menu_mc._y = 25*(max-1)+110;
        menu_mc._visible = false;
        menu_mc.menuID = n;
        menu_mc.openPos = 25*n+20;
        menu_mc.closePos = 25*n+110;

        menu_mc.menuTitle.text = menuArray[n].title;
        menu_mc.menuBtn.onRelease = function():Void {
            loadPhoto(this._parent.menuID);
        };
        menu_mc.menuBtn.onRollOver = function():Void {
            slideMenu(this._parent.menuID);
        };
    }
    var mask_mc:MovieClip = this.attachMovie("menuMask", "menuMask", max);
    mask_mc._x = 15;
    mask_mc._y = 25*(max-1)+20;
    mask_mc._visible = false;
    mask_mc.onPress = undefined;
    mask_mc.useHandCursor = false;

    loadThumbInOrder(0);
}

// メニューをスライドさせるための関数
function slideMenu(menuID:Number):Void {
    var deceleration:Number = 0.5;
    for(var n:Number = 0; n < menuArray.length; n++) {
        var _mc:MovieClip = this["menuBase"+n];
        if (n <= menuID) {
            _mc.targetPos = _mc.openPos;
        } else {
            _mc.targetPos = _mc.closePos;
        }
        _mc.onEnterFrame = function():Void {
            this._y += (this.targetPos - this._y)*deceleration;
            if (Math.abs(this.targetPos - this._y) < 0.5) {
                this._y = this.targetPos;
                delete this.onEnterFrame;
            }
        };
    }
}

// サムネイルのためのMovieClipLoader
var thumbLoader:MovieClipLoader = new MovieClipLoader();
var thumbListener:Object = new Object();
thumbListener.onLoadInit = function(target_mc:MovieClip):Void {

    var nextID:Number = target_mc._parent.menuID+1;
    loadThumbInOrder(nextID);
};
thumbLoader.addListener(thumbListener);

// サムネイルを順に読み込むための関数
function loadThumbInOrder(thumbID:Number):Void {
    if (thumbID < menuArray.length) {
        var filePath:String = menuArray[thumbID].thumb;
        var load_mc:MovieClip = this["menuBase"+thumbID].menuThumb;
        thumbLoader.loadClip(filePath, load_mc);
    } else {
        for(var n:Number = 0; n < menuArray.length; n++) {
            this["menuBase"+n]._visible = true;
        }
        menuMask._visible = true;
        slideMenu(0);
    }
}

// 表示画像のためのMovieClipLoader
var photoLoader:MovieClipLoader = new MovieClipLoader();
var photoListener:Object = new Object();
photoListener.onLoadStart = function(target_mc:MovieClip):Void {

    var base_mc:MovieClip = target_mc._parent;
    target_mc._alpha = 0;
    base_mc.mark.gotoAndStop("none");
    base_mc.memo.text = "";
};
photoListener.onLoadInit = function(target_mc:MovieClip):Void {

    var base_mc:MovieClip = target_mc._parent;
    var photoID:Number = base_mc.photoID;
    target_mc.onEnterFrame = function():Void {
        this._alpha += 10;
        if (this._alpha >= 100) {
            this._alpha = 100;
            base_mc.mark.gotoAndStop(menuArray[photoID].mark);
            base_mc.memo.text = menuArray[photoID].memo;
            delete this.onEnterFrame;
        }
    };
};
photoLoader.addListener(photoListener);

// 表示画像を読み込むための関数
function loadPhoto(photoID:Number):Void {
    photoBase.photoID = photoID;
    var filePath:String = menuArray[photoID].photo;
    var load_mc:MovieClip = photoBase.photo;
    photoLoader.loadClip(filePath, load_mc);
}

と記述。

data.xml

<?xml version="1.0" encoding="UTF-8"?>
<data>
    <menu>
        <title>menu1</title>
        <thumb>photo/cat1s.jpg</thumb>
        <photo>photo/cat1m.jpg</photo>
        <memo mark="none">にゃあ@青空</memo>
    </menu>
</data>


画像ファイルが存在しない場合の対応はせず。

[修正] (07/04/20 Fri 15:30)
変数名を若干変更。


関連記事: 引き出し収納メニュー (1)
関連記事: 引き出し収納メニュー (2)
関連記事: 引き出し収納メニュー (3)
関連記事: スライドするツリー式メニュー
関連記事: XMLで管理したスライドするメニュー (2)
関連記事: XMLで管理したスライドするメニュー (3)
関連記事: XMLで管理したプルダウンメニュー (1)
関連記事: XMLで管理したプルダウンメニュー (2)
執筆者: ひろゆき (23:40)
ウェブログ | コメント (0) | トラックバック数 (0) | 閲覧数 (1446)
この記事のトラックバックURL  リンク・引用のないトラックバックは削除することがあります。
http://www.project-nya.jp/modules/weblog/weblog-tb.php/375
 
ブログ記事内容についての質問は、ゲスト相談室 にて投稿ください。
投稿された内容の著作権はコメントの投稿者に帰属します。
投稿者 スレッド