14 Replies Latest reply on Jun 25, 2014 11:19 PM by DoggyDish

    Using sym. functionality via JS file

    TrinOdette

      I'm working on a project where I have some custom functions in a Javascript file.

       

      I want to be able to access the Edge functions e.g. sym.play(); from that file.

       

      Via console I always get back 'ReferenceError: Can't find variable: sym'

       

      How can I go about using the sym funcitons from my JS file?

        • 1. Re: Using sym. functionality via JS file
          TrinOdette Level 1

          Bump

           

          Specifically I have JS file of global functions, which I'm loading dynamically.

           

          I want to play a certain scene when ever the back button is pressed.

           

          $(document).keyup(function(e) {

            if (e.keyCode == 8) { sym.play("in-game"); sym.stop(); }   // esc

          });

           

          Please Help!

          • 2. Re: Using sym. functionality via JS file
            elainecc Adobe Employee

            You should use the AdobeEdge global in your external JS function.  Here's an example:

             

            var comp = AdobeEdge.getComposition("my-composition-id-as-seen-in-the-properties-panel");

            comp.play();

            comp.stop();

             

            sym is an internal name that we use to refer to an Animate symbol, so it won't be visible external to a composition.  Also note that you will want to avoid race conditions, so you should use the bootstrap APIs as defined in the JavaScript API doc.

             

            -Elaine

            1 person found this helpful
            • 3. Re: Using sym. functionality via JS file
              TrinOdette Level 1

              Thanks Elaine, super helpful.

               

              Is there any difference between this and how you normally interact from within Edge.

               

              I run

              comp.play("in-game");

               

              and it runs the composition from the very start instead of the in-game label.

               

              Also could you link me the JavaScript API?

              • 4. Re: Using sym. functionality via JS file
                elainecc Adobe Employee

                Hi, Trin-

                 

                There shouldn't be an issue accessing labels, but I'll mark it down as something to explore in the near future.

                 

                http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html

                 

                Please note that you can get to this from the product by going to Help > Edge Animate Javascript API...

                 

                -Elaine

                • 5. Re: Using sym. functionality via JS file
                  TrinOdette Level 1

                  Thanks again,

                   

                  It might be my set-up because I'm having trouble using other commands.

                   

                  Screen-Shot-2013-04-01-at-7.21.24-PM.png

                  (ignore intervals passed logs)

                   

                  Here is me trying some of the commands from console. As you can see at the top comp.play(); is accepted(though doesn't work properly when I pass a label). None of the other commands like stop(); worked.

                   

                  Looking forward to this being able to fix this because the app I'm developing depends on being able to trigger these functions from outside the Stage.

                  • 6. Re: Using sym. functionality via JS file
                    TrinOdette Level 1

                    Anyone get a chance to look at this from within Javascript console?

                     

                    I'm 90% ready to release my mobile app, the only thing holding me back is my buttons located outside the Edge Stage can't trigger different parts of the timeline.

                    • 7. Re: Using sym. functionality via JS file
                      TrinOdette Level 1

                      Still looking to solve this. Can anyone confirm that it's not possible to access the methods described by Elaine

                       

                      The easiest way to do this would be to open up any Edge Project you're working on and via Javascript Conosole and run the following.

                       

                      var comp = AdobeEdge.getComposition("my-composition-id-as-seen-in-the-properties -panel");

                      comp.stop();

                       

                      If anyone can get stop working then maybe I have something set up wrong. But at this one no one has confired or denied that this is even an issue with the Javascript API.

                      • 8. Re: Using sym. functionality via JS file
                        elainecc Adobe Employee

                        I won't be able to take a look at this until late next week at the earliest, as I have an internal deadline I'm working to meet.  Hopefully someone else will be able to help you out in the meantime.

                         

                        -Elaine

                        • 9. Re: Using sym. functionality via JS file
                          elainecc Adobe Employee

                          Hi, Trin-

                           

                          Were you able to get the bootstrapping to work?

                           

                          -Elaine

                          • 10. Re: Using sym. functionality via JS file
                            elainecc Adobe Employee

                            Hi, Trin-

                             

                            Okay, I was really close, but I forgot the "getStage."  Here's a simple file I put together to demonstrate an external JS file calling into an Animate composition.

                             

                            https://creative.adobe.com/share/2e160010-41ca-460a-83a6-62b75b3b83bd

                             

                            Hope this helps!

                             

                            -Elaine

                            • 11. Re: Using sym. functionality via JS file
                              TrinOdette Level 1

                              Thanks so much!

                               

                              It's working great now that I'm calling comp as you do in your example

                              • 12. Re: Using sym. functionality via JS file
                                elainecc Adobe Employee

                                Awesome!  Glad it made sense.

                                 

                                -Elaine

                                • 13. Re: Using sym. functionality via JS file
                                  David_sceno

                                  I am woking on a website that is taking to long to load when open on either Safari, Chrome, Firefox or Iexplorer.

                                  This web site has been built with Edge animate and involve among other things 4 photos galleries,

                                  Each of those 4 galleries are opened by clicking one of the 4 buttons, part of another symbol on the main stage.

                                  Then, we flip the pictures of those gallery by clicking on a "previous / next " button that trigger the timeline within each of the gallery symbols.

                                   

                                  The question is:

                                  I would like to split the compostion into two different compositions.

                                  One very light, which will contain the main navigation menu of the site including:

                                  1. The symbol with the 4 buttons to open and close the 4 gallery
                                  2. The button previous / next
                                  3. Other navigation stuff

                                   

                                  And then, one heavier composition that will be the 4 galleries split into 4 different symbols

                                   

                                  The hope is, not having to wait for all the pictures to load when visitors access the website, the main page will open faster.

                                  Then the image galleries will load later when the buttons to access the galleries will be clicked or ideally will be loaded in the background, while the visitor is reading other part of the site.

                                   

                                  What will be the syntax to trigger the open / close photo gallery from one symbol on the main stage inside gallery to the embedded "gallery" stage

                                  I need to add something at the beggining of the following code, to access it from a the main stage to the embedded stage. but what would it be?

                                  • var Album_Expo = sym.getComposition().getStage().getSymbol("Album_Expo");
                                  • Album_Expo.play(0.1);

                                   

                                   

                                  And then next step:

                                  What will be the syntax to trigger the previous / next action, playing the timeline of the symbol within the embedded composition

                                  I need to add something at the beggining of the following code, to access it from a the main stage to the embedded stage. but what would it be?

                                  • var Expo = sym.getComposition().getStage().getSymbol("Album_Expo").getSymbol("Photo_Expo");
                                  • Expo.play(0.1);

                                   

                                  You can access the website by following this link.

                                  www.unpointsixunhuit.ca

                                   

                                  Thanks

                                  David

                                  • 14. Re: Re: Using sym. functionality via JS file
                                    DoggyDish

                                    That did the trick! Simple as this. For the clueless javascripters, like me, make sure you first are calling 1. JQUERY, 2. WAYPOINTS and then use similar code.

                                     

                                     

                                     

                                     

                                    <script type="text/javascript">
                                    
                                    AdobeEdge.bootstrapCallback(function(compId) {
                                    
                                    ///// make the reference to the specific composition
                                    
                                    comp = AdobeEdge.getComposition("EDGE-XXXXXXXXX").getStage();
                                    
                                    });
                                    
                                        $('.step-1').waypoint(function() {
                                    
                                                comp.play();
                                        }, {
                                    
                                            triggerOnce: true,
                                            offset: 'bottom-in-view'
                                    
                                        });
                                      </script>
                                    
                                    

                                     

                                     

                                    ONE MORE THING...

                                    screenshot.png

                                     

                                    Note: You will need to make sure AutoPlay is off in Adobe Edge before publishing.