Controlling animations through the timeline
In the exact same way we controlled animations with the classes that control animations directly, the same type of philosophy extends into controlling timelines. By the end of this lesson, you will know how to control timelines, and with that, control their animation.
Video Transcript
00:00Chapter six we're stepping into familiar territory and I wanted to talk about the pause and resume
00:06We've seen that already with the tween light and tween max. So let's see it in action
00:10It's not something surprising, but it is very powerful
00:13So now all these animations that are stringed together I could control and pause all of them at the same time by accessing directly our
00:22Timeline light so to do that first of all, I want to create a new button. So i'm just going to create a sprite
00:27And let me just create it really quickly. So it's going to be a sprite and
00:32Create a new sprite here. Let me just go ahead and create go into my graphics folder. I'm going to begin fill
00:40I'm going to set a color. Let's set it to be red and
00:45I'm going to go ahead to my button
00:47graphics
00:48Draw a rect and I'll set it to be at 0 0 and let's set the size to be 25 by 25
00:57I'm going to position my item to be in its
01:00Exposition, I'll set it to be a 20 pixels my y position. I'll set it to stage stage height
01:07minus
01:1220 plus 25 so 45 and let's add that child
01:16Let's just see that it's sitting somewhere. That is
01:19Logical definitely is so let's go ahead and turn that into a button
01:24So I'm going to go ahead and add button actions to it. So I'm going to add an event listener
01:29Which is going to be a mouse event a click mouse event. I'm going to call on
01:34toggle play and
01:36All that's left for me to do is to create that function. So I'm going to go ahead and do that really quickly
01:44Okay, so we're creating that toggle play now
01:47Let's just start with just toggling our play by going to our our timeline and just asking it to pause now
01:53obviously if I just set it to be pause the value that I'm going to get back and if I just
01:58Trace it and we'll just run this
02:04And I just click on my pause. We'll see that I'm getting the timeline object itself
02:10Returning back to me. So if I need to fetch it, I could fetch it
02:13but in my case
02:13I don't really need to fetch it and I could add at a later stage and go to my timeline and then start to
02:20resume it now
02:23Resume
02:25Resume and I could resume it at
02:28The point that it was stopped or go ahead so I could pause at any point that I want and I could play it back
02:34At any point that I want now
02:37Obviously, we want to have a way to know when what what is our status right now?
02:42so to do that, I'm again just going to go into my
02:45Timeline light try to find if I have a property that will help me know if I'm actually pausing I could see there's a boolean
02:52Value here, which is named pause and if I just run this without changing anything
02:57I could see that am I paused already am I not I'm not paused beautiful
03:02so I could create here basically a simple if statement if
03:06paused
03:08Then if we're paused we want to resume and if we are resumed
03:15We want to pause. Okay, so that's one way that we could have done it
03:19and
03:20I'm just gonna save that run it so we
03:23Pause our animation and we could play it at any point that we want. All right, so that's the plan pause
03:31And and that's all I really wanted to talk about about that the same type of logic that works
03:37So we saw already in earlier videos of how we create a pause play our
03:42Viable the same idea only now instead of working with one tween. We're working with a multi put multitude of tweens in
03:49The next video what I want to do is I want to reverse our animation and we're gonna see how we could do that
03:56immediately in our next video