Dynamic Resize Flash Application Container / Flash Stage ( without external JavaScript )
[Update: Add complete Flash Builder project source files. ]
If you have dynamic content within your Flash application or you have several states or “pages” implemented, which all have different content, it might be helpful to resize your flash aplication container within the html- context. For this it’s not enough to resize the application from within the flash application. You also have to resize the surrounding html container. This is the object tag for Mozilla browsers or the embed tag, if the client uses the Internet Explorer.
In each case you have to use the ExternalInterface. You call it from the flash application with parameters for the new height and width value of the flash container. On the other side you have to define an javascript function which do the resize operation with these values.
Here is an AS3 class which already includes the JavaScript part. Soyou don’t have to define an extra JS function. So you just have to import the AS3 class into your project and your ready to resize you application from Flash.
Quick start with Flash ExternalInterface class
The ExternalInterface class allows you to communicate with the Flash wrapping container, which is usually the HTML page with JavaScript capeability. It allows you to send data from ActionsScript to JavaScript and vice versa.
The ExternalInterface class is implemented for nearly all current browsers. Please see the documentation for a detailed list of the supported browsers here.
All five attributes and methods are static, so you don’t need an instance of this class.
Make sure ExternalInterface is available
When using the ExternalInterface you should make sure it’s available. So please test the boolean value ExternalInterface.available:
if( ExternalInterface.available ){ ExternalInterface.call( .... ) }
swfInputs: Solving Mozilla + Transparent Mode + Win + Special Chars within inputs
As you probably know the Flash Player uses three different types of modes an Flash movie is embedded in the browser window. Its is set via the wmode parameter in the embed or param tag.
<param name="wmode" value="transparent" /> <embed wmode="transparent" ...
With the transparent mode you can influence the relation between the Flash movie an the surrounding HTML. If the set the wmode to window the Flash movie will always lay on top of the rest of the page. This is absolutly helpfull if your application is “standalone”, means the only center of user interaction or if you have an full window application ( at least with full screen ).
But often you have other HTML elements around the Flash movie which are at the same level of user interaction and might be as important as the Flash movie ( Best example might by fly-out menus which has to overlay all other content. Or maybe confirm messages which are not realized by the JavaScript confirm-dialog ). If you use wmode window html elements will always behind the Flash movie (setting the html z-index has no effect ), so there is no real interaction between HTML/JavaScript an the Flash movie. For this you need wmode equals transparent.
How to handle massive ExternalInterface calls (JsCallStack)
We use the ExternalInterface of the Flash Player to let JavaScript resize the HTML-Container of the Flex application. Our App loads dynamic content via XML and builds a list of entries. But we would like the user to use the standard browser scrollbar and not a scrollbar within the flex application. So we have to resize the HTM-Container of the Flex application, depending on its actual loaded content. Each time a new entry is added to the list, we call an JavaScript method from the Flex app via ExternalInterface to resize the HTML. This is done by using the resize-Event of Flex.
But sometimes the resize event is called up to 100 times within a second. In this cases some browsers ( sorry, but the IE seems to be ok ) didn’t get all JavaScript calls we made via ExternalInterface and some of our calls weren’t handled ( the container was not resized and our Flex list was cutted off ).
