<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Open Source Web &#187; source</title>
	<atom:link href="http://www.open-source-web.com/tag/source/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.open-source-web.com</link>
	<description>Your open source for Development and Design</description>
	<lastBuildDate>Sun, 08 Jan 2012 10:21:46 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>GTA game character movement in Flash AS3</title>
		<link>http://www.open-source-web.com/flash/gta-game-character-movement-in-flash-as3/</link>
		<comments>http://www.open-source-web.com/flash/gta-game-character-movement-in-flash-as3/#comments</comments>
		<pubDate>Sat, 17 Jan 2009 10:39:09 +0000</pubDate>
		<dc:creator>Adi</dc:creator>
				<category><![CDATA[ActionScript]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[game]]></category>
		<category><![CDATA[gta]]></category>
		<category><![CDATA[source]]></category>

		<guid isPermaLink="false">http://www.open-source-web.com/?p=35</guid>
		<description><![CDATA[This is going to be a quick introduction into game programming in Flash with AS3. The idea of this tutorial will be to emulate the movement the character had in the original Grand Theft Auto game on the play station and PC. Step 1:Make a new movie Open up Flash and click the create new [...]]]></description>
			<content:encoded><![CDATA[<p>This is going to be a quick introduction into game programming in Flash with AS3. The idea of this tutorial will be to emulate the movement the character had in the original Grand Theft Auto game on the play station and PC.</p>
<p><object width="550" height="400" data="http://www.open-source-web.com/wp-content/uploads/2009/01/gtamovement.swf" type="application/x-shockwave-flash"><param name="src" value="http://www.open-source-web.com/wp-content/uploads/2009/01/gtamovement.swf" /></object></p>
<p>Step 1:Make a new movie</p>
<p>Open up Flash and click the create new icon on the top left. at the moment it doesn&#8217;t matter what size it is.</p>
<p><img class="alignnone size-full wp-image-37" title="gta1" src="http://www.open-source-web.com/wp-content/uploads/2009/01/1.jpg" alt="gta1" width="200" height="200" /></p>
<p>Step 2: Make your sprite</p>
<p>Look for the Library in Flash, right click the and go down to &#8220;New Symbol&#8221;. This will be our main character, I have called it &#8220;hero&#8221; for now. This is partly as I reuse Action script from game to game so having as generic name helps to import code.</p>
<p><img class="alignnone size-full wp-image-38" title="gta2" src="http://www.open-source-web.com/wp-content/uploads/2009/01/2.jpg" alt="gta2" width="400" height="400" /></p>
<p>Make sure the symbol type is set to movie clip and for Linkage select &#8220;Export for action script&#8221; as we may need this later on for further development. Then Click &#8220;OK&#8221; to create the hero sprite.</p>
<p><img class="alignnone size-full wp-image-39" title="gta3" src="http://www.open-source-web.com/wp-content/uploads/2009/01/3.jpg" alt="gta3" width="420" height="500" /></p>
<p>Step 3: Draw your sprite</p>
<p>The window will change slightly, check you are drawing on the hero movie clip.</p>
<p><img class="alignnone size-full wp-image-40" title="gta4" src="http://www.open-source-web.com/wp-content/uploads/2009/01/4.jpg" alt="gta4" width="400" height="200" /></p>
<p>Make sure you are drawing your character right on the little black cross and use the tools on the left to make a basic overhead view of our hero.</p>
<p>It doesn&#8217;t need to be anything too Flashy at the moment as we can change it later on.</p>
<p><img class="alignnone size-full wp-image-41" title="gta5" src="http://www.open-source-web.com/wp-content/uploads/2009/01/5.jpg" alt="gta5" width="400" height="200" /></p>
<p>Step 4: The ActionScript file</p>
<p>The next step will allow us to attach an external ActionScript file. you can add the code to the current Flash movie but I find it easier to keep them separate.</p>
<p>go to File &gt; New</p>
<p>Select Actionscript file from the menu and click OK. Once it has opened click File save as and save it to the same directory as your original flash movie.</p>
<p><img class="alignnone size-full wp-image-42" title="gta6" src="http://www.open-source-web.com/wp-content/uploads/2009/01/6.jpg" alt="gta6" width="650" height="430" /></p>
<p>Step 5: Attach the movie and the Actionscript file together.</p>
<p>To make Flash compile the actionscript file with the movie we need to attach the newly created file to movie. Select the Flash movie tab in Flash and look for the following box on the bottom right and enter the name of the actionscript file without the .as.</p>
<p><img class="alignnone size-full wp-image-44" title="gta8" src="http://www.open-source-web.com/wp-content/uploads/2009/01/8.jpg" alt="gta8" width="400" height="200" /></p>
<p>Step 6: On to the code</p>
<p>On to the fun bit. Select the ActionScript file tab in the Flash window. It will look differant to the Flash window as we are just writing code in this one.</p>
<p><img class="alignnone size-full wp-image-43" title="gta7" src="http://www.open-source-web.com/wp-content/uploads/2009/01/7.jpg" alt="gta7" width="400" height="300" /></p>
<p>To start the code off we need to add common actionscript packages and create the game class.</p>
<pre name="code" class="php">package {
	import flash.display.*;
	import flash.events.*;
	import flash.text.*;
	import flash.geom.*;
	import flash.net.*;
	import flash.system.*;

	public class gtamovement extends MovieClip {

	}
</pre>
<p><img class="alignnone size-full wp-image-45" title="gta9" src="http://www.open-source-web.com/wp-content/uploads/2009/01/9.jpg" alt="gta9" width="450" height="300" /></p>
<p>Step 7: Global variables<br />
Add these variables just below the class definition. The top group are to check if a key is down or up and the secont group are charactor vairables.</p>
<pre name="code" class="php">		///// key listeners vars
		public var arrowLeft:Boolean=false;
		public var arrowRight:Boolean=false;
		public var arrowUp:Boolean=false;
		public var arrowDown:Boolean=false;
		public var space:Boolean=false;

		public var Hero:hero=new hero;
		public var speed:Number = 5.5;
		public var dir:int = 0;
		public var piover180:Number = Math.PI /180;
		public var sharpness:Number =20;</pre>
<p>Step 8 : The constructor<br />
The constructor is givent the same name as the class and is then run automatically when the class is called. For this game we will set up some event listeners and add the hero to the movie.</p>
<pre name="code" class="php">public function gtamovement() {/// constructor run when program is loaded
			trace('Go!');  // test to see if we got this far.
			/////   Key Listener
			stage.addEventListener(KeyboardEvent.KEY_DOWN,keyDownFunction);
			stage.addEventListener(KeyboardEvent.KEY_UP,keyUpFunction);
			stage.addEventListener(Event.ENTER_FRAME,redrawGame);// set game loop

			Hero.x = 100;
			Hero.y = 100;
			addChild(Hero);
		}
</pre>
<p>Step 9: Movie the hero<br />
The next function if probably a bit over complicated but it works fine for what we are after. Basicaly it will only move the hero forward and backward but also reotate it to face any direction.</p>
<pre name="code" class="php">public function movehero() {////////   move hero
			if (arrowLeft) {
				Hero.rotation -= sharpness;
			} else if (arrowRight) {
				Hero.rotation += sharpness;
			} else if (arrowUp) {
				dir = 1;
			} else if (arrowDown) {
				dir = -1;
			} else {
				dir = 0;
			}
			var movex = Math.sin(Hero.rotation*piover180)*speed*dir;
			var movey = Math.cos(Hero.rotation*piover180)*speed*dir;
			Hero.x += Math.sin(Hero.rotation*piover180)*speed*dir;
			Hero.y -= Math.cos(Hero.rotation*piover180)*speed*dir;
		}</pre>
<p>Step 10: Redraw the game<br />
This function is called from the constructor and will loop as long as the game is running. if you wanted to add functionality to pause or move other sprites here is the palce to do it.</p>
<pre name="code" class="php">public function redrawGame(event:Event) {
			movehero();  // Add any other functions you may want looped here.
		}
</pre>
<p>Step 11: The key listeners</p>
<pre name="code" class="php">public function keyDownFunction(event:KeyboardEvent) {
			if (event.keyCode == 37) {
				arrowLeft=true;
			} else if (event.keyCode == 39) {
				arrowRight=true;
			} else if (event.keyCode == 38) {
				arrowUp=true;
			} else if (event.keyCode == 40) {
				arrowDown=true;
			} else if (event.keyCode == 32) {
				space=true;
			} else {
				trace(event.keyCode); // find out which other key was pressed
			}
		}
		public function keyUpFunction(event:KeyboardEvent) {
			if (event.keyCode == 37) {
				arrowLeft=false;
			} else if (event.keyCode == 39) {
				arrowRight=false;
			} else if (event.keyCode == 38) {
				arrowUp=false;
			} else if (event.keyCode == 40) {
				arrowDown=false;
			} else if (event.keyCode == 32) {
				space=false;
			}
		}
</pre>
<p><a href="http://www.open-source-web.com/wp-content/uploads/2009/01/gtamovement.zip">Download gta movement</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.open-source-web.com/flash/gta-game-character-movement-in-flash-as3/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

