Internet Explorer, Flash, Alignment Gotcha

I ran into a rather annoying issue the other day related to content alignment in Flash; as usual, this problem exists exclusively in Internet Explorer. To be more specific, it is an issue with how the Flash Player ActiveX control is written.

If you are aligning content in Flash that uses the Stage width or height as a variable (e.g., you want to center a MovieClip) and you do it on initialization (i.e., in code and on the first frame), you may run in to this issue. Here is an image demonstrating what you might see:

Note that in the “before” screen, the content is centered horizontally, while in the “after” screen, the content is only half-visible and appears to be “centered” on the left margin.

If you run a test – output the Stage width to a text field, you’ll see that the width will be returned as 0.

As far as I know, there are two solutions to this problem. If you’re embedding your Flash using swfObject, then make sure that you omit the “scale” attribute. For example, modify the following:

var params = {
    bgcolor: "#000000",
    menu: "false",
    scale: "noScale",
    allowFullScreen: true
};

To something that looks like this:

var params = {
    bgcolor: "#000000",
    menu: "false",
    allowFullScreen: true
};

Alternatively, if you absolutely need that attribute. You can create an “EnterFrame” event listener that detects when the Stage width is greater than 0 and then remove the listener. Here’s an example in ActionScript 2:

this.onEnterFrame = function() {
    if (Stage.width > 0) {
        init(); // Pass to initialization function
        this.onEnterFrame = null; // Clear enterFrame listener
    }
}