fullbrowser image

[SyntaxMind]

Im stuck in a a design issue which may be handled through LoaderMax or not. I've been scripting an image gallery using XMLLoader only and using LiquidStage for scaling. The project has been a success except that some images on very large browsers cut the head off of my images. I'm wondering if there is something I could do with programming the XMLLoader vars or maybe just AS3 itself to fix. So this is for Greensock, programming, and design experts. The loading code I've used is below and the link to my test gallery is at - http://harden6615.com/site/index.html. IE is having problems with this so please view in another browser.

 

private function xmlLoader():void
	{
		LoaderMax.activate([imageLoader]);
		xml = new XMLLoader("assets/data.xml", new XMLLoaderVars()
												.name("loader")
												.estimatedBytes(600000)
												.onComplete(xmlLoaded)
												.onProgress(loadProgress));
		xml.load();
	}

	private function xmlLoaded(e:LoaderEvent):void
	{
		trace("Loaded");
		progressBar.visible = false;
		showImage(index);
		arrowListeners();
		timeline();
	}

	private function loadProgress(event:LoaderEvent):void
	{
		progressBar.visible = true;
		progressBar.scaleX = event.target.progress;
	}

	private function showImage(index:int):void

	{
		la = new LiquidArea(imgHolder, 0, 0, 1024, 768);

		images = LoaderMax.getContent("loader"); 

		imgHolder.addChild(images[index]);

		TweenMax.from(images[index], 1, {alpha:0});
		la.attach(images[index], {scaleMode:ScaleMode.PROPORTIONAL_OUTSIDE, crop:true});
		la.update();
	}

	// BUTTON FUNCTIONS
	private function arrowListeners():void
	{
		arrowRight.addEventListener(MouseEvent.ROLL_OVER, overRight, false, 0, true);
		arrowRight.addEventListener(MouseEvent.ROLL_OUT, outRight, false, 0, true);
		arrowRight.addEventListener( MouseEvent.CLICK, showNext );
		arrowLeft.addEventListener(MouseEvent.ROLL_OVER, overLeft, false, 0, true);
		arrowLeft.addEventListener(MouseEvent.ROLL_OUT, outLeft, false, 0, true);
		arrowLeft.addEventListener( MouseEvent.CLICK, showPrev );
	}

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

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

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

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

	// CLICK LISTENERS
	private function showNext( e:MouseEvent ):void
	{
		index++
		if (index > images.length - 1) 
		{
			index = 0;
		}

		showImage(index);
	}

	private function showPrev( e:MouseEvent ):void
	{
		index--
		if (index < 0) 
		{
			index = images.length - 1;
		}
		showImage(index);
	}

}

}

[GreenSock]

It looks to me like you forgot to create your LiquidStage instance. That should be done BEFORE you create any LiquidArea instances. Otherwise, there's no reference point to know how big the original stage size was.

 

Oh, and if you're using the scaleMode "PROPORTIONAL_OUTSIDE", it would be totally normal for parts of the image to be cut off in order to stretch it proportionally to completely fill the area. Like if the screen is landscape but the image is portrait, it would slice off the top and bottom. Maybe you meant to use "PROPORTIONAL_INSIDE"?

[SyntaxMind]

I have the LiquidStage in another method that is not shown. The code is broken into a timeline. But it is there. And thanks the proportional inside helps the cut off, but now the landscape is cut is slim on the sides. Can I control the XMLLoader or the attach() method with some type of if statement that would change if landscape or not?

[Carl]

you can detect if the image is landscape by checking if the width is greater than the height.

 

perhaps something like this is what you are looking for:

 

viewtopic.php?f=6&t=4481&p=17878&hilit=content.scaleMode#p17879

[SyntaxMind]

Thanks I think this helps in the long run as it allows me to not have to photoshop images that are not landscape but for my case, the image that is not landscape doesnt cut off anymore but the landscaped image is still getting its head cut off because of the proportional outside. I haven't updated my test link so if you go into my test, you will see that even the landscape get its head cut off. I believe this would be a design or photography issue, but Im not totally sure. When tackling this, I didn't think the proportional_outside would be so drastic.

[GreenSock]

I didn't think the proportional_outside would be so drastic.

I'm not quite sure what you mean by this - there isn't really a degree of proportional_outside-ness. It either is or isn't. Either it fills the screen in both directions proportionally (only as much as it needs to in order to fill) or it fits it proportionally into the area. See what I mean? Is there some reason you aren't using PROPORTIONAL_INSIDE? It sounds like that's what you are wanting.

 

Do you want the images to fill the entire area proportionally without any gaps whatsoever (PROPORTIONAL_OUTSIDE) which means parts of the image might spill over the edge based on the aspect ratio of the screen vs. the image or do you want to fit the image into the area such that nothing spills off the edge but you might get gaps on the sides or top/bottom (again, based on the aspect ratio of the screen vs. the image)? There's not really an inbetween

[SyntaxMind]

No Im not saying that there is a degree to the proportional outside. Im just saying that on larger monitor screens the image that has the proportional outside cuts off the chunk of the image that I need shown. In this case the models head is close to the top of the image and in turn gets cut off. I am now working on cropping the image better in photoshop that will at least be decent enough. Trial and error. Thank you tips helped me find a solution.