Creating Pause in AS3

I have created a photo gallery, it can be seen here on a testing server: www.testingtesting3.info

The photos are loaded from an XML file.

The issue I am having is I am wanting the gallery to cycle through the images on its own, however, I do want to provide user controls to allow them to move to the next or previous photo. The automatic cycle works, but I am having trouble with the buttons - particularly the previous button.

The code is below. Is there an easier way to go about creating this type of gallery, where it cycles through every 10 seconds and to give users the ability to move to the next photo or the previous one? If not, how can I get the buttons to work right with what I got?
stop();

var myDelay:Timer = new Timer(10000); // 10 second
myDelay.addEventListener(TimerEvent.TIMER, PlayMovie);
myDelay.start();

previous_btn.addEventListener(MouseEvent.CLICK, onPreviousClick);
next_btn.addEventListener(MouseEvent.CLICK, onNextClick);

function onPreviousClick(event:MouseEvent):void {
	if(imgnum == 0) {
		imgnum = 2;
		myDelay.reset();
		PlayMovie();
	}
	else {
		imgnum-=1;
		myDelay.reset();
		PlayMovie();
	}
}

function onNextClick(event:MouseEvent):void {
	if(imgnum == 2) {
		imgnum = 0;
		myDelay.reset();
		PlayMovie();
	}
	else {
		imgnum++;
		myDelay.reset();
		PlayMovie();
	}
}

function PlayMovie(event:TimerEvent = null) {
	myDelay.start();
	trace("PlayMovie called.");
	imgloader.load(new URLRequest(XMLMNG.GetCurrentImage(imgnum))); 
	imgloader.addEventListener(Event.COMPLETE, onLoad_Image);
	trace(XMLMNG.GetCurrentTextTitle(itemNum_txt, imgnum));
	XMLMNG.GetCurrentTextTitle(itemNum_txt, imgnum);
	XMLMNG.GetCurrentText(caption_txt, imgnum);
	if(imgnum == 2) {
		imgnum = 0;
	}
	else
		imgnum++;
}

function onLoad_Image(e:Event):void { 
        trace("onLoad_Image called.");
		var mask:Sprite = new Sprite(); 
        mask.graphics.beginFill(0x0000FF); 
        mask.graphics.drawRoundRect(0, 0, imgloader.width, imgloader.height, 15); 
        mask.graphics.endFill(); 
         
        imgloader.mask = mask; 
        addChild(imgloader); 
		setChildIndex(imgloader, 3);
}

Open in new window

LVL 1
MorganAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

IqAndreasCommented:
Where have you defined this "imgLoader" variable?

Anyway, I made a few slight modifications to your code so (hopefully) it should work as planned now.

Just ask if you still have any problems or want me to elaborate more on what certain parts of the code are doing.

Andreas
stop();

var currentImage:int = 0;
var numberOfImages:int = 2;

var myDelay:Timer = new Timer(10000); // 10 second
myDelay.addEventListener(TimerEvent.TIMER, onTimer);
myDelay.start();

function onTimer(event:TimerEvent)
{
   currentImage++;
   loadCurrentImage();
}

previous_btn.addEventListener(MouseEvent.CLICK, onPreviousClick);
next_btn.addEventListener(MouseEvent.CLICK, onNextClick);

function onPreviousClick(event:MouseEvent):void {
   currentImage--;
   myDelay.reset();
   loadCurrentImage();
}

function onNextClick(event:MouseEvent):void {
   currentImage++;
   myDelay.reset();
   loadCurrentImage();
}

function loadCurrentImage() {
        
   if (currentImage >= numberOfImages)
   {
      //If currentImage is too big
      //start from the beginning
      currentImage = 0;
   } 
   else if (currentImage < 0)
   {
      //If currentImage is a negative number
      //wrap around to the last image
      currentImage = numberOfImages - 1;
   }
   
   imgloader.load(new URLRequest(XMLMNG.GetCurrentImage(currentImage))); 
   imgloader.addEventListener(Event.COMPLETE, onLoad_Image);
   trace(XMLMNG.GetCurrentTextTitle(itemNum_txt, currentImage));
   XMLMNG.GetCurrentTextTitle(itemNum_txt, currentImage);
   XMLMNG.GetCurrentText(caption_txt, currentImage);
}

function onLoad_Image(e:Event):void { 
   
   trace("onLoad_Image called.");
   
   var mask:Sprite = new Sprite(); 
   mask.graphics.beginFill(0x0000FF); 
   mask.graphics.drawRoundRect(0, 0, imgloader.width, imgloader.height, 15); 
   mask.graphics.endFill(); 

   imgloader.mask = mask; 
   addChild(imgloader); 
   setChildIndex(imgloader, 3);
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
MorganAuthor Commented:
Will give it a go. The imgloader is the uiloader component, placed on the main stage.
0
MorganAuthor Commented:
IgAndreas:

That worked perfectly. I did have to make some changes to get it to work right. I had to change the numberOfImages variable to 3 instead of two. I don't know why that is as the images start at 0, but there is only 3 images - perhaps you can explain why 2 did not but 3 does. Also, added:

myDelay.start()

at the end of the loadCurrentImagefunction. Without it, once you pressed the next or previous button the movie would stop on that image and would not cycle through.

New and working code is posted below:
var currentImage:int = 0;
var numberOfImages:int = 3;

var myDelay:Timer = new Timer(10000); // 10 second
myDelay.addEventListener(TimerEvent.TIMER, onTimer);
myDelay.start();

function onTimer(event:TimerEvent)
{
	currentImage++;
	loadCurrentImage();
}

previous_btn.addEventListener(MouseEvent.CLICK, onPreviousClick);
next_btn.addEventListener(MouseEvent.CLICK, onNextClick);

function onPreviousClick(event:MouseEvent):void {
	currentImage--;
	myDelay.reset();
	loadCurrentImage();
}

function onNextClick(event:MouseEvent):void {
	currentImage++;
	myDelay.reset();
	loadCurrentImage();
}

function loadCurrentImage() {
	if(currentImage >= numberOfImages) {
		//if currentImage is too big
		//start from the beginning
		currentImage = 0;
	}
	else if(currentImage < 0) {
		//if currentImage is negative
		//wrap around to the last image
		currentImage = numberOfImages - 1;
	}
	
	imgloader.load(new URLRequest(XMLMNG.GetCurrentImage(currentImage))); 
	imgloader.addEventListener(Event.COMPLETE, onLoad_Image);
	trace(XMLMNG.GetCurrentTextTitle(itemNum_txt, currentImage));
	XMLMNG.GetCurrentTextTitle(itemNum_txt, currentImage);
	XMLMNG.GetCurrentText(caption_txt, currentImage);
	myDelay.start();
}

function onLoad_Image(e:Event):void { 
        trace("onLoad_Image called.");
		
		var mask:Sprite = new Sprite(); 
        mask.graphics.beginFill(0x0000FF); 
        mask.graphics.drawRoundRect(0, 0, imgloader.width, imgloader.height, 15); 
        mask.graphics.endFill(); 
         
        imgloader.mask = mask; 
        addChild(imgloader); 
		setChildIndex(imgloader, 3);
}

Open in new window

0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

MorganAuthor Commented:
The code you provided was a heck of a lot cleaner then mine. Thank YOU!
0
IqAndreasCommented:
I'm glad it worked out for you. :)

Sorry for the small bugs. I wasn't sure if your image numbering started at 0 or 1, so I assumed they started at 0 after looking at your previous code.

Good luck with your programming,
Andreas
0
MorganAuthor Commented:
thats just it. They should be starting at 0, as the previous code worked with the imgnum starting at 0. Your code needs to have the numberOfImages be set at 3 - does not make much sence to me, especaily because the currentImage starts at 0.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Flash

From novice to tech pro — start learning today.