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!

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%">

Browser Resize Doesn't Trigger "RESIZE" Event

精彩评论

关注公众号

热门标签

图文推荐

Browser Resize Doesn't Trigger "RESIZE" Event

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：