SWF文件在HTML中的高度和宽度

3
在以下代码中,只有按钮图像被嵌入到flex代码中。但是,在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>
3个回答

7

在嵌入标签中,高度和宽度是必需的属性。您可以参考swfobjectAdobe对标签定义以及必须和可选属性进行了解。

您是否想知道为什么这些属性是必需的?如果没有这些属性,页面将会出现问题(提示:第一个问题的答案就是第二个问题)。

编辑:

您应该修改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(应该是的),你可以在主类中设置元数据。
例如:
[SWF(width="640", height="480")]
public class MyClass extends Sprite
{
    public function MyClass()
    {
        stage.scaleMode = StageScaleMode.NO_SCALE;
        stage.align = StageAlign.TOP_LEFT;
    }
}

但是从您的帖子中现在并没有明确建议如何将swf适配到html文件的确切大小。 - Naveen
好的,在我上面的编辑中还有一些建议。希望这能帮到你。 - Dominic Tancredi

1

即使您的主mxml仅包含可点击的图像,也应指定Application的宽度和高度!
如果您希望页面具有width: 400pxheight: 100px的Flex图像(按钮?),则您的Application标记必须如下所示:

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

尽管如此,在您的HTML中,您应该同时拥有objectembed标签具有相同的widthheight,并且您还应该为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>

其他 你的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";
}

我同意您关于在MXML和HTML中设置高度和宽度的观点。但是默认情况下,我们不知道Flex中按钮的大小,因此如果指定了默认按钮,如何知道其高度和宽度以及如何在HTML中设置它呢? - Naveen
你可以尝试在Flex的onCreationComplete方法中检索按钮的大小(宽度/高度),并将其作为参数传递给JavaScript(flashAppInited方法)。这样,JavaScript端将会被通知到你的按钮宽度,并且可以调整SWF对象的大小以达到完全相同的大小。 - rekaszeru
请问您能否告诉我如何检索它的任何链接。顺便说一下,我看到了您的网站。虽然它还没有运行,但已经很酷了。 - Naveen
我已经更新了答案,基于此,每当 flex 按钮的大小发生变化时,您将能够将其发送到 js 端。我也更新了示例(如果您想尝试一下)。 - rekaszeru
到目前为止有什么进展吗?如果需要进一步指导,请告诉我。关于使用Flex和JavaScript之间的通信的问题,给你一个赞。 - rekaszeru

1
补充 @Dominic Tancredi 的评论: OBJECT 和 EMBED 标签都需要 WIDTH 和 HEIGHT 属性。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接