Resizing Flex Overlaying HTML
Christophe Coenraets recently posted an example of laying HTML content over Flex content in an IFRAME. The reasoning for this is that while the Flash Player does offer some HTML rendering abilities, these abilities pale in comparison to the browser. This makes sense of course, as displaying HTML is what browsers were designed to do.
Inspired by the post, I recalled a customer conversation a few months back where the inverse was desired. The customer wanted to place Flex content over HTML content. Normally this might sound like a perfect opportunity to use a DIV or IFRAME in the opposite role of Christophe’s example. The trick to this was however, that the customer wanted to be able to “roll up” the Flex content to a smaller area over the HTML content when the Flex content required less emphasis.
The test case for this was a combo-box, rendered and populated by Flex, overlaying HTML content. Only the main face of the combo-box would be visible until the drop-down was triggered. Once the drop-down was triggered, Flex needed to expand its visible area to accommodate the list. This would then block the underlying HTML content. The inverse was required to happen when an item was selected from the drop-down and the list was returned to its “hidden” state.
My solution to this was to watch for the mouse down event on the combo-box (not the open event as that would be too late) and then tell the containing HTML page to resize the viewable Flex space via a JavaScript call. When the viewable Flex space was changed, the application’s resize event was called. When the application had resized itself, the combo-box was then instructed to show the drop-down via the open method. When a selection was made, the inverse chain of events was followed.
In the end the customer seemed quite thrilled with the solution, and overall I think the effect itself is pretty neat. Posted here for reference and for the sake of posterity, I’ve included the commented source (both MXML and HTML) as well as the obligatory Captivate recording.
May 19th, 2005 at 9:53 am
Nice example. I did not know that you could dynamically resize a flash app within an HTML page.
Once again - we are but the learners.
December 13th, 2005 at 9:37 pm
It’s very help me in work this my site. Thank you.
September 18th, 2007 at 10:40 am
I downloaded the mxml file and the html file and tried to run it locally but the combo box does not show up at all. I tried it using both IE 7.0 and Firefox. In IE 7.0 it does prompt me to allow blocked content which I then allow. I then see the popup asking indicating click on control to activate it which I do but the text never shows up. It does blank out the text beneath it so I can tell where the combo box is supposed to be…
November 26th, 2007 at 3:20 am
I used this example. It was very helpful me. Thank you