I’ve just been working on an small piece of pure ActionScript3. Essentially the migrating from the large horrible Twitter Widget that I had in the right column, to the text-only representation now overlayed on the header image above.
I use SWFObject to embed the SWF in the page. I set the dimensions of the SWF to 780×45. Within the main function of the SWF I prevent the stage from scaling and set it to align top left. I then use the stage.stageWidth and stage.stageHeight properties to draw a semitransparent background within which to position a TextField then trot-off to get the Twitter feed.
All is well on Safari and Firefox. But when I test on Internet Explorer 6, strange things happen. The first time a page loads, it displays ok. But reload the page, or navigate to another within the blog where the SWF is loaded from cache, and the layout is quite messed up. Testing showed that this is because the stage’s stageHeight and stageWidth are returning value 0 in this circumstance. Further testing shows that although the stage’s initial size is 0x0, it does get resized at some point.
The solution I’ve implemented is to listen for and handle resize events. Mildly frustrating as I didn’t plan on dealing with resize. The only reason my application is structured like this is to allow the SWF to adapt to the dimensions set via SWFObject. Not to allow the SWF fluid resizing through it’s life.
Simply moving the positioning code to the resize handler solved the ie6 problem, but for the other browsers that render at the correct size from the off, no resize event fires. So from our main function we have to put a manual call in to the resize handler (with null as the argument), and then only modify positioning if the stage dimensions are something other than 0x0.