Learn how to work with timeline animation in Flash CS3 ActionScript 3.
Tags:adobe,animation,class,flash cs3 actionscript 3,timeline animation,total training
Grab video code:
In this lesson, we are going to be taking a look at doing animation completely with ActionScript, but of course, we are going to be starting taking a look at what we already know how to do in the Timeline. Now, I have got a file prepared that we can use for graphics, so let's start things off by opening that up. I am just going to go over to the File menu, we will go to Open and in Chapter 02 you should find the enterFrame Animation.
Now, of course, you should find your files in the Project Files folder on your Desktop and we will go to Chapter 02 and there we can see the enterFrame Animation.fla. Let's just open it on up and we can see right on the stage, we have got little car graphic here. If I take a quick look in the library you can see that we have got some other parts that we will be using a little bit later in the chapter.
Now, we can get things started by just taking a look at how we would animate this using normal Timeline functions. I would set up a couple of keyframes, I would pick a beginning and ending point for the car and I would probably set a motion tween on it to create the animation along the frames of the Timeline.
What's really happening if we take a look at each frame is we are simply just changing a property of a movie clip or graphic on the stage. For instance, if I just wanted the car to drive straight across the stage, that would be modifying the X property of the movie clip. We will be changing its position in the X coordinate system and we would do that each and every frame.
So, really what we need to create animation is number one, a way to modify properties, which we already know how to do with ActionScript. The number two, we need a way to repeat those properties over and over again. Now, let's do a little test, this is sort of animating half using ActionScript. If we take a look at the movie clip down here, I have got a movie clip called mCar. If we double-click on it, we can see that the movie clip itself has a Timeline. What I want to do to start with is use this Timeline to set up the repeating function of my animation and we'll have it hold the ActionScript that's going to change the property for us.
Now, I am just going to go add a layer for my ActionScript, I will push it up here to the top and I will label it AS car so I know where I am. If we have got that keyframe selected, we can bring up our Actions panel. On the Mac here I will just use Option+F9 and on the PC, of course, you could just press F9. Let's add a little bit of ActionScript to change that X property of the car.
Now, since I am sitting right inside that movie clip, I am not going to be using its name mCar, we are going to be using this keyword to refer back to our movie clip. I will use my dot (.) syntax, I will type in the parameter that we want to change and we want to modify or add to the original value of the X of car. So, I am going to use the += operator.
Now, we just need to pick out a pixel value that we are going to change. I will just set it to 10 pixels for now and we will end off that line of ActionScript. Now, if this was in the main Timeline, this would run once and our car would move over 10 pixels. But since it's inside of a movie clip, what we can do is take advantage of the looping behavior that we get with every movie clip.
Now, there is a little trick to this. Currently, our movie clip is only one frame long. So technically, even though it's looping, it never leaves frame one. So, to get the playhead to leave frame one and come back to it so it can execute our ActionScript again, I will need to add one more frame to my movie clip. So, I am just going to drag in frame two, right up the column of all the layers, and I will press F5 to insert frames for every single one.
Now with my movie clip two frames long, it's going to be able to loop back and hit that ActionScript once again. So let's just see how that's going to work for us. I will test my movie, that's Command+Enter and Ctrl+Enter on the PC, and as you can see, I have got my car driving across the screen. It's a little bit choppy and it's a little bit slow, because we are actually only getting half the frame rate here. Even though we have two frames in our animation, we have only got one frame where our Timeline is actually moving.
So, if I take a look at the current setting of our files at thirty frames per second, we were seeing a 15 frame per second basic animation. But the most important thing is that we can see the two parts to our animation working together, changing of the property and repeating that change over and over again in order to get the object actually to appear moving.
Now, what we really want is, we want to do this without using the Timeline whatsoever. So, let's take this ActionScript back out of the movie clip and let's go back to the main Timeline and try out some new ActionScript that will replace it. Now, the first thing I want to do since I have got all these frames selected is just get rid of that second frame.
So, we can do that by pressing Shift+F5 as long as you have those frames selected already, remember F5 adds keyframes; Shift+F5 will remove them. Since we don't need this ActionScript layer at all, I am just going to completely delete the layer and we will go back out to Scene 1 and we will use our normal AS main layer here to add our new animation ActionScript.