FORUMS: list search recent posts

Slider expression

COW Forums : Adobe After Effects Expressions

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Ryan Biercewicz
Slider expression
on Nov 24, 2014 at 2:25:19 pm

Hi,

Bit of a complicated one this one, so apologies in advance if I don't word this right!

I have a source text layer, linked to a slider which I want to count up from 00.0000 to 11.1111. On my source text layer, I have the following expression;

effect("Slider Control")("Slider").value.toFixed(4);

Here's the difficult part - I have a box animated from one side of the screen to another, and as that box starts and stops moving, I want the counter to start and end. I currently have the following expression added to my slider;

thisComp.layer("Box").transform.position[0];

However, I want the counter to read 00.0000 to 11.1111, not to use the X co-ordinates as it is currently doing. Is there a way to override the x co-ordinates and determine a start and end point for the slider's numeric value, but still keep the link between the slider and the box's position keyframe?

Thanks in advance!

Ryan

effect("Slider Control")("Slider").value.toFixed(4);

thisComp.layer("Box").transform.position[0];


Return to posts index

David Conklin
Re: Slider expression
on Nov 24, 2014 at 4:37:08 pm
Last Edited By David Conklin on Nov 24, 2014 at 4:38:12 pm

You can use linear interpolation to do this. Essentially 'mapping' the X-val of your Box to the slider. What this does, basically, is say when Box is at position 0, slider should be 0, when box is at thisComp.width, slider is 11.1111. The beauty of this expression is that it 'tweens' all the values between those two states.

The last line of this expression simply makes sure that the slider never exceeds 11.1111 or goes below 0 (which may happen if your box goes into negative or past the width of your comp).

Of course, you can update all of these values to fit your case sepecifically.

Check out the below expression. Happy coding!

//this goes on your slider.

//get the thing we're tracking.
var cntrl = thisComp.layer("BOX").transform.position[0];

var boxStartX = 0 //box starts at 0;
var boxEndX = thisComp.width //box ends at width of comp.

var sliderStart = 0; //slider begins at 0.
var sliderEnd = 11.1111; //slider ends at 11.1111.

//make the interpolation.
var makeSlider = linear(cntrl, boxStartX, boxEndX, sliderStart, sliderEnd);

//clamp the value (don't let it go out of range)
Math.min(Math.max(sliderStart, makeSlider), sliderEnd)


David Conklin
Motion Designer


Return to posts index

Ryan Biercewicz
Re: Slider expression
on Nov 24, 2014 at 4:59:18 pm

Hi David,

Wow this is fantastic, thanks so much! The only problem is that it doesn't reach 11.1111 at the end of the move, it counts up and then stops at 6.7949 when the box finishes moving.

Am I doing something wrong?

Cheers
Ryan


Return to posts index


Ryan Biercewicz
Re: Slider expression
on Nov 24, 2014 at 5:00:39 pm

To clarify, this is the expression I pasted onto my slider;

var cntrl = thisComp.layer("box").transform.position[0];

var boxStartX = 0
var boxEndX = thisComp.width

var sliderStart =0;
var sliderEnd = 11.1111;

var makeSlider = linear(cntrl, boxStartX, boxEndX, sliderStart, sliderEnd);

Math.min(Math.max(0, makeSlider), 11.1111)


Return to posts index

Ryan Biercewicz
Re: Slider expression
on Nov 24, 2014 at 5:05:46 pm

Sorry David, I've just figured out why that's happening - the expression is dependent on the width of the comp.

Unfortunately, the box doesn't travel all the way across the comp - I still need it to read 11.1111 at it's final destination, is there a modification I can make to enable this?

Cheers
Ryan


Return to posts index

David Conklin
Re: Slider expression
on Nov 24, 2014 at 5:37:15 pm

Yeah, no problem. The line you're looking for is this:

var boxEndX = thisComp.width //box ends at width of comp.

Simply change that to your box's end X position and you should be good! For instance

var boxEndX = 985; //box ends at X=985.

Good luck!

David Conklin
Motion Designer


Return to posts index


David Conklin
Re: Slider expression
on Nov 24, 2014 at 5:50:51 pm
Last Edited By David Conklin on Nov 24, 2014 at 5:53:33 pm

Another trick would be to link the boxEndX variable to the last keyframe of your box's position value, that way you don't have to change the expression if you decide to redo the box animation. The expression is a little different, and would look like this:

//this goes on your slider.

//get the thing we're tracking.
var cntrl = thisComp.layer("BOX").transform.position;

//define holders
var boxStartX;
var boxEndX;

//check to make sure there are keyframes
if(cntrl.numKeys > 0){
//get keyframe values.
boxStartX = cntrl.key(1).value[0];
boxEndX = cntrl.key(cntrl.numKeys).value[0];
} else {
//if no keyframes, fall back on these values
//(change them to whatever you need.)
boxStartX = 0;
boxEndX = 500;
}

//slider values
var sliderStart = 0;
var sliderEnd = 11.1111;

//make the interpolation.
var makeSlider = linear(cntrl[0], boxStartX, boxEndX, sliderStart, sliderEnd);

Math.min(Math.max(sliderStart, makeSlider), sliderEnd);


The clamp is only necessary in case you have a/some middle keyframe(s) that go outside of the range set by your first and last keyframes.

Good luck!

David Conklin
Motion Designer


Return to posts index

Ryan Biercewicz
Re: Slider expression
on Nov 24, 2014 at 6:00:52 pm

Hi David,

Ah perfect, thanks!

Just one final thing - do you know if theres a way to ease the counter, so that when the box eases out of the move the counter eases to the final number? There are a few 'counter-ease' expressions online but they all seem to be dependent on duration - this one is obviously based on comp width so I was wondering if there's a solution to this?

Cheers,
Ryan


Return to posts index

David Conklin
Re: Slider expression
on Nov 24, 2014 at 6:13:54 pm
Last Edited By David Conklin on Nov 24, 2014 at 6:18:56 pm

Heya – this expression is getting its data from the X position, yeah, but it's still using an interpolation function to do so.


var makeSlider = linear(cntrl, boxStartX, boxEndX, sliderStart, sliderEnd);


While the default easing settings for this function are somewhat limited, you can do a regular easy-ease, ease-in or ease-out simply by changing the above line to something like this:


var makeSlider = ease(cntrl, boxStartX, boxEndX, sliderStart, sliderEnd);
var makeSlider = easeOut(cntrl, boxStartX, boxEndX, sliderStart, sliderEnd);
var makeSlider = easeIn(cntrl, boxStartX, boxEndX, sliderStart, sliderEnd);


Keep in mind that the expression is tracking the box's progress as it moves between two points. This means that the easing applied to your box is already being applied to the slider. You could try to more heavily ease the box animation if you need a more eased slider. Using one of the ease() functions above will strengthen the ease applied to the slider, though.

Good luck!

David Conklin
Motion Designer


Return to posts index


Ryan Biercewicz
Re: Slider expression
on Nov 24, 2014 at 6:41:51 pm

Hi David,

This is great, thanks so much for solving this one! It's working perfectly now - just a note, I had an error come up with the ease expressions but tried adding a [0] after cntrl as you did before, and that seemed to sort it out.

Cheers,
Ryan


Return to posts index

Ryan Biercewicz
Re: Slider expression
on Nov 25, 2014 at 2:18:41 pm

Hi David,

I've run into another problem - I now have a box travelling along the Y axis (from bottom to halfway up the screen), but I can't figure out the modifications I need to make to the expression. If I change the X to Y values it doesn't seem to work. What am I missing?

Best,
Ryan


Return to posts index

David Conklin
Re: Slider expression
on Nov 25, 2014 at 3:35:00 pm

the [0] part (as in cntrl[0] or position[0]) is what's picking out the X values. The position parameter is actually an array with 3 positions [x, y, z]. Since in javascript the first index of an array is 0, the values 0, 1 and 2 correspond to X, Y and Z respectively.

so,
position[0] = X Position
position[1] = Y Position
position[2] = Z Position

Simply change any/all [0]s to [1]s in order to use Y instead of X.

David Conklin
Motion Designer


Return to posts index

Ryan Biercewicz
Re: Slider expression
on Nov 25, 2014 at 6:24:08 pm

Awesome, thanks! That makes sense...

Best,
Ryan


Return to posts index

Ryan Biercewicz
Re: Slider expression
on Nov 26, 2014 at 1:46:30 pm

Hi David,

Sorry to say but I can't figure out how to modify the expression so that it will run, say, from left to right, or down to up (so, in reverse)?

Cheers
Ryan


Return to posts index

Ryan Biercewicz
Re: Slider expression
on Nov 26, 2014 at 5:12:59 pm

Hi David,

Sorry to keep bothering you with this! I'm finding I need to adapt the expression as I move through the project, and my skills with expressions are fairly basic.

My next problem is that some of my boxes have 4 key frames on them - so a move in, and a move out. I'd like each counter to settle on its final number (11.1111) on the 2nd keyframe, then continue to move on the 3rd and finish at another number on the 4th.

I got as far as modifying the cntrl.key(1), cntrl.key(2), (3) as I'm guessing these correspond to each keyframe in the sequence, but I guess I need to add a 'start and stop' to the slider / box move?

This would also resolve my last question, so if this can be done then please ignore that one!

Cheers
Ryan


Return to posts index


David Conklin
Re: Slider expression
on Nov 26, 2014 at 7:32:10 pm
Last Edited By David Conklin on Nov 26, 2014 at 7:34:04 pm

Hey Ryan,

I'm having a hard time following what you're going for this time, but here's what I've got. Hopefully it will put you on the right track:

This expression will go from 0 to 11.111 during the time between keyframes 1 and 2, hold at 11.111 between keyframe 2 and 3, and then go from 11.111 to 50 between keyframe 3 and 4. Of course, 50 is an arbitrary number I made up, so feel free to change it.

This expression now is not 'mapping' the position of your box to this slider, but rather creating slider values that correspond w/ the time of your keyframes. Meaning, the slider value is 0 up until the first keyframe, regardless of where the box is on screen (same for all other slider values).

Let me know if this works, otherwise perhaps you could give me a little more detail on what you're trying to accomplish.

Good luck,






//this goes on the slider

//change this to the layer of your box
var cntrl = thisComp.layer("BOX");

//this is the property we're tracking
var getProp = cntrl.transform.position;

//set slider values
var valAtStart = 0; //keyframe 1
var valAtHold = 11.111; //keyframe 2 + 3
var valAtEnd = 50; //keyframe 4.

//make sure we have at least 4 keyframes.
if(getProp.numKeys >= 4){

//get time of keyframes
var key1Time = getProp.key(1).time;
var key2Time = getProp.key(2).time;
var key3Time = getProp.key(3).time;
var key4Time = getProp.key(4).time;

//make animations
var animOn = ease(time, key1Time, key2Time, valAtStart, valAtHold);
var animOff = ease(time, key3Time, key4Time, valAtHold, valAtEnd);

//apply animation
if (time < key1Time){
valAtStart;
} else if (time < key2Time){
animOn;
} else if (time < key3Time){
valAtHold;
} else if (time < key4Time){
animOff;
} else {
valAtEnd;
}
} else {

//just use slider value if there's less
//than 4 keyframes. This will prevent
//error dialog spam if you delete
//keyframes.
value;
}

David Conklin
Motion Designer


Return to posts index

Ryan Biercewicz
Re: Slider expression
on Nov 27, 2014 at 9:40:53 am

Hi David,

Apologies for the confusion! But, this is fantastic, exactly what I'm after. It gives me a lot more control over the counter numbers which I need for my project.

Thanks again for taking the time to do this...

Best,
Ryan


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2018 CreativeCOW.net All Rights Reserved
[TOP]