In the following code Only the button image has been embeded 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>
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";
}