Browser Resize Doesn't Trigger "RESIZE" Event
I'm having this problem with my Actionscript 3 website. Basically, it's the background element (a movie clip), is supposed to resize to cover the stage. However, this doesn't happen. The browser window is indeed the colour of the stage (dark grey), but the MC remains at its default size in the top left corner.
It all works fine when tested inside Flash CS5. After publishing it and opening it in the browser though, the problem arises.
I was puzzled not to find more information on this as I assume that every flash website with auto-resizing content has to somehow overcome this issue.
Below follows a bare-bones example that illustrates the issue:
import flash.events.Event;
import flash.display.MovieClip;
import fl.text.TLFTextField;
import flash.text.TextFormat;
import flash.text.TextFieldAutoSize;
var back:MovieClip;
var email:TLFTextField;
var coming:TLFTextField;
var count:TLFTextField;
var i:int;
init();
function init():void {
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
back = new MovieClip();
email = new TLFTextField();
coming = new TLFTextField();
count = new TLFTextField();
email.text = "address@host.com";
configureTextField(email);
coming.text = "coming soon";
configureTextField(coming);
i = 0;
count.text = "" + i + " " + stage.stageWidth + " " + stage.stageHeight;
configureTextField(count);
back.graphics.beginFill(0x330000, 1);
back.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
back.graphics.endFill();
back.addEventListener(Event.ADDED_TO_STAGE, addHandler, false, 0, true);
stage.addChild(back);
stage.addChild(email);
stage.addChild(coming);
stage.addChild(count);
stage.dispatchEvent(new Event(Event.RESIZE));
}
function addHandler(event:Event):void {
stage.addEventListener(Event.RESIZE, resizeHandler);
back.removeEventListener(Event.ADDED_TO_STAGE, addHandler);
}
function configureTextField(currentText:TLFTextField):void {
var format = new TextFormat();
format.font = "Calibri";
format.size = 24;
format.color = 0xFFFFFF;
currentText.setTextFormat(format);
currentText.autoSize = TextFieldAutoSize.LEFT;
currentText.selectable = false;
}
function resizeHandler(event:Event):void {
back.width = stage.stageWidth;
back.height = stage.stageHeight;
email.x = stage.stageWidth/2 - email.width/2;
email.y = stage.stageHeight/2;
coming.x = stage.stageWidth/2 - coming.width/2;
coming.y = stage.stageHeight/2 - 64;
count.x = stage.stageWidth/2 - count.width/2;
count.y = stage.stageHeight/2 + 64;
i++;
count.text = "" + i + " " + stage.stageWidth + " " + stage.stageHeight;
configureTextField(count);
}
And part of the published HTML code, if it helps:
<head>
<title>comingSoon</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body { height:100%; background-color: #333333;}
body { margin:0; padding:0; overflow:hidden; }
#flashContent { width:100%; height:100%; }
</style>
</head>
<body>
<div id="flashContent">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="800" height="800" id="comingSoon" align="middle">
<param name="movie" value="comingSoon.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#333333" />
<param name="play" value="true" />
<param name="loop" value="true开发者_运维百科" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="comingSoon.swf" width="800" height="800">
<param name="movie" value="comingSoon.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#333333" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="window" />
<param name="scale" value="showall" />
<param name="menu" value="true" />
<param name="devicefont" value="false" />
<param name="salign" value="" />
<param name="allowScriptAccess" value="sameDomain" />
<!--<![endif]-->
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</html>
Any suggestions are greatly appreciated!
Thank you!
cc
You should set the width and height of your object tags to be 100%.
So change:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="800" height="800" id="comingSoon" align="middle">
for
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="comingSoon" align="middle">
Also change:
<object type="application/x-shockwave-flash" data="comingSoon.swf" width="800" height="800">
for
<object type="application/x-shockwave-flash" data="comingSoon.swf" width="100%" height="100%">
加载中,请稍侯......
精彩评论