Create a sliding viewer to accommodate any number of photos

The example on the loadjpg page can be extended to load and place any number of photos (as specified in the picnames array) into a code-generated slider at the bottom of the movie. The photos are loaded with MovieClipLoader as before, but this time, a double number of thumbnail holders is created so that a slider can be made which will scroll continuously. A slider is created to be double the width of all the thumbnails plus a specified margin between each. Photos are loaded into thumbnails on the left half of the slider, and again into duplicate thumbnails on the right half.

Here is where each element on stage will be, as defined by the constants we set up in the beginning of the movie:

And this is the actual content of the movie when the user has moused over the right side of the mask (shown in yellow -- can be any size over the slider, as defined in the movie constants):

After all pictures have been loaded and the slider movieclip is built, a setupHandlers function is called to set up onRollOver, onRollOut, and onRelease handlers for the thumbnails, and an additional handler for thumbs_mc.onEnterFrame, to control its scrolling when moused over. The rate of scrolling (set by variable npixels, and reaching a maximum of MAXPIXELS), is proportional to the x position of the mouse, relative to its position over the mask -- slow scrolling when in the middle, faster when over the edges. The slider is placed under a mask to keep only the desired part of it showing.

Following is the complete code (to go in frame 1 of an empty 420 x 290 movie, black background, 20fps, photos in a folder under the swf named flowers).

/*********  DECLARE AND INITIALIZE VARIABLES  **************************/
// names of folder and pictures, in the order to put them into the slider
var picnames:Array = [
 "flower_orange", 
 "flower_yellow", 
 "flower_pink", 
 "flower_red", 
 "flower_purple"
 ];

// constants
var PICPATH:String = "flowers/"; // folder with jpgs
var NPICS:Number = picnames.length; // number of pictures to load
var PICX:Number = 10;               // x loc of big picture
var PICY:Number = 10;               // y loc
var THUMBHOLDERX:Number = 0;        // x location of thumbnail holder movieclip
var THUMBHOLDERY:Number = 240;      // y location
var THUMBW:Number = 72;             // width of each thumbnail
var THUMBH:Number = 40;             // height
var MARGIN:Number = 10;             // margin between thumbnails
var TOTALBYTES:Number = 212000;     // approx sum of bytes in all jpgs (x 2)
var MAXPIXELS:Number = 12;          // max number of pixels to move slider per frame

// mask definition; mask is assumed to cover some part of the thumbnail slider (here the numbers
// were chosen so that there are margins between the mask and the right and left edges of the movie
// (which is 420 x 290), and enough space above and below the thumbs to show them when they 'grow'
// on mouseover
var MASKX:Number = 10;    // start x location of mask
var MASKW:Number = 400;    // mask width
var MASKY:Number = 230;    // start y location of mask
var MASKH:Number = 60;    // mask height

var totalloaded:Number = 0;         // running tally of bytes loaded from all pics

// index into pictures array, used for loading
var ipic:Number;

// set up loader, an instance of MovieClipLoader
var loader:MovieClipLoader = new MovieClipLoader();

// use the main timeline to listen to and respond to loader's broadcast events
loader.addListener(this);

/*********  DEFINE FUNCTIONS, INCLUDING INIT FOR MOVIE SETUP  **********/
// thumbnail rollover handler

function grow() {
   this.onEnterFrame = function() {
      if (this._width < THUMBW * 1.2) {
         this._x -= this._width * .025;
         this._y -= this._height * .025;
         this._width *= 1.05;
         this._height *= 1.05;
      } else delete this.onEnterFrame;
   };
}

// thumbnail rollout handler

function shrink() {
   this.onEnterFrame = function() {
      if (this._width > THUMBW) {
         this._width /= 1.05;
         this._height /= 1.05;
         this._x += this._width * .025;
         this._y += this._height * .025;
      } else delete this.onEnterFrame;
   };
}

// function to move thumbnail slider ("this" = thumbs_mc)

function sliderControl() {
   var w:Number = this._width/2;
   var hw:Number = mask_mc._width/2;
   var npixels:Number;
   // only do when mouse over slider mask
   if (_ymouse > mask_mc._y && _ymouse < mask_mc._y + mask_mc._height) {
      // mouse over left half of slider:
      if (_xmouse > mask_mc._x && _xmouse < mask_mc._x + hw) {
         npixels = (hw - _xmouse) / hw * MAXPIXELS;
         this._x += npixels;
         if (this._x >= 0) this._x = this._x - w;
      // mouse over right half of slider:
      } else if (_xmouse > mask_mc._x + hw && _xmouse < mask_mc._x + mask_mc._width) {
         npixels = (_xmouse - hw) / hw * MAXPIXELS;
         this._x -= npixels;
         if (this._x <= -w) this._x = this._x + w;
      }
   }
}

// thumbnail click (onrelease) handler

function openPic() {
   pic_mc.loadMovie(PICPATH + picnames[this.i] + ".jpg");
}

// assign event handlers (called when all jpgs are loaded)

function setupHandlers() {
   pct_txt.removeTextField();  // don't need loading indicator any more
   thumbs_mc.onEnterFrame = sliderControl;
   for (var i:Number = 0; i < NPICS*2; i++) {
      thumbs_mc["mc"+i].onRollOver = grow;
      thumbs_mc["mc"+i].onRollOut = shrink;    
      thumbs_mc["mc"+i].onRelease = openPic;
   }
}

// listener function for broadcast 'done' message (for each pic)
// onLoadInit gets executed when the movieclip has been loaded into _mc AND 
//   its width and height data are available.
//   (_mc = the movieclip being loaded into)
// this routine sets the size and position of each thumbnail clip as its jpg
//   is loaded and starts the next one loading.  When all have been loaded, 
//   a random picture is loaded into pic_mc and setupHandlers is called to 
//   assign handlers to each thumbnail movieclip

function onLoadInit(_mc:MovieClip) {
   // this gets done when the jpg is completely loaded:
   _mc._width = THUMBW;
   _mc._height = THUMBH;
   _mc._alpha = 99;  // for image clarity
   // give the movieclip a property to remind it who it is
   // (used by openPic to know which big picture to open)
   _mc.i = (ipic >= NPICS ? ipic-NPICS : ipic);
 
   // add picture size to totalloaded variable
   totalloaded += loader.getProgress(_mc).bytesTotal;

   // now load the next one (if there are more) or set up handlers if done
   ipic++;
   if (ipic == NPICS * 2) {
      // start with a random photo displayed when all thumbs loaded
      pic_mc.loadMovie(PICPATH + picnames[Math.floor(Math.random()*NPICS)] + ".jpg");
      setupHandlers();
   } else if (ipic >= NPICS) {
      // load jpg into duplicate thumbnail (will already be cached)
      loader.loadClip(PICPATH + picnames[ipic-NPICS] + ".jpg",  thumbs_mc["mc"+ipic]);
   } else {
      // load jpg into thumbnail
      loader.loadClip(PICPATH + picnames[ipic] + ".jpg",  thumbs_mc["mc"+ipic]);
   }
}

// listener function to handle broadcast progress messages
// make pct_txt show cumulative loading progress

function onLoadProgress(_mc:MovieClip, loaded:Number) {
   var loadedsofar:Number = totalloaded + loaded; 
   pct_txt.text = Math.floor(loadedsofar / TOTALBYTES * 100) + "%";
}

function init() {
   // create holder for pictures
   createEmptyMovieClip("pic_mc", 1);
   pic_mc._x = PICX;
   pic_mc._y = PICY;

   // create (and draw) holder for thumbnails 
   createEmptyMovieClip("thumbs_mc", 2);
   thumbs_mc.beginFill(0, 100); // black
   thumbs_mc.moveTo(0, 0);
      thumbs_mc.lineTo(2 * (MARGIN + THUMBW) * NPICS, 0);
   thumbs_mc.lineTo(2 * (MARGIN + THUMBW) * NPICS, THUMBH);
   thumbs_mc.lineTo(0, THUMBH);
   thumbs_mc.endFill();
   // drawing the thumb holder at 0, 0 and then moving it makes its reg point = upper left
   thumbs_mc._x = THUMBHOLDERX;
   thumbs_mc._y = THUMBHOLDERY;

   // create, draw and enable mask over thumbs (could use different variables to define mask
   // if desired)
   createEmptyMovieClip("mask_mc", 3);
   mask_mc.beginFill(0x0000cc, 100);
   mask_mc.moveTo(0, 0);
   mask_mc.lineTo(MASKW, 0);
   mask_mc.lineTo(MASKW, MASKH);
   mask_mc.lineTo(0, MASKH);
   mask_mc.endFill();
   mask_mc._x = MASKX;
   mask_mc._y = MASKY;
   thumbs_mc.setMask(mask_mc);

   // create loading textfield indicator
   createTextField("pct_txt", 4, 200, 100, 40, 100);
   var tf:TextFormat = new TextFormat();
   tf.align = "center";
   tf.size = 12;
   tf.font = "Verdana";
   tf.color = 0xFFFF00;
   pct_txt.setNewTextFormat(tf);

   // make empty movieclips in thumbs_mc for each pic to go into
   // make double the number so the slider can move continuously and show content
   for (var i:Number = 0; i < NPICS * 2; i++) {
      var mc:MovieClip = thumbs_mc.createEmptyMovieClip("mc"+i, i+1);
      mc._x = i*(MARGIN + THUMBW);
      mc._y = 0;
   }
 
   // set the pointer to the first jpg in the array picnames
   ipic = 0;
   // start loading jpgs (ipic is initialized to 0)
   loader.loadClip(PICPATH + picnames[ipic] + ".jpg", thumbs_mc["mc"+ipic]);
}

/*********  CALL THE INIT FUNCTION TO START THE MOVIE  *****************/
init();