VideoLoader and LiquidStage

[bartpop]

I created a LiquidStage instance and attached a Sprite named "_videoContainer" to it. I then used VideoLoader to load a video file and used "container:_videoContainer" in the parameters. The video file is loading properly, but doesn't display until the stage is resized. If I attach the video to "container:this" instead the video shows up immediately, but isn't attached to the LiquidStage object.

 

I tried forcing an update of the LiquidStage instance using ls.update(), but that didn't have any effect.

 

Has anyone have any tips on how to attach the video to the LiquidStage object and have it display without requiring a window resize?

[GreenSock]

I'm not sure what was going on in your example (I'd love to see a sample FLA or code excerpt) but there's really no need to create a separate container. VideoLoader automatically (and immediately) creates a ContentDisplay Sprite into which it will load the video, so you can do this:

 

var loader:VideoLoader = new VideoLoader("video.flv", {width:400, height:300});
addChild(loader.content);
ls.attach(loader.content, ls.CENTER); //or whatever

 

That attaches the VideoLoader's ContentDisplay Sprite to LiquidStage right away. Feel free to load() the video anytime.

 

Make sense?

[bartpop]

Thanks for the quick response. Here's a snippet of my code, perhaps you can let me know where I'm going wrong:

 

private function initLiquidStage () :void {
ls = new LiquidStage(this.stage, 960, 570, 960, 570);
var area:LiquidArea = new LiquidArea(this, 0, 0, 960, 570);
	area.attach(_videoContainer, ScaleMode.PROPORTIONAL_OUTSIDE, AlignMode.LEFT, AlignMode.TOP);
}

private function initVideo () :void {
var _videoLoader:VideoLoader = new VideoLoader("testVideo.m4v", {name:"bgVideo", container:_videoContainer, width:960, height:570, scaleMode:"proportionalOutside", bgColor:0x000000, autoPlay:true, volume:0, requireWithRoot:this.root, estimatedBytes:1400000});
_videoLoader.load();
}

 

I'm calling initLiquidStage() first, followed by initVideo(). I'm trying to attach the video to a liquid area, but my technique seems to be flawed. Thanks for your assistance.

[bartpop]

I was able to get things working the way I had intended using the following code:

private function initLiquidStage () :void {
ls = new LiquidStage(this.stage, 960, 570, 960, 570);
}

private function initVideo () :void {
var _videoLoader:VideoLoader = new VideoLoader("testVideo.m4v", {name:"bgVideo", container:_videoContainer, width:960, height:570,bgColor:0x000000, autoPlay:true, volume:0, requireWithRoot:this.root, estimatedBytes:1400000});

var area:LiquidArea = new LiquidArea(this, 0, 0, 960, 570);
	area.attach(_videoContainer, ScaleMode.PROPORTIONAL_OUTSIDE, AlignMode.LEFT, AlignMode.TOP);

_videoLoader.load();
}

 

The difference from my previous method was that I attached the _videoContainer after instantiating the VideoLoader. I'm not sure why this makes a difference but it solved my problem.

[GreenSock]

Sounds like the issue with the previous code was that you were telling an empty object to scale/stretch inside the LiquidArea, so it's kinda like saying "scale this object to fill the area even though it has absolutely no width or height". Once you put the VideoLoader's content in there, it suddenly had an official width/height and could be stretched appropriately.

[bartpop]

Ah yes, that makes sense. It's through our mistakes we learn the most.

 

Thanks for the explanation.