swfobject weird behavior

Question

Hi All,

I'm using swfobject to embed my flash. It's doing weird things.

I've created a simple textfield using FlexBuilder. It's an AS3 project, which extends Sprite. I've set its width to be 640 and height to 450. Then, in the swfobject parameters of the page, I've also set 640 x 450. I've made the background nice and red and ugly so you can see it. :)

http://www.brighttext.com/flash/TextFieldSetFormat.html

It seems to be the right dimensions. BUT I've got a textfield which is supposed to be almost the same size and height. This runs fine in FlexBuilder (is the right size) but is all messed up once I add swfobject Can anyone see what is happening?

EDIT NOTE: I just looked at it and it looks ok. But then I refreshed the page and the textfield is postage-stamp size (again -- this is the original behavior I saw.) It's now looking OK in firefox but not in IE8. Flash is supposed to look the same in all browsers !!??

AS3 code:

package {
 import flash.display.Sprite;
 import flash.text.TextField;
 import flash.text.TextFormat;
 import flash.text.Font;

[SWF(width="640", height="450", backgroundColor="#FFFFFF", frameRate="30")]
public class TextFieldSetFormat extends Sprite
{
 [Embed(source='C:/WINDOWS/Fonts/ArialBD.TTF',  fontWeight = 'bold', fontName='ArialBold')]

 [Embed(source='C:/WINDOWS/Fonts/Arial.TTF', fontWeight = 'regular', fontName='Arial')]

 public function TextFieldSetFormat()
 {
  var tf2:TextFormat = new TextFormat();
  tf2.size = 16;
        tf2.font = "Arial";
  Font.registerFont(_VerdanaFontBold);
        Font.registerFont(_VerdanaFont);
        var pad:Number = 10;
  var brightTextField:TextField = new TextField;
        brightTextField.backgroundColor = 0xDDF3B2;
        brightTextField.background = true;
        brightTextField.embedFonts = true;
        brightTextField.border = true;
        brightTextField.defaultTextFormat = tf2;
        brightTextField.wordWrap = true;
        brightTextField.multiline = true;
        brightTextField.width = stage.stageWidth - (4 * pad);
        brightTextField.height = stage.stageHeight - (3 * pad);
        brightTextField.x = 2*pad;
        brightTextField.y = 2*pad;

        brightTextField.text = "Dear Senators, I have become concerned over the idea that some in the Senate will oppose the public option because of a group of wild-eyed, overbearing but misinformed ideologues. These people mistakenly equate insurance reform with Socialism and call our  first African-American President unprintable epithets. This is unacceptable. The public option is the choice of more than 70% of Americans, a majority of the House and a great many opinion leaders. Passing insurance reform without a public option persists the current broken system. I am aware that many Senators would prefer to pass a reform bill with bipartisan support. But we cannot allow this critical debate to be hijacked by extremists or corporate profiteers. Thank you, and I look forward to hearing from you.";
        addChild(brightTextField);
 }
}
}

Answer 1

Try tracing the value of stage.stageWidth/Height and use a plugin like Flash Tracer to see what its outputting.

You might just need to add an event listener for Event.ADDED_TO_STAGE/INIT and execute your setup code within that listener.

Answer 2

OK, well, I've figured this out.

The problem is in using stage.stageWidth and stage.stageHeight. I'm not yet sure why this is so, but in the spirit of agile development, it's a fix. :)

Instead of using stage.stageWidth, just use a number of pixels. (640 x 450, in my case). The problem then goes away.

I'll post more about this -- including screenshots I took, and tests I did, soon on my blog and will post a link here.