9 Replies Latest reply on Jul 24, 2014 1:51 AM by Chris Lhaut

    Communication between main file and loaded file

    Chris Lhaut Level 1

      Hi all,

       

      I'm trying to create some interaction between two edge files.

      My first edge file called index.html has a button and a movieclip on it. When you click on the button, it loads (with edgecommons) another file (called page1.html) somewhere into index.html. In page1.html, you have a button and when you click on it, it must make the moviclip on index.html disappear. My question is: How to target the movieclip in the first index.html file from the page1.html file ? is it possible?

       

      Thanks in advance for your answers.

       

      Chris

        • 1. Re: Communication between main file and loaded file
          arao2k6 Level 2

          Somewhere into index.html , you mean you are changing the html or are you loading it in a different popup window ?

           

          You could look into this feature of html5 called CORS : Using CORS - HTML5 Rocks

          • 2. Re: Communication between main file and loaded file
            joel_pau Level 5

            Hi Chris,

             

            "disappear" = hide or delete?

            It seems you wanted a load and unload button.

             

            Samples can be downloaded here: edge commons - copie.zip - Box

            There are 2 buttons.

            • One inside index.html: it loads and unloads page1.html
            • Another inside page1.html: it deletes page1.html

            You can replace: sym.$("button").off().on("click", function(){ newStage.deleteSymbol(); }); // delete

            by: sym.$("button").off().on("click", function(){ newStage.getSymbolElement().hide(); }); // hide

            • 3. Re: Communication between main file and loaded file
              Chris Lhaut Level 1

              Thanks but it's not what I'm looking for

              • 4. Re: Communication between main file and loaded file
                Chris Lhaut Level 1

                Hi Joel and thanks for the answer (I can't see your file working.. don't know why.. are you running under edge cc 2014 like me ?)

                 

                But I think that what I want to do is different. Imagine:

                I'm in the page1.html file (that is an edge movie) I click on a button and it makes an action directly in the index.html file (also an edge file) for example it makes an element moves or fade or something like that. The result is not important I just want to know if it's possible when I click on this page1.html file "interact" with the parent index.html file. Do you understand ? I'm not sure if it's clear or not.. :s

                 

                Thanks in advance for the answer

                 

                Chris

                • 5. Re: Communication between main file and loaded file
                  Chris Lhaut Level 1

                  Hi Joel,

                   

                  I joined an example of what I would like to do. index.html is the main file. When you click on the button, it loads via edgecommons page1.html in the content movieclip. In page1.html there is a movieclip and in this movieclip, a button. When I click on this button I want to make a movieclip in the index.html disappear, fade or something like that.

                   

                  Please check my files.

                   

                  http://we.tl/LRQJ7SYi3F

                   

                  Hope that's clear

                   

                  Thanks again for the help !!

                  • 6. Re: Communication between main file and loaded file
                    joel_pau Level 5

                    Here one solution: i manage button on page1.html from index.html (the main composition).

                    edgeCommonsEvent.jpg

                    You can copy and paste this code.

                    // I change the click event on the page1 button from index.html (bout1.click).

                    // I delete the old event using the .off() function, and i create a new event: .on() function.

                     

                    EC.loadComposition("page1.html", sym.getSymbol("content")).done(

                    function(comp){

                      document.title = "loaded composition: " + comp.getCompId();

                      var page1 = comp.getStage();

                      page1.getSymbol("clip").$("Rectangle2").off()

                      .on("click", function(){ sym.getSymbol("testclip").deleteSymbol() });

                      //.on("click", function(){ sym.getSymbol("testclip").getSymbolElement().hide() });

                    });

                     

                    J’ai vu que vous avez une version francophone d’Edge Animate.

                    Le plus simple est de supprimer l’événement click sur Rectangle2 (page1.html) et de créer l’événement click sur le fichier index.html

                    Le code ne contient plus alors la fonction .off() et peut se limiter à une seule ligne si l’on enlève les autres lignes inutiles.

                    EC.loadComposition("page1.html", sym.getSymbol("content")).done( function(comp){

                    comp.getStage().getSymbol("clip").$("Rectangle2").on( "click", function(){ sym.getSymbol("testclip").deleteSymbol() } );

                    } );

                    En résumé, on peut modifier un événement d’une composition chargée à partir de la composition principale.

                    Modifier veut dire soit créer [ .on() ] un événement soit changer [ .off().on() ] un événement. J’espère aussi avoir été clair. J’ai testé les 2 codes, ils marchent.

                    • 7. Re: Communication between main file and loaded file
                      Chris Lhaut Level 1

                      Thant's exactly what I was looking for !! thank you Joel !!

                       

                      Just one precision: so if I undertand what you say, both codes here do the same ? it's just two different ways to proceed ?

                       

                      Thanks again, Joel !!

                      • 8. Re: Communication between main file and loaded file
                        joel_pau Level 5

                        Both codes execute same task. There are 2 cases according to page1.html.

                         

                        1) if you delete the Rectangle2.click (page1.html) as image above

                        eventPage1Delete.jpg

                        The off() function is not required: $("Rectangle2").on( "click", function()

                        In this case, we set an event.

                         

                         

                        2) If you don’t delete the Rectangle2.click (page1.html) as image above

                        eventPage1.jpg

                        The code required is: $("Rectangle2").off().on( "click", function()

                        In this case, we change an event.

                        • 9. Re: Communication between main file and loaded file
                          Chris Lhaut Level 1

                          ok, thank you for the answer, Joel !

                          Have a nice day !