scroll problem

[SyntaxMind]

Leaning LoaderMax has really come along. I've hit a brick wall on something that really doesn't have to do with greensock, but works with it and its the thumbnail scroll. So I'm hoping maybe Jack or Carl or someone with better math skills than I to chime in.

 

If you look at my code. I am trying to create an app similar to the slideshow Jack posted on greensock resources. My scroll sometimes scrolls before I get in the scrollarea and also the thumbnails scroll well passed the stage bounds which kind of reveals the right end of the last thumbnail and some blank area. Someone please look at my enterFrame and loadThumbs functions and get me on the right track. Thanks.

 

package 
{


import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

import com.greensock.TweenMax;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.XMLLoader;
import com.greensock.loading.LoaderMax;
import com.greensock.loading.ImageLoader;
import com.greensock.loading.data.ImageLoaderVars;
import com.greensock.loading.display.ContentDisplay;


public class Main extends MovieClip
{
	private static const THUMB_WIDTH:Number = 100;
	private static const THUMB_HEIGHT:Number = 64;
	private static const IMAGE_WIDTH:Number = 550;
	private static const IMAGE_HEIGHT:Number = 355;
	private static const THUMB_GAP:Number = 4;
	private static const SCROLL_SPEED:Number = 12;
	private static const SCROLL_AREA:Number = 100;

	public var arrowRight:MovieClip;
	public var arrowLeft:MovieClip;

     private var xImgList:XMLList;
	private var currentImage:String;
	private var image:ImageLoader;
	private var index:Number = 0;

	private var destScrollX:Number = 0;
	private var minScrollX:Number;

	public function Main()
	{



		// load in xml
		var xPhotography:XMLLoader = new XMLLoader("assets/data.xml");
		xPhotography.addEventListener( LoaderEvent.COMPLETE, xmlLoaded );
		xPhotography.load();

		arrowRight.alpha = arrowLeft.alpha = 0;
		arrowRight.addEventListener(MouseEvent.ROLL_OVER, rollOverArrowHandler, false, 0, true);
		arrowRight.addEventListener(MouseEvent.ROLL_OUT, rollOutArrowHandler, false, 0, true);
		arrowRight.addEventListener( MouseEvent.CLICK, onArrowClick );
		arrowLeft.addEventListener(MouseEvent.ROLL_OVER, rollOverArrowHandler, false, 0, true);
		arrowLeft.addEventListener(MouseEvent.ROLL_OUT, rollOutArrowHandler, false, 0, true);
		arrowLeft.addEventListener( MouseEvent.CLICK, onArrowClick );

	}

	private function xmlLoaded( e:LoaderEvent ):void
	{

		var xData:XML = e.target.content;// get copy of xml
		xImgList = new XMLList(xData.image);// grabbing xml image nodes

		loadImage( 0 );
		loadThumbs();


	}

	private function completeHandler(event:LoaderEvent):void
	{
		TweenMax.to(event.target.content, 1.5, {alpha:1});
	}

	// load in the image
	private function loadImage( index: Number ):void
	{

		var file:String = xImgList[index]. @ url;

		var image:ImageLoader = new ImageLoader("assets/images/" + file, new ImageLoaderVars()
		.container( imgContainer )
		.x(0)
		.y(0)
		.alpha( 0 )
		.width( IMAGE_WIDTH )
		.height( IMAGE_HEIGHT )
		.prop( "index", index )
		.prop( "url", xImgList[index].@url)
		.prop( "title", xImgList[index].@title)
		.prop( "desc", xImgList[index].@desc)
		.onComplete(completeHandler)
		 );

		image.load();
	}

	private function loadThumbs():void
	{

		var thumbsLoader:LoaderMax = new LoaderMax({name:"thumbLoader"});
		thumbsLoader.addEventListener( LoaderEvent.COMPLETE, thumbsLoaded );

		// set up variables for imageloadervars
		var curX:Number = THUMB_GAP;

		for (var i:int = 0; i < xImgList.length(); i++)
		{
			var iLoad:ImageLoader = new ImageLoader( "assets/thumbnails/" + xImgList[i].@url, new ImageLoaderVars()
			.name( xImgList[i].@name )
			.width( THUMB_WIDTH )
			.height( THUMB_HEIGHT )
			.x( curX )
			.smoothing( true )
			.container( thbContainer )
			.scaleMode( "proportionalOutside" )
			.crop( true )
			.alpha( 0 )

			// prop stores xml data to be used for click
			.prop( "index", i )
			.prop( "url", xImgList[i].@url)
			.prop( "title", xImgList[i].@title)
			.prop( "desc", xImgList[i].@desc)
			);


			thumbsLoader.append( iLoad );
           curX += THUMB_WIDTH + THUMB_GAP;
		}

		var minScrollX = IMAGE_WIDTH - curX;
		if (minScrollX > 0) {
			minScrollX = 0;
		}
          thumbsLoader.load();
	}

	private function thumbsLoaded( e:LoaderEvent ):void
	{
		// set up click events for thumbnails
		for (var i:int = 0; i < xImgList.length(); i++)
		{

			// reference loaded content display, then supply a name( "p" ) or url + 
			// (i + 1) because i stars with 0.
			var cdImg:ContentDisplay = LoaderMax.getContent( "agencynet" + (i + 1) );
			cdImg.buttonMode = true;

			cdImg.addEventListener( MouseEvent.CLICK, thumbClick );
			TweenMax.to( cdImg, 1, { autoAlpha: 1}  );
		}

		this.stage.addEventListener(Event.ENTER_FRAME, enterFrameHandler, false, 0, true);
	}

	private function thumbClick( e:MouseEvent ):void
	{

		// access prop with vars object
		var vars:Object = ImageLoader(e.currentTarget.loader).vars;
		trace( vars.url );

		checkOldImage( vars.index );// good practice for tweening image if it is already on stage
	}

	// click handler for arrows
	private function onArrowClick( e:MouseEvent ):void
	{


		switch (e.target)
		{
			case arrowRight :
				index++;
				break;
			case arrowLeft :
				index--;
				break;
		}

		if (index == xImgList.length())
		{
			index = 0;
		} else if (index < 0)
		{
			index = xImgList.length() - 1;
		}

		checkOldImage( index );// needed to help loading times

	}

	private function checkOldImage( index:Number ):void
	{

		//check if there is already an image loaded
		if ( imgContainer.numChildren > 0 ) 
		{
			var oldClip:Sprite = Sprite( imgContainer.getChildAt( 0 ) );
			TweenMax.to( oldClip, .5, { autoAlpha: 0, onComplete: function() {
						imgContainer.removeChildAt( 0 ); loadImage( index ) }
						} );
		} else
		{
			loadImage( index );
		}
	}

	private function rollOverArrowHandler(e:MouseEvent):void
	{
		TweenMax.to(e.currentTarget, 0.5, {alpha:1});
	}

	private function rollOutArrowHandler(e:MouseEvent):void
	{
		TweenMax.to(e.currentTarget, 0.5, {alpha:0});
	}

	private function enterFrameHandler(event:Event):void {
		if (thbContainer.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) {
					destScrollX = 0;
				}
				TweenMax.to(thbContainer, 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;
				}
				TweenMax.to(thbContainer, 0.5, {x:destScrollX});
			}
		}
	}

}

}

[SyntaxMind]

Ok I figured out the problem with the thumbnails scrolling too far. I needed to put the minScroll statement before the load, which I will update for anyone to see, but the scroll still seems to start before I get to the scroll area so hopefully I can figure it out and if anyone can help please fill me in. I'll keep this thread open until its solved. Thanks

[GreenSock]

Are you saying that inside your enterFrameHandler(), it is evaluating the following statement as true incorrectly?:

thbContainer.hitTestPoint(this.stage.mouseX, this.stage.mouseY, false)

Have you put a trace() in there to find out?

[SyntaxMind]

Have you put a trace() in there to find out?

 

Yea I put trace( this.mouseX ) after the if statements and at first no value when outside the area but on the second test movie I get random values before I enter the area. So I think somehow it is evaluating the following statement to true but dont understand how?

[GreenSock]

If you're getting random values (which I assume you mean don't correspond to the reality of where your mouse is), then the problem must be some bug with the Flash Player - you'd need to chase down Adobe to get a resolution on that unfortunately. I don't recall ever hearing about bugs in reporting the mouseX/mouseY. Maybe you've got a bad install. Tough to say.

 

I suppose a hack would be to put a Sprite over the top of that area, make its alpha 0, and then wait for a ROLL_OVER event on it to start your ENTER_FRAME listener. Then remove the Sprite and you're done. The whole point is to just keep it from doing anything until the mouse is over the top of that area.

[SyntaxMind]

Thing is it works fine when I test yours but mine has problems with the same code it seems. So not sure. I will try the hack method. Thanks.