Controlling the Timeline with ActionScript
Video: Controlling the Timeline with ActionScriptSo you can do a lot with the timeline, adding different motion tweens, using the Bone tool. You can do quite a bit. But eventually, what are going you want to do is control the timeline with ActionScript. If I take this file, for instance, if I do a test movie, you'll notice that this animation will play through, and then it loops back to the beginning. So I need to stop this timeline with ActionScript. I want to stop the timeline clear down here at the end.
Viewers: in countries Watching now:
In Flash Professional CS5: Animation Projects, Paul Trani shows how to create dynamic and visually rich animations in Flash Professional CS5. This course demonstrates how to create and import assets, and then take those assets and bring them to life with dynamic motion. It also shows how to create more unique and natural movement by adding special effects, 3D, masks, and even bones to animate characters. Exercise files accompany the course.
- Creating graphics and reusable assets
- Importing graphics
- Making an object move
- Animating a mask
- Using and customizing motion presets
- Morphing shapes
- Animating in 3D
- Adding bones to a character
- Controlling the Timeline with ActionScript
- Randomizing content
Controlling the Timeline with ActionScript
So you can do a lot with the timeline, adding different motion tweens, using the Bone tool. You can do quite a bit. But eventually, what are going you want to do is control the timeline with ActionScript. If I take this file, for instance, if I do a test movie, you'll notice that this animation will play through, and then it loops back to the beginning. So I need to stop this timeline with ActionScript. I want to stop the timeline clear down here at the end.
So again, when this playhead hits about frame 110, that's when I want it to stop to show this message. So all I need to do is navigate to the frame I want the timeline to stop on, and I am going to use a code snippet to stop the timeline. So I am going to go to Window and open up the Code Snippets panel. Here is my Code Snippets panel and as you can see, it's full of code. This is ActionScript code that I can take advantage of.
So there is actions, timeline navigation, animation, quite a bit in here. So I really encourage you to check out all the different code snippets available. But I want to control the timeline. So I will open up Timeline Navigation, and sure enough, here we are. Stop at this frame. Well, that's the one I want to use. I am in frame 110. I will just double-click on that. Stop at this frame. Then it opens up my Actions panel. I am going go ahead and click this left arrow right there, just so I can see the actions available, because it added this ActionScript is what this is, as well as some notes - this is called a comment - referring to what this ActionScript does.
Notice that right down here the bottom it tells me where I put it, in the Actions layer frame 110. Well, let's take a look at that. If I move that down, sure enough, it adds this Actions layer, and right here, that's actually in A right there, that refers to my ActionScript. So with that frame selected, that's actually referring to this code right here. So that should stop the timeline. Let's do a test movie. It plays through the animation and then stops on that last frame. Gorgeous! That's exactly what I want. Very nice! So I am going to go to my swimwear file, because it has this same issue.
Just nest this Code Snippets panel over here to get it out of the way. But overall, it has a timeline that plays through, and at about frame 120 is where I want it to stop. I am going to go ahead and select frame 120, go my Code Snippets panel, and just double-click on Stop at this Frame again. So it adds that same code, very easily, very nice. I will close that Actions panel, and you can see that code was added right there.
But this file is a little more unique, because it has more going on. There are actually some movie clips in here. The movie clips have animation in them. So if I just double-click on this fish, notice that it has its own separate timeline that's independent of the main timeline. So I will click back on the scene 1, and what that means, in general, is that these animations are going to play over and over again, even though the main timeline stops right here. So we will only see this eco-friendly animation once, and then when we stop action right here, the fish are going continue to swim, as well as some other items, such as the jellyfish.
So let's do a test movie. We can see our text, we've got our jellyfish, and again, the jellyfish and the fish continue to animate, even though the main timeline has stopped, and that's exactly what I want. So just be aware of that. If you have animation inside of a movie clip, it will continue to play through, unless you put a stop action in there, which brings me to my next file. I have this fashion file right here, and what's in here are movie clips that again, contain all a lot of animation.
And most of these, if I double- click on this armstand movie clip, it's actually a looping movie clip, and looks really good, because the start and end frame are the same. So I don't need to add a stop action in there, but if I go to scene 1 and I just double-click on this earring, well, this is a different scenario, because it rests into place. And I don't want it to all of the sudden snap back up here again. I want it to stop down here. So again, I'm inside of a movie clip.
It's the same process of going to the Code Snippets panel, under timeline navigation, just adding a stop at this frame. If I double-click on it, it adds it. But I just need to be mindful of where my playhead is. But it doesn't really matter if I am in a movie clip or not. It's always going to add that stop action. So if I test this one, you can see that the animations play through, and this one should just ultimately sort of rest into place.
And that's, again, exactly what I want while these two loop, because they don't have a stop action inside of them. So far, so good. Let's take a look at one more. Here's my home.fla, and again, this one has a beautiful animation that plays through, and I am going to add a stop action right down here at the very end, at about frame 118. I will double-click stop at this frame. That stops the main timeline at that point in time. But what I have here is this Replay button.
So let's just go ahead and do a quick test of this movie. So again, it plays through. You can see this text will slide in, it stops on this last frame, and now I want to actually activate this button. So I want to control the timeline with this button. And when you click on this replay button, I want the playhead to go to frame 1 and then play this animation again. So with this button selected, the first thing I am going to do is give it a specific name.
So, in the Properties panel, I'm going to give it an instance name, and I am going to call it replay_btn. Now it has a specific instance name that's going to be referenced in my ActionScript. So I am going to go to my Code Snippets panel, and that second code snippet is what I want to add. Actually, the third one, I want to click to go to a frame and play. So that sounds like what I want it to do. So with that button selected, I will just double-click on my code snippet, and it adds that ActionScript, as well as, again, some more comments, and even some instructions.
So it says, hey, you know what? Replace the number 5 in the code below with the frame number you would like to move the playhead to when that instance is being clicked. Well, that makes sense to me. I will come down here, gotoAndplay 5. Well, I actually want to gotoAndplay 1. So I will just change that 1, and I will do a test movie. This, again, will play through. See my text should stop on the last frame.
We have our replay button. If I click that, it replays the animation. So that is controlling the timeline with a button. So I encourage you to also explore the other code snippets that are available, because you can do quite a bit. It's all under timeline navigation, the most common being stop at this frame. But again, if you want to control the timeline, just look to your Code Snippets panel and add the code snippet that you would like to use.
There are currently no FAQs about Flash Professional CS5: Animation Projects.