Skip to content Skip to sidebar Skip to footer

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:

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/external/ExternalInterface.html

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

http://www.schillmania.com/projects/soundmanager2/

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