12 Replies Latest reply on Mar 6, 2014 12:49 AM by Baz Nissarana

    compositions communicating

    Baz Nissarana

      I have a composition called 'outer' into which I load a composition called 'inner'. Can I get the composition 'inner' to call a function on the stage of the composition 'outer'?


      something like:


      sym.getComposition().getStage().myFunction(); //doesn't work


      any help would be greatly appreicated!

        • 1. Re: compositions communicating
          hemanthR Adobe Employee

          How are you loading  composition within another composition?

          Can you mail me the files so that i can have a look and see whats the issue?

          1 person found this helpful
          • 2. Re: compositions communicating
            Baz Nissarana Level 1

            Here's the files:

            I'm using edge commons to load the composition in:



            publsihed: http://www.barrylangton.com/edge/loadingCompositions/publish/web/outer.html


            source: http://www.barrylangton.com/edge/loadingCompositions/loadingCompositions.zip


            If you help it would be greatly appreciated!

            If you need any more info please let m know




            • 3. Re: compositions communicating
              hemanthR Adobe Employee

              Since Edge Commons loads a composition within another compostion using iframe,you will not be able to call a outer compostion's functions directly.

              Also Edge global variable cannot be used inside animate runtime.

              • 4. Re: compositions communicating
                Baz Nissarana Level 1

                Ok thanks. Is there a work around - what is the best way to spliting up a large project so you can have a main composition that can load in smaller compsotions and have the two way communication - is it possible at all?

                If I develop large projects, I don't want it all in one composition becuase it's gets too large to work effectively with. I can split it inot small compositions and have one main composition and smaller ones loaded in when I need them. I know I can have the main composition comminucation with the loaded compsoitions which is good. But Ideally I need to have common functions in the main composition, fucntions that all the loaded compositions can utilize.

                Is there any way to achieve this? Any work around at all? Or am I approaching it wrongly?

                I've searched and there lots of tutorials at a simple level but I can't find any documentation to help me. I'm new to animate. I just want to know the best way to structure larger projects? To break it up into smaller bits that can communicate with each other.

                If Edge Commons load compsotion is not an approach that will work can you point me in the right direction? Can you let me know what would achieve this? Or it is just impossible?

                • 5. Re: compositions communicating
                  Baz Nissarana Level 1

                  I'm sorry but are you going to help me with this? I'm left for over a week wondering if you are going to answer or not.

                  Can you at least let me know if you have decided to stop helping with this discussion?

                  Any response would be appreciated

                  • 6. Re: compositions communicating
                    hemanthR Adobe Employee

                    I complete forgot about this.

                    Have you check out this link : http://blogs.adobe.com/edge/2012/05/15/bootstrapping-edge-compositions/

                    • 7. Re: compositions communicating
                      Baz Nissarana Level 1

                      Yes I've seen that before: I guess you just don't know then, do you? - can't say whether it's possible or not?

                      If you can tell me that what I'm trying to do is impoosibe that would be helpful?

                      If you can tell me you don't know that would be helpful?

                      • 8. Re: compositions communicating
                        hemanthR Adobe Employee


                        I have not used Edge Commons so I am not sure how they work


                        Anyhow here is the corrected code you will have to have in the composition ready of the outer html

                        var mycomp =  EC.loadComposition("inner.html", sym.getSymbol("content"));

                        mycomp.done(function(comp) {

                        var stage = comp.getStage();

                                  stage.$("btn").click(function() {






                        sym.myFunction = function(){



                             EC.info( "my function" );





                        You have registered the click event for the btn element of inner.html  here in outer.html only .So there is no need of adding any click event listener in inner.html

                        Hope i have helped you now.

                        If you already knew this from the example in edge commons site and need to call function only from inner.html, I am not aware of a way to do that now

                        1 person found this helpful
                        • 9. Re: compositions communicating
                          Baz Nissarana Level 1

                          ok thanks - sometimes it's helpful to say you don't know, then I can look else where for answers

                          • 10. Re: compositions communicating
                            Alectra Level 1

                            Hey, I have been doing a lot of work with multiple compositions in Edge, as I am working on moving over as a Flash/AS3 developer. I am new to Edge, but I am dealing with a LARGE project that I am splitting up into multiple files. If this information helps you, great, I have had a lot of frustration with the lack of documentation on the matter myself. I hope this is closer to what you are looking for. I use Edge for the animations and page setup and to make it look nice and make it easy for the designers to use. Then I code the non-design-related functionality in javascript.


                            Right now, I am using a variation of the bootstrap method mentioned, tho the one on that page is scarily simplistic and needed a lot of modification to actually work. Basically, I have my base composition, which has buttons like next, prev, and other commands. Then I have other compositions that I load on top of or behind it. I position them with css as needed. My outer comp is overlayed with the inner one(s) with transparent backgrounds. Then, everything is controlled in a seperate JS file. Just make sure you give your divs the classname from your edge content.


                            I load my base comp in the html page:


                                 <!-- other header stuff -->

                                 <script type="text/javascript" charset="utf-8" src="BaseCompV1_edgePreload.js"></script>


                            <body style="margin:0;padding:0;">

                                 <div id="innerContent1" class="EDGE-InnerContent1"></div>

                                 <div id="innerContent2" class="EDGE-InnerContent2"></div>

                                 <div id="innerContent3" class="EDGE-InnerContent3"></div>

                                 <div id="BaseComp" class="EDGE-BaseCompV1"></div>


                            <script type="text/javascript" src="scripts.js"></script>


                            and I have my javascript file (scripts.js from above) set up like this:


                            var numLoaded = 0;

                            AdobeEdge.bootstrapCallback(function(compId) {

                                 loadedEdgeComps[compId] = AdobeEdge.getComposition(compId);

                                 if (compId == 'EDGE-BaseCompV1') {

                                      var nextButton = document.getElementById('BaseComp_Next_Button');

                                      nextButton.addEventListener('click', nextSlide);


                                      var prevButton = document.getElementById('BaseComp_Prev_Button');

                                      prevButton.addEventListener('click', prevSlide);





                                 } else {


                                      if (numLoaded == 3)




                            function loadInner(preloadPath) {

                                 $.getScript(preloadPath, function() {});


                            ------------------------------------------------------------------------------------------ --

                            Granted, I cut out a lot of my code and replaced a lot of my dynamic stuff with useful names so you wouldn't have to hunt for variable info and deal with for loops, but if you are willing to code OUTSIDE of edge, (I reccomend Sublime editor, it even has an AdobeEdge code-completion plugin) you can make it work a lot better. In my css file, I set display:none to all innerContent items, I positioned them where I wanted them (position:absolute and top:90px, left:0px), and then I applied display:block to the ones that I wanted to be displayed.


                            Just keep in mind that doing it outside of edge means you cant use sym, but I haven't found that variable to be overly useful even IN Edge...

                            1 person found this helpful
                            • 11. Re: compositions communicating
                              Alectra Level 1

                              But no, I have not yet found a way to communicate directly from within one comp to another without an intermediary.

                              • 12. Re: compositions communicating
                                Baz Nissarana Level 1

                                Thank you! This looks like exactly where I was heading, only you've probably saved me alot of time.

                                I'm also new to edge, from flash and really keen to learn the best approaches to structuring large projects.


                                Thanks for taking the time help me understand