Sign in to follow this  
plusproduit

Full screen image with LiquidStage

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 ! :D

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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 {...

Share this post


Link to post
Share on other sites

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

Please

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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.

Share this post


Link to post
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?

Share this post


Link to post
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;
}

Share this post


Link to post
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.

Share this post


Link to post
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
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.