Skip navigation
Currently Being Moderated

how do I reposition image scroller bar from middle to the right

Jul 27, 2012 12:19 PM

I am customising an image thumb scroller. and trying to follow up previously developed code.

All worked fine until the last moment when thumbnails bar is positioned as if its starting point is in the middle of the screen. I suppose it was developed for the flash screen layout with centered coordinates. My stage probably has them set to the upper left corner.

I can not make the bar move.

My stage size is 1024 x 768

Where do I do my math in the code so the thumbnails will be located in the middle of the screen rather than in its right hand.

Here are the code snippets responsible for the thumbnails build up:

 

////////////////////////////////////////////////////////////////////// //////////////////////////////

 



  const _THUMB_WIDTH:Number = 50;


  const _THUMB_HEIGHT:Number = 64;


  const _IMAGE_WIDTH:Number = 860;//550;original #


  const _IMAGE_HEIGHT:Number = 500;//355;original #


  const _THUMB_GAP:Number = 2;


  const _SCROLL_SPEED:Number = 12;


  const _SCROLL_AREA:Number = 150;





var _progressBar:MovieClip;


var _arrowLeft:MovieClip;


var _arrowRight:MovieClip;





var _slides:Array;


var _curSlide:Slide; //Slide that is currently displaying


var _loadingSlide:Slide; //only used when a Slide is supposed to show but hasn't been fully loaded yet (like if the user clicks "next" many times before all the images have loaded). We keep track of the one that's in the process of loading and should be shown as soon as it finishes, then we set _loadingSlide back to null.


var _imagesContainer:Sprite; //the Sprite into which the full-size images are placed (this helps manage the stacking order so that the images can always be behind everything else and yet we can addChild() each image so that it shows up on top of the previous one)


var _thumbnailsContainer:Sprite; //the Sprite into which the thumbnail images are placed. This also allows us to slide them all at the same time.


var _destScrollX:Number = 0; //destination x value for the _thumbnailsContainer which is used for scrolling it across the bottom. We don't want to use _thumbnailsContainer.x because it could be in the process of tweening, so we keep track of the end/destination value and add/subtract from it when creating our tweens.


var _minScrollX:Number; //we know the maximum x value for _thumbnailsContainer is 0, but the mimimum value will depend on how many thumbnail images it contains (the total width). We calculate it in the _setupThumbnails() method and store it here for easier/faster scrolling calculations in the _enterFrameHandler()







////////////////////////////////////////////////////////////////////// //////////////////////////////




_thumbnailsContainer = new Sprite();



addChild(_thumbnailsContainer);



//_thumbnailsContainer.x = -550;//moves x position of thumbnails, instead done in line 273 thumbnail.x = curX - 590;



_thumbnailsContainer.y = _IMAGE_HEIGHT;//moves y position of thumbnails



_thumbnailsContainer.alpha = 0; //we want alpha 0 initially because we'll fade it in later when the thumbnails load.



_thumbnailsContainer.visible = false; //ensures nothing is clickable.







var xmlLoader:XMLLoader = new XMLLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/data.xml", {onComplete:_xmlCompleteHandler});



xmlLoader.load();


//}





function _xmlCompleteHandler(event:LoaderEvent):void {



_slides = [];



var xml:XML = event.target.content; //the XMLLoader's "content" is the XML that was loaded.



var imageList:XMLList = xml.image; //In the XML, we have <image /> nodes with all the info we need.



//loop through each <image /> node and create a Slide object for each.



for each (var image:XML in imageList) {




_slides.push( new Slide(image.@name,










image.@description,










new ImageLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/thumbnails/appThmb_imgs/" + image.@name + ".jpg",














{















name:image.@name + "Thumb",















width:_THUMB_WIDTH,















height:_THUMB_HEIGHT,















//centerRegistration:true,















//x:260, y:320,//doesn't work here but works in line 69















scaleMode:"proportionalInside",















bgColor:0x000000,















estimatedBytes:13000,















onFail:_imageFailHandler}),

 

////////////////////////////////////////////////////////////////////// //////////////////////////////



//loops through all the thumbnail images and places them in the proper order across the bottom of the screen and adds CLICK_THUMBNAIL listeners.


function _setupThumbnails():void {





var l:int = _slides.length;



var curX:Number = _THUMB_GAP;



for (var i:int = 0; i < l; i++) {




var thumbnail:Sprite = _slides[i].thumbnail;




_thumbnailsContainer.addChild(thumbnail);




TweenLite.to(thumbnail, 0, {colorTransform:{brightness:0.5}});




_slides[i].addEventListener(Slide.CLICK_THUMBNAIL, _clickThumbnailHandler, false, 0, true);




thumbnail.x = curX;




thumbnail.y = -234;//defines y position of the thumbnails row




curX += _THUMB_WIDTH + _THUMB_GAP;



}



_minScrollX = _IMAGE_WIDTH - curX;



if (_minScrollX > 0) {




_minScrollX = 0;



}


}

 

////////////////////////////////////////////////////////////////////// //////////////////////////////



function _enterFrameHandler(event:Event):void {



if (_thumbnailsContainer.hitTestPoint(this.stage.mouseX, this.stage.mouseY, false)) {




if (this.mouseX < _SCROLL_AREA) {





_destScrollX += ((_SCROLL_AREA - this.mouseX) / _SCROLL_AREA) * _SCROLL_SPEED;





if (_destScrollX > 0) {  //this number is 1/2 the stage size, previously was at 0 it defines the left position of the thumbnails scroll end, has to be indentical to the number below






_destScrollX = 0;    //this number is 1/2 the stage size, previously was at 0 it defines the left position of the thumbnails scroll end, has to be indentical to the number above





}





TweenLite.to(_thumbnailsContainer, 0.5, {x:_destScrollX});




} else if (this.mouseX > _IMAGE_WIDTH - _SCROLL_AREA) {





_destScrollX -= ((this.mouseX - (_IMAGE_WIDTH - _SCROLL_AREA)) / _SCROLL_AREA) * _SCROLL_SPEED;





if (_destScrollX < _minScrollX) {






_destScrollX = _minScrollX;





}





TweenLite.to(_thumbnailsContainer, 0.5, {x:_destScrollX});




}

 

////////////////////////////////////////////////////////////////////// //////////////////////////////

////////////////////////////////////////////////////////////////////// //////////////////////////////

 
Replies
  • kglad
    72,340 posts
    Jul 21, 2002
    Currently Being Moderated
    Jul 29, 2012 9:23 AM   in reply to nikolaig

    that code is difficult to read.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 30, 2012 8:56 AM   in reply to nikolaig

    I'd edit that and trim out what you actually think is the trouble area, or use pastebin.com or similar.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 30, 2012 9:42 AM   in reply to nikolaig

    When you add _thumbnailsContainer you don't set an .x (commented out) so the .x will be 0 by default. Also you build your thumbnails progressively from left to right starting at 0. That should mean if your _thumbnailContainer.x is 0, it should be on the left edge already. Do you not want this? Do you want the thumbnails somewhere more centered in the 1024 width?

     

    The rest of the code states _destScrollX is dictating where the _thumbnailContainer's .x property can be. It won't let it scroll past 0 so it only scrolls left (negative numbers). When you calculate the next _destScrollX is how  you'll modify where the thumbnails can and can't go.

     

    Make sure you're not queueing up or running simultaneous TweenLite.to()s or you're going to get some wonky results. You can use the TweenLite.killTweensOf() method to kill any existing tween of the outer container before you re-apply a new Tween.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 30, 2012 12:17 PM   in reply to nikolaig

    If your stage size is 1024x768 and you're not altering the width and height in code, the upper left of the stage will always be 0,0 regardless what your stage alignment is set to. If you resize the stages width and height that's when the alignment comes into play.

     

    The only 2 parts of the equation in question that I see is what is _destScrollX's value and what other "container" clips might be loading the _thumbnailContainer. One of those two isn't working for you.

     

    Put a trace anywhere _destScrollX is updated to watch it. Otherwise consider any clips you're adding the thumbnail container into. That container clip itself may be the position issue. Check it's x position.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 30, 2012 2:15 PM   in reply to nikolaig

    I'm sure with some quick review of your overall variables (and image dimensions and such) you'll find it quick. Good luck!

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points