Adobe Flash ActionScript 3.0 for Designers Tutorials
Scripting Flash Games / Creating Directional Movement
Visitors to VTC.com will be able to view all introductory videos for each training course.
Free Trial Members will gain access to first three chapters for each training course.
Full Access Members have full access to VTC.com�s entire library of video tutorials.
Learn More
Subtitles of the Movie (Adobe Flash ActionScript 3.0 for Designers / Scripting Flash Games / Creating Directional Movement)
We now come to one of the must know and use ActionScript capabilities to create the kind of Flash games that I've demonstrated here, detecting collisions and moving objects with the arrow keys. In this movie I review how to control the directional movement of an object using the point.polar method with the rotation property and others. Next I review the hit test object and hit test point methods, which are useful for detecting when two objects collide with each other and then direct Flash to run an animation, play a sound effect or other cool game effect. The point class helps you with geometric manipulations by representing a location with an X and a Y coordinate to control the movement of an object on the stage based on its angle. We'll use a method of the point class called point.polar. We looked at another member of the point class earlier when we detected the distances between two objects. Polar coordinates, which the point.polar method is based on, are different from the Cartesian coordinates which you're probably more familiar with. Cartesian coordinates are the typical street grid of the city with positions described by X and Y coordinates. Instead of describing the position with an X and Y coordinate, polar coordinates describe position using angle and distance. The point.polar method converts these polar coordinates into points with equivalent X and Y coordinates. You'll use the point.polar method to move a display object a specific distance by a specific angle. For example, this code moves the my display object object 100 pixels by 60 degrees. Here is my distance number; 100 pixels. I'm converting the angle here 60 degrees into radians and then notice here is my point.polar method taking my distance and my angle and moving the object in that direction by that number of pixels. Now, the point.polar method is another one of those so-called static methods, which means it does not need to be instantiated first in order to be called. Instantiations means you don't need to create an instance first before you can use this method. The point.polar method takes two parameters; the distance from the point, here in this case 100 pixels and the angle in radians and that's why I went through the trouble of teaching you the scripts for converting between degrees and radians. This is one of those methods that doesn't take degrees, although degrees are easier to work with. Now, as you can see from the example in the Work Files folder, Object underscore Move, this method will be indispensible in creating Flash racing games, computer games, chasing games or in any situation where you want the viewer to be able to control the speed and direction of a stage object. Let's go ahead and look at the script for giving the user control over this direction in which a movie clip travels on the stage. Go ahead and open up the ObjectMove fla file, do a Control Test Movie, click on the Arrow Keys, the left and right Arrow Keys to control the direction and movement of the spaceship. Now let's go ahead and click on Keyframe 1 in the Actions Layer, open up our Actions Panel and go through the script here. Now, in this case the movie clip will have a constant velocity but later we can modify this and will also travel in the direction it is pointed. So start off by creating a vehicle graphic on your stage. Convert that graphic into a movie clip. I named my instance Spaceship underscore MC and then in the script panel we'll create an event handler first. This will be assigned to the stage to detect the keyboard event Key Down. In other words, it detects when any key has been pressed; Stage.addeventlistener. Notice it's a keyboard event .KEYDOWN. The KEYDOWN is all in uppercase letters with an underscore between the KEY and the Down. And I'm going to call this function rotate object. That's my own name there. Now, within the KEYDOWN event handler function, we add an if then statement to determine if the right arrow has been pressed, right here let me create a function for the rotate object based on that keyboard event. Here's my conditional; there's two of them. One for if the right key has been pressed; if so, rotate the spaceship ten degrees. If the left button has been pressed, rotate it negative ten degrees. See that negative sign right there? There's a positive sign right here for the right key. So when pressing the right arrow, if we add ten degrees to the current rotation property of the movie clip, then we'll essentially be rotating the object clockwise ten degrees and likewise, whenever the left arrow key is pressed, we'll be rotating the object ten degrees counterclockwise. Makes sense; just make sure you copy my script exactly as I have it here. Don't forget these curly braces that bracket the if then conditionals here. There's two of them. One for each key. You can imagine that I can add several more conditionals here for the up arrow key and the down arrow key to perhaps increase or decrease speed. Now, on a new line create a new event handler also assigned to the stage right here. However, this will be written to detect the event Enter underscore Frame event right here, Enter Frame. As soon as the play head enters this frame, it's going to run this script. In other words, this script will run continuously. Setup a function to handle this event and then within this function right this line of code; variable radians colon number equals math.pi divided by 180 times Spaceship underscore MC.rotation minus 90. This converts the angle of the movie clip to radians. We've covered this code in detail in an earlier movie. But notice you need to subtract 90 degrees from the rotation angle to get the equivalent angle for our polar coordinates. Remember, we're using polar coordinates here, not Cartesian coordinates. On the next line but still within or inside our event frame event handler function, enter our all important point.polar function right here. Remember that our point.polar method takes two parameters; the distance and the angle. So this takes the distance the car travels, here five pixels and its angle in radians and returns a new point object. This point object contains the equivalent X and Y Cartesian coordinates and so Next, we add new X and Y coordinates to the current coordinates of the movie clip right here, Spaceship underscore MC. The X coordinate is going to now equal NewSpot.x and NewSpot.y. Again, notice our movie clip is named Spaceship underscore MC, so if you have a different name, you want to change that instance name right there. That's all there is to it. Go ahead and control test your movie. Shouldn't get any errors in the output panel and when you click on the left arrow, should rotate counterclockwise when you click on the right arrow, it should rotate clockwise. The spaceship should follow in the path or move in the direction that it's pointing so you can control the movement, keep it on the stage. There's nothing here to prevent my movie clip from just running off the stage completely and then disappearing. Another useful script here would be one that either returns the spaceship back onto the stage, you saw that in one of the games. You're not, I didn't know where my spaceship was or one that perhaps bounces the spaceship as if there's a shield there off the edges. Probably a better one is to just have it come back on the stage left if it leaves stage right; stage top if it leaves stage bottom and so on.
Tutorial Information
| Course: | Adobe Flash ActionScript 3.0 for Designers |
| Author: | James Gonzalez |
| SKU: | 34060 |
| ISBN: | 1-935320-82-3 |
| Release Date: | 2009-11-09 |
| Duration: | 9.5 hrs / 101 lessons |
| Work Files: |
Yes |
| Captions: | No |
| Compatibility: |
Vista/XP/2000, OS X, Linux QuickTime 7, Flash 8 |
VTC Sign up & Benefits
- Unlimited Access
- 81,350 Video Tutorials (14,200 free)
- Video Available as Flash or QuickTime
- Over 715 Courses
- $30 for One Month Access
- Multi-User Discounts Available
