html 中 SWF 文件的高度和宽度

Question

在下面的代码中，只有按钮图像被嵌入到flex代码中。但是在html对象或嵌入标签中，为什么必须指定高度和宽度。即使这是一个普通的按钮，如果我们不指定高度和宽度宽度似乎有一些错误

html

<div align="center">
    <br />
    <div style="display:block;width:100px;height:100px;" id="audio" 
        class="testsound" align="center"/>
    <p class="clickable">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
        width="400" height="100" id="myMovieName">
            <param name="movie" value="/media/players/testsound.swf"/>
            <param name="soundurl" value="/media/players/music.mp3"/>
            <param name="quality" value="high"/>
            <param name="bgcolor" value="#FFFFFF"/>
            <embed width="100" height="100" href="/media/players/testsound.swf" 
                src="/media/players/testsound.swf" 
                flashvars="soundUrl=/media/players/music.mp3" 
                quality="high" bgcolor="#FFFFFF" 
                name="myMovieName" loop="false" align=""
                type="application/x-shockwave-flash">
            </embed>
        </object>
    </p>
</div>

MXML

<?xml version="1.0"?>
<!-- embed/EmbedSound.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            import flash.media.*; 

            public var snd:Sound = new sndCls() as Sound; 
            public var sndChannel:SoundChannel;

            public function playSound():void {
                sndChannel=snd.play();
            }   

        ]]>
    </mx:Script>
    <mx:Image id="loader1" click="playSound();"
        source="@Embed(source='/opt/cloodon/site/media/img/speaker.gif')" />
</mx:Application>

Answer 1

嵌入标签中的高度和宽度是必需的属性。请查看 swfobject 或 Adobe 标签定义以及 必需和可选属性。

您是否在问为什么它们是必需的，或者如果没有它们，为什么您的页面会崩溃（提示，第一个答案是第二个问题）？

编辑：

您应该将 EMBED 和 OBJECT 标记的宽度和高度属性修改为与 swf 的大小完全一致。

您可以在 .mxml 中设置应用程序的宽度和高度。

<mx:Application width="300" height="200">

如果将scaleMode 设置为“noScale”，您将不会在 swf 中看到任何缩放。

stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;

如果您使用的是 Actionscript 3（您应该是），您可以在主类中设置元数据。

IE

[SWF(width="640", height="480")]
public class MyClass extends Sprite
{
    public function MyClass()
    {
        stage.scaleMode = StageScaleMode.NO_SCALE;
        stage.align = StageAlign.TOP_LEFT;
    }
}

Answer 2

您应该在主 mxml 中指定 Application 的宽度和高度，即使它仅包含可点击的图像！
如果您希望页面具有 width: 400px 和 height: 100px 的 Flex 图像（按钮？），那么您的 Application标签必须如下所示：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="100">

尽管如此，在您的 html 中，您应该让 object 和 embed 标签具有相同的 width 和 height，并且您还应该为 embed 标记的 align 属性指定一个值，例如：align="middle"。

您的 object 标记应类似于

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
    width="400" height="100" id="myMovieName"
    codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
    <param name="movie" value="/media/players/testsound.swf"/>
    <param name="soundurl" value="/media/players/music.mp3"/>
    <param name="quality" value="high"/>
    <param name="bgcolor" value="#FFFFFF"/>
    <!-- the embed tag does not have href attribute  -->
    <embed width="400" height="100"  
        src="/media/players/testsound.swf" 
        flashvars="soundUrl=/media/players/music.mp3" 
        quality="high" bgcolor="#FFFFFF" 
        name="myMovieName" loop="false" align="middle"
        type="application/x-shockwave-flash"
        pluginspage="http://www.adobe.com/go/getflashplayer">
    </embed>
</object>

Other
你的 sndClass 在哪里声明的？如果您嵌入了该 mp3，您的脚本标记应包含：

<mx:Script>
    <![CDATA[
        import mx.core.SoundAsset; 

        [Embed('/media/players/music.mp3')]
        private var _sound:Class;
        public var snd:SoundAsset = new _sound() as SoundAsset;

        public var sndChannel:SoundChannel;

        public function playSound():void {
            sndChannel=snd.play();
        }   

    ]]>
</mx:Script>

如果您想从 html 指定 mp3 的路径，您可以查看 这篇文章供参考。

更新 2

要根据 Flex 按钮的大小设置 html object 的宽度和高度，您应该按如下方式更新应用程序 mxml 代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
    width="1" height="1" backgroundColor="#bee3f6"
    horizontalScrollPolicy="off" verticalScrollPolicy="off"
    creationComplete="onCreationComplete()" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            //This method will change the button's label ==> width.
            public function sayWhat():void {
                var _date:Date = new Date();
                extButton.label = "It's " + (_date.getHours() + 1) + ":" + _date.getMinutes() + 
                    ((_date.getMilliseconds() % 2) == 0 ? ". nice." : ". very tired.");
            }

            public function onCreationComplete():void {
                // binds this.sayWhat to the external interface, so when from   
                // javascript is called the compiled swf object's sayWhat function,
                // it will be transferred to this.sayWhat. 
                ExternalInterface.addCallback("sayWhat", sayWhat);

                // set the flash application's size to be exact the button's size.
                this.width = extButton.width;
                this.height = extButton.height;

                try 
                {
                    // The js function: onFlashAppInited(width, height);
                    // The next line tells the external interface (the parent application:
                    // browser window), that this application has finished loading, its 
                    // ready to be used. 
                    // We're passing the button's width and height as parameters
                    // In js there has to be a global method with this name.
                    ExternalInterface.call("onFlashAppInited", extButton.width, extButton.height);
                }
                catch (e:Error)
                {
                    trace(e.message + "\n" + e.getStackTrace(), e.name);
                }
            }        

            protected function onButtonUpdateComplete(event:FlexEvent):void
            {
                // if the button's size has changed, we notify the javascript to set the 
                // correct size to the object tag too.
                if ((this.width != extButton.width) || (this.height != extButton.height))
                {
                    // set the application size
                    this.width = extButton.width;
                    this.height = extButton.height;
                    // notify the js about the change
                    ExternalInterface.call("onFlashAppSizeChanged", this.width, this.height);
                }
            }

        ]]>             
    </mx:Script>
    <mx:Button id="extButton" label="Do something!" updateComplete="onButtonUpdateComplete(event)" />
</mx:Application>

请注意，最初此应用程序是只有 1x1 像素（如果小于，则不会初始化！）。
在 onCreationComplete 处理程序中，其大小会更改以匹配按钮的大小。

这些值（宽度和高度）将传递给 JavaScript 函数 onFlashAppInited，您还应该更新该函数：

function onFlashAppInited(width, height) {
    alert("Flash app inited!");
    appInited = true;

    onFlashAppSizeChanged(width,height);

    // remove the temporary swf container: tmp
    document.body.removeChild(document.getElementById("tmp"));
}

function onFlashAppSizeChanged(width, height) {
    flashApp.width = width + "px";
    flashApp.height = height + "px";
}

Answer 3

添加@Dominic Tancredi 的评论：
OBJECT 和 EMBED 标记都需要 WIDTH 和 HEIGHT 属性。