Forum Discussion

MarcelLendi-0d9's avatar
MarcelLendi-0d9
Community Member
4 months ago

Help needed: Changing the color of an object with javascript

I like to create an object (e.g., a rectangle) and change its color using 3 sliders (RGB). I read the slider values into Javascript and calculate the Hexadecimal value. I found this calculation on https://learnersbucket.com/examples/interview/convert-rgb-to-hex-color-in-javascript/. )

var player = GetPlayer();
var RedValue = player.GetVar("SliderRed");
var GreenValue = player.GetVar("SliderGreen");
var BlueValue = player.GetVar("SliderBlue");
var HexValue = "#" + ((1 << 24) + (RedValue << 16) + (GreenValue << 8) + BlueValue).toString(16).slice(1);

Now I want to change my object to this HexValue. I don't know how to do the last step. Must be something like object.style.backgoundColor = HexValue

How do I assign a color to an object?

storyline 360
  • JohnCooper-be3c's avatar
    JohnCooper-be3c
    Community Member
    4 months ago

    Hi Marcel

    You should be able use the GSAP Animation JavaScript code library which is integrated into Storyline. You will need to find the ID of the rectangle you want to change but then it will be something like:

      gsap.to('#shapeID', {
        duration: 1, // Duration in seconds
        backgroundColor: "#00ff00", // Target color in hex format
        ease: "none" // Type of easing
      });
     
    There are way better experts here that use GSAP regularly that will be able to correct my code if it's wrong - but definitely GSAP will do it.
    • MarcelLendi-0d9's avatar
      MarcelLendi-0d9
      Community Member
      4 months ago

      Wow, this is exactly what I was hoping for!!! I spent yesterday 8 hours trying and searching the internet :). finding a lot of interesting stuff, but your solution is exactly what it was hoping for.

      Thanx!

       

Related Content