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.

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()

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

//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.

//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.

_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.

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()

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.

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.

It all works now. Just in case you are curious what were the problems here they are:

1:

const _IMAGE_WIDTH:Number = 1024;//image width is essential in proper calculation of the stop point for the thumbnails scroll on the right. Has to match the stage

for some reason the thumbnail row will move to the number assossiated with _IMAGE_WIDTH which has to match the stage

2: In the function of creating New ImageLoader and New SWFLoader I specified:

//centerRegistration:true,//messes up the code as places SWFLoader in the upper left corner which is 0,0 coordinates

I had to resolve to specifying x and y as individual numbers

3:I wanted to position my thumb row in centered bu code is done in the way that it starts from left and only reveals the hidden right. Only when it scrolled to the left (by revealing hidden right) it can scroll back.

I would want to make it in the center and figure out why it is tied up to the _IMAGE_WIDTH that now I will have to change all my loading SWF's but I suppose all in due time, when I gain more expertise.