Slideshow example with liquid area

[kiogo 0 Likes (Newbie)]

Hello, I am trying to modify your (excellent!) slideshow example so that the image scales to full screen, proportionalOutside. It seems to be working for vertical images, but horizontal images show red (area preview) at the top and bottom. Here's my code pertaining to the liquid area:

 

public var ls:LiquidStage;
public var area:LiquidArea;

public function SlideshowExample() {
		super();

		ls = new LiquidStage(this.stage, 980, 590, 980, 590);
		area = new LiquidArea(this, 0, 0, 980, 590);
		area.preview = true;

		this.addChildAt(_imagesContainer, 0);

		area.attach(_imagesContainer, {scaleMode:ScaleMode.PROPORTIONAL_OUTSIDE});
		area.update();

		var xmlLoader:XMLLoader = new XMLLoader("assets/data.xml", {onComplete:_xmlCompleteHandler});
		xmlLoader.load();

	}

	private 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  nodes with all the info we need.
		//loop through each  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("assets/images/" + image.@name + ".jpg", {name:image.@name + "Image", width:980, height:590, scaleMode:"proportionalOutside"}) 
									)
						);
		}
private function _requestSlide(slide:Slide):void {

		_curSlide = slide;
		_imagesContainer.addChild(_curSlide.image); //ensures the image is at the top of the stacking order inside the _imagesContainer
		area.update();
		TweenLite.to(_curSlide.image, 1, {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.
	}

 

For some reason, horizontal images seem to behave like "proportionalInside", because they scale to the left and right edge initially and on re-size, but not beyond to fill all the way vertically. I can see that the liquid area is filling the screen, but either _imagesContainer, or the attached images, are not expanding all the way.

 

Any advice is greatly appreciated. Thanks!

[GreenSock 6,948 Likes (Superhero)]

It sounds like you're doing the same thing described here:

viewtopic.php?f=6&t=6838

 

If you're going to put the ImageLoader's ContentDisplay into your LiquidArea, don't define a width/height on the ImageLoader. Otherwise you're using two different tools to do the scaling and they're conflicting with each other (read my response to the other post for more details)

[kiogo 0 Likes (Newbie)]

Thanks, on further experimenting, if I set the loaders like this, removing the width/height:

new ImageLoader("assets/images/" + image.@name + ".jpg", {name:image.@name + "Image", x:0, y:0, centerRegistration:true, scaleMode:"proportionalOutside", bgColor:0x000000, estimatedBytes:820000, onFail:_imageFailHandler}) 

Then the first image behaves perfectly, but the following images will still show a gap above and below, or to the left and right depending on their orientation.

 

Currently I'm calling area.update() after the slide has been added, but that seems to be updating just the container, and not the contents.

_curSlide = slide;
_imagesContainer.addChild(_curSlide.image); //ensures the image is at the top of the stacking order inside the _imagesContainer
area.update();
TweenLite.to(_curSlide.image, 1, {autoAlpha:1}); //fade the image in and make sure visible is true.

How do I get the slide within the _imagesContainer to update properly if the stage has been resized?

 

Thanks for any help.

[GreenSock 6,948 Likes (Superhero)]

It sounds like you're not attaching things correctly or maybe you're nesting things in an odd way - are all your images sharing the same parent as the LiquidArea instance? And you're attaching each one? When you update() the LiquidArea, it adjusts not only its size, but all of the objects that are attached to it too, so you shouldn't need to do anything else (as long as you're attaching things correctly).

[kiogo 0 Likes (Newbie)]

All slides would be a child of _imagesContainer, and that's what's been attached to the area. Do I need to re-attach _imagesContainer to area each time _imagesContainer.addChild(_curSlide.image); is called?

 

I've posted a download to the code example here.

 

http://www.kiogo.com/dev/slideshow-mod-nc.zip

 

If you could take a look and see where I'm going wrong I would really appreciate it.

 

Thanks for all your help on this.

[GreenSock 6,948 Likes (Superhero)]

Oh, right - that totally makes sense now - you're attaching the container rather than each individual image. The size of the container is dictated by its children. So imagine I put a 100x200 image in the container - the size of the container is now 100x200. But if I also put a 100x300 image in there, the size of the container is now 100x300! And if I then put a 50x50 image in there, the size is still 100x300. And of course if I move the 100x300 child 100 pixels to the right, the size of the parent is now 100x400 because it's always looking at the total dimensions of all of the children. Therefore, if you attach() the container to your LiquidArea, it'll fit according to the overall size which means only the biggest child will look right. See what I mean?

 

So the point is to attach() each child to the LiquidArea, DON'T attach() the container. Which of course means you'll need to put the LiquidArea in the same place (display list hierarchy-wise) as the images.

[kiogo 0 Likes (Newbie)]

I see what you mean, thanks for the explanation.

 

Is it possible to attach each child (slide) to area from the ImageLoader?

 

I tried this without any luck:

new ImageLoader("assets/images/" + image.@name + ".jpg", {name:image.@name + "Image", centerRegistration:true, scaleMode:"proportionalOutside", bgColor:0x000000, estimatedBytes:820000, onFail:_imageFailHandler, onComplete:_onCompleteHandler})

private function _onCompleteHandler(event:LoaderEvent):void{
    area.attach(event.target, {scaleMode:ScaleMode.PROPORTIONAL_OUTSIDE});
}

[GreenSock 6,948 Likes (Superhero)]

Sure. In your example, event.target refers to the ImageLoader itself, but you're not attaching the loader - you need to attach the loader's content. So it'd be event.target.content.

[kiogo 0 Likes (Newbie)]

Ok, thanks.

 

Now I'm having an issue with the display object parent - "Error: The parent of the DisplayObject agencynetImage added to AutoFitArea instance7 doesn't share the same parent."

 

So... if all of my imageloaders are being added to _imagesContainer with addChild(), do I need to change the liquidarea target?

public function SlideshowExample() {
		super();
		ls = new LiquidStage(this.stage, 980, 590, 980, 590);
		area = new LiquidArea(this, 0, 0, 980, 590);
		area.preview = true;

 

Thanks so much for your help!

[GreenSock 6,948 Likes (Superhero)]

Yep, they must share the same parent. Either don't use a container or put your LiquidArea into the container too.

[kiogo 0 Likes (Newbie)]

I'd like to keep the images within the container. When I specify that container for liquidArea, I still get the parenting error.

 

ls = new LiquidStage(this.stage, 980, 590, 980, 590);

_imagesContainer = new Sprite();
this.addChildAt(_imagesContainer, 0);

area = new LiquidArea(_imagesContainer, 0, 0, 980, 590);
area.preview = true;

private function _onCompleteHandler(event:LoaderEvent):void{
area.attach(event.target.content, {scaleMode:ScaleMode.PROPORTIONAL_OUTSIDE});
area.update();
}

_imagesContainer.addChild(_curSlide.image); //ensures the image is at the top of the stacking order inside the _imagesContainer
area.update();

[kiogo 0 Likes (Newbie)]

Ok, I figured out what my problem was, basically I was attaching the image loader before it was added to the stage. I removed the onComplete handler, set liquidArea to _imagesContainer and made sure the slide was on the stage before attaching it to area.

area = new LiquidArea(_imagesContainer, 0, 0, 980, 590);
_curSlide = slide;
_imagesContainer.addChild(_curSlide.image);
area.attach(_curSlide.image, {scaleMode:ScaleMode.PROPORTIONAL_OUTSIDE});
area.update();

Works perfect now. Thanks for all you help!