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)