Alignment Problem

[uwe]

Hello,
I am using the Scroller with direction set to "horizontal".
I need the scroller to display the thumbnails aligned to the left for one content and aligned to the right when another content has been selected.
How can I influence the alignment of the thumbnails to left or right?

As my swf is displayed with 100% I use
myScroller.setSize(stage.stageWidth-40,60);
(The scroller's width is stage width - 40 with x=20, so it is centered with a 20 pixel horizontal distance.)

For some reason it is quite unpredictable how the thumbnails layout will react. Can you help?
Here is the entire code:

function initThumbnailScroller():void {
myScroller = new ThumbnailScroller();

myScroller.itemHeight=60;
//myScroller.itemWidth=60;
myScroller.mouseScroll=false;
myScroller.mouseScrollSpeed=3;
myScroller.preloaderFillAlpha=0.25;
myScroller.preloaderFillColor=0xA9AAAC;
myScroller.preloaderLineAlpha=0;
myScroller.preloaderLineColor=0xffffff;
myScroller.preloaderSize=8;
myScroller.preloaderType="pie";
myScroller.reflection=false;
myScroller.scaleMode="maintainAspectRatio";
myScroller.scrollAmount=200;
myScroller.scrollDuration=1;
myScroller.scrollEasing="quadraticInOut";
myScroller.selectOver=1;
myScroller.space=10;
myScroller.temporaryClipAlpha=0;
myScroller.temporaryClipColor=0xCCCCCC;
myScroller.useCacheAsBitmap=true;
myScroller.verticalAlign="top";
myScroller.direction="horizontal";
myScroller.effect=scrollerEffect;
myScroller.setSize(sW-40,60);
if (tempTopic=="content_1") {
myScroller.move(20,scrollerY);
myScroller.selectedAlign="right";
} else {
myScroller.move(20,scrollerY);
myScroller.selectedAlign="left";
}

stage.addEventListener(KeyboardEvent.KEY_UP, keyPressed);
myScroller.addEventListener(ScrollerEvent.ITEM_CLICK, itemClickHandler);

myScroller.addEventListener(ScrollerEvent.ITEM_SELECTED, eventHandler);
myScroller.addEventListener(ScrollerEvent.ITEM_COMPLETE, itemCompleteHandler);
myScroller.addEventListener(ScrollerEvent.ITEM_COMPLETE, firstItemLoaded);
myScroller.addEventListener(ScrollerEvent.ITEMS_LOAD_COMPLETE, AllItemsLoaded);

addChild(myScroller);
}

[David]

Hi,

Please see if this topic helps: viewtopic.php?f=3&t=14.
Simply said, you just set the scroller's width to fit the exact number of images and then you align the entire scroller to the left or to the right.

[uwe]

Well, this would be the solution if my thumbnails would have a constant width.
However, they differ in width...

How can I access the individual item width?

[David]

There is an undocumented property that allows you to do that: getDisplayItemAt(index)

ex: myScroller.getDisplayItemAt(event.index).width

[uwe]

Thanks David!
I love undocumented properties ...

Perhaps someone has the same problem, here is my code:

myScroller.addEventListener(ScrollerEvent.ITEM_COMPLETE, itemCompleteHandler);
var scrollerW:Number;
var scrollerY:Number=stage.stageHeight-100;

function itemCompleteHandler(event:ScrollerEvent):void {
scrollerW += myScroller.getDisplayItemAt(event.index).width;
if(event.index<myScroller.numItems-1){
scrollerW += myScroller.space;
}

myScroller.width=scrollerW;

if (tempAlign=="left") {
myScroller.move(20,scrollerY);
} else {
myScroller.move((stage.stageWidth-myScroller.width-20),scrollerY);
}
}

I have used ITEM_COMPLETE as the right width of the item is only returned when the item has been loaded.
Regards,
Uwe