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