This is a follow up to post http://flexadmiral.com/blog/post/2009/07/23/Using-Javascript-to-animate-a-resize-effect-for-a-div-containing-Adobe-Flex-Flash.aspx.

In my earlier post, I used a javascript function to resize an html div in conjunction with resizing a flash/flex application.  My flex/flash is using a constraint-based layout and rather than resizing the .swf directly, I'm resizing the div which will update changes to the swf.  For review, here is the javascript function:

<script language="JavaScript" type="text/javascript">
    var interId;
    var newht;
    var viewht;
    function setFlashHeight(newHeight)   
    {
        newht = newHeight;
        var currentHt = document.getElementById('divFlash').style.height.replace('px','');
        viewht = Number(currentHt);
        interId = setInterval(resizeFlash, 20);
    }
   
    function resizeFlash()
    {
        if(Math.abs(viewht - newht) <= 10)
        {
            document.getElementById('divFlash').style.height = newht +'px';
            clearInterval(interId);
           
        }
        else if(viewht < newht)
        {
            viewht = viewht +10;
            document.getElementById('divFlash').style.height = viewht +'px';
           
        }
        else
        {   
            viewht = viewht -10;
            document.getElementById('divFlash').style.height = viewht +'px';
           
        }
    }
   
</script>

Now Ive got two things happening here.  The flash, is going to expand and contract and at the same time, the div is going to expand and contract.  My call to the javascript is quite simple:

ExternalInterface.call("setFlashHeight", 175); // for downsizing the div

or ExternalInterface.call("setFlashHeight", 300); // for upsizing the div

I have set up some basic resize effects within flash that will fire at the same time so that we can integrate the 2 effects together to appear like a single effect.

View the demo here