6 Replies Latest reply on Aug 24, 2015 10:45 AM by resdesign

    Tips for dynamic images?

    toedip

      Hi,

       

      I'm looking to have the option for a bilingual page in my Adobe Edge Animate project. The two languages would have identical stages and timing, just the graphic images would be different that contain text. I can do it the crude way and publish two projects with different images worst case... however I was hoping there is a way I can make a button to toggle language, and the onClick event would then change all images in my list with alternate images. I've found some snippets of JS code to swap images, I'm just not sure how to use that in Edge Animate... or if that's even the correct approach in Edge Animate.

       

      I see that your_project_edge.js has the "stage" that loads up all the images. Is there a way to make an onClick button load a different JS file all together?, and I would have a second copy of the your_project_edge.js to include the second set of images. Or once that JS page is loaded, it's too late to "reload" it?

       

      Or is there a way to have those image links have a built in if statement? (if that's possible?). So the button would be a toggle. If button is clicked, change link for all images to new links, sort of thing.

       

      Or is there just a way to make an onClick event change the link of an image and it will change on the fly?

       

      Hope this makes sense, any help is much appreciated!

       

      Thank you,

       

      Mark

        • 1. Re: Tips for dynamic images?
          resdesign Adobe Community Professional & MVP

          hi there,

          the he easiest way to switch between languages is to have your text into arrays like:

          var english =['caption 1 here', 'caption 2 here,...];

          var spanish = ['aqui 1', 'Aqui 2'...];

          and use a conditional to load either language - for example

          var Lang = 0;

          in your click event add

          if (Lang==0){

          sym.$("text").html(english[i]);

          Lang=1;

          }else{

          sym.$("text").html(spanish[i]);

          Lang=0;

          }


          or domething similar.


          if you have more than 2 languages, it would be a little different.


          same applies to images. Use attr or CSS background image

          • 2. Re: Tips for dynamic images?
            toedip Level 1

            Hey,

             

            Thanks so much for the reply. That's a great tip, so thank you! However I mostly made SVG files with text "embedded" (if that's the right word) in them. I don't have html text I can pull from. However... I did find a slightly cumbersome solution that works very well. I found a YouTube video and a few threads that posted the same thing.

             

            Since I only have 10 or so images, it's not too bad. If you had 100+ (or whatever) items to dynamically change, this method would probably be too cumbersome.

             

            Loading this in the stage onCompletion.  $(sym.lookupSelector("GraphicHolder")).css('background-image','url(images/LangDefaultImag e.svg)');

             

            I made a rectangle with the same dimensions as my image. I turned background OFF (since the image isn't exactly a rectangle).

             

            Then when I do my language button, in my onClick event,  I can add the same code but change the img source to my second language.

             

            $(sym.lookupSelector("GraphicHolder")).css('background-image','url(images/SecondLangImage. svg)');

             

            Obviously if I have 10 images to change, I'll have 10 lines of code, one for each image.

             

            I'll definitely keep note of your suggestion for future projects.

             

            Much appreciated!

             

            Mark

            • 3. Re: Tips for dynamic images?
              resdesign Adobe Community Professional & MVP

              Hi there:

               

              create an array for your images for one language and the captions

              create an array for your images for next language and the captions

              example could be:

              var ENG = [

              {'image':'paris', 'caption':'Paris- Eiffel Tower'},

              {'image':'rome-cathedral', 'caption':'Rome - Cathedral and Market'}

              ];


              var SPA = {

              {'image':'paris', 'caption':'Paris, Torre Eiffel'},

              {'image':'rome-cathedral', 'caption':'Rome - Catedral e marcado'}

              ];


              Then you can set a variable to toggle the language on your click event

              var LANG = 0;


              in click event write conditional

              sym.$('nextBtn').bind('click',function(){

              i++

              if (LANG==0){

              // code to use English

              sym.$('imagedivname').attr('src','images/'+ ENG[i].image + '.svg');

              LANG = 1;  // reset the variable to be for SPANISH

              }else{

              // if not English

              sym.$('imagedivname').attr('src','images/'+SPA[i].image + '.svg');

              LANG = 0; // reset the variable to be for ENGLISH

              }

              });


              you could use background-image css instead of attr - in  which case your images can  be different sizes.


              • 4. Re: Tips for dynamic images?
                resdesign Adobe Community Professional & MVP

                Oops! I thought my first response was missing.

                You can see what the code for images is - change to be svg files.

                • 5. Re: Tips for dynamic images?
                  toedip Level 1

                  This is a great help.

                   

                  Thank you very much again for the support. I'll keep these in my notes.

                   

                  Cheers,

                   

                  Mark

                  • 6. Re: Tips for dynamic images?
                    resdesign Adobe Community Professional & MVP

                    My pleasure Mark. Always glad to help.

                    • 7. Re: Tips for dynamic images?
                      resdesign Adobe Community Professional & MVP

                      I forgot to mention that if you use attr. then you need to change your 'seed image' to img instead of div.

                      with image array named images and image itself named images

                      sym.$("images").attr('src', "images/slide" + i  + ".svg");

                       

                      With a container named imagesContainer - it is just an empty rectangle with transparent background, use css background-image:

                      sym.$("imagesContainer").css({

                          'background-image': 'url("images/' + images[i] + '.svg")',

                          'background-repeat': 'no-repeat'

                      });