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

Report · Jul 27, 2012

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.thumbnail;
		_thumbnailsContainer.addChild(thumbnail);
		TweenLite.to(thumbnail, 0, {colorTransform:{brightness:0.5}});
		_slides.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});
		}

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

Report · Jul 29, 2012

that code is difficult to read.

Report · Jul 30, 2012

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.@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}),

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.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.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.thumbnail;

_thumbnailsContainer.addChild(thumbnail);

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

_slides.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;

if (event.target == slide.thumbnailLoader || event.target == slide.imageLoader) {

slide.dispose();

_slides.splice(i, 1);

_setupThumbnails();

return;

}

Report · Jul 30, 2012

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

Report · Jul 30, 2012

O.K. Here is the page I created on pastebin.com http://pastebin.com/YE2atzBw

Here is what I think is the troubled areas:

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.thumbnail;

_thumbnailsContainer.addChild(thumbnail);

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

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

}

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

Report · Jul 30, 2012

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.

Report · Jul 30, 2012

I tried your suggestion and plaid out with TweenLit.to() settings. But it did not work.

Eventhoug my x value has to be 0 by default it is still in the middle of the stage.

This is exactly my problem, that I don't understand how it happens that the value is at 0 and the thumbnails start to build up from the middle of the stage?

Report · Jul 30, 2012

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.

Report · Jul 30, 2012

You are awesome, I wasbraking my head on it for a while.

You lead me in the right direction to decipher my own mistakes.

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.

Thanks again!

Report · Jul 30, 2012

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

Adobe Community

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

1 Correct answer