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!