/********* 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();
Wednesday, March 16, 2011
Subscribe to:
Post Comments (Atom)
Searching....
No comments:
Post a Comment