Question

我有一张24张照片的简单水平画廊。 simple gallery

这个想法是在屏幕上显示3张图片，所有（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文件中删除所有图像。

这种方法将：

允许在图库的结尾处开始“回传”图像。
将来可以更轻松地添加或删除图像。
改善最终用户的初始加载时间。

AS3简单的水平画廊

1 个答案: