6 Replies Latest reply on Apr 2, 2014 3:13 AM by justincode

    Integrating External JQUERY code with Edge Animate

    justincode Level 1

      Hi all...

       

      There are two ways i can see of integrating Edge Animate With External JQuery

       

      Something happens within Adobe edge and triggers something to happen externally or vice versa.....

       

       

      1: When an action is performed (mouseUp MouseOver... etc...) we can initiate some external Jquery

       

      For example

       

      When I "mouseUp" my play button i run the function  "playPause()" and my audio starts to play

       

       

      function playPause(){

          if( $("#liveStream").data("jPlayer").status.paused ) {

              $("#liveStream").jPlayer("play");

          }

          else {

              $("#liveStream").jPlayer("pause");

          }

      }

       

      So this is fine... i perform an action in Adobe Edge and something external to the composition occurs, in this case it connects to a live stream of audio and the user gets the desired result.

       

       

      2:When an event occurs in external Jquery (playing, connection lost, audio not ready... etc...) we can perform an action within Adobe Edge

       

       

      For example

       

      When the audio stream is playing and the user is definatly hearing music i need to perform an action within Adobe Edge like "sym.$("playButton").hide();" which hides the play button because obviously there is no need to click play anymore when the music is already playing..

       

      This is were my Jquery understanding ends..

       

      Questions:


      1: Where do i put global code within my Adobe Edge composition that triggers actions when external jQuery returns an event

      2: How do i go about coding this...

       

      Below is my best attempt

       

      function playStatus(){

           $("#liveStream").bind($.jPlayer.event.playing, function (event) {

                sym.$("playButton").hide();

           });

      }

       

      Now my attempt is probably way off the truth but im hoping you understand what i am trying to achieve..

       

      Thank you for reading this through

       

      Any advice would be greatly appreciated.....

       

      Justin..

        • 1. Re: Integrating External JQUERY code with Edge Animate
          hemanthR Adobe Employee

          You can add all your code right after where you create your jp-player.

          It should work.

          In the example below is create the jp-player in creation-complete event .

          I have added the code for jp-player creation and code for event listeners for play and pause event also right after it.

          $(".jp-jplayer").jPlayer({

                  ready: function(event) {

                      $(this).jPlayer("setMedia", {

                          mp3: "http://jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",

                          oga: "http://jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"

                      }).jPlayer("play");

                  },

                  swfPath: "http://jplayer.org/latest/js",

                  supplied: "mp3, oga"

              });

           

           

                     function PlayStatus(){

           

           

            $(".jp-jplayer").bind($.jPlayer.event.playing, function (event) {

                    sym.$("RoundRect").hide();

               });

           

           

           

           

                       $(".jp-jplayer").bind($.jPlayer.event.pause, function (event) {

                    sym.$("RoundRect").show();

               });

               }

           

           

            PlayStatus();  

          1 person found this helpful
          • 2. Re: Integrating External JQUERY code with Edge Animate
            justincode Level 1

            Hi, thanks for the assistance....

             

            I have tried to integrate the following code into the "creationComplete event"

             

            //Initiate JPlayer

             

            $(document).ready(function(){

             

                var stream = {

                    mp3: "http://streaming.radionomy.com/ABC-Jazz"

                },

                ready = false;

             

                $("#liveStream").jPlayer({

                    ready: function (event) {

                        ready = true;

                        $(this).jPlayer("setMedia", stream);

                    },

                    pause: function() {

                        $(this).jPlayer("clearMedia");

                    },

                    error: function(event) {

                        if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {

                            // Setup the media stream again and play it.

                            $(this).jPlayer("setMedia", stream).jPlayer("play");

                        }

                    },

                    swfPath: "js",

                    supplied: "mp3",

                    preload: "none",

                    wmode: "window",

                    keyEnabled: true

                });

             

             

            });

             

            //Create function for Play & Pause

             

            function playPause(){

                if( $("#liveStream").data("jPlayer").status.paused ) {

                    $("#liveStream").jPlayer("play");

                }

                else {

                    $("#liveStream").jPlayer("pause");

                }

            }

             

             

            The above code used to be within a player.js file that i called into edge, As you have recomended to me i have moved this code to within edge...

             

            When i try to play the stream i get the following error from the console "Javascript error in event handler! Event Type = element"

            It is refering to edge.3.0.0.min.js

             

            In a bit stuck now as to why it is not working....

             

            This error is usually generated when the scripts are not talking to each other so im guessing it should be an easy one for you guys as my knowledge of jquery is not great!

            • 3. Re: Integrating External JQUERY code with Edge Animate
              hemanthR Adobe Employee

              Not sure whats causing this error.

              If you can mail/PM me the files,I can look in to them

              • 4. Re: Integrating External JQUERY code with Edge Animate
                justincode Level 1

                Right Everything seems to be working correctly now that i have put my code within Global Code and not creation-complete apart from me not having control of the hide & show...

                 

                I will simplify

                 

                I have a function in global code as follows

                 

                function test(){


                    sym.$("boxA").hide();

                }

                 

                Then i have some code for a mouseUp command on a rectangle

                 

                test()

                 

                I am expecting boxA to be hidden when i mouseUp on my rectangle but nothing happens...

                 

                I can Alert("hello"); within my test() function but i have no control over the animations within adobe edge....

                 

                I can obviously write the code to sym.$("boxA").hide(); within my mouseUp but this goes against me trying to have control from global code..

                 

                Im guessing i need to add some code before the sym.$("boxA").hide(); to make edge reference the symbol correctly as at the minute it does not know where to look for boxA

                 

                Manyt thanks for all your help so far.. its much appreciated !!!!

                • 5. Re: Integrating External JQUERY code with Edge Animate
                  hemanthR Adobe Employee

                  Form what I uderstand from above comment is you are trying to access Animate content from outside Animate code.For that you will need to get a reference to animate compostion first.

                  See if this snippet works

                   

                  function test(){

                  var com = AdobeEdge.getComposition("<your composition id here>");

                       com.getStage().$("Rectangle").hide();

                  }

                  1 person found this helpful
                  • 6. Re: Integrating External JQUERY code with Edge Animate
                    justincode Level 1

                    Hi...

                     

                    When i say global code i mean

                     

                    In adobe edge "click" window and then "click" code and then "click" full code, this is where i am now puting the code you recommended from your comment "26-Mar-2014 22:18" as this is the only way i seem to be able to initiate my jp player....

                     

                    Are you saying that this full code area is outside of edge, i did not think so...

                     

                    this poses two questions:

                     

                    1: to initiate jpplayer is this the correct place to do it (in the full code area)

                    2: is your above comment the best way to run the function i require as i thought i was inside edge.

                     

                    many thanks for your continued assistance!!!!