Wednesday, March 16, 2011

/*********  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();

No comments:

Post a Comment

Searching....