Question

How hard it is to make a button to display images in order, acording to their position inside an array?

I need this for the NEXT and PREVIOUS buttons. Check the array below.

Array:

private var images:Array = ["Layer_1.jpg", "Layer_2.jpg", "Layer_3.jpg", "Layer_4.jpg", "Layer_5.jpg", "Layer_6.jpg", "Layer_7.jpg", "Layer_8.jpg"];

Button:

        private var triangleButton:triangle = new triangle;
        //to call the function slideGames
        triangleButton.addEventListener(MouseEvent.CLICK, slideGames);

Loader:

    private var loader:Loader = new Loader();

Full Code:

package {

import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.Event;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.display.MovieClip;


    public class play extends MovieClip {

        private var loader:Loader = new Loader();

        private var images:Array = ["Layer_1.jpg", "Layer_2.jpg", "Layer_3.jpg", "Layer_4.jpg", "Layer_5.jpg", "Layer_6.jpg", "Layer_7.jpg", "Layer_8.jpg"];
        private var triangleButton:triangle = new triangle;

           public function play() {
               loader.load(new URLRequest("img/Layer_1.jpg"));
                addChild(loader);
                addChild(triangleButton);

                triangleButton.x = 600;
                triangleButton.y = 200;

                triangleButton.addEventListener(MouseEvent.CLICK, slideGames);



    function slideGames(event:MouseEvent):void
    {

    }

    }
}}

Answer 1

Try this:

package {

  import flash.display.Loader;
  import flash.net.URLRequest;
  import flash.events.Event;
  import flash.display.Sprite;
  import flash.events.MouseEvent;
  import flash.display.MovieClip;


  public class play extends MovieClip {

    private var loader:Loader = new Loader();

    private var images:Array = ["Layer_1.jpg", "Layer_2.jpg", "Layer_3.jpg", "Layer_4.jpg", "Layer_5.jpg", "Layer_6.jpg", "Layer_7.jpg", "Layer_8.jpg"];
    private var triangleButton:triangle = new triangle;

    public function play() {
      loadNextImage();

      addChild(loader);
      addChild(triangleButton);

      triangleButton.x = 600;
      triangleButton.y = 200;

      triangleButton.addEventListener(MouseEvent.CLICK, slideGames);
    }



    public function slideGames(event:MouseEvent):void {
      loadNextImage();
    }

    public function loadNextImage() : void {
      // Increment the image
      _imageIndex++;

      // If we've reached the end of the array, start over
      if (_imageIndex >= images.length) {
        _imageIndex = 0;
      }

      // Now get the image source from the array and tell the loader to load it
      var imageSource : String = images[_imageIndex] as String;
      loader.load(new URLRequest(imageSource));
    }
    // Next image to display
    protected var _imageIndex : int = -1;
  }
}

The basic idea is to keep an integer pointer to the next image you want to display. When you display the next image, increment this pointer. If it exceeds the length of the image source array, reset it to 0.

This pointer starts at -1 so that the first time it is incremented it has the value 0.

You should be able to handle the previous case easily — just decrease the pointer and instead of checking if it is bigger than the array length, check if it is less than zero and set it to images.length-1.