3 Replies Latest reply on Jun 3, 2015 5:21 PM by sinious

    We are using Flash Pro CC creating animations with captions and exporting to html 5.  We need to translate the captions in other languages. How can we upload text translations into our flash animations so we can use them in html5 using CreateJS?

    courtaeqfqefaef

      We are using Flash Pro CC creating animations with captions and exporting to html 5.  We need to translate the captions in other languages. How can we upload text translations into our flash animations so we can use them in html5 using CreateJS?  I am using Flash on a Mac OSX 10.10.3

        • 1. Re: We are using Flash Pro CC creating animations with captions and exporting to html 5.  We need to translate the captions in other languages. How can we upload text translations into our flash animations so we can use them in html5 using CreateJS?
          sinious Most Valuable Participant

          Are you familiar with JavaScript?

           

          This isn't going to entirely answer your question but text displayed on screen from any language (ActionScript/CreateJS/[insert programming language]) typically all follows the same path. Each language has a file stored in some form of key=value style, named via the language and country desired, e.g. en_US.json

           

          Any language would allow the user to choose the locale. The app would then grab the proper file and everywhere the text is needed, the script should be utilizing a (typically global or singleton) variable/service that can get the text for the requested key.

           

          e.g. if I wanted a user to have a confirm dialog that stated "Are you sure?" with buttons for "Yes" and "No", I would have (for me) an English, USA based file en_US.json with these values in it, e.g.:

           

          en_US.json example:

           

          {

               "CONFIRM_YES_NO":      "Are you sure?",

               "YES":      "Yes",

               "NO":      "No"

          }

           

          Then you simply use JS/AJAX to read that file. You parse it, either just JSON decoding it into an object or manually, whichever suits your needs. When you want to display any text, you use the object (variable, service, etc) you've stored these values in.

           

          e.g. calling function to display confirm dialog:

           

          // psuedo.. but so you understand..

          // and this comes from jQuery UI (see here)

          function confirmDialog() {

          $( "#dialog-confirm" ).dialog({

            title: LocalizationObject['CONFIRM_YES_NO'],

            buttons: [

            {

            text: LocalizationObject['YES'],

            click: function() {} // do something for "Yes"

            }

            {

            text: LocalizationObject['NO'],

            click: function() {} // do something for "No"

            }

            ]

          });

          }

          Please take it loosely. "LocalizationObject" is some variable or service object that will return the proper text for the key you provide. In this case it was provided the keys "CONFIRM_YES_NO", "YES" and "NO", each of which should be set to the proper response for that key, localized.

           

          Again this is not a manual on how to do this via Flash Pro but it's the general conceptual way you could do it in any language. There are a variety of other ways to do it but this is one very simple way, as long as you keep your key names at least limitedly verbose. A key name such as LocalizationObject['ABC123'] doesn't really tell you what the key might be referring to. Also nesting them helps greatly, such as LocalizationObject['UI']['DIALOGS']['CONFIRM']['YES_NO'] = 'Are you sure?'. This is just showing that I nested the dialog title inside UI because it's text appearing in the UI as opposed to content. Then inside DIALOGS which could contain a variety of different dialogs. Then inside the CONFIRM type of dialog. Finally the type is a YES_NO type of dialog (as opposed to OK_CANCEL or JUST_OK, etc). Reading it all together makes it easy to understand what the text is: UI DIALOGS CONFIRM YES_NO.

           

          Hopefully from this you can see that you'll need to overhaul everywhere you display text on screen and centralize it into some kind of object (function or variable) of your choice. You should keep the language files external to keep from needlessly loading other languages as well as an easy to edit setup.

           

          The rest is just using basic JavaScript.

           

          Just be ready for the hardest challenge. At least to me. The size of the text in various languages will greatly differ, and in some cases requires loading special fonts. This can make layout in a dynamic environment very challenging. Always be thinking about how large or small text may be in any particular area and plan on that size growing and shrinking as well as handling that situation properly.

          1 person found this helpful
          • 2. Re: We are using Flash Pro CC creating animations with captions and exporting to html 5.  We need to translate the captions in other languages. How can we upload text translations into our flash animations so we can use them in html5 using CreateJS?
            courtaeqfqefaef Level 1

            Thank you sinious for you time,

             

            I am assuming we can track and switch each text caption via the "instance name" in flash. The instance can be an object holding text. Where will the instance name show up in the HTML5 code?

            Is CreateJS supported by Flash Pro CC or just HTML Canvas?

             

            Do you know of any examples where Flash instances are swapped out in HTML5?

             

            Thank you,

             

            Court

            • 3. Re: We are using Flash Pro CC creating animations with captions and exporting to html 5.  We need to translate the captions in other languages. How can we upload text translations into our flash animations so we can use them in html5 using CreateJS?
              sinious Most Valuable Participant

              When you select a HTML Canvas project, that's your way of telling Flash Pro that you want to use JavaScript and the CreateJS library, otherwise you're using ActionScript and AIR. It's black and white. HTML Canvas projects do not use ActionScript at all and vice versa.

               

              Each instance name is accessible in JavaScript and the path to the object really depends on your code and your current scope. This is not at all easily explainable because of the deep nesting and event nature, making your current scope like throwing darts at a dart board.

               

              In the easiest scenario, you're running a direct frame script. "exportRoot" is an object created that directly references your main timeline. If you had a TextField with the name "myTxt", then you could access it and it's properties via: exportRoot.getChildByName("myTxt"). You'd then want to add the property or method you want to use after the closing paren. Setting text would be like exportRoot.getChildByName("myTxt").text = LocalizedTextFunction('ID_HERE');

               

              Do consider that certain fonts must be used to display certain character unicode ranges. Not every font has the capability of the huge glyph ranges of Asian unicode ranges (over 60,000 glyphs).

              1 person found this helpful