AutoFitArea

[joakimhoegset]

Hi Jack,

I am having problems getting the AutoFitArea to work with resizing the stage. I have set the calculateVisible to true but it's not working. Probably a simple solution. Can you please have a look?

 

import com.greensock.layout.*;

var area:AutoFitArea = new AutoFitArea(this, 0, 0, 777, 429);

area.attach(mc, ScaleMode.PROPORTIONAL_OUTSIDE, AlignMode.CENTER, AlignMode.CENTER, true, 0, 999999999, 0, 999999999, true);

area.preview = true;

 

I have all the content inside a mc called mc.

 

What am I doing wrong?

 

Thx,

 

Joakim

[GreenSock]

I don't see any obvious mistakes - could you post a simple example FLA that demonstrates the issue?

[joakimhoegset]

I am attaching two FLA for you. Thx for having a look.

 

JOAKIM

 

Arkiv.zip

[GreenSock]

Oh, you're subloading content and not calling update() on the AutoFitArea. It does NOT continuously monitor the size of your object and adjust it accordingly. It updates when you attach() the object and when you resize the AutoFitArea. If it were to continuously monitor the size of your attached object, that would be very wasteful in terms of processing (it would require a lot more CPU power). You need to manually call update() if your content changes size.

 

Does that clear things up?

[joakimhoegset]

hmm not quite sure what you mean. Do I add a function onComplete on each load and tween that calls update on... Can you give me an example?

 

Joakim

[GreenSock]

Anytime you change the size of the object, call update() on the AutoFitArea. So yes, after your load is complete and you addChild() the content inside the attached Sprite/MovieClip, make sure you call your AutoFitArea's update() method. And if you're tweening something that would affect the size, use an onUpdate callback to call the AutoFitArea's update() method.

 

function onCompleteLoad(event:Event):void {
   addChild(loader.content);
   myAutoFitArea.update();
}

TweenLite.to(myObject.child, 1, {width:1000, onUpdate:myAutoFitArea.update});

[joakimhoegset]

Hi again,

I have tried the following to get the autoFilArea to work.

 

import com.greensock.layout.*;

var area:AutoFitArea = new AutoFitArea(this, 0, 0, 777, 429);

area.attach(mc, ScaleMode.PROPORTIONAL_OUTSIDE, AlignMode.CENTER, AlignMode.CENTER, true, 0, 999999999, 0, 999999999, true);

area.preview = true;

 

mc.addEventListener("doneUpdate", updateArea);

 

function updateArea(event:Event):void {

area.update();

}

 

And from inside the mc where the SWF is loaded I have a dispatch event:

 

var loader:Loader = new Loader();

loader.load(new URLRequest("intro.swf"));

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, swfLoaded);

 

function swfLoaded(event:Event):void {

addChild(loader);

loader.x = -388,5;

loader.y = -214,5;

dispatchEvent(new Event("doneUpdate"));

}

 

Still not getting it to work. My idea was to dispatch an event onComplete on each tween and then get it to work but its not. Any obvious faults?

 

Joakim

[GreenSock]

Aha! I found the problem. It had to do with BitmapData.draw() getting masked. It's fixed in the latest version. That problem would only show up if the object's native size was larger than the AutoFitArea, crop was set to true, and calculateVisible was true also. Thanks for pointing it out.

 

Snag the latest version on the main site or from your GreenSock account if you're a member at http://www.greensock.com/account/

[joakimhoegset]

So if I update do I still need to use update() to make it work?

 

Joakim

[GreenSock]

So if I update do I still need to use update() to make it work?

Yep. Like I said, AutoFitArea doesn't constantly monitor the size of attached objects, otherwise it would unnecessarily degrade performance. So if you manually change something about the attached object (size, position, whatever), you need to call update() on the AutoFitArea. According to my tests with your code, it worked just fine with the new version.

[joakimhoegset]

Perfect thanks for all your help. You are really helpful and I really appreciate it. Joakim

[joakimhoegset]

Ok, what I can see I can't get it to work at all and I am a little more confused now. I can get it to scale up larger and crop if I have the crop set to true but cannot get it to resize. Can you please have a look at the files that I have attached and see what I am doing wrong?

 

Thx,

Jokaim

 

autoFit.zip

[GreenSock]

There were several problems:

 

1) Your custom event was never getting dispatched because you had duplicated code on the main timeline and in the nested mc that were both trying to control the same stuff - your nested code was overriding it and the nested code didn't have the dispatch stuff in place. So the AutoFitArea's update() was never getting called.

 

2) I had to make a minor adjustment to AutoFitArea (make sure you update)

 

Attached is the working version.

[joakimhoegset]

Thank you so much for your help.

 

Best regards,

 

Joakim

[joakimhoegset]

Hi, it seems it only works when playing with player not when just cmd + enter in flash. Although it works perfectly it does not work OUTSIDE when it scales. It scales inside the stage. I would like it to cut the image if it is scaled proportionally wrong.

 

What can that be?

 

Joakim

[GreenSock]

I don't understand your question. I just tried changing the size of the AutoFitArea so that it uses a completely different aspect ratio and it worked perfectly. If you want it to crop the swf, make sure you set the 4th parameter of the attach() method to "true" (it's called "crop").

 

Does that answer your question?

[joakimhoegset]

Sorry see below

[joakimhoegset]

Hi again.

I have tried setting the fourth parameter to true like thus:

 

import com.greensock.layout.*;
var area:AutoFitArea = new AutoFitArea(this, 0, 0, 777, 429);
area.attach(mc, ScaleMode.PROPORTIONAL_OUTSIDE, AlignMode.CENTER, AlignMode.CENTER, true, 0, 999999999, 0, 999999999, true);
area.preview = true;

mc.addEventListener("doneUpdate", updateArea);

function updateArea(event:Event):void {
area.update();
}

 

 

 

But I still cant get it to crop the stage. It will still proportionally scale inside the stage and not crop at the edges. I have used your files and updated the greensock.

 

Thx,

 

Joakim

[GreenSock]

I'm confused - I just tried again and it seemed to work great. See attached. It's scaling and positioning it great...right? I changed the size to 400x400 and the stage background color so you can see it better. What am I missing?

[joakimhoegset]

I might be bad at explaining. Have a look at this example http://blog.fryewiles.com/wp-content/ex ... fbf-scale/. It is resizing the stage and then cropping the image accordingly on either the side needed if you change the stage so that is will always be full screen and no background will show.

 

If you make the stage shorter on the y-axel it will scale proportionally and then crop so that it will always cover the full screen.

 

Joakim

[GreenSock]

I might be bad at explaining. Have a look at this example http://blog.fryewiles.com/wp-content/ex ... fbf-scale/. It is resizing the stage and then cropping the image accordingly on either the side needed if you change the stage so that is will always be full screen and no background will show.

 

If you make the stage shorter on the y-axel it will scale proportionally and then crop so that it will always cover the full screen.

Okay. Did you have a question? I'm still unclear about what you're asking or what the problem is.

 

By the way, that's exactly what the LiquidArea class does which is part of LiquidStage (LiquidArea extends AutoFitArea). http://www.greensock.com/liquidstage/

[joakimhoegset]

Ok I thought that was what AutoFitArea did. Must have mixed it up. Will it work with liquidArea even though using the masked object outside the stage and if so do I just use the liquidArea and not the fine work you have been helping me with for autoFitArea?

 

Joakim

[GreenSock]

Well, LiquidArea is the same thing as AutoFitArea except that it will automatically resize itself whenever the stage gets resized based on the relative change in stage's width/height.

 

If you're still having trouble, feel free to post an example that clearly demonstrates the problem.