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

Question

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});

Answer 1

Hi, thanks for taking a look at my problem.
I assume that the code was difficult to read due to an unusual line brakes, which somehow I got when pasting on this site.
Please take a look I am pasting the code anew in it entirety:
(please let me know if you would like me to separate the areas which I believe give me troubles to address my previously describe problem:
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.)
(Also wanted to mention that there an external file Slide.as which is not responsible for the construction and positioning of the thumbnails)
          import com.greensock.*;
          import com.greensock.loading.*;
          //import com.greensock.events.LoaderEvent;
          import com.greensock.loading.display.*;
          //import com.greensock.TweenLite;
          import com.greensock.events.LoaderEvent;
          //import com.greensock.loading.ImageLoader;
          //import com.greensock.loading.SWFLoader;
          //import com.greensock.loading.LoaderMax;
          //import com.greensock.loading.XMLLoader;
          import com.greensock.plugins.AutoAlphaPlugin;
          import com.greensock.plugins.ColorTransformPlugin;
          import com.greensock.plugins.GlowFilterPlugin;
          import com.greensock.plugins.BlurFilterPlugin;//i added this filter to blur the progressBar
          import com.greensock.plugins.TweenPlugin;
          import flash.display.MovieClip;
          import flash.display.Sprite;
          import flash.events.Event;
          import flash.events.MouseEvent;
          //public class SlideshowExample extends MovieClip {
                      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()
                     //function SlideshowExample() {
                              //super();
                              //activate the plugins that we'll be using so that TweenLite can tween special properties like filters, colorTransform, and do autoAlpha fades.
                              TweenPlugin.activate([AutoAlphaPlugin, ColorTransformPlugin, GlowFilterPlugin, BlurFilterPlugin]);//i added BlurFilterPlugin at the end
                              _progressBar = this.getChildByName("progress_mc") as MovieClip;
                              _arrowLeft = this.getChildByName("arrowLeft_mc") as MovieClip;
                              _arrowRight = this.getChildByName("arrowRight_mc") as MovieClip;
                              //////////my additions to make progress bay blurry
                              TweenLite.to(progress_mc.progressBar_mc.gradientbar_appLoader_mcPopUp_mc, 0, {blurFilter:{blurX:21, blurY:8}});//i added this line to make ProgressBar_mc to blur
                              TweenLite.to(progress_mc.rectangleGray, 0, {blurFilter:{blurX:21, blurY:8}});//i added this line to make ProgressBar_mc to blur
                              _arrowLeft.visible = _arrowRight.visible = false;
                              _imagesContainer = new Sprite();
                              this.addChildAt(_imagesContainer, 0);
                              _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.@na me + "Thumb",
                                                                                                                                                      width:_THUMB_W IDTH,
                                                                                                                                                      height:_THUMB_ HEIGHT,
                                                                                                                                                      //centerRegist ration:true,
                                                                                                                                                      //x:260, y:320,//doesn't work here but works in line 69
                                                                                                                                                      scaleMode:"pro portionalInside",
                                                                                                                                                      bgColor:0x0000 00,
                                                                                                                                                      estimatedBytes :13000,
                                                                                                                                                      onFail:_imageF ailHandler}),
                                                                                                    new SWFLoader("loadingAssets/appThumbnails/slideshow_image scroller greenSock_mine/assets/images/" + image.@name + ".swf",
                                                                                                                                              name:image.@name + "Image",
                                                                                                                                              width:_IMAGE_WIDTH,
                                                                                                                                              height:_IMAGE_HEIGHT,
                                                                                                                                              //centerRegistration:true,
                                                                                                                                              x:-420, y:-260,
                                                                                                                                              scaleMode:"proportionalInside",
                                                                                                                                              bgColor:0x000000,
                                                                                                                                              estimatedBytes:820000,
                                                                                                                                              onFail:_imageFailHandler})
                              //now create a LoaderMax queue and populate it with all the thumbnail ImageLoaders as well as the very first full-size ImageLoader. We don't want to show anything until the thumbnails are done loading as well as the first full-size one. After that, we'll create another LoaderMax queue containing the rest of the full-size images that will load silently in the background.
                              var initialLoadQueue:LoaderMax = new LoaderMax({onComplete:_initialLoadComplete, onProgress:_progressHandler});
                              for (var i:int = 0; i < _slides.length; i++) {
                                        initialLoadQueue.append( _slides[i].thumbnailLoader );
                              initialLoadQueue.append(_slides[0].imageLoader); //make sure the very first full-sized image is loaded initially too.
                              initialLoadQueue.load();
                              _setupThumbnails();
                     function _initialLoadComplete(event:LoaderEvent):void {
                              //now that the initial load is complete, fade out the progressBar. autoAlpha will automatically set visible to false once alpha hits 0.
                              TweenLite.to(_progressBar, 0.5, {autoAlpha:0});
                              //fade in the thumbnails container
                              TweenLite.to(_thumbnailsContainer, 1, {autoAlpha:1});
                              _setupArrows();
                              //setup the ENTER_FRAME listeners that controls the thumbnail scrolling behavior at the bottom
                              this.stage.addEventListener(Event.ENTER_FRAME, _enterFrameHandler, false, 0, true);
                              //now put all the remaining images into a LoaderMax queue that will load them one-at-a-time in the background in the proper order. This can greatly improve the user's experience compared to loading them on demand which forces the user to wait while the next image loads.
                              var imagesQueue:LoaderMax = new LoaderMax({maxConnections:1});
                              for (var i:int = 1; i < _slides.length; i++) {
                                        imagesQueue.append( _slides[i].imageLoader );
                              imagesQueue.load();
                              //now start the slideshow
                              _showNext(null);
                    //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 _setupArrows():void {
                              _arrowLeft.alpha = _arrowRight.alpha = 0;
                              _arrowLeft.visible = _arrowRight.visible = true;
                              _arrowLeft.addEventListener(MouseEvent.ROLL_OVER, _rollOverArrowHandler, false, 0, true);
                              _arrowLeft.addEventListener(MouseEvent.ROLL_OUT, _rollOutArrowHandler, false, 0, true);
                              _arrowLeft.addEventListener(MouseEvent.CLICK, _showPrevious, false, 0, true);
                              _arrowRight.addEventListener(MouseEvent.ROLL_OVER, _rollOverArrowHandler, false, 0, true);
                              _arrowRight.addEventListener(MouseEvent.ROLL_OUT, _rollOutArrowHandler, false, 0, true);
                              _arrowRight.addEventListener(MouseEvent.CLICK, _showNext, false, 0, true);
                     function _showNext(event:Event=null):void {
                              //if there's a _loadingSlide we should assume that the next Slide would be AFTER that one. Otherwise just get the one after the _curSlide.
                              var next:int = (_loadingSlide != null) ? _slides.indexOf(_loadingSlide) + 1 : _slides.indexOf(_curSlide) + 1;
                              if (next >= _slides.length) {
                                        next = 0;
                              _requestSlide(_slides[next]);
                     function _showPrevious(event:Event=null):void {
                              //if there's a _loadingSlide we should assume that the previous Slide would be BEFORE that one. Otherwise just get the one before the _curSlide.
                              var prev:int = (_loadingSlide != null) ? _slides.indexOf(_loadingSlide) - 1 : _slides.indexOf(_curSlide) - 1;
                              if (prev < 0) {
                                        prev = _slides.length - 1;
                              _requestSlide(_slides[prev]);
                     function _requestSlide(slide:Slide):void {
                              if (slide == _curSlide) {
                                        return;
                              //kill the delayed calls to _showNext so that we start over again with a 5-second wait time.
                              TweenLite.killTweensOf(_showNext);
                              if (_loadingSlide != null) {
                                        _cancelPrioritizedSlide(); //the user must have skipped to another Slide and didn't want to wait for the one that was loading.
                              //if the requested Slide's full-sized image hasn't loaded yet, we need to show the progress bar and wait for it to load.
                              if (slide.imageLoader.progress != 1) {
                                        _prioritizeSlide(slide);
                                        return;
                              //fade the old Slide and make sure it's not highlighted anymore as the current Slide.
                              if (_curSlide != null) {
                                        TweenLite.to(_curSlide.image, 0.5, {autoAlpha:0});
                                        _curSlide.setShowingStatus(false);
                              _curSlide = slide;
                              _imagesContainer.addChild(_curSlide.image); //ensures the image is at the top of the stacking order inside the _imagesContainer
                              TweenLite.to(_curSlide.image, 0.5, {autoAlpha:1}); //fade the image in and make sure visible is true.
                              _curSlide.setShowingStatus(true); //adds an outline to the image indicating that it's the currently showing Slide.
                              TweenLite.delayedCall(5, _showNext); //create a delayedCall that will call _showNext in 5 seconds.
                     function _prioritizeSlide(slide:Slide):void {
                              TweenLite.to(_progressBar, 0.5, {autoAlpha:1}); //show the progress bar
                              _loadingSlide = slide;
                              _loadingSlide.imageLoader.addEventListener(LoaderEvent.PROGRESS, _progressHandler);
                              _loadingSlide.imageLoader.addEventListener(LoaderEvent.COMPLETE, _completePrioritizedHandler);
                              _loadingSlide.imageLoader.prioritize(true); //when the loader is prioritized, it will jump to the top of any LoaderMax queues that it belongs to, so if another loader is in the process of loading in that queue, it will be canceled and this new one will take over which maximizes bandwidth utilization. Once the _loadingSlide is done loading, the LoaderMax queue(s) will continue loading the rest of their images normally.
                     function _cancelPrioritizedSlide():void {
                              TweenLite.to(_progressBar, 0.5, {autoAlpha:0}); //hide the progress bar
                              _loadingSlide.imageLoader.removeEventListener(LoaderEvent.PROGRESS, _progressHandler);
                              _loadingSlide.imageLoader.removeEventListener(LoaderEvent.COMPLETE, _completePrioritizedHandler);
                              _loadingSlide = null;
                     function _completePrioritizedHandler(event:LoaderEvent):void {
                              var next:Slide = _loadingSlide; //store it in a local variable first because _cancelPrioritizedSlide() will set _loadingSlide to null.
                              _cancelPrioritizedSlide();
                              _requestSlide(next);
                     function _progressHandler(event:LoaderEvent):void {
                              _progressBar.progressBar_mc.scaleX = event.target.progress;
                     function _clickThumbnailHandler(event:Event):void {
                              _requestSlide(event.target as Slide);
                     function _rollOverArrowHandler(event:Event):void {
                              TweenLite.to(event.currentTarget, 0.5, {alpha:1});
                     function _rollOutArrowHandler(event:Event):void {
                              TweenLite.to(event.currentTarget, 0.5, {alpha: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});
                    //if an image fails to load properly, remove it from the slideshow completely including its thumbnail at the bottom.
                     function _imageFailHandler(event:LoaderEvent):void {
                              var slide:Slide;
                              var i:int = _slides.length;
                              while (--i > -1) {
                                        slide = _slides[i];
                                        if (event.target == slide.thumbnailLoader || event.target == slide.imageLoader) {
                                                  slide.dispose();
                                                  _slides.splice(i, 1);
                                                  _setupThumbnails();
                                                  return;