I am making a flex app to embed in my ASP.NET portfolio. What is the best way to embed the .swf file into the HTML of the .aspx page?
Thanks
I don't know what's meant by the best way, the easiest way to me is the "classic" way:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="320" HEIGHT="240" id="Yourfilename" ALIGN="">
<PARAM NAME=movie VALUE="Yourfilename.swf">
<PARAM NAME=quality VALUE=high>
<EMBED src="Yourfilename.swf" quality=high WIDTH="320" HEIGHT="240" NAME="Yourfilename" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
</OBJECT>
You might also just want to swap out the HTML code and JavaScript include files that get created by Flex Builder, in the html-template folder.
One way is by using the swfobject library
Related
I have a image on my html page and i want it to play a sound effect when i click on it.
Here's the image code:
<img src="images/button1.png" width="32" height="32" onclick="alert();">
I want to change the alert box into the sound effect that i load in. How do i do it?
Well, it is not so easy, actually it is difficult to be accomplished ONLY with HTML. See here for more details.
You`ll face a various problems like:
Different browsers have different audio format support.
If a browser
does not support the file format, the audio will not play without a
plug-in.
If the plug-in is not installed on the users' computer, the
audio will not play.
If you convert the file to another formats, it
will still not play in all browsers.
Using A Hyperlink
If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file.
The following code fragment displays a link to an mp3 file. If a user clicks on the link, the browser will launch a helper application to play the file:
Play the sound
The best solution by my opinion is to use a Flash for playing sounds, i.e. make your links as Flash objects/buttons/text and assign sounds to them inside Adobe Flash on hover/click/etc.
Use SoundManager and will free up from a lot of headaches. Even more it will fallback nicely to flash if audio is not supported natively by browser.
However if you don't want to relay on a third party library there is another solution, a little bit daunting and exhausting but functional in every browser supporting the audio tag.
The first thing you need to do is to populate the audio tag with the source content. You can do this with the following lines of code:
<audio id = 'audio'>
<source src="test.mp3" type="audio/mpeg" />
<source src="test.ogg" type="audio/ogg" />
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio>
Because there is not a common agreement between different browser vendors regarding the supported audio format we need to include each supported ones. If one browser does not support it, then will skip it and fallback to the next one. If none of them is supported then you can use flash as a fallback. Google AJAX Libraries API will facilitate much our work. Below is the full source code:
<script src="http://www.google.com/jsapi"></script>
<script>google.load("swfobject", "2.2");</script>
<img src="http://www.kafkabrigade.org.uk/wp-content/uploads/2011/07/button-pic.jpg" onclick="playSound();">
<div id="fallback"></div>
<audio id = 'audio'>
<source src="http://www.hellopixel.net/click.mp3" type="audio/mpeg" />
<source src="http://www.hellopixel.net/click.ogg" type="audio/ogg" />
<object class="playerpreview" type="application/x-shockwave-flash"
data="player_mp3_mini.swf" width="200" height="20">
<param name="movie" value="player_mp3_mini.swf" />
<param name="bgcolor" value="#085c68" />
<param name="FlashVars" value="mp3=test.mp3" />
<embed href="player_mp3_mini.swf" bgcolor="#085c68" width="200"
height="20" name="movie" align=""
type="application/x-shockwave-flash" flashvars="mp3=test.mp3">
</embed>
</object>
</audio>
<script>
function playSound() {
if (document.getElementById('audio').canPlayType) {
if (!document.getElementById('audio').canPlayType('audio/mpeg')) {
document.getElementById('audio').style.display = 'none';
swfobject.embedSWF(
"player_mp3_mini.swf",
"fallback",
"200",
"20",
"9.0.0",
"",
{"mp3":"http://www.hellopixel.net/click.mp3"},
{"bgcolor":"#085c68"});
} else {
document.getElementById('audio').play();
document.getElementById('fallback').style.display = 'none';
}
}
}
</script>
Fiddle: http://jsfiddle.net/SMR4V/
Note: I have not created the ogg file, so won't work in firefox, because FF is using ogg files.
I am embedding Soundcloud HTML code in a web page to show the audio player. Previewing in Safari 5.1.4 on Mac and running in a webview in my iPhone app (which should behave the same as Safari) the embed parameter "theme_color" does not work.
E.g.
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http://api.soundcloud.com/tracks/44200324&auto_play=true&color=915f33&theme_color=00FF00"></iframe>
Anyone know why or a workaround? I want to be able to "colourise" the main look of the player from grey to another colour.
You can have custom colors using flash object:
<object height="81" width="100%">
<param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F32678080&show_comments=true&auto_play=false&color=00cc00&theme_color=111111"></param>
<param name="allowscriptaccess" value="always"></param>
<embed allowscriptaccess="always" height="81" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F32678080&show_comments=true&auto_play=false&color=00cc00&theme_color=111111" type="application/x-shockwave-flash" width="100%"></embed>
</object>
For the list of available params take a look at:
http://developers.soundcloud.com/docs/widget
Well, I must say this is embarrassing to ask, but to my defense I'll say that throughout my years of web development I've never encountered a case where embedding flash was absolutely necessary.
The Question
Simple, how do I embed a flash object of any kind (*.swf or if there any other options, them too) to my website?
Some Points
I don't need the code, I already have that, I just don't really understand it.
I'm looking for a good explanation on how to use the <embed> or <object> elements.
I've been searching around but couldn't find a clear explanation, even in the specs.
I'd award any good answer with an upvote, a cookie, and an accepted answer to the best :)
Definitions:
http://www.w3.org/wiki/HTML/Elements/embed
http://www.w3.org/wiki/HTML/Elements/object
Explanation on how to embed a flash object from Adobe:
http://kb2.adobe.com/cps/415/tn_4150.html
"The HTML OBJECT tag directs the browser to load Adobe Flash Player and then use it to play your SWF file."
Change "YOURFILENAMEHERE.swf" with your .swf file name.
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="320" HEIGHT="240" id="Yourfilename" ALIGN="">
<PARAM NAME=movie VALUE="YOURFILENAMEHERE.swf">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=bgcolor VALUE=#333399>
<EMBED src="Yourfilename.swf" quality=high bgcolor=#333399 WIDTH="320" HEIGHT="240" NAME="Yourfilename" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED></OBJECT>
As I am using embed tag in my html file but in browser it is showing missing plugin. To solve this plugin problem what can I do?
For playing FLV in html, you should use the tag. For example:
<object type="application/x-shockwave-flash"
width="320" height="240"
wmode="transparent"
data="player.swf?file=video.flv&autoStart=false">
<param name="movie"
value="player.swf?file=video.flv&autoStart=false"/>
<param name="wmode" value="transparent"/>
</object>
Player.swf is player swf file and filename is the file attribute.
i'm planning to use a .swf file as a header. this won't work.
<img src="exactheader.swf" width="650" height="140" />
can you tell me how?
Try this instead:
<object width="650" height="140">
<param name="movie" value="exactheader.swf">
<embed src="exactheader.swf" width="650" height="140"></embed>
</object>
You should use <embed> tag to embed flash files to an html page :
<object width="650" height="140">
<param name="movie" value="exactheader.swf">
<embed src="exactheader.swf" width="650" height="140"> </embed>
</object>
EDIT : As Russ pointed, I just found the resource why we should use both object and embed tags here.
In the code above there is both an
tag and an <object> tag. This
is because the tag is
recognized by Internet Explorer, and
Netscape recognizes the <embed> tag
and ignores the <object> tag.
I have found swfobject the 'best' method for embedding flash in html. It handles, version checking, alternate content, etc. Spend a few minutes getting familiar with this easy to use api:
http://code.google.com/p/swfobject/