Join Todd Perkins for an in-depth discussion in this video Copying motion from the timeline, part of ActionScript 3.0 Projects: Game Development.
- [Todd Perkins] In this movie, we're going to look at how to get ActionScript from a motion tween. If you're following along, I'm in copy_motion.fla in the Chapter 1 folder in the Exercise Files folder. In order to use this feature, we first have to create a motion tween. I'm going to create a new layer above the energy layer on the main timeline. I'm not going to name it. This is actually just going to be a scrap layer. On the layer I just created, I'm going to drag an instance of monster onto the stage. I'm not going to give it an instance name. I'm just going to create a simple motion tween. I'm going to go to Frame 30 on that layer, and I'm going to press F6 on my keyboard and that'll create a key frame.
And then I'm going to use the Free Transform tool. And I'm going to scale up the star holding shift on my keyboard. Next, I'll create a motion tween by clicking somewhere in between these two key frames. I'm going to right click, or control click, and choose Create Motion Tween. As I scrub the play head back and forth, you can see the animation happening. Now this is really, really simple. I know. But if you want to, you can create a more elaborate animation. So feel free to do that.
You could even create something along a motion path, anything you want. Once you have your animation created, you can select all the frames that contain your animation. And, yes, this can contain multiple key frames, complex motion paths, anything you want. So I'm going to select the first key frame. And then I'm going to hold shift on my keyboard and I'm going to click the last key frame. So I'll have a selection of all the frames in my tween. Now I'm going to right-click my selection. And then choose Copy Motion as ActionScript 3.0. This will copy all of the information in this tween and convert it to XML in ActionScript.
So I'm going to click this button. Then Flash gives me a little prompt that asks me a instance name to use in the ActionScript. I'm going to paste this code inside of the monster movie clip. I'm not going to give anything an instance name so I'm just going to type this. And then click OK. I don't have any code, it's just copied. So I can delete my scrap layer now. I don't need that anymore. I'm going to double-click the Monster movie clip in the library. I'm going to select the first key frame of the Actions layer, and open the Actions panel. And now I can simply paste the code by clicking in the Actions panel and pressing command V or control V on the PC.
Look at all this code that Flash created for me. Now if you had a motion path, or you had other complex animations, this might be a lot more code. But this is all of the information from that tween in the form of XML. And I'm actually not going to cover what this all means, but if you want to learn more about it, you can look up the animator class in Flash Help. The animator class not only controls complex animations like this, but using the animator class you also have access to events and methods, and properties, that you can modify.
I want to work with some events with the animator class, because I want, when this things scales up all the way to the top, or finishes its animation, that's what's going to say it took too long to shoot this monster, and so the player gets hurt. So, in order to respond to events that happen with the animator class, we need to important the motion event class. So let's go to the second line of code, right below import fl.motion.Animator. And I'm going to import the motion event class. So type import fl.motion.MotionEvent.
Now let's go all the way down to the bottom of this code. And below everything else, we're going to add an event listener to this_animator. And that's the animator instance that's created in my code on line 24. So once this animation finishes, then it's going to execute this event. So let's go to the very bottom of the code. Type this_animator.addEventListener. The event's going to be a data type of MotionEvent.MOTION_END, and that's all caps.
The function we're going to run is hurtPlayer. Now let's define the hurtPlayer function. Let's go down a few lines, create a new function called hurtPlayer. And it's going to receive an event, and the data type is MotionEvent. It's not going to return a value. And at this point, all we're going to do is make the movie clip disappear. Later on, we'll create a point system, and the user will get points as they click on the monsters, and they'll lose energy as the monsters hit them.
But, for now, we'll just remove child to unload this movie clip. So let's type this.parent.removeChild, and in parentheses we'll pass in (this). So it will sort of remove itself after the motion's finished. So now if you test the move right now, nothing will happen, because there's no instance of the monster on the stage. So let's just create a test instance real quick, by closing the Actions panel, returning to Scene 1. Let's create a new scrap layer, and you just drop an instance of monster onto the stage.
Let's test the movie by pressing command return on the Mac, or control enter on the PC. Notice that it scales up and then disappears once it gets to the full scale. Our mission was a success. Let's throw away our scrap layer. In the next movie, we'll take a look at creating monsters dynamically using ActionScript.
- Understanding game development
- Building a shooting game
- Making a Ping-Pong game
- Developing the enemy's artificial intelligence
- Creating a word-guessing game
- Placing tiles in a slider puzzle game
- Creating a tank battle game
- Winning and losing a game
Skill Level Intermediate
Q: What's happening in the "Copying motion from the timeline" video isn't what's happening for me in Flash CS6 or CS5.5. There's some differences when the author creates the motion tween, and the right-click the final keyframe, select "Copy to Actionscript" step doesn't open a dialog box as shown. Meanwhile, the code copied is significantly different.
A: This course was created several years ago (2007) with an older version of Flash, and Adobe ended up removing this "Copy to ActionScript" feature in a later version. Since using that feature isn't crucial to the game's development, you should be able to get by just skipping the "Copy to ActionScript" step. Everything else in the course should be compatible with Flash CS6.
Q: The animator instance is not working. It asks for this_xml. What do I do?
A: Unfortunately, this feature was removed from Flash since the recording of the course. The version in place in CS6 is dramatically different. Please see Adobe's documentation for differences.