Full screen image with LiquidStage

[plusproduit 0 Likes (Newbie)]

Hi,

Congratulations for your excellent coding!

 

I'm new to Liquidstage/liquidWrapper and I'm having issues.

What I want to do is this: http://www.madaktari.org/ A centered image that always resizes according to the biggest side of the stage.

Is it possible with Liquidstage/liquidWrapper?

 

Thanks

[GreenSock 18,251 Likes (Superhero)]

No, LiquidStage is more for pinning objects to certain relative positions, but the example you gave uses a different algorithm to proportionally stretch and center the image. You should be able to do it with code like this though:

 

var imageRatio:Number = this.image_mc.width / this.image_mc.height;

this.stage.addEventListener(Event.RESIZE, updateBackground);
function updateBackground(event:Event):void {
var sw:Number = this.stage.stageWidth;
var sh:Number = this.stage.stageHeight;
var offset:Point = getStageOffset();
var stageRatio:Number = sw / sh;
if (stageRatio >= imageRatio) {
	this.image_mc.width = sw;
	this.image_mc.height = this.image_mc.width / imageRatio;
} else {
	this.image_mc.height = sh;
	this.image_mc.width = this.image_mc.height * imageRatio;
}
this.image_mc.x = offset.x + (sw - this.image_mc.width) * 0.5;
this.image_mc.y = offset.y + (sh - this.image_mc.height) * 0.5;
}

function getStageOffset():Point {
var sw:Number = this.stage.stageWidth;
var sh:Number = this.stage.stageHeight;
var baseWidth:Number = this.root.loaderInfo.width;
var baseHeight:Number = this.root.loaderInfo.height;
var align:String = this.stage.align;
var p:Point = new Point(0,0);
if (align == "" || align == StageAlign.TOP || align == StageAlign.BOTTOM) {
	p.x = (baseWidth - sw) * 0.5;
} else if (align == StageAlign.RIGHT || align == StageAlign.TOP_RIGHT || align == StageAlign.BOTTOM_RIGHT) {
	p.x = (baseWidth - sw);
}
if (align == "" || align == StageAlign.LEFT || align == StageAlign.RIGHT) {
	p.y = (baseHeight - sh) * 0.5;
} else if (align == StageAlign.BOTTOM || align == StageAlign.BOTTOM_LEFT || align == StageAlign.BOTTOM_RIGHT) {
	p.y = (baseHeight - sh);
}
return p;
}

[plusproduit 0 Likes (Newbie)]

Wow! thanks a lot for the time you spent on that, I really appreciate!

 

I'll try that tomorrow morning, it looks much cleaner than everything I would have done... It even handles all the stage.align's !

[GreenSock 18,251 Likes (Superhero)]

I aim to please

[okdoable 0 Likes (Newbie)]

Many thanks for the stage example.. I am new to flash and now I am getting hooked to tweenlite. Can you please help me set the code to show the image as soon as the windown isopened, and then the resuize function will kick in after user resizes the webpage.

 

THe only way I am able to see the image now is when I resize.

 

Thanks

Fred

[GreenSock 18,251 Likes (Superhero)]

Can you please help me set the code to show the image as soon as the windown isopened, and then the resuize function will kick in after user resizes the webpage. The only way I am able to see the image now is when I resize.

 

Just call the updateBackground() function immediately, although you'll need to set the default event parameter to null, like: function updateBackground(event:Event=null):void {...

[aliennoise 0 Likes (Newbie)]

How do you execute a updateBacground function without getting Error #2099: The loading object is not sufficiently loaded to provide this information?

Please

[GreenSock 18,251 Likes (Superhero)]

You could just use a Boolean flag like imageLoaded or something that gets set to true after it's loaded (listen for the COMPLETE event of your loader) and then use that in conditional logic inside your updateBackground() method, like:

 

if (!imageLoaded) {
   return;
}

[brantseibert 0 Likes (Newbie)]

Hi Jack,

 

Can we create a full screen website, with a background image that resizes, using only Greensock code? http://www.greensock.com/liquidstage/ That pages says: "...Or add a background image that proportionally scales to fill the entire stage." If yes, please post a sample.

 

Is the code at the top of this thread old and now replaced by new LiquidStage code?

 

Thanks.

[GreenSock 18,251 Likes (Superhero)]

Is the code at the top of this thread old and now replaced by new LiquidStage code?

 

Yes indeed - I reworked LiquidStage in order to easily accommodate this request in the most recent version. So yes, the new LiquidArea class makes it easy to create a background image that proportionally scales as the stage resizes. There's an interactive example that even writes the sample code at the bottom at http://www.greensock.com/liquidstage/ (click on the "CLICK FOR DEMO" image).

 

The code would look like:

 

var ls:LiquidStage = new LiquidStage(this.stage, 550, 400, 550, 400);
var area:LiquidArea = new LiquidArea(this, 0, 0, 550, 400);
area.attach(myBackgroundImage, ScaleMode.PROPORTIONAL_OUTSIDE);

 

Does that answer your question?

[aliennoise 0 Likes (Newbie)]

Thank you for a quick response. Please, could you be more specific of where i should use the conditional if statement, I'm pretty new to AS3 and Flash in general. Im not asking for a tutorial, but i must say that the last video you did, made a lot of things much clearer regarding flash and GreenSock classes. Unfortunately i am still picking peaces together. And "Idiot proof Tut ver. 2.0" with Liquid Stage and some other classes seen trough your interpretation would be greatly appreciated

 

You could just use a Boolean flag like imageLoaded or something that gets set to true after it's loaded (listen for the COMPLETE event of your loader) and then use that in conditional logic inside your updateBackground() method, like:

 

var imageRatio:Number = this.bacgroundPic.width / this.bacgroundPic.height;

this.stage.addEventListener(Event.RESIZE, updateBackground);

this.stage.addEventListener(Event.RESIZE, updateBackground);
function updateBackground(event:Event):void {
  var sw:Number = this.stage.stageWidth;
  var sh:Number = this.stage.stageHeight;
  var offset:Point = getStageOffset();
  var stageRatio:Number = sw / sh;
  if (stageRatio >= imageRatio) {
     this.bacgroundPic.width = sw;
     this.bacgroundPic.height = this.bacgroundPic.width / imageRatio;
  } else {
     this.bacgroundPic.height = sh;
     this.bacgroundPic.width = this.image_mc.height * imageRatio;
  }
  this.bacgroundPic.x = offset.x + (sw - this.bacgroundPic.width) * 0.5;
  this.bacgroundPic.y = offset.y + (sh - this.bacgroundPic.height) * 0.5;
}

 

if (!imageLoaded) {
   return;
}

[brantseibert 0 Likes (Newbie)]

Bingo!

 

I added the import statement and used swfobject in the html file.

 

import com.greensock.layout.*;

var ls:LiquidStage = new LiquidStage(this.stage, 1000, 600, 1000, 600);

var area:LiquidArea = new LiquidArea(this, 0, 0, 1000, 600);

area.attach(activeMC, ScaleMode.PROPORTIONAL_OUTSIDE);

 

Thanks.