AS3簡單的水平畫廊

Question

我有一個簡單的24張圖片的水平畫廊。

這個想法是在屏幕上顯示全部（24）和中間的3張圖片，以自動方式顯示爲大圖（如方案）。這意味着當按下一些箭頭時，圖像的移動必須是一個。他們也必須自動循環。所以第一個可以在中間去。

這是我的代碼到目前爲止。 （我沒有放置全部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. 改善最終用戶的初始加載時間。