PREV and NEXT buttons ; 3.0

[xPINKMERCEDESx]

Hello guys. I ran into another wall, and it's just my inexperience. I'm getting experience by the day and by the project.


Here's my problem. I'm trying to build a simple photo gallery with Next and Previous buttons without alot of classes and any xml and alot of code. The image locations are in an array. Also, I need the name of the current image to be stored in a variable for other purposes. Here's the latest version of my code; I've been trying alot of things to no avail guys:


var myPlace:Loader = new Loader();
myPlace.x=50.0
myPlace.y=50.0
addChild(myPlace);

var theImages:Array=new Array("mercedes1","mercedes2","mercedes3");

var currentImage:Number;
var previousImage:Number;
var currentImageName=event.target;

prevImage.addEventListener(MouseEvent.CLICK,prevCl icked,false,0,true);
nextImage.addEventListener(MouseEvent.CLICK,nextCl icked,false,0,true);

myPlace.load(new URLRequest(theImages[0]));


function prevClicked(event:MouseEvent):void
{
previousImage = previousImage-1;
if (previousImage<=0) {
previousImage = 3;
}
myPlace.load(new URLRequest(theImages + previousImage + ".jpg"));
previousImage --;
currentImageName=currentImageName;
}

function nextClicked(event:MouseEvent):void
{
if (currentImage>=3)
{
currentImage = 0;
}
myPlace.load(new URLRequest(theImages + currentImage + ".jpg"));
currentImage++;
currentImageName=currentImageName;
}



Thanks for any direction guys.


x lisa x

[Matita]

Hi!
This code should work:

var myPlace:Loader = new Loader();
myPlace.x=50.0
myPlace.y=50.0
addChild(myPlace);

var theImages:Array=new Array("mercedes1","mercedes2","mercedes3");

var currentImage:Number;

prevImage.addEventListener(MouseEvent.CLICK,prevClicked,false,0,true);
nextImage.addEventListener(MouseEvent.CLICK,nextClicked,false,0,true);

myPlace.load(new URLRequest(theImages[0] + ".jpg"));


function prevClicked(event:MouseEvent):void
{
    currentImage--;
    if (currentImage < 0) {
        currentImage = theImages.length - 1;
    }
    myPlace.load(new URLRequest(theImages[currentImage] + ".jpg"));
}

function nextClicked(event:MouseEvent):void
{
    currentImage++;
    if (currentImage >= theImages.length)
    {
        currentImage = 0;
    }
    myPlace.load(new URLRequest(theImages[currentImage] + ".jpg"));
} 

all you need is the index 'currentImage' (not 'previousImage' or 'currentImageName').
That's the index you increment or decrement to switch among the images.
I've changed the line

if (currentImage>=3) 
{
    currentImage = 0;
} 

in

if (currentImage >= theImages.length)
{
    currentImage = 0;
} 

so anytime you want you can add or remove items from the array without changing any other line of code.
Hope it's been useful

[xPINKMERCEDESx]

Thanks for the reply Matita.

I copied and pasted your code and I'm still getting an error message:


Error #2044: Unhandled IOErrorEvent:. text=Error #2035: URL Not Found.


Flash can't find the URL, so I know some code is needed to tell Flash to get the images from the theImages array...

and the reason currentImageName was there is because I need to store the name of the last image that was loaded into a variable for other purposes.


thanks again.



x lisa x

[xPINKMERCEDESx]

I figured it out ...whew...now i need to figure how to store the name of the image that was loaded...here's the fixed code:


var myPlace:Loader = new Loader();
myPlace.x=50.0
myPlace.y=50.0
addChild(myPlace);

var theImages:Array=new Array("mercedes1","mercedes2","mercedes3");
var currentImage:Number=0;

//var currentImageName:String;

prevImage.addEventListener(MouseEvent.CLICK,prevCl icked,false,0,true);
nextImage.addEventListener(MouseEvent.CLICK,nextCl icked,false,0,true);

myPlace.load(new URLRequest(theImages[0]+".jpg"));

function nextClicked(event:MouseEvent):void
{
if (currentImage < (theImages.length-1))
{
currentImage ++;
myPlace.load(new URLRequest(theImages[currentImage] + ".jpg"));
}
}

function prevClicked(event:MouseEvent):void
{
if (currentImage > 0)
{
currentImage-- ;
myPlace.load(new URLRequest(theImages[currentImage] + ".jpg"));
}
}


all I need is to know how to store the name of the image currently being viewed in a variable, such as

var currentImageName=?


thanks everyone...


x lisa x

[flamboyant]

just add this in your functions for the buttons----->


currentImageName=theImages[currentImage];

// then trace it to test the code

trace(currentImageName);



FLAMBOYANT

[Matita]

Actually you don't really need to store the current image name in some variables because you can get it whenever you want just with
theImages[currentImage];

What I understood from your first post was that you needed the previous image you displayed.
In case this is what you need than you can write this way:

var previousImage:Number = 0;

function nextClicked(event:MouseEvent):void
{
    showPicture(currentImage + 1);
}

function prevClicked(event:MouseEvent):void
{
    showPicture(currentImage - 1);
}

function showPicture(index:Number):void {
    previousImage = currentImage;
    if (index < 0)
        index = theImages.length - 1;
    else if (index >= theImages.length)
        index = 0;
    currentImage = index;
    myPlace.load(new URLRequest(theImages[currentImage] + ".jpg"));
} 

By doing this you put all the actions in a single function and anytime you want to navigate among the pictures you use the function showPicture(n).
Plus, if you want to change or bugfix something you modify the code only in one place ;)
Plus, if you are viewing the first picture and want to see the fourth one you just write showPicture(3); (imagine you have a set of thumbnails and want to see a specific picture without navigating one by one...)

In 'previousImage' you store the last index you visited, so you can have the name of the previous image by 'theImages[previousImage]', and if you have a 'back' button you can navigate to the last picture by 'showPicture(previousImage)'

But maybe you don't need all these features...

[xPINKMERCEDESx]

cool Matita...I understand these things now...my photo gallery is working the way i want it to. Just for the record I wanted the variable to store the last image loaded and not the previous image loaded, but that's okay...with all the replies I got it now..thanks so much...and thanks to flamboyant too...


x lisa x

[armaluca]

Hi guys ,i tried to implement this code for my gallery
but when i click the next button to go over the last image in "images_array" i receive the error
TypeError: Error #2007: Parameter url must be non-null.

the same when i click prev button to go before the first image in the array
where-s the problem?

thanks!

next_btn.addEventListener(MouseEvent.CLICK,nextClicked);
prev_btn.addEventListener(MouseEvent.CLICK,prevClicked);

   function nextClicked(event:MouseEvent):void
{
    showPicture(currentImage + 1);
}

function prevClicked(event:MouseEvent):void
{
    showPicture(currentImage - 1);
}

function showPicture(reference:Number):void {
   
   var urlRequest:URLRequest=new URLRequest(images_array[reference]);
			
   loader.load(urlRequest);

   container.addChild(loader);
   
   
   currentImage = reference;
    if (reference < 0)
        	reference = images_array.length - 1;
    else if (reference >= images_array.length)
        	reference = 0;
    
    
}

[Matita]

you have to change reference before creating URLRequest object:

function showPicture(reference:Number):void {
   
currentImage = reference;
    if (reference < 0)
        	reference = images_array.length - 1;
    else if (reference >= images_array.length)
        	reference = 0;

   var urlRequest:URLRequest=new URLRequest(images_array[reference]);
			
   loader.load(urlRequest);

   container.addChild(loader);
   
}

[armaluca]

now i dont receive the error message but by clicking on the next_btn over and over ,after the images_array.lenght i succed to display always images_array[0] (even if i click for ever).

the same if i go backward with the prev_btn.. always the images_array[0] is displayied on stage..

where am i wrong??
thanks