[AS3]xmlと連携したフォトギャラリー ver2
前回のシンプルなフォトギャラリーを汎用的に使えるようにXMLと連携させてみました。
次回はマスクでサムネイルがはみ出してしまってる部分を表示させるようにNext,Prevボタンの設置をしたいと思います。
完成したもの
ActionScriptコード
※今回はフレームアクションです。
var btNumMax:Number;
var thumbLoader:Loader;
var photoLoader:Loader;
var urlReq:URLRequest;
var yPos:Number;
import caurina.transitions.Tweener;
var xml:XML;
var xmlList:XMLList;
var xmlLoader:URLLoader;
var url:URLRequest = new URLRequest("http://alwaysfinetuning.com/ao-blog/sample/study/photogallery2/data.xml");
var thumbList:Array = new Array();
var photoList:Array = new Array();
function init():void {
//xmlLoad
xmlLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, startIt);
xmlLoader.load(url);
//xmlLoad
}
function startIt(e:Event):void{
xml = new XML(e.target.data);
xmlList = xml.photo;
photoLoader_mc.mask = mask_mc;
btNumMax = xmlList.length();
for (var i = 0; i < btNumMax; i++) {
thumbList.push(xmlList.thumb[i]);
photoList.push(xmlList.photoL[i]);
var mc:Btn = new Btn();
thumbHolder_mc.addChild(mc);
mc.x = 0+((mc.width + 10)* i);
mc.y = 0;
urlReq = new URLRequest(thumbList[i]);
thumbLoader = new Loader();
mc.addChild(thumbLoader);
thumbLoader.load(urlReq)
yPos = mc.y;
mc.y = yPos + 50;
mc.buttonMode = true;
mc.ID = i;
mc.alpha = 0;
Tweener.addTween(mc, {transition:"easeOutExpo",alpha:1,time:0.6,delay:0.1*i,y:yPos} );
mc.addEventListener(MouseEvent.ROLL_OVER, btnRrollOver);
mc.addEventListener(MouseEvent.ROLL_OUT, btnRrollOut);
mc.addEventListener(MouseEvent.CLICK, loadPhoto);
}
}
function btnRrollOver(e:MouseEvent):void {
Tweener.addTween(e.currentTarget, {transition:"linear",alpha:0.3,time:0.4} );
}
function btnRrollOut(e:MouseEvent):void {
Tweener.addTween(e.currentTarget, {transition:"linear",alpha:1,time:1} );
}
function loadPhoto(e:MouseEvent):void {
if(photoLoader != null){
photoLoader.unload();
}
photoLoader_mc.alpha = 0;
urlReq = new URLRequest(photoList[e.currentTarget.ID]);
photoLoader = new Loader();
photoLoader_mc.addChild(photoLoader);
photoLoader.load(urlReq);
Tweener.addTween(photoLoader_mc, {transition:"linear",alpha:1,time:1} );
}
init();
XML
http://alwaysfinetuning.com/ao-blog/sample/study/photogallery2/photo/0.jpg http://alwaysfinetuning.com/ao-blog/sample/study/photogallery2/photo/0.jpg http://alwaysfinetuning.com/ao-blog/sample/study/photogallery2/photo/1.jpg http://alwaysfinetuning.com/ao-blog/sample/study/photogallery2/photo/1.jpg http://alwaysfinetuning.com/ao-blog/sample/study/photogallery2/photo/2.jpg http://alwaysfinetuning.com/ao-blog/sample/study/photogallery2/photo/2.jpg http://alwaysfinetuning.com/ao-blog/sample/study/photogallery2/photo/3.jpg http://alwaysfinetuning.com/ao-blog/sample/study/photogallery2/photo/3.jpg http://alwaysfinetuning.com/ao-blog/sample/study/photogallery2/photo/4.jpg http://alwaysfinetuning.com/ao-blog/sample/study/photogallery2/photo/4.jpg http://alwaysfinetuning.com/ao-blog/sample/study/photogallery2/photo/4.jpg http://alwaysfinetuning.com/ao-blog/sample/study/photogallery2/photo/4.jpg http://alwaysfinetuning.com/ao-blog/sample/study/photogallery2/photo/4.jpg http://alwaysfinetuning.com/ao-blog/sample/study/photogallery2/photo/4.jpg
トラックバック(1)
このブログ記事を参照しているブログ一覧: [AS3]xmlと連携したフォトギャラリー ver2
このブログ記事に対するトラックバックURL: http://alwaysfinetuning.com/mt/mt-tb.cgi/69
