神風記

AS3でXML画像ギャラリーを構成します。
AS3でXML画像ギャラリーを生成します
前から少しずつUPしていきましたが
配列の処理など必要な処理はここで記述したので今回はすべてのソースコードを公開します
完成品はこういう風に表示されます
今回は動く事意外は考えないでコーディングしたのでソースコードは非常に雑で、汎用性は低いです

基本的な流れ

サムネイルが画面左に表示される
サムネイルが総てロードされるとサムネイルがクリック可能になる
サムネイルをクリック
本画像が画面右にクロスフェードで表示される
用意するファイルサムネイル画像のサイズは80×80
本画像のサイズは640×480にしておいてください
サムネイル画像（80×80)本画像(640×480)
サムネイルと本画像のパスを記載したXMLファイル

処理の流れ

XMLファイルをロードする
XMLから読み込む画像の数を判断するサムネイルを画像を格納するSpriteオブジェクトとLoaderオブジェクトを画像数分生成し、各配列に格納する
サムネイル画像を読み込み配列に格納されたSpriteオブジェクトに一つ一つ表示させる
サムネイル画像を総て読み込んだら総てのサムネイルにMouseEventを割り当てる。(クリックすると本画像をロードするイベント）
一度に表示されるサムネイルの数は5つ。
残りのサムネイルはXMLのノード順にマスクの下に表示されている。
5つ以上画像がある際はサムネイルをナビゲートするカーソルを表示する。
カーソルにはMouseEventを割り当てる(クリックするとマスクに隠れているサムネイルを５つ持ってくるイベント）
画像を読み込む際は、前の画像を表示させたままもう一つのLoaderで画像を読み込み前の画像とクロスフェードで表示する形式を取っているのでLoaderオブジェクトは二つ用意しておく。
本画像を表示する2つのLoaderオブジェクトにOPEN,PROGRESS,COMPLETEの三つのイベントを割り当てる。
OPENのイベントハンドラではローディングバー等のローディング画像を表示させる
PROGRESSのイベントハンドラではローディングの進行状況を表示させる
COMPLETEのイベントハンドラではローディング画像をremoveする
読み込んだ本画像を表示させ前の画像のアルファのアルファのをフェードアウト、新たに読み込んだ画像をフェードイン
本画像が表示される以上動作するソースファイルを用意したので宜しければ実際にダウンロードして色々試してみてください画像を用意してXMLに画像パスを書くだけですぐ動作します。
XMLの操作のみで更新できますのでFLASHでパブリッシュせずに
XMLの更新だけでギャラリーが更新されます

ソースファイル

非常に雑な作りなのでソースファイルの内容は変更する可能性があります最新の仕様はこのブログにアップしていきたいと思います


ソースコード

//include "script/gallery.as"

import flash.net.*;

import flash.display.*;

import flash.events.*;

import flash.text.*;

var clickCursol_num:Number=0;

var resultCursol_num:Number;

var up:MovieClip=new up_mc;

up.x=45;

up.y=5;

up.visible=false;

addChild(up);

var under:MovieClip=new under_mc();

under.x=45;

under.y=540;

var thumbClickGuard_mc:MovieClip=new MovieClip();

thumbClickGuard_mc.graphics.beginFill(0x000000);

thumbClickGuard_mc.graphics.drawRect(25,50,80,480);

thumbClickGuard_mc.graphics.endFill();

thumbClickGuard_mc.alpha=0;

var sample_xml:XML=new XML();

var xmlLength_num:Number;

var xmlLoader:URLLoader=new URLLoader();

xmlLoader.addEventListener(Event.COMPLETE,completeXMLHandler);

xmlLoader.load(new URLRequest("xml/path.xml"));

var thumbArr:Array=new Array();

var largeArr:Array=new Array();

var largeLoader:Loader=new Loader();

largeLoader.alpha=0;

trace("largeLoader"+largeLoader.width);

var newLargeLoader:Loader=new Loader();

newLargeLoader.width=640;

newLargeLoader.height=480;

var index_num:Number=0;

var mcSpace_num:Number=20;

var base_mc:Sprite=new Sprite();

base_mc.graphics.beginFill(0xFFFFFF);

base_mc.graphics.drawRect(0,0,640,480);

base_mc.x=130;

base_mc.y=50;

base_mc.graphics.endFill();

addChild(base_mc);

var loading_mc:MovieClip=new loaderBox_mc();

loading_mc.x=32;

loading_mc.y=32;

var loading_txt:TextField=new TextField();

var thumbBox:Sprite=new Sprite();

createThumbBox();

var maskSprite:Sprite=new Sprite();

createMask()

setThumbMask()

var animationIndex_num:Number=0;

var animetionInterval_num:Number=9;

var isSwitch:Boolean=false;

var loading_fmt:TextFormat=new TextFormat();

loading_txt.background=true;

loading_txt.backgroundColor=0x000000;

loading_txt.textColor=0xFFFFFF;

loading_txt.autoSize=TextFieldAutoSize.LEFT;

var navi_txt:TextField=new TextField();

navi_txt.background=true;

navi_txt.backgroundColor=0x000000;

navi_txt.textColor=0xFFFFFF;

navi_txt.text="のこりX枚です";

navi_txt.autoSize=TextFieldAutoSize.LEFT;

var naviTimer:Timer=new Timer(500,0);

addChild(navi_txt);

var prevRequest:URLRequest;

var prevLargeTarget_num:Number;

var prev_str:String;

var loadingBarBox_mc:MovieClip=new loadSkin_mc();

var loadingBar_mc:MovieClip=new loadingBar();

loadingBar_mc.x=20;

loadingBar_mc.y=6;

loadingBar_mc.height=22;

loadingBarBox_mc.x=stage.stageWidth/2-(loadingBarBox_mc.width/2)+(base_mc.x/2);

loadingBarBox_mc.y=stage.stageHeight/2-(loadingBarBox_mc.height/2)+50;

loadingBarBox_mc.addChild(loadingBar_mc);

//クリックの上限を定義する



btnEvent();
function btnEvent()
{
under.addEventListener(MouseEvent.CLICK,underHandler);

up.addEventListener(MouseEvent.CLICK,upHandler);

childUnder();

childUp();

}

function underHandler(evt:Event)
{
clickCursol_num++;

childUnder();
childUp();
thumbBox.addEventListener(Event.ENTER_FRAME,underAnimation);



}
function underAnimation(evt:Event)
{
if(animationIndex_num<=animetionInterval_num)
{
thumbBox.y-=50;

animationIndex_num++;

} else {

animationIndex_num=0;


up.visible=true;

thumbBox.removeEventListener(Event.ENTER_FRAME,underAnimation);

}

}

function upHandler(evt:Event)
{
clickCursol_num--;
childUp();
childUnder();
thumbBox.addEventListener(Event.ENTER_FRAME,upAnimation);

}

function upAnimation(evt:Event)
{
if(animationIndex_num<=animetionInterval_num)
{
thumbBox.y+=50;

animationIndex_num++;

} else {

if(clickCursol_num==0)
{

}

animationIndex_num=0;

thumbBox.removeEventListener(Event.ENTER_FRAME,upAnimation);

}

}

function childUnder()
{
if(resultCursol_num<=clickCursol_num|| resultCursol_num==0)
{

removeChild(under);

} else {
addChild(under);

}

}

function childUp()
{
if(clickCursol_num==0)
{
removeChild(up);
} else {

addChild(up);

}

}

function createMask()
{
maskSprite.graphics.beginFill(0x000000);

maskSprite.graphics.drawRect(25,50,80,480);

maskSprite.graphics.endFill();

addChild(maskSprite);

}



function createThumbBox()
{
thumbBox.graphics.beginFill(0xFF0000);

thumbBox.graphics.drawRect(0,50,0,0);

thumbBox.graphics.endFill();

thumbBox.x=25;

addChild(thumbBox);

}

function setThumbMask()
{
thumbBox.mask=maskSprite;

}





function completeXMLHandler(evt:Event)
{

var local_xml=new XML(evt.target.data);

sample_xml=local_xml;

xmlLength_num=sample_xml.item.length();

resultCursol_num=Math.floor(xmlLength_num/5);

childUnder();

for(var i:Number=0;i<=xmlLength_num-1;i++)
{


thumbArr.push(sample_xml.item[i].thumb);

largeArr.push(sample_xml.item[i].image);
}

createMC();

}



var mcArr:Array=new Array();

function createMC()
{
for(var i:Number=0;i<=xmlLength_num-1;i++)
{

var my_sp:Sprite=new Sprite();

my_sp.graphics.beginFill(0x000000);

my_sp.graphics.drawRect(0,0,100,100);

my_sp.graphics.endFill();

mcArr.push(my_sp);



}

prevImage();

}

function prevImage()
{
for(var i:Number=0;i<=xmlLength_num-1;i++)
{
if(i==0)
{
(mcArr[i]).y=50;
thumbBox.addChild(mcArr[i]);

} else {
mcArr[i].y=mcArr[i-1].y+mcArr[i-1].height;

thumbBox.addChild(mcArr[i]);

getLoaderArr();

}
}

}

var loaderArr:Array=new Array();

function getLoaderArr()
{

for(var i:Number=0;i<=xmlLength_num-1;i++)
{
var loader:Loader=new Loader();

loaderArr.push(loader);
}

inputLoader()

}

function inputLoader()
{
loaderArr[index_num].contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,progressHandler);

loaderArr[index_num].contentLoaderInfo.addEventListener(Event.COMPLETE,completeHandler);

loaderArr[index_num].load(new URLRequest(thumbArr[index_num]));
}

function progressHandler(evt:Event)
{
loading_txt.text="Now Loading "+Math.floor(loaderArr[index_num].contentLoaderInfo.bytesLoaded/loaderArr[index_num].contentLoaderInfo.bytesTotal*100);

mcArr[index_num].addChild(loading_txt);

mcArr[index_num].addChild(loading_mc);

navi_txt.text=+xmlLength_num+"/"+index_num;
}

function completeHandler(evt:Event)
{
mcArr[index_num].addChild(loaderArr[index_num]);

//mcArr[index_num].width=80;

//mcArr[index_num].height=80;

mcArr[index_num].removeChild(loading_txt);

mcArr[index_num].removeChild(loading_mc);

index_num++;

navi_txt.text=+xmlLength_num+"/"+index_num;

if(index_num<=xmlLength_num-1)
{
inputLoader();

} else {

navi_txt.text="LOAD COMPLETE";

naviTimer.addEventListener(TimerEvent.TIMER,naviVisible);

naviTimer.start();

loadLarge();

}

}



function loadLarge()
{

for(var i:Number=0;i<=xmlLength_num-1;i++)
{

mcArr[i].addEventListener(MouseEvent.CLICK,prevLargeImage);

mcArr[i].addEventListener(MouseEvent.ROLL_OVER,thumbRollOverHandler);

mcArr[i].addEventListener(MouseEvent.ROLL_OUT,thumbRollOutHandler);

}




largeLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,largeLoadHandler);

largeLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,largeCompleteHandler);

largeLoader.contentLoaderInfo.addEventListener(Event.UNLOAD,largeUnLoadHandler);

largeLoader.contentLoaderInfo.addEventListener(HTTPStatusEvent.HTTP_STATUS,changeHttpHandler);

largeLoader.contentLoaderInfo.addEventListener(Event.OPEN,largeLoaderOpenHandler);


newLargeLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS,largeLoadHandler);

newLargeLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,largeCompleteHandler);

newLargeLoader.contentLoaderInfo.addEventListener(Event.UNLOAD,largeUnLoadHandler);

newLargeLoader.contentLoaderInfo.addEventListener(HTTPStatusEvent.HTTP_STATUS,changeHttpHandler);

newLargeLoader.contentLoaderInfo.addEventListener(Event.OPEN,newLargeLoaderOpenHandler);


}



function prevLargeImage(evt:Event)
{
var largeTarget_num:Number=mcArr.indexOf(evt.currentTarget);

if(!isSwitch)
{

largeLoader.unload();

var largeRequest:URLRequest=new URLRequest(largeArr[largeTarget_num]);

largeLoader.load(largeRequest);

loading_txt.x=base_mc.width/2-(loading_txt.width/2);

loading_txt.y=base_mc.height/2-(loading_txt.height/2);

loading_txt.x+=12;

loading_mc.x=base_mc.width/2-(loading_mc.width/2)+15;

loading_mc.y=base_mc.height/2-(loading_mc.height/2)+25;

base_mc.addChild(loading_txt);

base_mc.addChild(loading_mc);

} else {


newLargeLoader.unload();

var newLargeRequest:URLRequest=new URLRequest(largeArr[largeTarget_num]);

newLargeLoader.load(newLargeRequest);

loading_txt.x=base_mc.width/2-(loading_txt.width/2);

loading_txt.y=base_mc.height/2-(loading_txt.height/2);

loading_txt.x+=12;

loading_mc.x=base_mc.width/2-(loading_mc.width/2)+15;

loading_mc.y=base_mc.height/2-(loading_mc.height/2)+25;

base_mc.addChild(loading_txt);

base_mc.addChild(loading_mc);
}

}

function largeLoadHandler(evt:Event)
{
if(!isSwitch)
{

loading_txt.text="Now Loading "+Math.floor(largeLoader.contentLoaderInfo.bytesLoaded/largeLoader.contentLoaderInfo.bytesTotal*100);

loadingBar_mc.width=Math.floor(largeLoader.contentLoaderInfo.bytesLoaded/largeLoader.contentLoaderInfo.bytesTotal*300);

} else {

loading_txt.text="Now Loading "+Math.floor(newLargeLoader.contentLoaderInfo.bytesLoaded/newLargeLoader.contentLoaderInfo.bytesTotal*100);

loadingBar_mc.width=Math.floor(newLargeLoader.contentLoaderInfo.bytesLoaded/newLargeLoader.contentLoaderInfo.bytesTotal*300);

}


}

function largeUnLoadHandler(evt:Event)
{
if(!isSwitch)
{

} else {

}

}

function largeCompleteHandler(evt:Event)
{
loadingBar_mc.width=0;
removeChild(loadingBarBox_mc);

if(!isSwitch)
{


largeLoader.width=640;

largeLoader.height=480;

base_mc.removeChild(loading_txt);

base_mc.removeChild(loading_mc);




base_mc.addChild(largeLoader);



largeLoader.addEventListener(Event.ENTER_FRAME,largeLoaderAlpha)

} else {
newLargeLoader.width=640;

newLargeLoader.height=480;

base_mc.removeChild(loading_txt);

base_mc.removeChild(loading_mc);




base_mc.addChild(newLargeLoader);

newLargeLoader.addEventListener(Event.ENTER_FRAME,newLargeLoaderAlpha);


}


}

function largeLoaderAlpha(evt:Event)
{

newLargeLoader.alpha-=0.1;

largeLoader.alpha+=0.1

if(largeLoader.alpha>=1)
{
largeLoader.removeEventListener(Event.ENTER_FRAME,largeLoaderAlpha);

largeLoader.width=640;

largeLoader.height=480;

isSwitch=true;

removeChild(thumbClickGuard_mc);



}


}

function newLargeLoaderAlpha(evt:Event)
{
largeLoader.alpha-=0.1;

newLargeLoader.alpha+=0.1

if(newLargeLoader.alpha>=1)
{

newLargeLoader.removeEventListener(Event.ENTER_FRAME,newLargeLoaderAlpha);

newLargeLoader.width=640;

newLargeLoader.height=480;

isSwitch=false;

removeChild(thumbClickGuard_mc);

}

}

function naviVisible(evt:Event)
{
navi_txt.visible=false;

naviTimer.removeEventListener(TimerEvent.TIMER,naviVisible);

}

function changeHttpHandler(evt:Event)
{

}

function largeLoaderOpenHandler(evt:Event)
{
addChild(loadingBarBox_mc);

addChild(thumbClickGuard_mc);

}
function newLargeLoaderOpenHandler(evt:Event)
{
addChild(loadingBarBox_mc);

addChild(thumbClickGuard_mc);

}

function thumbRollOverHandler(evt:Event)
{
evt.target.alpha-=0.1;

}

function thumbRollOutHandler(evt:Event)
{
evt.target.alpha+=0.1;

}