mmattax
mmattax

Reputation: 27660

Strange behaviour when dynamically resizing Flash / Flex embed object

I have a simple Flex application that is a panel with a repeater inside of it; albeit a little simplified, it is like such:


<mx:Panel id="pnl">
    <mx:Repeater id="rp">
        <mx:Label text = "foo" />
    </mx:Repeater>
</mx:Panel>

I am then embedding this Flex application into an HTML wrapper. I am then attempting to dynamically re size the embedded Flash object in the HTML as the Flex panel changes size (thus allowing the Flex application to consume as much of the HTML page as it needs).

I am doing this by doing the following actionscipt:


pnl.addEventListener(ResizeEvent.RESIZE,function(event:Event):void {
    ExternalInterface.call("resize",event.target.height);
});

which in turn calls this javascript function:


function resize(height) {
    // the embed or object that contains the flex app
    var e = document.getElementById('flex_object');
    if(e) e.height = height;
}

This seems to work perfect in IE, however I get strange results in Firefox / Safari, the repeater works for n number of times, and then the text seems to get cut off / disappear in the repeater, see the attached image: alt text http://img528.imageshack.us/img528/9538/rpre0.jpg

Can anyone explain why this is happening, and if there are any workarounds / ways of doing the same thing?

Upvotes: 0

Views: 5458

Answers (4)

DanyAlejandro
DanyAlejandro

Reputation: 1468

I'm currently working in the same thing (a swf that dynamically changes it's height depending on the content it's currently holding). I also had a similar problem to yours trying to make a multi-line button.

I'm new to flex but I managed to solve the problem manually invoking the updateDisplayList() of the container... I think it "forces" a render somewhere... it's parameters are the width and height of some area where the changes happen. Sorry for not knowing the details... But it worked for me.

Upvotes: 1

cwallenpoole
cwallenpoole

Reputation: 81988

My experience is that Flex's resizing abilities are... funny. Sometimes they work the way one would expect, other times they do not. There are a couple of things you could try: first, trace the value you expect to get in Flex for the height or even ExternalInterface.call("alert",event.target.height); This will let you know if it is a JavaScript or a Flex problem for sure (but I suspect it is Flex).

Your problem might have to do with the scaling of the component:

Setting [the height] property causes a resize event to be dispatched. See the resize event for details on when this event is dispatched. If the component's scaleY property is not 100, the height of the component from its internal coordinates will not match. Thus a 100 pixel high component with a scaleY of 200 will take 100 pixels in the parent, but will internally think it is 50 pixels high.

If it is Flex and that does not help, I would try using callLater in front of the ExternalInterface call, often that will allow Flex enough time to figure out what the heck it is doing. Occasionally, setTimeout is needed, but I find that awkward.

Upvotes: 0

fenomas
fenomas

Reputation: 11139

That's very strange - it looks like Firefox/Safari are expanding the draw area of the embed, but somehow Flash is not getting the message that it needs to render the new pixels.

You could probably work around this by doing something to force Flash to update itself, but since the communication between the browsers and the embed seems to be confused it would probably be less hackish to take a different approach, that fits into the browsers' event flow without bugging.

For example, instead of resizing the embed, you might try putting Flash inside a DIV, setting the Flash's size to 100%, and then resizing the DIV. That seems a lot less likely to misbehave.

Upvotes: 0

netsuo
netsuo

Reputation: 166

Why not simply using percent width and height on your HTML page for your Flash object ? This way you event don't have to do anything to resize your SWF...

Upvotes: 0

Related Questions