creating a class for multiple xml galleries

[cutgrs930]

I've been working with the code below that works with a single, xml driven image gallery. I'm trying to turn this into a class that I can use to handle calling multiple galleries from different xml files. I've created simple classes before but I'm getting hung up in figuring out which part of my existing code to use in this new class...particularly my loadThumbs function. I'm having trouble distinguishing which functions to include in the class and which to place on the main timeline.

Any suggestions with my existing code or does anybody know of an example class that performs a similar function that I could reference?




/************************************************** *******************
LOAD THE XML
************************************************** ********************/

var xmlLoader:URLLoader;
var xmlData:XML;

function loadXml(xmlFile:String):void {
trace(xmlFile)
xmlLoader= new URLLoader();
xmlData = new XML;
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, xmlLoadFail);
xmlLoader.load(new URLRequest(xmlFile));
}

loadXml("necklaces.xml");

function xmlLoadFail(event:IOErrorEvent):void {
trace("Looks like there was an error loading the XML");
}

function xmlLoaded(e:Event):void {
xmlData = XML(xmlLoader.data);
loadThumbs();
}

/************************************************** *******************
LOAD THE THUMBNAILS
************************************************** ********************/

var p:int = 0;
var changex:int = 0;
var changey:int = 0;
var paddingX:int = 21;
var paddingY:int = 50;
var pictureValue:int = 0;
var child:MovieClip;
var loader:Loader;
var thumbLoader:Loader;
var largeContent:Sprite = new Sprite;
addChild(largeContent);
//number of thumbs to show
var visThumbs:int = 3;

//load in the thumbnails
function loadThumbs():void {
thumbLoader = new Loader();
thumbLoader.contentLoaderInfo.addEventListener(Pro gressEvent.PROGRESS, loadThumbProgress);
thumbLoader.contentLoaderInfo.addEventListener(Eve nt.INIT, thumbLoaded);
thumbLoader.load(new URLRequest(String(xmlData.pic.thumb[p])));//access the thumbnails
p++;

function loadThumbProgress(e:ProgressEvent):void {
trace("LOADED "+Math.floor(e.bytesLoaded / 1024)+ " OF "+Math.floor(e.bytesTotal/1024));
}

function thumbLoaded(e:Event):void {

if (pictureValue==0) {
//scroller pane
scrollPaneX = 30;
scrollPaneY = 60;
scrollPaneWidth = thumbLoader.content.width*visThumbs+(paddingX*(vis Thumbs-1));//mask
scrollTrackWidth = thumbLoader.content.width*xmlData.pic.length()+(pa ddingX*(xmlData.pic.length()-1))//scrolltrack
scrollPaneHeight = thumbLoader.content.height*2+paddingY;
constructScroller();//call the scroller constructor function
}
child = new MovieClip();
child.pictureValue = pictureValue++;
child.addChild(thumbLoader.content);
//event listeners for thumbnails
child.addEventListener(MouseEvent.MOUSE_OVER, overThumb);
child.addEventListener(MouseEvent.MOUSE_OUT, offThumb);
child.addEventListener(MouseEvent.CLICK, loadBigImage);

holder_mc.addChild(child);
TweenLite.from(child, 3, {alpha:0});

changex = thumbLoader.content.width+paddingX;
changey = thumbLoader.content.height+paddingY;

var rows:int = 2;

child.x = int((p/rows)-.1)*changex;
child.y = int(p%rows)*changey;


child.buttonMode = true;

thumbLoad_txt.text = "LOADED "+p +" OF "+(xmlData.pic.length ())+" THUMBNAILS";
if (p<xmlData.pic.length()) {
loadThumbs();
}
if (p==xmlData.pic.length()) {
addScrollListeners()
thumbLoad_txt.text = "";
loadBigImage(null, 0)
}
}
}


/************************************************** *******************
LARGE IMAGE LOADING - HANDLE A CLICK ON THUMBNAIL
************************************************** ********************/
function loadBigImage(event:MouseEvent = null, pictureToLoad:int = undefined):void {
var targetThumbs:int
if(event != null){
targetThumbs= event.target.pictureValue;
}else{
targetThumbs = pictureToLoad
}
loader = new Loader();
loader.contentLoaderInfo.addEventListener(Progress Event.PROGRESS, loadLargeProgress);
loader.contentLoaderInfo.addEventListener(Event.IN IT, loadLargeInit);
loader.load(new URLRequest(String(xmlData.pic.largeimg[targetThumbs])));


TweenLite.to(largeContent, .5, {alpha:0});
outPut_txt.text = "";//clear any previous descriptions text

//run when we have the big images content.
function loadLargeInit(e:Event):void {
if (largeContent.numChildren>0) {
largeContent.removeChildAt(0);
}
//position the loaded content
loader.content.x = 600;
loader.content.y = 105;
largeContent.addChild(loader.content);
largeContent.alpha = 0
TweenLite.to(largeContent, 4, {alpha:1});
load_txt.text = "";
outPut_txt.htmlText ="";
outPut_txt.htmlText = String(xmlData.pic.about[targetThumbs]);
}
//handle loading progress
function loadLargeProgress(e:ProgressEvent):void {
//trace("LOADED "+Math.floor(e.bytesLoaded / 1024)+ " OF "+Math.floor(e.bytesTotal/1024));
load_txt.text = "LOADED "+Math.floor(e.bytesLoaded / 1024)+ " OF "+Math.floor(e.bytesTotal/1024);
}
}
//thumbnail rollOver and Off handlers

function offThumb(event:MouseEvent):void {
TweenLite.to(event.target, 2, {alpha:1});//alpha in the thumbnails
}

function overThumb(event:MouseEvent):void {
TweenLite.to(event.target, .3, {alpha:.2});//alpha out the thumbnails
}

/*
************************************************** ********************
THUMBNAILS SCROLLER
************************************************** ********************/

//scrollable area
var scrollPaneX:int
var scrollPaneY:int;
var scrollPaneWidth:int;
var scrollPaneHeight:int;
var scrollTrackWidth:int;
var scrollSpeed:int = 12;

var holder_mc:Sprite = new Sprite();
var thumbMask_mc:Sprite = new Sprite();//mask for thumbs track
var thumbTrackBg_mc:Sprite = new Sprite();

function constructScroller():void {
holder_mc.x=scrollPaneX;
holder_mc.y = scrollPaneY*2+paddingY;
addChild(holder_mc);

//create mask sprite
thumbMask_mc.graphics.beginFill(0xFFFFFF);
thumbMask_mc.graphics.drawRect(0, 0, scrollPaneWidth, scrollPaneHeight*2+paddingY);
thumbMask_mc.graphics.endFill();
thumbMask_mc.x = scrollPaneX;
thumbMask_mc.y = scrollPaneY;
addChild(thumbMask_mc);

holder_mc.mask = thumbMask_mc;

thumbTrackBg_mc.graphics.beginFill(0xFFFFFF);
thumbTrackBg_mc.graphics.drawRect(0, 0, scrollPaneWidth, scrollPaneHeight);
thumbTrackBg_mc.graphics.endFill();
thumbTrackBg_mc.alpha=0;
thumbTrackBg_mc.x = 0;
thumbTrackBg_mc.y = 0;
thumbTrackBg_mc.width = scrollTrackWidth;
thumbTrackBg_mc.height = scrollPaneHeight;

holder_mc.addChildAt(thumbTrackBg_mc,0);
}

function addScrollListeners():void{
holder_mc.addEventListener(MouseEvent.ROLL_OVER,st artScroll);
holder_mc.addEventListener(MouseEvent.ROLL_OUT, stopScroll);
}

function startScroll(e:MouseEvent):void{
thumbMask_mc.addEventListener(Event.ENTER_FRAME, scrollThumbs);
}

function stopScroll(event:MouseEvent):void{
thumbMask_mc.removeEventListener(Event.ENTER_FRAME , scrollThumbs);
}

function scrollThumbs(event:Event):void {
holder_mc.x += Math.cos((-thumbMask_mc.mouseX/scrollPaneWidth)*Math.PI)*scrollSpeed;
if (holder_mc.x>scrollPaneX) {
holder_mc.x = scrollPaneX;
}
if (-holder_mc.x>(holder_mc.width-scrollPaneWidth-scrollPaneX)) {
holder_mc.x = -(holder_mc.width-scrollPaneWidth-scrollPaneX);

}

}

[neil_ward]

Have you found a solution?! I'm desperately trying to do the same thing, so I'm hoping you have!

The large images is reloading in conjunction with the correct XML file, but I'm not sure how to dump the thumbnail information before loading the next XML.

[dail]

neil,

on my blog is a version of the file with a thumbnails removing method.

/************************************************** *******************
CONTENT CLEARING FUNCTION
************************************************** ********************/
//Removes thumbnails, resets all vars related to thumbnails layout, and clears any large clips that may be present

function cleanOutThumbs():void{
//first test to see if we have got any content in the scroller
if(holder_mc.numChildren >0){
while(holder_mc.numChildren >0){
//check to see if we have a movieClip, if we do, it has the pictureValue prop, so lets null that
//this will let the MC be garbage collected, if we remove all references to it
if(holder_mc.getChildAt(0) as MovieClip){
MovieClip(holder_mc.getChildAt(0)).pictureValue = null
//remove the event Listeners attached to each thumb
holder_mc.getChildAt(0).removeEventListener(MouseE vent.MOUSE_OVER, overThumb);
holder_mc.getChildAt(0).removeEventListener(MouseE vent.MOUSE_OUT, offThumb);
holder_mc.getChildAt(0).removeEventListener(MouseE vent.CLICK, loadBigImage);
}

holder_mc.removeChildAt(0)
}
//we are done in our loop, so lets remove the scrolling event listeners & reset the vars that control the layout of the scroll track
//remove any large content that may be loaded. If we have large content, we probably have text, so kill that to
//Note, that the scroller track is constructed again with each thumbs load, so we don't actually need to totally kill that.
if (largeContent.numChildren>0) {
largeContent.removeChildAt(0);
outPut_txt.htmlText ="";
}
p = 0
pictureValue = 0
changex = 0
holder_mc.removeEventListener(MouseEvent.ROLL_OVER ,startScroll);
holder_mc.removeEventListener(MouseEvent.ROLL_OUT, stopScroll);
}
}