Height and width of a SWF file in html

In the following code Only the button image has been em开发者_StackOverflow社区beded into the flex code.But in the html object or embed tag why the height and width has to be specified.Even though for this is a normal button if we do not specify the height and width there seems to be some error

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>

Height and Width in an embed tag are required attributes. Have a gander at swfobject or Adobe on the tag definition as well as required and optional attributes.

Are you asking why they're required or why your page will break if you don't have them (hint, the first answer is the second question)?

EDIT:

You should modify the width and height attribute of the EMBED and OBJECT tags to be exactly to the size of the swf.

You can set your application width and height in the .mxml

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

If you set the scaleMode to "noScale" you won't see any scaling in your swf.

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

If you're in Actionscript 3 (which you should be), you can set the meta-data in your main class.

i.e.

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

you should specify in your main mxml the width and height of your Application even though it contains but a clickable image!
If you'd like your page to have a flex image (button??) of width: 400px and height: 100px, then your Application tag must look like:

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

And nonetheless, in your html you should have both your object and embed tags to have the same width and height, and you should specify a value to your embed tag's align attribute as well, eg: align="middle".

Your object tag should look similar to

<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 Where is your sndClass declared? If you have that mp3 embedded, your script tag should contain:

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

If you'd like to specify your mp3's path from html, you might look at this post for reference.

Update 2

To set the html object's width and height based on your flex button's size, you should update your application mxml code as follows:

<?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>

Note, that initially this application is only 1x1 pixel (if less, it won't initialize!).
In the onCreationComplete handler its size is changed to match the button's size.

These values (width and height) are passed to the javascript function onFlashAppInited, which you should also update:

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";
}

Addition to @Dominic Tancredi's comment: Both OBJECT and EMBED tags require WIDTH and HEIGHT attributes.