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(ProgressEvent.PROGRESS, loadThumbProgress);
thumbLoader.contentLoaderInfo.addEventListener(Event.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*(visThumbs-1));//mask
scrollTrackWidth = thumbLoader.content.width*xmlData.pic.length()+(paddingX*(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(ProgressEvent.PROGRESS, loadLargeProgress);
loader.contentLoaderInfo.addEventListener(Event.INIT, 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,startScroll);
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);
}
}
