Slider control for shape layer fill colour

New Here ,
Dec 28, 2017

Copy link to clipboard

Copied

Hello, I'm trying to make a motion graphics template with colour as one of the options. Instead of the colour picker, I'd like to make it so it's on a slider and each number value is associated with a different colour. As of right now, I have a shape layer that is "parented" to a null object with the slider control effect on it.

Right now my expression code is:

slider = thisComp.layer("CONTROLS").effect("Slider Control")("Slider").value;

if (slider == 0)

  [48,26,23,0]

else if (slider == 1)

  [30,157,139,1]

else if (slider == 2)

  [0,122,135,1]

else if (slider == 3)

  [149,82,20,1]

But when I change the slider to each of the values (0-3). the shape layer isn't changing to the colour I want. It's changing between white and a bright blue and yellow, which aren't the values I've put in. I am using RGBA values.

Not sure what I'm doing wrong, can anybody help?

TOPICS
Expressions

Views

2.5K

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

1 Correct Answer

Guide , Dec 28, 2017
Dan Ebberts Guide , Dec 28, 2017
The color channel numbers need to be normalized (between 0 and 1), like this:[149,82,20,255]/255Dan

Likes

Translate

Translate
Jump to answer Jump to answer
Guide ,
Dec 28, 2017

Copy link to clipboard

Copied

The color channel numbers need to be normalized (between 0 and 1), like this:

[149,82,20,255]/255

Dan

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
New Here ,
Dec 28, 2017

Copy link to clipboard

Copied

So you're saying it should be like this:

slider = thisComp.layer("CONTROLS").effect("Slider Control")("Slider").value;

if (slider == 0)

  [75,69,44,1]/255

else if (slider == 1)

  [30,157,139,1]/255

else if (slider == 2)

  [0,122,135,1]/255

else if (slider == 3)

  [149,82,20,1]/255

else if (slider == 4)

  [234,171,0,0]/255

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Guide ,
Dec 28, 2017

Copy link to clipboard

Copied

The last number of each set of four would be 255 (so that you end up with 1.0 for the alpha value):

[75,69,44,255]/255

although it probably works no matter what you have for the alpha value.

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Jul 17, 2018

Copy link to clipboard

Copied

Hello,

I tried the same as rachgouveia, but I only need three colors (red, black en white).
I tried to use this expression code:

slider = thisComp.layer("CONTROLS").effect("Slider Control")("Slider").value;

if (slider == 0)

  [0,0,0,255]/255

else if (slider == 1)

  [ 238,0,0,255]/255

else if (slider == 2)

  [255,255,255,255]/255

But I get this error:

Error at line 0 in property 'Color" of layer 1 ('COLOR CONTROL') in comp....

expression result must be of dimension 4, not 1.

What am I doing wrong?

Thanks in advance

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Community Beginner ,
Jul 17, 2018

Copy link to clipboard

Copied

In the meantime I could find a way.
I still don't know, where I went wrong with the first code, but now I've used this expression code and it works:

s = thisComp.layer("CONTROLS").effect("Slider Control")("Slider");

c1 = 0xFF2434; // red

c2 = 0xffffff; // white

c3 = 0x000000; // black

function hexToFloat(c){

  r = ((c & 0xff0000) >> 16)/255;

  g = ((c & 0xff00) >> 8)/255;

  b = (c & 0xff)/255;

  return [r,g,b,1];

}

if (s < 1)

  hexToFloat(c1)

else if (s < 2)

  hexToFloat(c2)

else

  hexToFloat(c3)

Likes

Translate

Translate

Report

Report
Reply
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more