0 Replies Latest reply on Jan 29, 2008 1:59 PM by jamaican444

    Change Movieclips Parameters-Variables

    jamaican444
      Hi,
      Im working on the following code and i need some help to change part of the code:
      The code is a slider to view pictures loaded from external file. I changed the size of the stage(1000x1000), the big pictures are displayed above(1000x400) and i would like to do 3 things:
      1.The slider has the size(400x50). I changed its size(500x80), the thumbnails move but at some point the slider remains half empty and then fills up again. This happens when i have small amount of pictures. I would like not to double but treble the No of the thumbnails so the slider wont remains empty.
      2.Move the thumbnails on the right-half part of the stage. When i only change the coordinates(x,y) of the slider it doesnt work.They r loaded on the right part, but when placing the cursor above they disappear.
      3.Is it possible when placing the cursor over a thumbnails to show text(small description of each pic)????
      Heres the URL of the code working: http://www.flash-creations.com/notes/dynamic_slidingviewer.php
      Thanks
      Theo
      Heres the code:
      /********* 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();