Slider image viewer - slider only goes one way 1

[whoknows361]

Hey all... I have a lot of code on this movie - It is a simply image slider which when you mouse over the right side of the "mask_mc" the images slide to the left and vice versa. However, my problem is that when I mouse over the right side the images go left (great), but as I go to the left side, the images just slow down but still go to the left. They are supposed to switch directions when I hit the middle point of "mask_mc" and start going to the right. However, I can't see where I screwed up here. Any advice/feedback is appreciated. Here is the code. I can put together an example fla if need be - but I hope we can solve the problem with the code.

stop();

//begin pic code//
/*********  DECLARE AND INITIALIZE VARIABLES  **************************/
// names of folder and pictures, in the order to put them into the slider
var picnamesb:Array = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var picnamess:Array = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var picdesign:Array = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
var pictitle:Array = ["title1", "title2", "title3", "title4", "title5", "title6", "title7", "title8", "title9", "title10"];
var pictexts:Array = ["Description1", "Description2", "Shirt3", "Shirt4", "Shirt5", "Shirt6", "Shirt7", "Shirt8", "Shirt9", "Shirt10"];
var piccosts:Array = ["1.00", "2.00", "3.00", "4.00", "5.00", "6.00", "7.00", "8.00", "9.00", "10.00"];

// constants 
var PICPATHBIG:String = "teasetsbig/";	// folder with big pic jpgs
var PICPATHSMALL:String = "teasetssmall/"; //folder w/ small pics
var NPICS:Number = 10;	// number of pictures to load
var PICX:Number = 207;               // x loc of big picture
var PICY:Number = 5;               // y loc
var THUMBHOLDERX:Number = 225;        // x location of thumbnail holder movieclip
var THUMBHOLDERY:Number = 332;      // y location
var THUMBW:Number = 80;             // width of each thumbnail
var THUMBH:Number = 69;             // height
var MARGIN:Number = 20;             // margin between thumbnails
var TOTALBYTES:Number = 320000;     // approx sum of bytes in all jpgs (x 2)
var MAXPIXELS:Number = 4;          // 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
// , and enough space above and below the thumbs to show them when they 'grow'
// on mouseover
var MASKX:Number = 220;				// start x location of mask
var MASKW:Number = 400;				// mask width
var MASKY:Number = 325;				// start y location of mask
var MASKH:Number = 75;				// 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() {   
   //preloader - load pic into pic_mc mc & play it//
   //set pic_mc back to beginning//
_level0.mainholder.holder.pic_mc.gotoAndStop(1);	
   //begin intro loading process//
_level0.mainholder.holder.loadermc.attachMovie("myloader", "myloader", 5000);
_level0.mainholder.holder.loadermc.myloader._visible = false;
my_mc3 = new MovieClipLoader(); 
preload3 = new Object(); 
my_mc3.addListener(preload3); 

preload3.onLoadStart = function(targetMC) { 
_level0.mainholder.holder.loadermc.myloader._visible = true;}

preload3.onLoadProgress = function(targetMC, lBytes, tBytes) {
_level0.mainholder.holder.loadermc.myloader.bar._width = (lBytes/tBytes)*100; 
_level0.mainholder.holder.loadermc.myloader.pText.text = "% "+Math.round((lBytes/tBytes)*100); 
}; 

preload3.onLoadComplete = function(targetMC) { 
_level0.mainholder.holder.loadermc.myloader._visible = false;
_level0.mainholder.holder.loadermc.myloader.unloadClip();
_level0.mainholder.holder.pic_mc.gotoAndPlay(2);

}; 
cliptoload = PICPATHBIG + picnamesb[this.i] + ".jpg";
my_mc3.loadClip(cliptoload, pic_mc.picholder);


designloader(this.i);
globaldata(this.i);
}
globaldata = function(f) {
	_root.mycurrentpic = f;

}


designloader = function(k) {

  //fill in description and price dynamnic tb's// 
   pic_mc.dyn_tb1.text = pictexts[k];
   rightcost = "$" + piccosts[k];
   pic_mc.dyn_tb2.text = rightcost;
   pic_mc.title_tb.text = pictitle[k];

/*
//paypal info//
_level0.holder.holderitems.ppbutton.ID = pictitle[k];
_level0.holder.holderitems.ppbutton.name = pictitle[k];
_level0.holder.holderitems.ppbutton.price = piccosts[k];
_level0.holder.holderitems.ppbutton.option1Name = "size";
_level0.holder.holderitems.ppbutton.option1Value = "Adult L";
*/
}



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

function setupHandlers() {
   _root.pct_txt.removeTextField();		// don't need loading indicator any more
   _root.loading_txt.removeTextField();
   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
  //so popup of giant pic starts at the first shirt.
  _root.mycurrentpic = 0;
  
_level0.mainholder.holder.loadermc.attachMovie("myloader", "myloader", 5000);
_level0.mainholder.holder.loadermc.myloader._visible = false;
my_mc4 = new MovieClipLoader(); 
preload4 = new Object(); 
my_mc4.addListener(preload4); 

preload4.onLoadStart = function(targetMC) { 
_level0.mainholder.holder.loadermc.myloader._visible = true;}

preload4.onLoadProgress = function(targetMC, lBytes, tBytes) {
_level0.mainholder.holder.loadermc.myloader.bar._width = (lBytes/tBytes)*100; 
_level0.mainholder.holder.loadermc.myloader.pText.text = "% "+Math.round((lBytes/tBytes)*100); 
}; 

preload4.onLoadComplete = function(targetMC) { 
_level0.mainholder.holder.loadermc.myloader._visible = false;
_level0.mainholder.holder.loadermc.myloader.unloadClip();
_level0.mainholder.holder.pic_mc.gotoAndPlay(2);
}; 
firstclip = PICPATHBIG + "1.jpg";
my_mc4.loadClip(firstclip, pic_mc.picholder);	

//load first design in designholder mc//
designloader(0);

      setupHandlers();
   } else if (ipic >= NPICS) {
      // load jpg into duplicate thumbnail (will already be cached)
      loader.loadClip(PICPATHSMALL + picnamess[ipic-NPICS] + ".jpg",  thumbs_mc["mc"+ipic]);
   } else {
      // load jpg into thumbnail
      loader.loadClip(PICPATHSMALL + picnamess[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;	
   _root.pct_txt.text = Math.floor(loadedsofar / TOTALBYTES * 100) + "%";
   _root.loading_txt.text = "Thumbnails Loading";
}

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
   _root.createTextField("pct_txt", 4, 200, 100, 40, 100);
   _root.pct_txt._x = 300;
   _root.pct_txt._y = 200;
   _root.createTextField("loading_txt", 5, 20, 15, 200, 100);
   var tf:TextFormat = new TextFormat();
   tf.align = "center";
   tf.size = 12;
   tf.font = "Verdana";
   tf.color = 0x000000;
   _root.pct_txt.setNewTextFormat(tf);
   _root.loading_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(PICPATHSMALL + picnamess[ipic] + ".jpg", thumbs_mc["mc"+ipic]);
}

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

by the way, the placement of everything works fine. ie. the functions grow, shrink, openPic work fine. The thumbnails are appropriately placed (correct x y ) but the slider seems to only move the images to the left, but not to the right when I cross the midpoint?

Thanks in advance.
Jonathan

 

[oldnewbie]

Can you post a link to the .fla?

Regards. FLASH HELP - OPENED FOR BUSINESS!
TO GET YOUR OWN FREE WEBSITE HOSTING

 

[whoknows361]

here u are:

http://jon.zeoonline.com/teapots.zip

 

[oldnewbie]

I'd say set your MAXPIXELS around...

var MAXPIXELS:Number = 20;

Higher for faster, lower for slower...

And add 225 (roughly the offset of your Thumbs mask mc) to...

var hw:Number = mask_mc._width/2+225;

Works for me.

Regards. FLASH HELP - OPENED FOR BUSINESS!
TO GET YOUR OWN FREE WEBSITE HOSTING

 

[whoknows361]

thanks oldnewbiew - once again.. u rock!

Jonathan

 

[whoknows361]

I just saw another problem and am curious as if it is because we changed the offset.

When you scroll to the right, after the 10 items, the scroll pane is BLANK ... though is should reload the items.. can you help me out?

Jonathan

 

[oldnewbie]

Don't ask me why, but the following works...
There's some math formula, but I've always hated maths...

Also commented the else if, that was never used anyways...

function sliderControl() {
   var w:Number = this._width/2+225;
   var hw:Number = mask_mc._width/2+225;
   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;
         trace(this._x);
		 if (this._x >= -450){
			 this._x = -1450; 
		 } else if(this._x <= -1450){
			 this._x = -450;
		 }
      // 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; */
      }
   }
};

Regards. FLASH HELP - OPENED FOR BUSINESS!
TO GET YOUR OWN FREE WEBSITE HOSTING

 

[whoknows361]

thanks... for some reason the images are supposed to automatically duplicate so that you never run out of "room"..

Thanks for the code above, I will use it the best way that I can. I appreciate your help on this.

Jonathan