AS3 simple horizontal gallery

Question

I have a simple horizontal gallery of 24 pictures.

The idea is to show 3 pictures on the screen from all (24) and the middle one to be shown above as the big one automaticly ( like the scheme ). This means that when some of the arrows is pressed the movement of the images have to be by one. Also they have to be auto looped. So the first one can go in the middle to.

Here is my code so far. ( I didn't put the all 24 thumbnails, here are only 3 thumbnails only for the tests ) I've managed to move the thumbnails and select a big picture. But I need it to be auto selected when comes to the middle.

buttonL1_btn.addEventListener(MouseEvent.CLICK, left);
buttonR1_btn.addEventListener(MouseEvent.CLICK, right);

function left(event:Event):void{
     box_mc.x -=50;
}

function right(event:Event):void{
     box_mc.x +=50;
}

//imgs 

img_3_big.visible = false;



box_mc.img_1.addEventListener(MouseEvent.CLICK, img1_show);

function img1_show(e:MouseEvent):void {
    img_3_big.visible = true;
    img_3_big.gotoAndStop(3);

}
box_mc.img_2.addEventListener(MouseEvent.CLICK, img2_show);

function img2_show(e:MouseEvent):void {
    img_3_big.visible = true;
    img_3_big.gotoAndStop(2);

}
box_mc.img_3.addEventListener(MouseEvent.CLICK, img3_show);

function img3_show(e:MouseEvent):void {
    img_3_big.visible = true;
    img_3_big.gotoAndStop(1);

}

Answer 1

Although a different approach than what you have already done, the way I would do it is by keeping all 24 images outside of the .swf in their own image files and keeping track of the current image index. Something similar to this (untested code):

import flash.display.Bitmap;
import flash.display.Loader;
import flash.events.MouseEvent;

var allImagePaths:Vector.<String> = new Vector.<String>(); // Holds reference to all big images
var allImageThumbPaths:Vector.<String> = new Vector.<String>(); // Holds reference to all thumbnail images
var currentImageIndex:int = 0; // Keeps track of what image is currently selected 

// Loaders that would load big image and thumbnails
var loaderMain:Loader;
var loaderThumb_Left:Loader;
var loaderThumb_Middle:Loader;
var loaderThumb_Right:Loader; 

SetupGallery(); // initialize gallery


function SetupGallery()
{
    // Setup image loaders
    loaderMain = new Loader();
    loaderThumb_Left = new Loader();
    loaderThumb_Middle = new Loader();
    loaderThumb_Right = new Loader();

    // Add loaders to existing MovieClips on stage.
    imageHolderMain_mc.addChild(loaderMain);
    imageHolderThumbLeft_mc.addChild(loaderThumb_Left);
    imageHolderThumbMiddle_mc.addChild(loaderThumb_Middle);
    imageHolderThumbRight_mc.addChild(loaderThumb_Right);

    // Load image paths into a vector collection (like an array)
    loadImages();

    // Setup arrow button listeners
    buttonL1_btn.addEventListener(MouseEvent.CLICK, showImageLeft);
    buttonR1_btn.addEventListener(MouseEvent.CLICK, showImageRight);

}


function loadImages()
{
    // Initialize collection of images for easier looping/displaying
    allImagePaths = new Vector.<String>();
    allImageThumbPaths = new Vector.<String>();

    // Load up all image paths into the image array(vector). 
    allImagePaths.push("image1.jpg");
    allImageThumbPaths.push("image1_thumb.jpg");
    // ... image2 - image23 ...
    allImagePaths.push("image24.jpg");
    allImageThumbPaths.push("image24_thumb.jpg");

    // NOTE: Consider loading paths to image files via xml
}


function showImageLeft(evt:MouseEvent)
{
    currentImageIndex--;
    showCurrentImage();
}

function showImageRight(evt:MouseEvent)
{
    currentImageIndex++;
    showCurrentImage();
}


// Call this after each arrow click, direction will be determined by currentImageIndex
function showCurrentImage()
{
    // Keep current index within bounds, if out of range then "loop back"
    if(currentImageIndex < 0) currentImageIndex = allImagePaths.length - 1;
    if(currentImageIndex > allImagePaths.length - 1) currentImageIndex = 0;

    // Set right and left thumbnail indexes based on current image
    // (Assuming my logic is correct of course :)
    var indexRight:int = currentImageIndex - 1;
    if(indexRight < 0) indexRight = allImagePaths.length - 1; // "Loop back" if needed
    var indexLeft:int = currentImageIndex + 1;
    if(indexLeft > allImagePaths.length - 1) indexLeft = 0; // "Loop back" if needed

    // clear out any existing images
    loaderMain.unload();
    loaderThumb_Left.unload();
    loaderThumb_Middle.unload();
    loaderThumb_Right.unload();

    // set correct images based on new indexes
    loaderMain.load(allImagePaths[currentImageIndex]);
    loaderThumb_Left.load(allImageThumbPaths[indexLeft]);
    loaderThumb_Middle.load(allImageThumbPaths[currentImageIndex]);
    loaderThumb_Right.load(allImageThumbPaths[indexRight]);
}

There may be some additional things you'll have to handle, but that's the general idea.

Going with this approach you will not deal with keyframes, in fact you would want to have only one keyframe where the AS code is located and you would want to remove all images from the .swf file itself.

This approach will:

1. Allow for "Looping back" of images when at the end or beginning of the gallery.
2. Make it easier to add or remove images in the future.
3. Improve initial load time for the end user.