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?
 
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
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.