next & back btn's not working with thumbnails

Question

I have created a porfolio with both thumbnails and next/back buttons. Both work but not together. When I click on the next/back btn it goes through the images in sequence. If I click on a thumbnail out of order then return to the next/back button it jumps to the 1st and second image. Is there a way to make these work together?

Thank you for your time.

stop();

next_btn.addEventListener(MouseEvent.CLICK, nextimage);
var imageNumber:Number = 1;

function nextimage(evtObj:MouseEvent):void {
//Adding number to the current value +1
imageNumber++;
UILoader_courand.source="portfolio/large/Courand/Courand_"+imageNumber+".jpg";
checkNumber();
}

back_btn.addEventListener(MouseEvent.CLICK, backimage);

function backimage(evtObj:MouseEvent):void {
//Subract 1 from the current value
imageNumber--;
UILoader_courand.source="portfolio/large/Courand/Courand_"+imageNumber+".jpg";
checkNumber();
}

aboutProject_btn.addEventListener(MouseEvent.CLICK, aboutclick);
function aboutclick(evtObj:MouseEvent) {
trace("Courand Desc was clicked");
gotoAndStop("Courand Desc");
}

var thumbLoader:Loader = new Loader();
thumbLoader.load(new URLRequest("portfolio/thumbs/Courand/courandThumb1.jpg"));
thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
function thumbLoaded(event:Event):void {
allThumbnails.addChild(thumbLoader);
thumbLoader.addEventListener(MouseEvent.CLICK, loadMainImage1);
function loadMainImage1(event:MouseEvent):void {
UILoader_courand.source="portfolio/large/Courand/Courand_1.jpg";
}
}

var thumbLoader2:Loader = new Loader();
thumbLoader2.load(new URLRequest("portfolio/thumbs/Courand/courandThumb2.jpg"));
thumbLoader2.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded2);
function thumbLoaded2(event:Event):void {
allThumbnails.addChild(thumbLoader2);
thumbLoader2.x=70;
allThumbnails.buttonMode=true;
thumbLoader2.addEventListener(MouseEvent.CLICK, loadMainImage2);
function loadMainImage2(event:MouseEvent):void {
UILoader_courand.source="portfolio/large/Courand/Courand_2.jpg";
}
}

var thumbLoader3:Loader = new Loader();
thumbLoader3.load(new URLRequest("portfolio/thumbs/Courand/courandThumb3.jpg"));
thumbLoader3.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded3);
function thumbLoaded3(event:Event):void {
allThumbnails.addChild(thumbLoader3);
thumbLoader3.x=140;
allThumbnails.buttonMode=true;
thumbLoader3.addEventListener(MouseEvent.CLICK, loadMainImage3);
function loadMainImage3(event:MouseEvent):void {
UILoader_courand.source="portfolio/large/Courand/Courand_3.jpg";
}
}

var thumbLoader4:Loader = new Loader();
thumbLoader4.load(new URLRequest("portfolio/thumbs/Courand/courandThumb4.jpg"));
thumbLoader4.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded4);
function thumbLoaded4(event:Event):void {
allThumbnails.addChild(thumbLoader4);
thumbLoader4.x=210;
allThumbnails.buttonMode=true;
thumbLoader4.addEventListener(MouseEvent.CLICK, loadMainImage4);
function loadMainImage4(event:MouseEvent):void {
UILoader_courand.source="portfolio/large/Courand/Courand_4.jpg";
}
}

var thumbLoader5:Loader = new Loader();
thumbLoader5.load(new URLRequest("portfolio/thumbs/Courand/courandThumb5.jpg"));
thumbLoader5.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded5);
function thumbLoaded5(event:Event):void {
allThumbnails.addChild(thumbLoader5);
thumbLoader5.x=280;
allThumbnails.buttonMode=true;
thumbLoader5.addEventListener(MouseEvent.CLICK, loadMainImage5);
function loadMainImage5(event:MouseEvent):void {
UILoader_courand.source="portfolio/large/Courand/Courand_5.jpg";
}
}

var thumbLoader6:Loader = new Loader();
thumbLoader6.load(new URLRequest("portfolio/thumbs/Courand/courandThumb6.jpg"));
thumbLoader6.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded6);
function thumbLoaded6(event:Event):void {
allThumbnails.addChild(thumbLoader6);
thumbLoader6.x=280;
allThumbnails.buttonMode=true;
thumbLoader6.addEventListener(MouseEvent.CLICK, loadMainImage6);
function loadMainImage6(event:MouseEvent):void {
UILoader_courand.source="portfolio/large/Courand/Courand_6.jpg";
}
}

var thumbLoader7:Loader = new Loader();
thumbLoader7.load(new URLRequest("portfolio/thumbs/Courand/courandThumb7.jpg"));
thumbLoader7.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded7);
function thumbLoaded7(event:Event):void {
allThumbnails.addChild(thumbLoader7);
thumbLoader7.x=350;
allThumbnails.buttonMode=true;
thumbLoader7.addEventListener(MouseEvent.CLICK, loadMainImage7);
function loadMainImage7(event:MouseEvent):void {
UILoader_courand.source="portfolio/large/Courand/Courand_7.jpg";
}
}

var thumbLoader8:Loader = new Loader();
thumbLoader8.load(new URLRequest("portfolio/thumbs/Courand/courandThumb8.jpg"));
thumbLoader8.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded8);
function thumbLoaded8(event:Event):void {
allThumbnails.addChild(thumbLoader8);
thumbLoader8.x=420;
allThumbnails.buttonMode=true;
thumbLoader8.addEventListener(MouseEvent.CLICK, loadMainImage8);
function loadMainImage8(event:MouseEvent):void {
UILoader_courand.source="portfolio/large/Courand/Courand_8.jpg";
}
}

var thumbLoader9:Loader = new Loader();
thumbLoader9.load(new URLRequest("portfolio/thumbs/Courand/courandThumb9.jpg"));
thumbLoader9.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded9);
function thumbLoaded9(event:Event):void {
allThumbnails.addChild(thumbLoader9);
thumbLoader9.x=490;
allThumbnails.buttonMode=true;
thumbLoader9.addEventListener(MouseEvent.CLICK, loadMainImage9);
function loadMainImage9(event:MouseEvent):void {
UILoader_courand.source="portfolio/large/Courand/Courand_9.jpg";
}
}

var thumbLoader10:Loader = new Loader();
thumbLoader10.load(new URLRequest("portfolio/thumbs/Courand/courandThumb10.jpg"));
thumbLoader10.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded10);
function thumbLoaded10(event:Event):void {
allThumbnails.addChild(thumbLoader10);
thumbLoader10.y=70;
allThumbnails.buttonMode=true;
thumbLoader10.addEventListener(MouseEvent.CLICK, loadMainImage10);
function loadMainImage10(event:MouseEvent):void {
UILoader_courand.source="portfolio/large/Courand/Courand_10.jpg";
}
}

var thumbLoader11:Loader = new Loader();
thumbLoader11.load(new URLRequest("portfolio/thumbs/Courand/courandThumb11.jpg"));
thumbLoader11.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded11);
function thumbLoaded11(event:Event):void {
allThumbnails.addChild(thumbLoader11);
thumbLoader11.x=70;
thumbLoader11.y=70;
allThumbnails.buttonMode=true;
thumbLoader11.addEventListener(MouseEvent.CLICK, loadMainImage11);
function loadMainImage11(event:MouseEvent):void {
UILoader_courand.source="portfolio/large/Courand/Courand_11.jpg";
}
}

var thumbLoader12:Loader = new Loader();
thumbLoader12.load(new URLRequest("portfolio/thumbs/Courand/courandThumb12.jpg"));
thumbLoader12.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded12);
function thumbLoaded12(event:Event):void {
allThumbnails.addChild(thumbLoader12);
thumbLoader12.x=140;
thumbLoader12.y=70;
allThumbnails.buttonMode=true;
thumbLoader12.addEventListener(MouseEvent.CLICK, loadMainImage12);
function loadMainImage12(event:MouseEvent):void {
UILoader_courand.source="portfolio/large/Courand/Courand_12.jpg";
}
}

Thank You!!!

newToAS3 · Answer

I think nobody is helping you because of the way you posted your code... When posting codes you should use the Syntex Highlighting feature of this forum. You can find it right after the smile face in the >> icon in blue. Then poste your code as a "Java" code from the syntex Highlighting menu.

Anyway, I could see that you're doing this the hard way. I'm not the best person to help you here since I'm don't know much about AS3 yet.

And you're doing many many bad things in your code. You're repeating a lot of code and nesting functions which is also bad.

Just to give you some example using what you have, you could surely use a for loop to do most of what you're doing there. Here's an example:

var thumbsToLoad:int = 12;
for (var i:int = 0; i < thumbsToLoad; i++) {
     var thumbLoader:Loader = new Loader();
     thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
     thumbLoader.load(new URLRequest("portfolio/large/Courand/Courand_" + i + ".jpg"));
     thumbLoader.name = "thumb" + i;
     thumbLoader.x = (70 * i);
     allThumbnails.addChild(thumbLoader);
}

If you don't understand what this code is doing, well, you should read about for loops in AS3 and try to understand but basicaly, it's doing almost all the "dirty" job of creating Loaders, listening for the loading process, running a given function, naming the loader container, setting the x position and adding the current thumbLoader to the allThumbnails container.

Note that the "i" is a var and this for loop will keep the looping the entire thing while the "i" gets to be equal to thumbsToLoad.

The first time looping the "i" will represent 1, then 2, then 3 and so on.

I can't help you anyfurther because I don't have your file to test things. As I said, I don't know much about the subject yet and I always have to try things, get some errors (sometimes lots of them) until I get something that really works.

Second, I can't help you because I still have troubles with Arrays. If you get to know how arrays works and how the for loop work you'll see your 150+ lines of code magically turns into a 15 lines of code doing the exact same thing.

I do hope you get there or find someone here more experienced to help you!

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded