AS3 简单水平图库

Question

我有一个包含 24 张图片的简单水平画廊。

这个想法是在屏幕上显示所有（24）张图片，中间的一张自动显示为上面的大一张（如方案）。这意味着当某些箭头被按下时，图像的移动必须是一个。他们也必须自动循环。所以第一个可以走中间去。

到目前为止，这是我的代码。 （我没有放全部 24 个缩略图，这里只有 3 个缩略图仅用于测试）我已经设法移动缩略图并选择了一张大图。但我需要在中间自动选择它。

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

虽然与您已经完成的方法不同，但我的方法是将 .swf 之外的所有 24 个图像保存在它们自己的图像文件中，并跟踪当前图像索引。类似于此（未经测试的代码）：

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]);
}

您可能需要处理一些额外的事情，但这是一般的想法。

使用这种方法，您将不会处理关键帧，实际上您可能希望只有一个 AS 代码所在的关键帧，并且您希望从 .swf 文件本身中删除所有图像。

这种方法将：

1. 允许在图库末尾或开头时“循环播放”图像。
2. 以后可以更轻松地添加或删除图片。
3. 为最终用户缩短初始加载时间。