Control Time in Templates - Adobe After Effects tutorial
Вставка
- Опубліковано 26 лип 2018
- Control the timing of your templates! Give users the power to retime animations as they need. Want an animation to last longer? Or text to come on slower? Should a logo come on later? Sooner? Using a simple group of expressions we will open up a whole new world of template possibilities. Even if you don't make templates you might learn something here.
If you have any questions just let me know in the comments.
Download this project file:
evanabrams.com/control-time-in...
Connect on the Internets
www.EvanAbrams.com
ecabrams
www.Facebook.com/EvanCAbrams/
EvanCAbrams
Suggest a tutorial topic: docs.google.com/forms/d/13A2e...
Google+
plus.google.com/+EvanAbrams/
This makes templates so much more flexible! I'll be referring back to this. Thanks Evan, you're a huge help to freelance editors.
Thanks for these template tutorials, super handy when making my own style and not having to redo everything each time
Oh Evan, this is just beautiful!
Thanks for making this tutorial! This is incredible!
This was excellent. Very clear and easy to follow. Thank you!
This is so cool - one of my favorite After Effects tutorials I've seen!
This is the best tutorial ever seen. So nice and clear. Thank You so much Sir
Thank you, Abrams. You've saved me here
u're the real mvp, Evan
Wow how am I just finding this now. This is great Evan!
This is pure gold
Thanks! nice tutorial
this was fantastic
this is THE VERY expression I have been looking for! yet, it only took three times until I realize it was what I was looking for
great tut!
Thank you very much!
Thank You So much Sir,You teach the expressions and controllers well
Happy to help :)
woohoo .. this is what i needed
AWEEEESOOOOME!
Oh My Goodness. Finally I found out how to make it. Thank you so much. your video helped me a lot.
t=time-inPoint;
d=thisComp.layer("Adjustment Layer 1").effect("Slider Control")("Slider");
r=thisComp.layer("Adjustment Layer 1").effect("Slider Control 2")("Slider");
linear(t,0,d,0,r)
Like so. I made 2 definition. d and r then it works.
Thank you so much!!!
Just in case anyone needs to copy and paste:
t=time-inPoint;
d=thisComp.layer("Layer1").effect("Slider Control")("Slider")
linear(t,0,d,0,100)
nice bro..i like it
Thank you so much #AENinja!
Another amazing tutorial. Is it possible to make it OUT using the same animator used to get it IN instead of using position?
Very helpful
Really helpful tutorials. Wish I had all your expressions knowledge. I also really liked the voice crack at 2:36
It's a tutorial channel sometimes and a really subtle anti-smoking PSA often.
I love it
That's a good way to do it. I was wondering if you'd do it this way or use Time Remapping since they've been trying to fix that in Master Properties. Good stuff man.
i love you so much
Evan Abrams IS cool
Nice Ending with the no one would know! I'm here cause I downloaded a template that doesn't let you change it's time, and now I'm trying to make it happen.
Nailed it. Another thorough, thoughtful, incredibly useful and enjoyable tutorial by ECA :) This is one of those subjects that might not be that 'sexy/fancy', but for anyone scratching their heads about how to get this kind of functionality in a template, the techniques described here are invaluable.... But what if you had a series of complex keyframe animation that you had finessed in the graph editor until you were happy as a clam, and just wanted to push them around the timeline? or speed/slow them? I'd reach for time remap, but that's only because I don't know how to 'express' myself very well in JavaScripting :P
I Love You.
Hi there! How would you apply this for graphs such as a bar graph template? What sort of expressions and properties would you need to make it into a template where you can control the time?
nice.
Hi Abrams! last time I asked how I can make the graph template in which I can adjust keyframe values whatever I want from 0-1 to 0-100. You answered linear interpolation expression. I studied that expression. but what I wanted to know was how to adjust the second keyframe which is already marked. For example, I make the info graphics template. there are already marked 2 keyframes. The first one is height 0, then the second one is height 78. It means graph move from 0% to 78%. but in the template I would like to adjust to 98% by just changing the number. Could you tell me what expression do I need to apply to that?
This is amazing, but I'm having difficulty applying it to my complex text graphic. It's 2 text boxes that zoom on, wiggle rotation + position for about 4.5 seconds, and then drop off. I've seen mogrts that allow users to use just ONE slider to control the duration of the time in the middle when it's not animating on or off. What would I do if I were just to allow people to extend the duration that the 2 text boxes are just sitting there and wiggling?
sorry for been so ignorant, at 2:20 you set the value to 0 and then jumped a few frames forward with (i guess) a key, how did you do that?
Trubleshooting recuired!
Thank you so much for your videos, you made me doing this for clients now. So I create Templates in there style to save them a lot of time.
There is just one big issue, which is destroing everything: Some Templates don't do, what there are supposed! let me give you two examples:
I made up a Template where there is a solid sliding in from the side, adjustable by a slider, so the editor can deside, how much of the footage ist covered. In AE everything is fine, exported to PP, it slides in, stops (as supposed) but it doesn't stay there. The Solid moves like the bezier keyframes are not set up right. But in the Template, they are. So premiere doesn't read the information properly.
The second problem is even worse: Every Template I made for that Client, got a colorpicker to choose one of there 4 CI-colors. That works fine in the first place, but when exporting, premiere uses the default color, no matter what the editor is doing.
So are there some troubleshooting tipps you can put into a video? There are even more problems cause I use After Effects in german, but some Clients in english, where do I find a list of universal expression stuff. (I already looked that up, but haven't found pleasing solutions for that)
Regards
Kai
That's the fantastic tutorial. I must respect you. I am now looking for how to make the graph template in which I can adjust keyframe values whatever I want from 0-1 to 0-100. Could you let me know which expression I need to learn to make that?
Maybe the interpolation expressions like linear()? Does that fit with what you're attempting?
@@ECAbrams thanks alot. I will look into that expreesion. Then I will let you know. Thanks again.
thanks it was great tutorial...
very good explanation
but suppose i want animate text using index based then how would i write the expression??
say for percentage based animation
linear expression will have last two variable as 0 and 100 only
but for index based expression last variable will depends on nos of character in the text
So, that's the tricky part. Not knowing the index numbers we can't really do much procedurally with them. For this issue, what's the reason you want to animate based on index in this way? Maybe there's a way to get you to your end goal with percentage.
is it possible to make these templates in AE CC 2017. thanks once more for this great tut. you're the best. continue sharing your skills with us like this is an incredible gift for learners that we are.
I'm not totally sure. My memory of what was specific to cc2017 isn't that great.
Liked and subscribed! Question: can you do the above but in relation to other text layers? I createda bulleted list MOGRT for use in Premiere, and I want the user to be able to adjust when each bulleted text line appears. The way the template is now, I have them keyframed to appear one after the other, but I realized, they may want to hold on one bullet while the speaker in the video discusses it.
For sure. We can use sliders to hold any value we like. Then, using that value to offset the time that each layer might use to animate on or off. It's all about lining up the variables and linking them to each other. You might consider making many sliders, one for each text's delay or hold perhaps.
Sir, you have just introduced me to a world of possiblities that, without any prior announcement, will dominate my attention for the months to come. Thanks for that..
Where can I learn to program these commands?
Great tutorial and it helped me already... HOWEVER ...
What I am trying to achieve is that text (Evan Abrahams is cool!) animates in and that I can control when a shape (highlighting "cool") animates in.
Now, the slider created in this tutorial controls the speed at which the text (or in my case a shape) appears (0 seconds (0%) to 2 seconds (100%)).
The "t" value in the expression dictates when it should start.
I need to make it so that the slider controls the start time.
I've been fiddling around with it for a while but I can not seem to fix that :S
For now, I used delay:
var delay = thisComp.layer("Controls").effect("EfectDelay")("Slider");
valueAtTime(time - delay)
if you hold ALT while pickwhiping a property, the reference will have a number instead of a word, so the expression will work in any language. Like, instead of effect("Text Gone")("Slider"), you will get effect("Text Gone")(1).
oooh! I did not know this lifehack. I've been using the expression universalizer after it's all done. Very cool tip!
@@ECAbrams wow, thanks, man! been following you for years. thanks for your great work.
Hello this is a good tutorial but what I want to know is that when I import that mogrt file into premiere is that I can just drag the layer and it will automatically adjust the duration. How is that possible? Because I downloaded a template from Envato and I am amazed that it's possible. Hope you can help. Thank you! :D
It has also animation on the elements but when you drag it to how long you want it the animations are seamless
I just came accross to your tutorial. It is amazing. But I am kind of new to this, and would like to know how I can reverse the animation with the duration of the animation to be on screen with slider controls. 3 sliders for In, out(reverse) and holding duration!! Anyone with the solution would be highly appreciated!!
I would recommend using expressions like the linear() and some if/else statements to cover when which linear() relationship should be taking precedence. It's all about using those sliders to change when expressions are meant to be happening and what the numbers mean at that time. I don't know if that really helps though.
Thanks so much, Evan. Great tutorial!! One question. If I wanted to lets say, fade out the text again from 100-0 on the range selector, can I have 2 linear expressions where the time between the the in(0-100) and out (100-0) is also set by a slider value on the control layer?
It's certainly possible. You'll need a step in between though. I would do with with an if/else myself. So if time is below a certain number let's use the one linear() to bring the layer on. Then if the time is over a certain number let's use a different linear() to bring it off. Does that make sense?
@@ECAbrams Hi Evan.. thanks so much for your reply. This makes total sense.. I'll give it a shot and post the solution to this comment, incase it's helpful to others.
Thanks @@ECAbrams , I finally got around to working this out. posting the solution if anyone else finds it helpful.
var In=thisComp.layer("Controls").effect("Resolve Time ANIMATION 1 Master")("Slider");
var Out=thisComp.layer("Controls").effect("Resolve Time ANIMATION 2 Master")("Slider");
var Dur=0.001; //One frame
//Opacity In Variables
var animationStartTime1 = In ;
var animationEndTime1 = In + Dur;
var startValue1 = 0;
var endValue1 = 100;
//Opacity Out Variables
var animationStartTime2 = Out ;
var animationEndTime2 = Out + Dur;
var startValue2 = 100;
var endValue2 = 0;
if(time < In){
linear(time, animationStartTime1, animationEndTime1, startValue1, endValue1);
}else if(time>In){
linear(time, animationStartTime2, animationEndTime2, startValue2, endValue2);
};
@@ronandl Hello. I copied and pasted this into the range selector. Created sliders. It works but the interpolation is hard (the value switches from zero to 100 at once) How to make smooth interpolation?
@@sergeylovtsov1778 I just did it with Range End Selector lol, way easier
Simple Question: Instead of assigning duration for opacity transition to a slider, can you show how to assign the timing of the START of the opacity transition? Basically how you were able to create a slider to animate the position to slide the text OUT, I want to setup a slider where the number indicates when the opacity transition IN begins. I need to allow the editor to control the specific timing when certain text fades on screen. Pulling my hair out. Appreciate any help you can provide. Thanks!
Did you ever find a solution for this? Looking to do the same thing. Thanks!
can you control the duration of the composition? with essential graphics/templates
You could make a composition[CompA] and then make another composition [CompB] that has the CompA in it and enable Time Remapping and control the duration that way. That would just be stretching / compressing frames though - may not be what you're after.
In a way yes. You could use this method to affect a time remapping property. However, the actual duration of the clip would not change. Essentially the box that the template comes in would not change, but the contents could go longer or shorter. Does that make sense?
I'd make a composition with the maximum length you think you'll need and trim off excess (blank space) as needed. A script could control the duration of the composition, but not an expression.
I am also trying to figure out is there really any way to control composition time through expression. Making contents longer or shorter is okay bt how about making the clip length longer or shorter.
@@KyleZager what would be the expression for this?
Can you use this to change the rotation of a comp... i.e. make it stop rotating based on the slider?
Absolutely. Technically you can use this method to control any property you place it on.
How do you add a parameter for when the animation appears and reappears? and would that expression be written in opacity?
you would likely want to use a slider control. Your expression for opacity would need to have a single output part like x instead of [x,x] for a two part. Does that make sense in the context of this tutorial?
Thanks for the great tutorial!
However, the slider controls don't seem to work, after I exported the template to use it in Premiere. Am I just doing something wrong or is it simply not possible?
is the slider in the essential graphics window? And can it be used to control things from that window?
ECAbrams yes it is. It works fine in the AE preview of Essential Graphics but not when I import it into premiere. All direct adjusments work (like font , text colour...) but no sliders I linked from expression
But I also tried with your project files and its the same, so I guess there is a bug in AE or PR:)
Bit thanks for your answer !
Is there any possibiliy, that the duration of an lower third is always as long as the clip length in Premiere? In particular, when I'll make the clip longer, the animation should always start and end at the begining and ending of the premiere clip?! In a few words: Is a variable duration (for example: Animation starts, no Animation/or looping elements in the lower third, Animation ends) possible?
Sadly the length of the clip in premiere doesn't really talk to the template that I know of. You would need to link up those inputs and outputs somehow. At this time you can use the duration as a number in a template field to adjust those things but you may have to manually change that number.
Thanks for the very fast reply :) ... And that's really sad... if you have to adjust every lower third you have (because of the different durations I want to use), this seems not the right
workflow then... hmmm...
is essential graphic enable for AE 2017?
I can't rightly remember. If you check under "window" in your cc2017 install you may find it there. But if you don't, it's not available.
I'm on an older version, but dang those Essential Graphics look so smooth. I don't know if they look $20/month smooth but mmm. It's like peanut butter. Or just normal butter. Normal butter is probably smoother. Maybe it's more like peanut butter now that I think about it. Hold on a second, I'll be right back.
Essential graphics is a game changer. It may seem like it's only for template creation, but it has many other interesting uses inside Ae alone.
hahahhhah
If I wanted the text to disappear by sliding down instead of right, how would I do that?
You'll need to modify the position property in the text animator. You might want to check out my tutorials about the text animator specifically to get into that more.
I am having a hard time grasping what that "Out-Dur" is doing. Could you pls elaborate a little bit on it?
Sure. So the linear, or ease, or easeIn, or easeOut, all operate to remap values. So when we write easeIn(X,A1,B1,A2,B2), the A1 will become A2, and B1 will become B2. All the values inbetween will be remapped between that range. Now, we are remapping the values of the [end time - durration] and [end time] so that we can have something happen between those times. Meaning the ending animation will begin at the end time minus the duration and end at the end of time. Does that make sense?
ECAbrams kind of. I need to play a little bit with it in AE instead of just watching . That will clear the confusion. Thank you, Evan!
thanks for this explanation. i don't understand yet despite this one. is it possible, dear ECA, to put it to another way?
Can you do this instead with a countdown timer?
Absolutely. You could rig this kind of thing up to type in a time and have count down either at speed or faster or slower. Anything is possible with enough expressions
ECAbrams awesome yeah. I got the timer and function made but am unsure how to turn it into a mogrt and template.
How can I do duration, in and out speed with opacity?
You might want to look into protected regions. A new feature since this video came out.
how can you easy ease the out in the text?
in this example, we use the linear() for a linear relationship but you could use ease() easeOut() or easeIn just as well. There are others too but those are the most common remapping relationships. They all work the same as linear, but with different relationships and in this case, that would cause an eased motion.
It's work in 2017?(
So far as I know, the linear() expression is good for all versions. Now, I don't know if the essential graphics pannel or templates were a thing in the same way in 2017.
@@ECAbrams thx)
"Tee Hee!"
On 8:03 it was the exact momento where I completely lost myself
이거 안됨
Hey! run into a snag! i was following along and this expression - out=thisComp.layer("Controls").effect("text gone")("Slider"); - keeps getting a undefined value error message under it? could it be because we're in after effects 2021? and if so what's the fix? everything else is working fine though!
What's the whole expression as you've written it?