4 Replies Latest reply on Oct 21, 2013 9:53 AM by AMULI

    Loading defining global variables?

    andras.szabo

      Hello all!

       

      I have a project that is an online presentation, which I (being no pro in codeing) create in Edge and Muse. I create the animation in Edge, publish it as OAM and place it into the muse site/page. Master looks fine and I am happy with it.

       

      My problem, that I have to solve, is that it has to be translated into 44 Languages and kept updated regularly, which is near to impossible without using external data source.

       

      I thought to create an XML file for each language and use it for text and maybe Image content. I can use an xml file for a specific animation, but at my current knowledge level i!Il have to define the variables and the source of content for each and every animation/object.

       

      What I would like to see is that if you land on the Index page, you can choose the preferred language, and all the content appeares in the given language. For that (my best guess) I'll have to define global variables, which do not lose their value i.e.: which is my preferred language.

       

      How do I do that? Had anyone a similar issue? Also, how do I use external data in Muse?

       

      Any help would be appreciated!

       

      Greetz

      ND

        • 1. Re: Loading defining global variables?
          elainecc Adobe Employee

          Hi, andras-

           

          I would suggest adding a variable to the Stage in Edge Animate for everything within Animate.

           

          // set it this way

          sym.setVariable("language", "en");

           

          You can then use it wherever you want:

          var currLanguage = sym.getComposition().getStage().getVariable("language");

           

          The best thing for you to do is to create a complex data structure using a JavaScript Object - probably a hash of a hash.  To get more information on this, I wrote a little bit about JavaScript and hashes in my last blog post:

          http://blogs.adobe.com/edge/2013/09/19/floral-matchmaker-tutorial-4-randomizing-the-game-b oard/

           

          Hope this helps point you in the right direction!

           

          -Elaine

          1 person found this helpful
          • 2. Re: Loading defining global variables?
            andras.szabo Level 1

            Hi Elaine,

             

            thanks for the answer.

             

            I am not sure how to include the information you wrote.

             

            You see, my presentation(site) has 70 slides(pages) with different edge animations on it. Now my goal is to be able to tell the different pages where to look for the content xml file (that should be my variable).

             

            My Idea was to set up a cookie which stores the information of the preferred language. I think of an index page with different edge buttons. By clicking the "swedish" button the value of 'language' is set equal to the path where the xml file is located (../../Languages/Content_SE.xml). Then, when a new slide is selected, I'd like to retrieve the information from the cookie. I'd set up all my edge animations, to get the value(the relative path to the xml file) and then look for the content in that specific file.

             

            My questions are:

             

            1a: Where to set up the cookie? Muse or Edge

            1b: What would be the coding for that?

             

            2a: When I retrieve the value from the cookie do I do it in Muse or in Edge (If the slide1.html, which contanins the edge animation, retrieves the cookie value, can it be used by the edge animation on that page? or do I have to retrieve it by the animation itself?

            2b: In either case, what syntax is to be used?

             

            Id appreciate your help

            Greetings

             

            ND

            • 3. Re: Loading defining global variables?
              AMULI Level 4

              Hi Andras Szabo,

               

              Although you could load an XML file via the following Ajax method :

               

              $.get( '<XML_filename>', function(data)

                // callback function statements

              });

               

              in the jQuery world — hence in the Edge Animate world — retrieving a JSON file is often preferred :

               

              $.getJSON( '<JSON_filename>', function(data)

              {

                // callback function statements

              });

               

              Alternatively, you could also load an HTML snippet (a HTML file without any <head> and <body> tags, i.e. a subtree of a full DOM tree) :

               

              $('#<ID_of_text1>').load('text1.html');

               

              Your luck is that this afternoon I precisely planned to work on localization of a site for a client of mine I will post an example file switching languages via JSON files.

               

              Gil

              1 person found this helpful
              • 4. Re: Loading defining global variables?
                AMULI Level 4

                Here it is :

                 

                In the Stage > document.compositionReady event handler, we define a JavaScript object LANG containing

                 

                • a property flag that is the state of the displayed flag (in the example file, symbol drapeau, french for flag) ;

                 

                • a function switchLang executed each time the flag is clicked, to refresh the content of

                 

                - the three titles (b1A_tit, b1B_tit, b1C_tit) by  assigning hard-coded values,

                 

                - the three texts (b1A_txt, b1B_txt, b1C_txt) by loading HTML snippets files in a text folder.


                LANG =

                {

                  flag: 'NL',

                  switchLang: function()

                  {

                    sym.getSymbol('bandeauH').getSymbol('drapeau').stop( LANG.flag);

                    var symBloc1A = sym.getSymbol("bloc1A");

                    var symBloc1B = sym.getSymbol("bloc1B");

                    var symBloc1C = sym.getSymbol("bloc1C");

                    switch (LANG.flag)

                    {

                      case 'NL':

                        symBloc1A.$('b1A_tit').html("Montagne");

                        symBloc1A.$('b1A_txt').load('text/b1A_FR.html');

                        symBloc1B.$('b1B_tit').text("Peinture");

                        symBloc1B.$('b1B_txt').load('text/b1B_FR.html');

                        symBloc1C.$('b1C_tit').text("Maison d’hôtes");

                        symBloc1C.$('b1C_txt').load('text/b1C_FR.html');

                        LANG.flag = 'FR';

                        break;

                      case 'FR':

                        symBloc1A.$("b1A_tit").text("Montagne");

                        symBloc1A.$('b1A_txt').load('text/b1A_NL.html');

                        symBloc1B.$("b1B_tit").text("Schilderen");

                        symBloc1B.$('b1B_txt').load('text/b1B_NL.html');

                        symBloc1C.$("b1C_tit").text("Bed & Breakfast");

                        symBloc1C.$('b1C_txt').load('text/b1C_NL.html');

                        LANG.flag = 'NL';

                        break;

                    }

                  }

                };

                //------------------------------------------------------

                LANG.switchLang();

                 

                The drapeau > click event handler is a single call to LANG.switchLang();

                 

                Download the example file here : https://app.box.com/s/f8boa2oswnowyl3ehb2o

                 

                screenFR.png

                 

                screenNL.png

                 

                Gil