Change text colour with an existing slider control

[gabbo1982]

Hi guys, I am making a 9:16 (vertical) graphics template themed with the logo and colours of the 20 teams of the English Premier League.  My expressions knowledge only goes so far as wiggle and a bit of pick whipping!

I am trying to make an essential graphics template so that the editors can use the slider to pick the team that they want to have as their on screen graphic in Premiere (rather than having to go into AE).

So far I have in my essential graphics tab the four lines of text, the slider, and a comment which tells the user which team is which number. The slider goes from 1 to 23 (20 teams plus three others).

Here is what that looks like:

I have so far been able to use the slider to change the logo (by making all other logos 0% opacity), to change the name of the team (by making all other team names 0% opacity) and to change the background colours of the boxes.

This is the expression I used to do all of this. It is in the opacity setting for each object:

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

if (slider == 6) 100 else 0;

My problem is that I also want to be able to change the colour of the text when the slider is changed. Does anybody have any idea of how I can do this?

Below is the project file:

https://www.dropbox.com/sh/0yrknu66b8fjvcg/AADNJFMAoNLRlT7INQ1yh9rla?dl=0

Thank you!

David.

[ericsten]

Hi David, here's one way to do it with RGB values.

On your slider add the expression " Math.round(value) " this will ensure it's always a round number.

A=[0,0,0]; // Color 1 //

B=[255,255,255]; // Color 2 //

C=[15,255,1]; // Color 3 //

//Add additional color variables here following the same format above (D, E, F, etc) //

Z=[0,0,0]; // Black for invalid input //

S=thisComp.layer("Adjustment Layer 1").effect("Color")("Slider").value; // set S to your slider's value //

if (S==1) {RGB=A}

else if (S==2) {RGB=B}

else if (S==3) {RGB=C}

// if you add additional colors, add additional "else if" statements for each //

else {RGB=Z}  // if an invalid input is detected, it defaults to the Z (black) color //

R = RGB[0]/255; //Converts R to 0-1 value//

G = RGB[1]/255; //Converts G to 0-1 value//

B = RGB[2]/255; //Converts B to 0-1 value//

// If you want to use an Alpha value (ie, [255,255,255,150] , add A = RGB[3]/255; and replace the "1" below with A //

[R, G, B, 1]

Hope this helps!

- Eric Stenmark

[charlesbevan]

Right off the bat, expressions can't control text formatting; they can only control the text string itself.  (Scripting has some text formatting abilities, but it wouldn't be able to live update like expressions can).

When using an expression on a text layer, it applies the settings from the first character of the original text source (font, color, etc.) to the entire new string.  To get around that color, you can apply a Fill effect to the text layer, and set an expression for that color value.

After taking a look at your project, I'd suggest setting up a sort of "sprite sheet" pre-comp, with a different value for each frame and then use expressions to select the value from a specific frame. For example:

• Create a comp named "sprites_Team Names"
• Add a text layer, name it "Team", keyframe some name values
• Add a Fill effect to the text layer, keyframe the Color value
• Drop the sprite comp into your Main Comp, hide that layer
• Add an team name text layer to your main comp, then add another fill effect.
• Set the color expression to the following:

// this is your team slider, already using expressions to round to even numbers
teamPick = thisComp.layer("Team Slider").effect("Slider Control")("Slider");
// the layer in your main comp that you want to reference 
templateComp = thisComp.layer("sprites_Team Names").source;
// built in function that converts a frame number (team selection) to seconds
t = framesToTime(teamPick-1, fps = 1.0 / templateComp.frameDuration);  // frames start at 0 based, so subtract 1
// reference the specific value at that frame's time
templateComp.layer("TeamData").effect("Fill")("Color").valueAtTime(t);

You can repeat this type of setup for many other values, like the team name, other colors, icons, etc.  It should keep your project much cleaner and easier to maintain/test/modify.

I went ahead and created a sample project showing how to set all this up:

GFX_STUDIOSCREENS_template-COMP.aep​

As a side note, when I opened your project it hit a snag because I didn't have the font you used.  Make sure to use built in fonts, TypeKit fonts or know for sure that whatever editor that uses your template will have that font installed already.

[angie_taylor]

Here’s a link to my course on Expressions in After Effects which covers how to work with converting RGB values in expressions. This should help you 🙂

Color and Expressions