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;
publicclassMainextendsSprite
{
privatevar _sound:Sound;
privatevar _soundChannel:SoundChannel;
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}// end functionprivate 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 functionprivate function loadSound(url:String):void
{
_sound = newSound();
_sound.load(newURLRequest(url));
if (_soundChannel) _soundChannel.stop();
_soundChannel = _sound.play();
}// end functionprivate function stopSounds():void
{
_soundChannel.stop();
}// end function
}// end class
}// end packagesounds.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><htmllang="en"><head><metacharset="utf-8"/><title>SoundPlayer</title><metaname="description"content="" /><scriptsrc="js/swfobject.js"></script><scriptsrc="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><divid="altContent"><h1>SoundPlayer</h1><p><ahref="http://www.adobe.com/go/getflashplayer">Get Adobe Flash player</a></p></div></body></html>
Post a Comment for "Javascript / Jquery Flash As3 Interaction"