-
Expression with Slider control to display date and time for History videos – Linear vs Hold interpolation, fixed width vs text position jitter, 24 hour conversion
I am working on a script/ expression to display the date and time for a history video situation. I hope you can advise if I am doing it correctly.
Background: Imagine if you will a video about a certain military campaign that takes place over a number of days/ weeks. The video would document key events taking place and ‘fast forward/ time lapse’ over the boring parts – like being at sea for a week. This expression would display a date and time and then ‘fast forward’ to the next interesting event date time. The expression is controlled by a slider and keyframed. I have cobbled code from various places and it works OK.
Problem:
1: Can I use hold interpolation to easily hold a datetime steady over say 10 seconds of screen time? Currently the Linear interpolation ‘drifts’ making it difficult to keep a datetime steady for an extended period of screen time.2: Even with padding the numbers with 0s the text ‘jitters’ in place. I guess this is more of a text box setup issue (eg some kind of fixed width setting?)
3: You can see I tried to implement a basic 24 hour to AM/ PM conversion but it appeared to be clunky. Is there a cleaner way to do this?
Thank you for your consideration. Please let me know if there is any info I can provide.
Cheers
Edit1: mistake in code
Edit2: I think I might need some kind of hold value script. Even though I have the keyframe values shown in the pic the t=linear(time is still changing the date.
startDate = "Apr 05 1940 08:19 AM";
endDate = "Apr 09 1940 02:23 PM";var monthNames=new Array(7);
monthNames[0]="Jan";
monthNames[1]="Feb";
monthNames[2]="Mar";
monthNames[3]="Apr";
monthNames[4]="May";
monthNames[5]="Jun";
monthNames[6]="Jul";
monthNames[7]="Aug";
monthNames[8]="Sep";
monthNames[9]="Oct";
monthNames[10]="Nov";
monthNames[11]="Dec";d1 = new Date(startDate);
d2 = new Date(endDate);d1Milli = d1.getTime();
d2Milli = d2.getTime();Speed=effect("Slider Control")("Slider");
t=linear(time,0,Speed,d1Milli,d2Milli);d3=new Date(t);
day = "" + d3.getDate();
month = "" + d3.getMonth();
year = d3.getFullYear();
hour = "" + d3.getHours();
hourNumeric = d3.getHours();
minute = "" + d3.getMinutes();if (day.length < 2) day = "0" + day;
if (hour.length < 2) hour = "0" + hour;
if (minute.length < 2) minute = "0" + minute;// if (hourNumeric < 13) {
// day + " " + monthNames[d3.getMonth()] + " " + year + " " + hour + ":" + minute + " AM";
// }
// else {
day + " " + monthNames[d3.getMonth()] + " " + year + " " + hour + ":" + minute;
// } -
4 Replies
-
I’m new here ☺ so I’m not sure how I’m supposed to show “progress” on a script to hold key values over time. There’s a new block with some brain twisting (for me) conditionals/ error checking.
I have added the code below to illustrate what I think I am looking for – it is not working though.
Please let me know if I can answer any questions.
startDate = "Apr 05 1940 08:19 AM";
endDate = "Apr 09 1940 02:23 PM";var monthNames=new Array(7);
monthNames[0]="Jan";
monthNames[1]="Feb";
monthNames[2]="Mar";
monthNames[3]="Apr";
monthNames[4]="May";
monthNames[5]="Jun";
monthNames[6]="Jul";
monthNames[7]="Aug";
monthNames[8]="Sep";
monthNames[9]="Oct";
monthNames[10]="Nov";
monthNames[11]="Dec";d1 = new Date(startDate);
d2 = new Date(endDate);d1Milli = d1.getTime();
d2Milli = d2.getTime();Speed=effect("Slider Control")("Slider");
// how many keys?
if (numKeys > 0){
// get the index of the nearest key
nNext = nearestKey(time).index;if (nNext > 0 && nNext < numKeys){
if (key(n).time > time){
// nearest key is ahead
// // not start and not end
// tNext = key(nNext).time;
// // get previous key time
// tPrevious = key(nNext - 1).time;v1 = valueAtTime(key(nNext).time);
v2 = valueAtTime(key(nNext - 1).time);if (v2 == v1){
t = t1;
}else{
t=linear(time,0,Speed,d1Milli,d2Milli);;
}
}
}
valueAtTime(t);
}d3=new Date(t);
day = "" + d3.getDate();
month = "" + d3.getMonth();
year = d3.getFullYear();
hour = "" + d3.getHours();
hourNumeric = d3.getHours();
minute = "" + d3.getMinutes();if (day.length < 2) day = "0" + day;
if (hour.length < 2) hour = "0" + hour;
if (minute.length < 2) minute = "0" + minute;// if (hourNumeric < 13) {
// day + " " + monthNames[d3.getMonth()] + " " + year + " " + hour + ":" + minute + " AM";
// }
// else {
day + " " + monthNames[d3.getMonth()] + " " + year + " " + hour + ":" + minute + " " + keyTime;
// } -
Try this (doesn’t work in older versions of After Effects or with the Legacy expression engine)
startDate = "Apr 05 1940 08:19 AM";
endDate = "Apr 09 1940 02:23 PM";d1 = new Date(startDate);
d2 = new Date(endDate);d1Milli = d1.getTime();
d2Milli = d2.getTime();t = d1Milli + (effect("Slider Control")("Slider")/100)*(d2Milli-d1Milli);
Intl.DateTimeFormat('en-DE', { day: "2-digit", month: "short", year: "numeric", hour: '2-digit', minute: '2-digit', hour12: 'true'}).format(t).replace(/,/g , '');
This would just interpolate the slider from 0=startDate to 100 =endDate with the formatting you need.
It isn’t entirely clear if you actually wanted a true “speed” control, but I don’t think it makes sense in this case. -
To combat jittering for all possible dates, you should use a monospaced font:
https://fonts.adobe.com/fonts?browse_mode=default&filters=cl:ms
edit: and make sure the kerning of the text-layer is not set to “optical”
-
Thankyou Filip for cleaning up my confused code. You are correct that my Speed var was not required.
Your solution works perfectly. Unfortunately I was not able to use Intl.DateTimeFormat.
Here’s what I have now. I’ll look around for a better 24 -> 12 hour solution. It seems that the typing of vars (float, string) is a bit beyond me at the moment ☺
Thanks again!
Cheers
startDate = "Apr 05 1940 08:19 AM";
endDate = "Apr 09 1940 02:23 PM";var monthNames=new Array(7);
monthNames[0]="Jan";
monthNames[1]="Feb";
monthNames[2]="Mar";
monthNames[3]="Apr";
monthNames[4]="May";
monthNames[5]="Jun";
monthNames[6]="Jul";
monthNames[7]="Aug";
monthNames[8]="Sep";
monthNames[9]="Oct";
monthNames[10]="Nov";
monthNames[11]="Dec";d1 = new Date(startDate);
d2 = new Date(endDate);d1Milli = d1.getTime();
d2Milli = d2.getTime();t = d1Milli + (effect("Slider Control")("Slider")/100)*(d2Milli-d1Milli);
d3=new Date(t);
day = "" + d3.getDate();
month = "" + d3.getMonth();
year = d3.getFullYear();
hour = "" + d3.getHours();
hourNumeric = d3.getHours();
minute = "" + d3.getMinutes();if (day.length < 2) day = "0" + day;
if (hour.length < 2) hour = "0" + hour;
if (minute.length < 2) minute = "0" + minute;if (hourNumeric < 12) {
day + " " + monthNames[d3.getMonth()] + " " + year + " " + hour + ":" + minute + " AM";
}
else if (hourNumeric == 12) {
day + " " + monthNames[d3.getMonth()] + " " + year + " " + hour + ":" + minute + " PM";
}
else if (hourNumeric > 12) {
day + " " + monthNames[d3.getMonth()] + " " + year + " " + hour + ":" + minute + " PM";
}
Reply to this Discussion! Login or Sign Up