Display Images once you click on Thumbnail

[nelgom]

Hi David,

First of all, the thumbnail scroller is great. I'm a novice when it comes to Flash so I was looking for a nice scroller to display some photos. I was able to import my images to the thumbnail scroller but now I'm stuck. How do I get to display the images once I click on the thumbnails. It is a basic design of the large images displaying on top of the scroller. I have tried everything but I'm lost. Any help you can provide will be very helpful.

Thank you in advance.

[David]

Hi there,

First, specify the location of the big image in the XML file:

Code: Select all

<images>
   <image source="thumbs/image1.jpg" bigImage="images/image1.jpg"/>
   <image source="thumbs/image2.jpg" bigImage="images/image2.jpg"/>
   <image source="thumbs/image3.jpg" bigImage="images/image3.jpg"/>
   <image source="thumbs/image4.jpg" bigImage="images/image4.jpg"/>
   <image source="thumbs/image5.jpg" bigImage="images/image5.jpg"/>
   <image source="thumbs/image6.jpg" bigImage="images/image6.jpg"/>
   <image source="thumbs/image7.jpg" bigImage="images/image7.jpg"/>
   <image source="thumbs/image8.jpg" bigImage="images/image8.jpg"/>
   <image source="thumbs/image9.jpg" bigImage="images/image9.jpg"/>
   <image source="thumbs/image10.jpg" bigImage="images/image10.jpg"/>
   <image source="thumbs/image11.jpg" bigImage="images/image11.jpg"/>
   <image source="thumbs/image12.jpg" bigImage="images/image12.jpg"/>
   <image source="thumbs/image13.jpg" bigImage="images/image13.jpg"/>
   <image source="thumbs/image14.jpg" bigImage="images/image14.jpg"/>
</images>


Then add this code:

Code: Select all

import com.flashotaku.events.ScrollerEvent;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.display.Loader;



// the loader for the big image
var bigImageLoader:Loader = new Loader();
showBigImage();

//listen when the big image is loaded
bigImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, bigImageCompleteHandler);

myScroller.addEventListener(ScrollerEvent.ITEM_CLICK, itemClickHandler);


function itemClickHandler(event:ScrollerEvent):void
{
   // select the clicked item
   myScroller.select(event.index);
   
   // load the big image
   loadBigImage(event.data.bigImage);
}


function loadBigImage(path:String):void
{   
   // load the image
   bigImageLoader.load(new URLRequest(path));
}


function bigImageCompleteHandler(event:Event):void
{
   // resize the image and set its position
   bigImageLoader.width = 500;
   bigImageLoader.height = 300;
   bigImageLoader.x = 200;
   bigImageLoader.y = 50;
}


function showBigImage():void
{
   addChild(bigImageLoader);
}


function hideBigImage():void
{
   removeChild(bigImageLoader);
}


Hope this helps.

[nelgom]

Hi David,

Thank you for your quick response. Before I proceed, do I add the code to the Action Script you already have? The one that ends on...

else if (event.currentTarget == previous)
{
myScroller.selectPrevious();
}
}

Thanks in advance.

[David]

Yes, you can add it in one of those examples if you want. One this you need to do, though, is delete the existing itemClickHandler function because the code I gave you also has a function with the same name.

The complete code is this:

Code: Select all

import com.flashotaku.events.ScrollerEvent;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.net.URLRequest;
import flash.display.Loader;



// the loader for the big image
var bigImageLoader:Loader = new Loader();
showBigImage();

//listen when the big image is loaded
bigImageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, bigImageCompleteHandler);



myScroller.addEventListener(ScrollerEvent.ITEM_CLICK, itemClickHandler);

function itemClickHandler(event:ScrollerEvent):void
{
   // select the clicked item
   myScroller.select(event.index);
   
   // load the big image
   loadBigImage(event.data.bigImage);
}


previous.addEventListener(MouseEvent.CLICK, arrowClickHandler);
next.addEventListener(MouseEvent.CLICK, arrowClickHandler);
next.buttonMode = previous.buttonMode = true;

function arrowClickHandler(event:MouseEvent):void
{
   if (event.currentTarget == next)
   {
      myScroller.selectNext();
   }
   else if (event.currentTarget == previous)
   {
      myScroller.selectPrevious();
   }
}


function loadBigImage(path:String):void
{   
   // load the image
   bigImageLoader.load(new URLRequest(path));
}


function bigImageCompleteHandler(event:Event):void
{
   // resize the image and set its position
   bigImageLoader.width = 500;
   bigImageLoader.height = 300;
   bigImageLoader.x = 200;
   bigImageLoader.y = 50;
}


function showBigImage():void
{
   addChild(bigImageLoader);
}


function hideBigImage():void
{
   removeChild(bigImageLoader);
}


You can delete all the existing code and paste the code above.

[nelgom]

David,

Great this works. One last bother if you don't mind. The images are different shapes...some are horizontal and some are vertical. I don't mind that the thumbnails are the same size but the larger image should be the right dimensions. I have saved all the jpegs so that they fit within the area of display. Is there a way to bring them in centered and at the right proportions? I imaging this is the area that I will make the change in the code.

function bigImageCompleteHandler(event:Event):void
{
// resize the image and set its position
bigImageLoader.width = 700;
bigImageLoader.height = 500;
bigImageLoader.x = 200;
bigImageLoader.y = 50;

thanks a million

[David]

Feel free to ask for support as much as you need. It's really not a bother. :)

You could keep the proportions for the thumbnails as well if you set the Scale Mode property to "Maintain Aspect Ratio";

To keep the big image as its original size modify the "bigImageCompleteHandler" function to this:

Code: Select all

function bigImageCompleteHandler(event:Event):void
{
// center the big image
bigImageLoader.x = (stage.width - bigImageLoader.width) / 2;
bigImageLoader.y = (myScroller.y - bigImageLoader.height) / 2;
}

[nelgom]

David,

Once again. Thank you. This was a great help and I feel that I'm almost there.

When I added your code the images where not centered within the stages (close but off) and the "center" of the images changed from image to image, i.e., each image's center was a little to the left of right of the last one. I was ready to send you an email asking for more advice when I remember seeing this code with stage.stageWidth somewhere so I replaced stage.width and it worked.

Thank you so much and you will be the first person that I'll go from now on if I need any more flash effects.

Have a good one.

[nelgom]

Yikes David...one more question and I promise that I will be done. I want to use the same scrolling in another part of the FLA to show photos instead of paintings. I have reworked the script on that frame so it can worked changing the path component as well but now when I try to play the movie I get a Flash error 1021 Duplicate Function Definition...function itemClickHandler(event:PhotosEvent):void

There is probably a simple way of doing this but my mind is not getting to it, that's for sure.

Thanks.

[David]

If it's OK, you can send me your FLA at contact [at] flashotaku [dot] com and I'll take a look at it. It would be much easier to debug this way.

[bbhtigger]

I am getting errors

1120: Access of undefined property myScroller.

myScroller.addEventListener(ScrollerEvent.ITEM_CLICK, itemClickHandler);

i also emailed file