Jump to content
Search Community

Full screen image with LiquidStage

plusproduit test
Moderator Tag

Recommended Posts

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;
}

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

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 {...

Link to comment
Share on other sites

  • 2 months later...

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;
}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 :P

 

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;
}

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...