1

24枚の写真のシンプルな水平ギャラリーがあります。 シンプルギャラリー

アイデアは、すべて (24) から画面に 3 つの画像を表示し、中央の画像を上に大きな画像として自動的に表示することです (スキームのように)。これは、いくつかの矢印が押されたときに、画像が 1 つずつ移動する必要があることを意味します。また、自動ループする必要があります。したがって、最初のものは真ん中に行くことができます。

これまでの私のコードは次のとおりです。( 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);

}
4

1 に答える 1

2

すでに行ったこととは異なるアプローチですが、私が行う方法は、.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コードが配置されているキーフレームを1つだけにし、.swfファイル自体からすべての画像を削除する必要があります。

このアプローチは次のようになります。

  1. ギャラリーの最後または最初で画像の「ループバック」を許可します。
  2. 将来的に画像を簡単に追加または削除できるようにします。
  3. エンドユーザーの初期ロード時間を改善します。
于 2013-01-05T06:57:33.280 に答える