Sign in to follow this  
chefkeifer

liquidStage

Recommended Posts

I am trying to do an online magazine. i made my layout in inDesign CS5 and exported it out to a swf. I have some code that imports the swf into my flash file. The problem i am having is that its too big for most browsers. right now i have my flash file setup as 1525x850 to fit the exported (inDesign) swf. I want to be able to scale if someones monitors size or browser size it smaller. How do i go about this ?

 

i am using this code and i keep getting a coercion error

 

import com.greensock.layout.*;  

//create a LiquidStage instance for the current stage which was built at an original size of 550x400
//don't allow the stage to collapse smaller than 550x400 either. 
var ls:LiquidStage = new LiquidStage(this.stage, 625, 400, 625, 400);   
//attach a "logo" Sprite to the BOTTOM_RIGHT PinPoint 
ls.attach(logo, ls.BOTTOM_RIGHT);  
//create a 300x100 rectangular area at x:50, y:70 that stretches when the stage resizes (as though its top left and bottom right corners are pinned to their corresponding PinPoints on the stage) 
var area:LiquidArea = new LiquidArea(this, 50, 70, 300, 100);   
//attach a "myImage" Sprite to the area and set its ScaleMode to PROPORTIONAL_OUTSIDE and crop the overspill
area.attach(myImage, {scaleMode:ScaleMode.PROPORTIONAL_OUTSIDE, crop:true});  
//if you'd like to preview the area visually (by default previewColor is red), set preview to true 
area.preview = true;  
//attach a RESIZE event listener to the LiquidStage instance (you could do this with the LiquidArea as well)
ls.addEventListener(Event.RESIZE, onLiquidStageUpdate);

function onLiquidStageUpdate(event:Event):void {    
trace("updated LiquidStage");
} 

Share this post


Link to post
Share on other sites

also, is it better to make my whole project small with higher quality images and when it expands doesnt lose quality. or do i make it big and then have it scale down. I am at a loss fo where to start, even though i am almost done...lol

Share this post


Link to post
Share on other sites

You're kinda new to ActionScript, right?

 

As far as making things big and shrinking them down or making them small and scaling them up, it all depends on your priorities. Making things big and scaling down will generally make the images sharper and more detailed but the trade-off is file size. If you want a file that loads super fast, then go the other way.

 

How are you loading your swf? I didn't see any of that code in your post.

 

Your code looked like it was just copied/pasted out of somewhere (probably on my site) but it wasn't altered to fit your file at all (your stage size was wrong, the code assumes you have a "logo" and "myImage" instance on the stage, etc.)

 

If you're super new to ActionScript and you're in a rush to get the project done, you might want to hire a developer to knock this out for you. Just an idea.

Share this post


Link to post
Share on other sites

not that new to AS but still learning. i am very new to the liquid stage part.

 

i am using your loadSWF to load the swf which is in side of a movie clip. i have actaully started over since i posted this.

 

and yes that code was copied and pasted. i use the example and was going to learn from it and tweak it.

 

here is what i came up with when i started over.

 

i still get that coersion error

 

 

i have attached a fla

Share this post


Link to post
Share on other sites

I'm not sure what error you were getting, but I reworked your FLA so that it works the way I think you wanted it to. At least it should serve as a good starting point.

 

You are a "Shockingly Green" or corporate Club GreenSock member, right? That's required to gain access to LiquidStage (maybe that's why you were getting errors).

Share this post


Link to post
Share on other sites

I am Shockingly Green. i renewed the other day. I appreciate your help...

Share this post


Link to post
Share on other sites

i tested the file you sent and i still get that coercion error

 

Scene 1, Layer 'Layer 1', Frame 1, Line 14	1118: Implicit coercion of a value with static type Object to a possibly unrelated type String.
Scene 1, Layer 'Layer 1', Frame 1, Line 35	1118: Implicit coercion of a value with static type Object to a possibly unrelated type String.

 

i know i have the latest version because i just renewed jsut the other day. What could be the issue?

Share this post


Link to post
Share on other sites

Nope, I'm almost POSITIVE you have a stale version of AutoFitArea and LiquidArea. Please log into your GreenSock account and download the latest zip at https://www.greensock.com/account/

 

I'm able to publish that file with no errors whatsoever. Based on the error message you mentioned, it definitely points to you having a stale version (the newer version accepts a generic vars object as the 2nd parameter of attach() and createAround(), but the old version required a String).

Share this post


Link to post
Share on other sites

thanks again Jack...i kept pulling from the wrong com folder...I will get this...

 

one last question ...in this code what does the 400,400 refer too

i know that the 800,800 is the width and height of my stage but not sure what the other is refering too

var ls:LiquidStage = new LiquidStage(this.stage, 800, 800, 400, 400);   

 

also in this code

i know that the 0,60 is the x and y coordinates for the magLoader but not sure what the 800,700 is refering too

var magArea:LiquidArea = new LiquidArea(this, 0, 60, 800, 700);

 

thanks again

Share this post


Link to post
Share on other sites
one last question ...in this code what does the 400,400 refer too

i know that the 800,800 is the width and height of my stage but not sure what the other is refering too

var ls:LiquidStage = new LiquidStage(this.stage, 800, 800, 400, 400);   

That's just the minimum width and height that we allow the stage to go. You can make that whatever you want. I chose half size, that's all.

 

i know that the 0,60 is the x and y coordinates for the magLoader but not sure what the 800,700 is refering too

var magArea:LiquidArea = new LiquidArea(this, 0, 60, 800, 700);

That's the width and height of the LiquidArea. It's defining the area as being 800 pixels wide and 700 pixels tall. That's when the stage is at its native size (800x800 in your case) but of course when it gets resized by the user, it'll adjust accordingly.

 

All of this info is in the ASDocs. http://www.greensock.com/as/docs/tween/ ... stage.html

Share this post


Link to post
Share on other sites

thanks again for you help and i have done my research and have come up with another issue...or course...thats me..ask my wife..just kidding...all works just fine except for when you the user goes to the page initianally...it acts a bit wierd...it uploads very huge...here is the link to see what i am talking about..

http://

http://www.worldkarting.com/online.maga ... .scene.php

 

but if you minimize it all works just fine...as well when yo maximize again..it works just fine...its just when you first go to the site...not sure what the issue could be...i thought you could still have some insight...this is the code i have been using and learning from

 

import com.greensock.layout.*;  
import flash.display.StageAlign;
import com.greensock.*;
import com.greensock.loading.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.*;  

this.stage.align = StageAlign.TOP_LEFT;

var ls:LiquidStage = new LiquidStage(this.stage, 1024, 853, 100, 100);   


var topArea:LiquidArea = LiquidArea.createAround(topBar_mc, {scaleMode:ScaleMode.WIDTH_ONLY});
topArea.pinCorners(ls.TOP_LEFT, ls.TOP_RIGHT);

ls.attach(logo, ls.BOTTOM_RIGHT); 
ls.attach(archives, ls.TOP_LEFT); 

var magArea:LiquidArea = new LiquidArea(this, 150, 60, 1024, 700);

var magLoader:SWFLoader = new SWFLoader("01.2011.karting.scene.swf", {name:"kartingScene", container:this, alpha:0, onProgress:progressHandler, onError:errorHandler, onComplete:completeHandler, onInit:onMagLoaded});
magLoader.load();

function progressHandler(event:LoaderEvent):void {    
trace("progress: " + event.target.progress); 
}   

function completeHandler(event:LoaderEvent):void {   
trace(event.target + " is complete!"); 
}   

function errorHandler(event:LoaderEvent):void {    
trace("error occured with " + event.target + ": " + event.text); 
}

function onMagLoaded(event:LoaderEvent):void {
magArea.attach(magLoader.content, {scaleMode:ScaleMode.PROPORTIONAL_INSIDE});
TweenLite.to(magLoader.content, 1, {alpha:1});
TweenMax.to(magLoader.content, 1, {dropShadowFilter:{color:0x000000, alpha:1, blurX:12, blurY:12}});
}

Share this post


Link to post
Share on other sites

When I go to that link, I just see a textured background (regardless of how many times I resize the browser). Not exactly sure what I'm supposed to be looking for. Feel free to post a sample FLA that clearly demonstrates the issue and I'd be happy to take a peek.

Share this post


Link to post
Share on other sites

i guess the reason you didnt see anything is that your probably using mozilla. for some reason that is the only browser nothing shows up in. Not sure why. anyway here is my fla.

Share this post


Link to post
Share on other sites

Well, you didn't include your subloading file or the wrapper HTML/js, so I wasn't able to reproduce the problem. Seemed to load fine for me (using a spare swf I had) although I'm not sure why you offset the x position of the LiquidArea by 150 pixels on the x-axis, but you're welcome to do that.

 

If you still need help, please include ALL files necessary to reproduce the issue and provide detailed steps that I must follow to see the problem.

Share this post


Link to post
Share on other sites

the reason i didnt upload the subloading file is because its 20megs...but i changed the file location to point to the url.

 

here is my html. pretty plain and simple

 

thanks for you help.

Share this post


Link to post
Share on other sites
the reason i didnt upload the subloading file is because its 20megs...but i changed the file location to point to the url.

No, I don't think you did - I just re-downloaded the file and it doesn't point to a valid file anywhere.

 

If you still need help, please upload an entire directory with everything I'd need to just open, publish, and see the problem reproduced. Please don't post PHP files either - just HTML/CSS/Javascript/SWF/FLA files please. Zip your files and just post them on your web site or something. Do not include the LiquidStage/GreenSock classes, though. Just everything else.

Share this post


Link to post
Share on other sites

The problem wasn't related to LiquidStage or LiquidArea - it was how you were embedding it in your HTML file. I've attached a working file that uses SWFObject.

 

It also appears as though your swf has some assets that load after the first frame and change the size, so I used TweenLite.delayedCall() to force a call to the LiquidArea's update() method shortly after the SWFLoader inits. You might also want to built your child swf so that it has a plain MovieClip with just a rectangle indicating the area that you'd like to use as the bounds for the swf when LiquidArea fits it inside of itself. Otherwise, if you have stuff off the edge of the stage in the child swf, those things still get included when bounds are determined (Flash forces that - it's not a LiquidArea problem). See the docs for the "customBoundsTarget" special property that you can optionally pass in for that.

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.