11 Replies Latest reply on Aug 4, 2014 8:04 PM by resdesign

    Randomize color every N seconds

    JotaSolano

      Hello Everyone!

       

      I'm new to the forum and to Edge Animate. I've worked before with Flash (actionscript), (a little) javascript and processing and some web design but I'm having issues wrapping my head around the workflow in Edge.

       

      Basically what I'm trying to do is to randomly change the fill/background color of a square (a symbol) inside my composition using variables for R, G and B and a timing event (JS setInterval method). I think i have a syntax issue but I'm not sure where. Any help would be appreciated, here is the code: (it's on the first frame of document.compositionReady):

       

      //create variables for R G B
      var randR;
      var randG;
      var randB;
      
      
      //var myVar = setInterval(function(){myTimer()},1000);
      
      
      //setInterval method:  window.setInterval("javascript function", milliseconds);
      
      
      //define the function randomColors()
      var myVar = setInterval(
        function randomColors() {
        randR = Math.floor(Math.random()*255);
        randG = Math.floor(Math.random()*255);
        randB = Math.floor(Math.random()*255);
        myTimer();
        }, 
        1000);
      
      
      //call the main function
      randomColors();
      
      
      //define the time-based function
      function myTimer() {
          var d = new Date();
        sym.$("mySquare").style.backgroundColor = rgb(randR,randG,randB);
      }
      

       

       

      Here is the file.

       

      Thanks again! I hope I was clear enough. The reason why I want to do this is because later I would like to randomly load a video file into the composition every certain period of time, but I wanted to start with something simple.

        • 1. Re: Randomize color every N seconds
          resdesign Adobe Community Professional & MVP

          I made this sample a long time ago. Look at it and see if it helps.

          randomly change color of an element.zip - Box

          • 2. Re: Randomize color every N seconds
            JotaSolano Level 1

            Hello!

             

            Thank you for the help. I can see where you have the randomize function (the hex is far more elegant indeed):

             

            // random hexadecimal number

            var randomAColor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);

            sym.$('Rectangle').css({'background-color': randomAColor});

             

            But where is the timing function? (it seems to change every half a second or second), which is why I was using the setInterval method. I can't find a time function in the code, I'm obviously missing something.

             

            Thanks again.

            • 3. Re: Randomize color every N seconds
              resdesign Adobe Community Professional & MVP

              Just use this:

               

              function  changeColor (){

              var randomAColor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);

              sym.$('Rectangle').css({'background-color': randomAColor});

              }

              setInterval(function(){changeColor();}, 1000);

              • 4. Re: Randomize color every N seconds
                dharmk Adobe Employee

                I guess your problem is resolved already but if you want to know the problem with your original code, there were two:

                 

                1. 'style' is a property of an HTML DOM element, however sym.$("myRectangle") would return a wrapper over the same. To access the underlying element, use sym.$("myRectangle").get(0) or sym.$("myRectangle")[0]. In most of the cases, you should be able to find a wrapper function to avoid this direct access, in this case '.css', which can be used as shown above.

                 

                2. rgb is not a function, if you want to set the style.backgroundColor the value should be a string. You will have to do string concatenation.

                 

                Although not very elegant but any of the following should work:

                 

                sym.$("mySquare")[0].style.backgroundColor = "rgb(" + randR + "," + randG + "," + randB + ")"; 
                sym.$("mySquare").css("background-color", "rgb(" + randR + "," + randG + "," + randB + ")"); 

                 

                -Dharmendra

                • 5. Re: Randomize color every N seconds
                  resdesign Adobe Community Professional & MVP

                  Thanks Dharnendra for you input! Always good to have a code analysis to see where the user may have missed something and always nice to have several interpretation for the same problem.

                  • 6. Re: Randomize color every N seconds
                    JotaSolano Level 1

                    Thanks everyone for your help and for pointing out the errors I had in the code.

                     

                    I have this code now:

                     

                    //define the function changeColor()

                    function  changeColor (){

                      var randomAColor = '#' + (Math.random() * 0xFFFFFF << 0).toString(16);

                      sym.$('mySquare').css({'background-color': randomAColor});

                    }

                     

                    //define the time-based function

                    setInterval(function(){changeColor();}, 1000);

                     

                     

                    The square still won't change color, which baffles me. I feel pretty silly as of now. What am I missing? Do I have to use a binder? Like I said before, I'm coding this in the.compositionReady but this is all the code I have, and the mySquare is a symbol by the way.

                    • 7. Re: Randomize color every N seconds
                      dharmk Adobe Employee

                      Since mySquare is a symbol, by default the content of the symbol would be displayed on top of it. Since you are changing the color of the symbol and not the contained element (s), you might not have seen any visual change.

                       

                      You can try the following in this case - sym.$('mySquare').children().css({'background-color': randomAColor});

                       

                      -Dharmendra

                      • 8. Re: Randomize color every N seconds
                        JotaSolano Level 1

                        I see. It works now!

                         

                        It would have been better then to not convert the rectangle into a symbol then. I still need to understand the basics of elements vs. symbols in Edge. Maybe my first attempt was a little bit more than I could take but anyway I learned quite a few tricks already. Thanks for all the help

                        • 9. Re: Randomize color every N seconds
                          resdesign Adobe Community Professional & MVP

                          My code as posted above works fine with a rectangle on the stage or a rectangle into a symbol or the background of a symbol. It is just a matter of scope.

                          • 10. Re: Randomize color every N seconds
                            JotaSolano Level 1

                            It was difficult for me to chose the "Correct Answer", I chose the one the finally solve it, I'm sorry if this upsets you in some way.

                            • 11. Re: Randomize color every N seconds
                              resdesign Adobe Community Professional & MVP

                              No problem! I just wanted to mention that your problem was a scope issue.

                              There are are many ways to approach a problem.