1 Reply Latest reply on Aug 19, 2014 4:28 AM by eliverrang

    Adding own javascript to edge animate

    ristenkAdobe

      I'm having a bit of trouble adding my own javascipt to an edge animate project. I created a website that has javascipt in it. I am trying to recreate it using edge animate because I was interested in using edge animate to take the site up a notch... basically I have a template of what I need the site to do with the existing javascipt I have, but I haven't gotten it to work integrated into edge animated yet.

       

      I imported all of the images I have from the existing website into edge animate and then relabled all of the instances on the stage to reflect what I have called them in the javascript. I've tried importing my javascript file into the "scripts" section and then just linking to the source in the main html page that edge generates but the javascript doesn't work. Then I've tried putting parts of the script into the CompositionReady panel and onto the button I want clicked directly in the elements.... this works ok, except I have to change the syntax a little (not too much of a pain except when I don't think the edge animate javascript has the same functions).....I'll post below and see if someone can help me get this working either by just linking to the file directly from the html or making the script campatable in edge syntax and posting it in the appropriate element panel. Here is the seperate script from the outside javascript... show I change the syntax and put it directly on the"checkbutton" button in the elements (if so, how?) or should I just link to the file (if so, how come when I put a simple link in the header that it doesn't work: <script type="text/javascript" charset="utf-8" src="js/myscript.js"></script>

       

      script from myscript.js:

      //sym.$("pic1a").hide(); //edge animate syntax when in animate panels.... does my external js sheet have to keep this syntax?

       

      var carArrayX = [140,140,330,460,650,765];
      var carArrayXcounter = 0;

      var carArrayY = [ 440,440,405,390,390,390];
      var carArrayYcounter = 0;

      $( '#blueCar' ).addClass( "hidden" );

      var counterBox = 0;

          $('#checkButton').click(function(){
           if (counterBox == 0)
               {
               alert("Please choose an answer");
               }
              
           else if (counterBox > 1)
               {  
               alert("Please choose only one answer");
               }
              
           else if (counterBox == 1)
               {
               
               $(this).css('background-image', 'url(button_down.png)');
               $("#pic2a").unbind("click");
               $("#pic2b").unbind("click");
               $("#pic2c").unbind("click");
               $("#pic2d").unbind("click");
               $("#pic2e").unbind("click");
               $("#pic2f").unbind("click");


                 if($("#pic2a").hasClass("hidden")){
                 $("#words_correct").removeClass("hidden");          

                 $( '#pic3a' ).removeClass( "hidden" ); //correct answer
                 $( '#pic1a' ).addClass( "hidden" );
                
                 $( '#blueCar' ).removeClass( "hidden" );
                
                 $('#blueCar').animate({
                  left:carArrayX[carArrayXcounter] + "px",
                  top:carArrayY[carArrayYcounter] + "px"
                  });
                
                 carArrayXcounter ++;
                 carArrayYcounter ++;

                 var cookieXcounter = carArrayXcounter;
                 var cookieYcounter = carArrayYcounter;
                 //console.log(cookieXcounter);
                 //console.log(cookieYcounter);

                 $.cookie('mycookieX',cookieXcounter,{expires:7,path:'/'});
                 $.cookie('mycookieY',cookieYcounter,{expires:7,path:'/'});
                
                 console.log($.cookie('mycookieX'));
                

                 $( '#pic1b' ).addClass( "hidden" );
                 $( '#pic1c' ).addClass( "hidden" );
                 $( '#pic1d' ).addClass( "hidden" );
                }
               
                else if($("#pic2b").hasClass("hidden")){
                 $("#words_wrong").removeClass("hidden");
                 $( '#pic4b' ).removeClass("hidden");//incorrect answer
                 $( '#pic1b' ).addClass( "hidden" );
                
                 $( '#pic1a' ).addClass( "hidden" );
                 $( '#pic1c' ).addClass( "hidden" );
                 $( '#pic1d' ).addClass( "hidden" );;
                }
               
                else if($("#pic2c").hasClass("hidden")){
                 $("#words_wrong").removeClass("hidden");          
                 $( '#pic4c' ).removeClass( "hidden" );//incorrect answer
                 $( '#pic1c' ).addClass( "hidden" );
                
                
                 $( '#pic1a' ).addClass( "hidden" );
                 $( '#pic1b' ).addClass( "hidden" );
                 $( '#pic1d' ).addClass( "hidden" );;
                }
               
                else if($("#pic2d").hasClass("hidden")){
                 $("#words_wrong").removeClass("hidden");        
                 $( '#pic4d' ).removeClass( "hidden" );//incorrect answer
                 $( '#pic1d' ).addClass( "hidden" );
                
                 $( '#pic1a' ).addClass( "hidden" );
                 $( '#pic1b' ).addClass( "hidden" );
                 $( '#pic1c' ).addClass( "hidden" );;
                }                           
               }
         
          });

          $('#pic2a').click(function(){
          
            $( '#pic1a' ).removeClass( "hidden" );
           
            $( '#pic2a' ).addClass( "hidden" );
            counterBox++;

       

          });
         
         
          $('#pic2b').click(function(){
          
            $( '#pic1b' ).removeClass( "hidden" );
           
            $( '#pic2b' ).addClass( "hidden" );
            counterBox++;
          });
         
         
          $('#pic2c').click(function(){
          
            $( '#pic1c' ).removeClass( "hidden" );
           
            $( '#pic2c' ).addClass( "hidden" );
            counterBox++;
          });


          $('#pic2d').click(function(){
          
            $( '#pic1d' ).removeClass( "hidden" );
           
            $( '#pic2d' ).addClass( "hidden" );
            counterBox++;
          });
         
         
          $('#pic2e').click(function(){
          
            $( '#pic1e' ).removeClass( "hidden" );
           
            $( '#pic2e' ).addClass( "hidden" );
            counterBox++;
          });
         
         
          $('#pic2f').click(function(){
          
            $( '#pic1f' ).removeClass( "hidden" );
           
            $( '#pic2f' ).addClass( "hidden" );
            counterBox++;
          });
         
         
         
          $('#pic1a').click(function(){
          
            $( '#pic2a' ).removeClass( "hidden" );
           
            $( '#pic1a' ).addClass( "hidden" );
            counterBox--;
          });
         
         
          $('#pic1b').click(function(){
          
            $( '#pic2b' ).removeClass( "hidden" );
           
            $( '#pic1b' ).addClass( "hidden" );
            counterBox--;
          });
         
         
          $('#pic1c').click(function(){
          
            $( '#pic2c' ).removeClass( "hidden" );
           
            $( '#pic1c' ).addClass( "hidden" );
            counterBox--;
          });


          $('#pic1d').click(function(){
          
            $( '#pic2d' ).removeClass( "hidden" );
           
            $( '#pic1d' ).addClass( "hidden" );
            counterBox--;
          });
         
         
          $('#pic1e').click(function(){
          
            $( '#pic2e' ).removeClass( "hidden" );
           
            $( '#pic1e' ).addClass( "hidden" ); 
            counterBox--;
          });
         
         
          $('#pic1f').click(function(){
          
            $( '#pic2f' ).removeClass( "hidden" );
           
            $( '#pic1f' ).addClass( "hidden" );
            counterBox--;
          });

        • 1. Re: Adding own javascript to edge animate
          eliverrang Level 1

          I also had the problem of wanting to use custom javascript that I could call from an Edge Animate Composition.

           

          The solution I found (from a post by hemanth kumar r https://forums.adobe.com/thread/1479495) was to make variables and functions properties of AdobeEdge.

           

          So in the external .js document a variable is declared and given a value:

           

          AdobeEdge.myVariableName = "The variable value";

          To use it in a symbol/element:

          alert(AdobeEdge.myVariableName);

           

           

          And a function is declared:

          AdobeEdge.myFunctionName(param){...function code...} //param optional

           

          To call these in a symbol/element:

          AdobeEdge.myFunctionName(param);

           

          To test this out I created a button on my stage that called a function in my custom .js file that simply called an alert. Once the function works you can expand it to do anything you want (I used it to go to a new html page).

           

          Peter Small

          1 person found this helpful