Thumbnail and button navigation help

Question

I would like to start out by saying I am very new at this and am working on a portfolio website in flash CS4 and currently getting help through the tutorials over at Lynda.com. Now my problem is In the portfolio section I want a preview of the pics like a thumbnail on the bottom with a scroll bar to scroll through them all, but at the same time I would like to have buttons to navigate through these photos at the same time. I have got it to work, the only problem is let say i'm using the buttons to navigate through but then stop and go to the scroll bar on the bottom and click on one three of four pictures in front of where I left off, The image loads and everything is fine but when I go back to the buttons it continues off from where it last left off not where I clicked on the scroll bar. Not sure if you can follow that but if not ask questions I really have no clue on how to do this so any help is greatly appreciated.
Here is the code that I currently have:
myscrollpane.source=allthumbnails;
//load the thumbnails...
var thumbLoader:Loader = new Loader();
thumbLoader.load(new URLRequest("smallthumbs/portfolio01.jpg"));
thumbLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded);
function thumbLoaded(event:Event):void {
//add the thumbnail to the allthumbnails instance
allthumbnails.addChild(thumbLoader);
myscrollpane.update();
thumbLoader.addEventListener(MouseEvent.CLICK, loadMainImage1);
function loadMainImage1(event:MouseEvent):void {
largeUILoader.source="largeimages/portfolio01.jpg";
var thumbLoader2:Loader = new Loader();
thumbLoader2.load(new URLRequest("smallthumbs/portfolio02.jpg"));
thumbLoader2.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded2);
function thumbLoaded2(event:Event):void {
allthumbnails.addChild(thumbLoader2);
thumbLoader2.x=118;
myscrollpane.update();
allthumbnails.buttonMode=true;
thumbLoader2.addEventListener(MouseEvent.CLICK, loadMainImage2);
function loadMainImage2(event:MouseEvent):void {
largeUILoader.source="largeimages/portfolio02.jpg";
var thumbLoader3:Loader = new Loader();
thumbLoader3.load(new URLRequest("smallthumbs/portfolio03.jpg"));
thumbLoader3.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded3);
function thumbLoaded3(event:Event):void {
//add the thumbnail to the allthumbnails instance
allthumbnails.addChild(thumbLoader3);
thumbLoader3.x=236;
myscrollpane.update();
thumbLoader3.addEventListener(MouseEvent.CLICK, loadMainImage);
function loadMainImage(event:MouseEvent):void {
largeUILoader.source="largeimages/portfolio03.jpg";
var thumbLoader4:Loader = new Loader();
thumbLoader4.load(new URLRequest("smallthumbs/portfolio04.jpg"));
thumbLoader4.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded4);
function thumbLoaded4(event:Event):void {
//add the thumbnail to the allthumbnails instance
allthumbnails.addChild(thumbLoader4);
thumbLoader4.x=354;
myscrollpane.update();
thumbLoader4.addEventListener(MouseEvent.CLICK, loadMainImage);
function loadMainImage(event:MouseEvent):void {
largeUILoader.source="largeimages/portfolio04.jpg";
var thumbLoader5:Loader = new Loader();
thumbLoader5.load(new URLRequest("smallthumbs/portfolio05.jpg"));
thumbLoader5.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded5);
function thumbLoaded5(event:Event):void {
//add the thumbnail to the allthumbnails instance
allthumbnails.addChild(thumbLoader5);
thumbLoader5.x=472;
myscrollpane.update();
thumbLoader5.addEventListener(MouseEvent.CLICK, loadMainImage1);
function loadMainImage1(event:MouseEvent):void {
largeUILoader.source="largeimages/portfolio05.jpg";
var thumbLoader6:Loader = new Loader();
thumbLoader6.load(new URLRequest("smallthumbs/portfolio06.jpg"));
thumbLoader6.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded6);
function thumbLoaded6(event:Event):void {
//add the thumbnail to the allthumbnails instance
allthumbnails.addChild(thumbLoader6);
thumbLoader6.x=590;
myscrollpane.update();
thumbLoader6.addEventListener(MouseEvent.CLICK, loadMainImage1);
function loadMainImage1(event:MouseEvent):void {
largeUILoader.source="largeimages/portfolio06.jpg";
var thumbLoader7:Loader = new Loader();
thumbLoader7.load(new URLRequest("smallthumbs/portfolio07.jpg"));
thumbLoader7.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded7);
function thumbLoaded7(event:Event):void {
//add the thumbnail to the allthumbnails instance
allthumbnails.addChild(thumbLoader7);
thumbLoader7.x=708;
myscrollpane.update();
thumbLoader7.addEventListener(MouseEvent.CLICK, loadMainImage1);
function loadMainImage1(event:MouseEvent):void {
largeUILoader.source="largeimages/portfolio07.jpg";
var thumbLoader8:Loader = new Loader();
thumbLoader8.load(new URLRequest("smallthumbs/portfolio08.jpg"));
thumbLoader8.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded8);
function thumbLoaded8(event:Event):void {
//add the thumbnail to the allthumbnails instance
allthumbnails.addChild(thumbLoader8);
thumbLoader8.x=826;
myscrollpane.update();
thumbLoader8.addEventListener(MouseEvent.CLICK, loadMainImage1);
function loadMainImage1(event:MouseEvent):void {
largeUILoader.source="largeimages/portfolio08.jpg";
var thumbLoader9:Loader = new Loader();
thumbLoader9.load(new URLRequest("smallthumbs/portfolio09.jpg"));
thumbLoader9.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded9);
function thumbLoaded9(event:Event):void {
//add the thumbnail to the allthumbnails instance
allthumbnails.addChild(thumbLoader9);
thumbLoader9.x=944;
myscrollpane.update();
thumbLoader9.addEventListener(MouseEvent.CLICK, loadMainImage1);
function loadMainImage1(event:MouseEvent):void {
largeUILoader.source="largeimages/portfolio09.jpg";
var thumbLoader010:Loader = new Loader();
thumbLoader010.load(new URLRequest("smallthumbs/portfolio010.jpg"));
thumbLoader010.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded010);
function thumbLoaded010(event:Event):void {
//add the thumbnail to the allthumbnails instance
allthumbnails.addChild(thumbLoader010);
thumbLoader010.x=1062;
myscrollpane.update();
thumbLoader010.addEventListener(MouseEvent.CLICK, loadMainImage1);
function loadMainImage1(event:MouseEvent):void {
largeUILoader.source="largeimages/portfolio010.jpg";
var thumbLoader011:Loader = new Loader();
thumbLoader011.load(new URLRequest("smallthumbs/portfolio011.jpg"));
thumbLoader011.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded011);
function thumbLoaded011(event:Event):void {
//add the thumbnail to the allthumbnails instance
allthumbnails.addChild(thumbLoader011);
thumbLoader011.x=1180;
myscrollpane.update();
thumbLoader011.addEventListener(MouseEvent.CLICK, loadMainImage1);
function loadMainImage1(event:MouseEvent):void {
largeUILoader.source="largeimages/portfolio011.jpg";
var thumbLoader012:Loader = new Loader();
thumbLoader012.load(new URLRequest("smallthumbs/portfolio012.jpg"));
thumbLoader012.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded012);
function thumbLoaded012(event:Event):void {
//add the thumbnail to the allthumbnails instance
allthumbnails.addChild(thumbLoader012);
thumbLoader012.x=1298;
myscrollpane.update();
thumbLoader012.addEventListener(MouseEvent.CLICK, loadMainImage1);
function loadMainImage1(event:MouseEvent):void {
largeUILoader.source="largeimages/portfolio012.jpg";
var thumbLoader013:Loader = new Loader();
thumbLoader013.load(new URLRequest("smallthumbs/portfolio013.jpg"));
thumbLoader013.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded013);
function thumbLoaded013(event:Event):void {
//add the thumbnail to the allthumbnails instance
allthumbnails.addChild(thumbLoader013);
thumbLoader013.x=1416;
myscrollpane.update();
thumbLoader013.addEventListener(MouseEvent.CLICK, loadMainImage1);
function loadMainImage1(event:MouseEvent):void {
largeUILoader.source="largeimages/portfolio013.jpg";
var thumbLoader014:Loader = new Loader();
thumbLoader014.load(new URLRequest("smallthumbs/portfolio014.jpg"));
thumbLoader014.contentLoaderInfo.addEventListener(Event.COMPLETE, thumbLoaded014);
function thumbLoaded014(event:Event):void {
//add the thumbnail to the allthumbnails instance
allthumbnails.addChild(thumbLoader014);
thumbLoader014.x=1534;
myscrollpane.update();
thumbLoader014.addEventListener(MouseEvent.CLICK, loadMainImage1);
function loadMainImage1(event:MouseEvent):void {
largeUILoader.source="largeimages/portfolio014.jpg";
//added the next button function
next_btn.addEventListener(MouseEvent.CLICK,nextImage);
//variable is a container that holds some value...
var imageNumber:Number=1;
function checkNumber():void {
next_btn.visible=true;
back_btn.visible=true;
//if the imageNumber is = 14,then do something...
if (imageNumber==14) {
trace(imageNumber);
next_btn.visible=false;
//if imageNumber is = 1, then dont show back button..
if (imageNumber==1) {
trace(imageNumber);
back_btn.visible=false;
checkNumber();
function nextImage(evtObj:MouseEvent):void {
trace("nextimage");
//adding to the current value+1
imageNumber++;
largeUILoader.source="largeimages/portfolio0"+imageNumber+".jpg";
checkNumber();
//added the back button function
back_btn.addEventListener(MouseEvent.CLICK,backImage);
function backImage(evtObj:MouseEvent):void {
trace("backimage");
//subtract 1 from the current value...
imageNumber--;
largeUILoader.source="largeimages/portfolio0"+imageNumber+".jpg";
checkNumber();

Answer 1

You need to have each thumbnail change the value of the variable imageNumber when you select from the thumbnails.  You can see how it changes when you use the next and previous buttons, but there's nothing to change it when you select a thumbnail that I can readily see.