JavaScript / JQuery Flash AS3 Interaction
I am designing a music player using JavaScript (jQuery) and HTML5, with Flash AS3 to fall back. Basically what I want to do is to be able to click HTML control elements and have th
Solution 1:
To communicate between JavaScript and ActionScript, you can use the ExternalInterface API:
As an alternative for what you want to do, you could use SoundManager 2 to play the audio, and do all of your own programming in JavaScript:
"Using HTML5 and Flash, SoundManager 2 provides reliable cross-platform audio under a single JavaScript API."
Solution 2:
I had an answer for this question but then an answer was accepted before I finished it. Anyway here it is:
Main.as(document class):
package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.external.ExternalInterface;
import flash.media.Sound;
import flash.media.SoundChannel;
import flash.net.URLRequest;
public class Main extends Sprite
{
private var _sound:Sound;
private var _soundChannel:SoundChannel;
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}// end function
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
if (ExternalInterface.available)
{
ExternalInterface.addCallback("loadSound", loadSound);
ExternalInterface.addCallback("stopSounds", stopSounds);
}// end if
}// end function
private function loadSound(url:String):void
{
_sound = new Sound();
_sound.load(new URLRequest(url));
if (_soundChannel) _soundChannel.stop();
_soundChannel = _sound.play();
}// end function
private function stopSounds():void
{
_soundChannel.stop();
}// end function
}// end class
}// end package
sounds.json:
{ "sounds" : {
"sound": [
{ "name": "Sound 1", "url": "sounds/sound1.mp3" },
{ "name": "Sound 2", "url": "sounds/sound2.mp3" },
{ "name": "Sound 3", "url": "sounds/sound3.mp3" }
]
}}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>SoundPlayer</title>
<meta name="description" content="" />
<script src="js/swfobject.js"></script>
<script src="js/jquery.min.js"></script>
<script>
var flashvars = {
};
var params = {
menu: "false",
scale: "noScale",
allowFullscreen: "true",
allowScriptAccess: "always",
bgcolor: "",
wmode: "direct" // can cause issues with FP settings & webcam
};
var attributes = {
id:"SoundPlayer"
};
swfobject.embedSWF(
"SoundPlayer.swf",
"altContent", "0", "0", "10.0.0",
"expressInstall.swf",
flashvars, params, attributes);
</script>
<style>
html, body { height:100%; overflow:hidden; }
body { margin:0; margin-top:25px; }
.button { float:left; margin-left:25px; width:100px; height:60px;
background-color:#fafafa; border: 1px solid #e1e1e1;
font-size:15px; font-family: Arial; text-align:center; padding-top:40px;
text-decoration: none; color: #323232; }
</style>
</head>
<body>
<script>
$(document).ready(function() {
var soundPlayer = $("#SoundPlayer").get(0);
$.getJSON('json/sounds.json', function(data) {
$.each(data.sounds.sound, function(i, sound) {
$("<a href=\"#\" class=\"button\">" + sound.name + "</a>")
.click(function () { soundPlayer.loadSound(sound.url); })
.appendTo("body");
});
$("<a href=\"#\" class=\"button\">Stop Sounds</a>")
.click(function() { soundPlayer.stopSounds(); })
.appendTo("body");
});
});
</script>
<div id="altContent">
<h1>SoundPlayer</h1>
<p><a href="http://www.adobe.com/go/getflashplayer">Get Adobe Flash player</a></p>
</div>
</body>
</html>
Post a Comment for "JavaScript / JQuery Flash AS3 Interaction"