(No Ratings Yet)

I was on a mission this weekend to Jailbreak my fiances Kindle (which was a pain because I had the version with Ads so annoying…). Anyway I got to creating some screen-savers for her and I thought I share them. If you don’t know how to jailbreak your kindle just google it

These are also posted on http://ebookscreensavers.com/

I really enjoyed making these so please comment.  Also if you have any ideas for more or any personal requests please let me know.

(1 votes, average: 5.00 out of 5)

Alright in this tutorial we are going to make a really simple image slider.

Alright I have a new tutorial for you and this time it’s a video! It’s not great cause it’s my first one but there it is.

Things I’ve learned from this recording:

• It’s impossible to make the youTube 15 minute time limit with out editing
• Flash Professional Cs5.5 is still a T-R-B-L (terrible) coding environment ( I need to get Flash Develop back!!!)
• It’s really hard to talk and code simultaneously
• I have a lot of errors that get caught during debugging (17 errors after I stopped video)

Embed Video later after encoding…………………………

This is what an error free version of the code should look like:

package moto {
	
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.net.URLRequest;
	import flash.display.Loader;
	import com.greensock.TweenLite;
	import com.greensock.easing.*;
	import moto.requests.Request_XML;
	import flash.display.Loader;
	import moto.events.evt_ResultXML;
	
	public class imageSlider extends MovieClip {
		
		public var totalImages:int = 0;
		
		public function imageSlider():void {
			
			var xmlData:Request_XML = new Request_XML;
			xmlData.addEventListener(evt_ResultXML.XML_RECEIVED, xmlReturned);
			xmlData.request("image.xml");
			
			this.nextBTN.addEventListener(MouseEvent.CLICK, nextImage);
			this.previousBTN.addEventListener(MouseEvent.CLICK, previousImage);
			
		}
		
		private function xmlReturned(e:evt_ResultXML):void{
			var imageLocData:XML = e.data;
			totalImages = imageLocData.images.length();
			
			for (var j:int = 0; j < totalImages; j++){
				var img_loader = new Loader();
				img_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
				try{img_loader.load( new URLRequest(imageLocData.images[j].imageURL));}
				catch(e:Error){trace("Bad Image Location");}
				
				img_loader.y = 0;
				img_loader.x = j*600;
				this.mc_ImgContainer.addChild(img_loader);
			}
		}
		
		private function imageLoaded(e:Event):void{
			//nothing
		}
		
		private function nextImage(e:MouseEvent):void{
			if (!(this.mc_ImgContainer.x <= ((totalImages-1) * (-600))) && this.mc_ImgContainer.x % 600 == 0){
				TweenLite.to(this.mc_ImgContainer, 1, {x:(this.mc_ImgContainer.x - 600), ease:Quint.easeOut});
			}
			else if (this.mc_ImgContainer.x % 600 == 0){
				TweenLite.to(this.mc_ImgContainer, 1, {x:0, ease:Quint.easeOut});
			}
		}
		
		private function previousImage(e:MouseEvent):void{
			if (!(this.mc_ImgContainer.x >= 0 ) && this.mc_ImgContainer.x % 600 == 0){
				TweenLite.to(this.mc_ImgContainer, 1, {x:(this.mc_ImgContainer.x + 600), ease:Quint.easeOut});
			}
			else if (this.mc_ImgContainer.x % 600 == 0){
				TweenLite.to(this.mc_ImgContainer, 1, {x:((totalImages-1) * (-600)), ease:Quint.easeOut});
			}
		}
	}
	
}

To download the files (FLA, sample XML, and working SWF):     imageSlider.zip

For those using an older version of Flash here is the CS4 FLA: imageSlider(CS4).fla

For those out there who want to use this and are not code-a-holics like me this is actually really simple to use.

• Step 1: Download the files from the link above
• Step 2: Open the imageSlider.as file in the moto directory
• Step 3: Change the url in line 22 to the location (or planned future location) of your xml file on your web server
• Step 4: Re-Compile the FLA using Flash or Flash Develop (Free)
  
• Step 5: Edit the image.xml file and replace the image URLs with the location of your images
• Step 6:  Upload the .swf and .xml file to your webserver (along with your images if you didn’t already)
• Step 7: Embed the .swf on your webpage with the following code (Chang the value=”to you .swf location”

<object width="600" height="300" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="quality" value="high" /><param name="play" value="true" /><param name="loop" value="true" /><param name="wmode" value="window" /><param name="scale" value="showall" /><param name="menu" value="true" /><param name="devicefont" value="false" /><param name="salign" value="" /><param name="allowScriptAccess" value="sameDomain" /><param name="src" value="AS3Tutorials/imageSlider/imageSlider.swf" /><param name="allowscriptaccess" value="sameDomain" /><embed width="600" height="300" type="application/x-shockwave-flash" src="AS3Tutorials/imageSlider/imageSlider.swf" quality="high" play="true" loop="true" wmode="window" scale="showall" menu="true" devicefont="false" salign="" allowScriptAccess="sameDomain" allowscriptaccess="sameDomain" /> </object>

• Ste 8 : Done!

(No Ratings Yet)

For those out there actually following this tutorial for a birds eye view map you’ll notice that it’s been a while since I’ve added a new post.  Well you know how when time passes you kinda let things get a little foggy… Well I remember that I got hit detection working but I got obsessed with course alteration and eventually got busy with other things… Long story short I forgot what I did here so this post is going to be FUN!

I’ve had the hit detection working for a long time but I was trying to make it so when our guy hit a wall instead of stopping he would alter his course instead,  based on the desired direction and the available directions to head in because of the obstacle.  While I work out that little detail I figured I would get myself back into the project by going over what I had already done.

After some research on hit detection I surmised that using the big picture I had used before was a bad idea.  You need to use vector graphics otherwise you have to do it with invisible blocks and let face it that’s a terrible solution to this problem.  I also realized that I needed to change the maze I was working with because the lines were to thin and my sprite was able to walk through walls because his speed overcame the width of the wall (in terms of pixel movement per frame anyway).

So once I had the new maze chosen the first thing that I did was convert the image to a more useable format.  For this we are going use my favorite thing in flash the trace bitmap function.  Trace bitmap convert any image to a vector image which is most cases (depending on your settings) will save you some memory usage during execution.  I converted the maze and then removed the white area.  After that I scaled it up a little bit so that our marine could fit through all the passage ways.

I am still working off the code I created in my previous tutorials (Birds Eye Map and 360 Degree Walk Cycles).  I want to mention that it would be a good idea at this point to start segmenting our code into some sort of design pattern.  Personally I’ve never gotten any formal training on design patterns so I just segment the way that makes sense to me.  I am not going to segment this tutorial because I think this will be the last in this series.

I also want to talk about the different types of hitTest.  The normal type of hitTest simply compares two different movie clip boundary boxes or points.  However, in an example like the one we are working with this it would be impractical.  We would have to create and place multiple instances of an object that would create the boundaries.  The other option is to use the bitmapData.hittest function.  This function looks at the information inside the movie clip and compares it to another object.

Anyway on to the action (script)((ZING that was a pun!))….

package {

	import flash.geom.Rectangle;
	import flash.geom.Point;
	import flash.display.BitmapData;
	
	public class main extends Sprite {
		
		const SCALE:Number = 1;
		const Xcorrection:Number = 46.9;
		const Ycorrection: Number = 45.9;
		
		private var distX:Number;
		private var distY:Number;

		private var border:mazeTrace = new mazeTrace();
		private var boundryBox:Rectangle;
		private var heroBox:Rectangle;
		private var boundryBmpData:BitmapData;
		
		public function main():void {
			
			maze = new Bitmap(new map());
			maze.x = -600;
			maze.y = 200;
			this.addChild(maze);
			
			hero.x = cntrStgX;
			hero.y = cntrStgY;
			this.addChild(hero);
			hero.stop();
			
			//NEW CODE SECTION
			border.x = maze.x + Xcorrection;
			border.y = maze.y + Ycorrection;
			this.addChild(border);
			border.visible = false;
			
			boundryBox = border.getBounds(this);
			boundryBmpData = new BitmapData(boundryBox.width, boundryBox.height, true, 0);
			boundryBmpData.draw(border);
			
			var touchLayer:Sprite = new Sprite();
			touchLayer.graphics.beginFill(0x000000, 0);
			touchLayer.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
			touchLayer.graphics.endFill();
			this.addChild(touchLayer);
			
			touchLayer.addEventListener(MouseEvent.MOUSE_DOWN, scrollMap);
			touchLayer.addEventListener(MouseEvent.MOUSE_UP, endScrollMap);		
		}
		
		private function moveMap(evt:Event):void {
			
			distX = mouseX - cntrStgX;
			distY = mouseY - cntrStgY;
			
			impassableObjectTest();//NEW
			
			if (Math.sqrt(distX*distX +  distY*distY) > SPEED){
				var radian:Number = Math.atan2(distY, distX);
				maze.x -= Math.cos(radian) * SPEED;
				maze.y -= Math.sin(radian) * SPEED;
				changeDirection(radian);
			}
			//NEW ELSE COPY FROM BELOW NEEDED FROM DEBUG
			else{
				if (!(currentHeading == "")){
					hero.gotoAndStop(currentHeading);
				}
				currentHeading = "";
				this.removeEventListener(Event.ENTER_FRAME, moveMap);
			}
		}
		
		private function goToPoint(evt:Event):void {
			
			distX = destX - cntrStgX;
			distY = destY - cntrStgY;
			
			impassableObjectTest();
			
			if (Math.sqrt(distX*distX +  distY*distY) > SPEED){
				var radian:Number = Math.atan2(distY, distX);
				maze.x -= Math.cos(radian) * SPEED;
				destX -= Math.cos(radian) * SPEED;
				maze.y -= Math.sin(radian) * SPEED;
				destY -= Math.sin(radian) * SPEED;
				changeDirection(radian);
			}
			else{
				if (!(currentHeading == "")){
					hero.gotoAndStop(currentHeading);
				}
				currentHeading = "";
				this.removeEventListener(Event.ENTER_FRAME, goToPoint);
			}
			
		}	
		
		// NEW FUNCTION
		private function impassableObjectTest():void {
			
			heroBox = hero.getBounds(this);
			
			var radian:Number = Math.atan2(distY, distX);		
			border.x -= Math.cos(radian) * SPEED;
			border.y -= Math.sin(radian) * SPEED;
			
			if(boundryBmpData.hitTest(new Point(border.x, border.y), 255, heroBox)){
				var currentMX:Number = destX;
				var currentMY:Number = destY;
				
				distX = 0;
				distY = 0;				
			}
			
			border.x = maze.x + Xcorrection;
			border.y = maze.y + Ycorrection;
		}
	}
}

As you’ll notice, if you try and copy and paste, there are some key imports, functions and variables missing from this version. I slimmed down the amount of lines for the tutorial since I covered the other stuff in a previous one.  We only need to talk about the new stuff anyway right?

1. First off we import three new classes Rectangle, Point from the geom library and the Bitmap Data from the display library.  These are necessary for the style of hit detection that I employed.
2. Next I’m noticing some correction and distance variables and a SCALE, honestly its been too long and I forgot their use.  My brain is kinda useless for remembering things mostly just good for solving problems.  (And even that power is questionable)
3. The border is an instance off the mazeTrace sprite that is in the library.  The other Rectangles and bitmap data come into play later.
4. Some major changes have been made to the constructor (the main function).
   1. We still add the map and the hero…
   2. But now we are also adding an invisible version of the maze.  ( I feel kinda silly now but the map() and the mazeTrace() are the same thing but one is a MovieClip and the other just a bitmap instead of doing the “correction calculation” I could have just loaded the same map twice – doh!
   3. The real money maker in this new part is the border.getBound(this) and his friend BitmapData .  This essentially redraws our maze and make the actual pixels respond to our hit test.  Whit out this Our character wouldn’t even be able to get close to the maze because he would always be hitTest = true.
5. -Also I noticed that the previous movement need some tweeking there is a new else condition to the change direction section (I should probably go back and fix the old tutorial huh?)
6. Anyway… you notice the impassable object test get check on each frame.
   1. It bets the hero’s boundary, calculates his next movement, tests if that will cause a hitTest = true using our BitmapData and if it does stops him dead in his tracks.

Too easy right!  Well as always I appreciate any questions or comments (even on the plethora of spelling mistakes).

And now we have a hitTest checking guy who can run through a maze, some might say it’s a-MAZE-ing… ( I need to stop making these bad puns they are terrible).

Download the FLA – Note my work on the alternate route is commented out in this download feel free to take a look

Now that I’m home I’m going to try to post once a week on new things.  They might not all be game related but I’ve got a new job now so I get to work with flash at least once a week! – YAY!

See you next Sunday – Moto

(No Ratings Yet)

Short little tutorial today. I’m basing this on my previous Birds Eye Point and Click Map code. This simple little addition will show you how to add a 360 degree walk cycle to your point and click map. The most strenuous part of this is not the coding though it’s the animating. I spent most of my week in class this last week setting up my animation frames and getting them converted for flash. It was painstaking and repetitive but worth the effort.

In my last tutorial I used a simple red ball to represent the character in this one I am going to use a Marine from the game StarCraft (BTW I love this game thank you to Blizzard for this work of art). I know I’ve mentioned this before but I’ll say it again I AM NOT AN ARTIST. Which means I did not create these walk cycles but I chose them to demonstrate how to accomplish a 360 degree walk cycle. I’m not going to go over how I got the frames if you really want to know search Google and you’ll figure it out. Any way here we go…

First off you’ll need to setup your movie clip. Everyone has a different method but I set mine up like this:

The top layer is where I label the frame for ActionScript targeting and the second layer holds all the images of the Marine. Each walk cycle is 9 frames long and at the end of each cycle there is a piece of action script in the time-line that sends it back the beginning of the walk cycle (e.g. gotoAndPlay(1);).  The labels indicate the direction of travel for example the first nine frames are going to be used for travel between 0 and 19 degrees.  In total there are 18 different walk cycles here.  One thing you should do to save yourself time animating is just animate 9 cycles (180 degrees) and then simple do a horizontal flip for the other direction.  This is the most time consuming part of the whole process but once you finish your ready to hit the code.

package {
	
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.Stage;
	import flash.events.MouseEvent;
	import flash.events.Event;
	
	public class main extends Sprite {
		
		const cntrStgX:int = stage.stageWidth / 2;
		const cntrStgY:int = stage.stageHeight / 2;
		const SPEED:int = 5;
		
		private var destX:Number;
		private var destY:Number;
		private var currentHeading:String = "";//NEW
		
		private var maze:Bitmap;
		private var hero:Jim = new Jim();//MOVED
		
		public function main():void {
			
			maze = new Bitmap(new map());
			maze.x = -1000;
			maze.y = -1000;
			this.addChild(maze);
			
			hero.x = cntrStgX;
			hero.y = cntrStgY;
			this.addChild(hero);
                        hero.stop();//NEW
			
			var touchLayer:Sprite = new Sprite();
			touchLayer.graphics.beginFill(0x000000, 0);
			touchLayer.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
			touchLayer.graphics.endFill();
			this.addChild(touchLayer);
			
			touchLayer.addEventListener(MouseEvent.MOUSE_DOWN, scrollMap);
			touchLayer.addEventListener(MouseEvent.MOUSE_UP, endScrollMap);		
		}
		
		private function scrollMap(m:MouseEvent):void {
			this.removeEventListener(Event.ENTER_FRAME, goToPoint)
			this.addEventListener(Event.ENTER_FRAME, moveMap);
		}
		
		private function endScrollMap(m:MouseEvent):void {
			this.removeEventListener(Event.ENTER_FRAME, moveMap);
			destX = mouseX;
			destY = mouseY;
			this.addEventListener(Event.ENTER_FRAME, goToPoint);		
		}
		
		private function moveMap(evt:Event):void {
			
			var distX:Number = mouseX - cntrStgX;
			var distY:Number = mouseY - cntrStgY;
			
			if (Math.sqrt(distX*distX +  distY*distY) > SPEED){
				var radian:Number = Math.atan2(distY, distX);
				maze.x -= Math.cos(radian) * SPEED;
				maze.y -= Math.sin(radian) * SPEED;
			}
			
			//NEW SECTION
			var currentDirection:Number = radian * 180 / Math.PI;
			
			if (currentDirection >= -90 && currentDirection < -70 && currentHeading != "0-19") { hero.gotoAndPlay("0-19"); currentHeading = "0-19"; }
			else if (currentDirection >= -70 && currentDirection < -50 && currentHeading != "20-39") { hero.gotoAndPlay("20-39"); currentHeading = "20-39"; }
			else if (currentDirection >= -50 && currentDirection < -30 && currentHeading != "40-59") { hero.gotoAndPlay("40-59"); currentHeading = "40-59"; }
			else if (currentDirection >= -30 && currentDirection < -10 && currentHeading != "60-79") { hero.gotoAndPlay("60-79"); currentHeading = "60-79"; }
			else if (currentDirection >= -10 && currentDirection < 10 && currentHeading != "80-99") { hero.gotoAndPlay("80-99"); currentHeading = "80-99"; }
			else if (currentDirection >= 10 && currentDirection < 30 && currentHeading != "100-119") { hero.gotoAndPlay("100-119"); currentHeading = "100-119"; }
			else if (currentDirection >= 30 && currentDirection < 50 && currentHeading != "120-139") { hero.gotoAndPlay("120-139"); currentHeading = "120-139"; }
			else if (currentDirection >= 50 && currentDirection < 70 && currentHeading != "140-159") { hero.gotoAndPlay("140-159"); currentHeading = "140-159"; }
			else if (currentDirection >= 70 && currentDirection < 90 && currentHeading != "160-179") { hero.gotoAndPlay("160-179"); currentHeading = "160-179"; }
			else if (currentDirection >= 90 && currentDirection < 110 && currentHeading != "180-199") { hero.gotoAndPlay("180-199"); currentHeading = "180-199"; }
			else if (currentDirection >= 110 && currentDirection < 130 && currentHeading != "200-219") { hero.gotoAndPlay("200-219"); currentHeading = "200-219"; }
			else if (currentDirection >= 130 && currentDirection < 150 && currentHeading != "220-239") { hero.gotoAndPlay("220-239"); currentHeading = "220-239"; }
			else if (currentDirection >= 150 && currentDirection < 170 && currentHeading != "240-259") { hero.gotoAndPlay("240-259"); currentHeading = "240-259"; }
			else if (currentDirection >= 170 || currentDirection < -170 && currentHeading != "260-279") { hero.gotoAndPlay("260-279"); currentHeading = "260-279"; }
			else if (currentDirection >= -170 && currentDirection < -150 && currentHeading != "280-299") { hero.gotoAndPlay("280-299"); currentHeading = "280-299"; }
			else if (currentDirection >= -150 && currentDirection < -130 && currentHeading != "300-319") { hero.gotoAndPlay("300-319"); currentHeading = "300-319"; }
			else if (currentDirection >= -130 && currentDirection < -110 && currentHeading != "320-339") { hero.gotoAndPlay("320-339"); currentHeading = "320-339"; }
			else if (currentDirection >= -110 && currentDirection < -90 && currentHeading != "340-359") { hero.gotoAndPlay("340-359"); currentHeading = "340-359"; }
			
		}
		
		private function goToPoint(evt:Event):void {
			
			var distX:Number = destX - cntrStgX;
			var distY:Number = destY - cntrStgY;
			
			if (Math.sqrt(distX*distX +  distY*distY) > SPEED){
				var radian:Number = Math.atan2(distY, distX);
				maze.x -= Math.cos(radian) * SPEED;
				destX -= Math.cos(radian) * SPEED;
				maze.y -= Math.sin(radian) * SPEED;
				destY -= Math.sin(radian) * SPEED;
			}
			else{
				this.removeEventListener(Event.ENTER_FRAME, goToPoint);
				hero.gotoAndStop(currentHeading);//NEW
				currentHeading = "";//NEW
			}
		}	
	}

Alright starting from the top all new lines are followed by a //NEW comment. We’ve added one new variable that we’ll be using to store our current direction so that our animation loop can continue while the user holds down the mouse.  If we don’t store this when the user holds down the mouse it will prevent the walk cycle from looping because it will constantly start from the first frame.  We’ve move our hero call into the class as a private variable so the other functions now have access to it.  We’ll also add a line telling him to stop once loaded to the stage.

Now for the major addition in the map movement function I’ve created a new variable to calculate the current direction in degrees because I personally don’t think in radians.  The next 18 lines area a replicated conditional statement that basically say if it’s between such and such degrees and it’s not the same heading we’re already heading at then goto a particular frame on our hero movie clip.  Since our movie clip has it’s own gotoAndPlay functions at the end of the loop it will continue to loop until we tell it to stop.  I was originally debating whether to use a switch or nested ifs for this but since I had to add the additional “currentHeading” condition I stuck with the nested ifs.  I’m not sure if you would get a performance improvement from the switch anyways…

Finally our last addition at the bottom is added to the goToPoint map function.  Once the character reaches his destination we stop him at his current heading.  Then we reset his current heading.  This is important because if the user clicks again in the same direction and the heading doesn’t change the loop will not restart .

And that’s it.  Here’s what she looks like:

Download the FLA

I promise my next tutorial will cover boundaries
Later
–Moto

(No Ratings Yet)

Hey guys I’m just starting work on a new AS3 game and I decided to start from scratch and build my on engine for an RPG. After doing some searching around the net it was really difficult to find a solution for a point and click map as most people are utilizing the keyboard instead. In this tutorial I’ll go through how to create a point and click style map movement that utilizes flash trigonometry functions.

I just want to point out that I’m no genius when it comes to trig, honestly I’ve haven’t looked at the stuff much since high school. Hopefully this will help you get started. I work in document classes and try to avoid code in the main time-line so here we go.

For this tutorial you’ll need to create two movie clips in your library. One for your character (char) and a one for a background map (map). Remember to go into the properties and export them for action script. For the purposes of this tutorial I created a simple circle and imported a maze I found on-line.

Now lets get our document class started. I’m going to call mine “main”. The first thing we are going to do is bring our character and map on to the stage. Then we’ll setup our touch-layer.

package {
	
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.Stage;
        import flash.events.MouseEvent;
	import flash.events.Event;
	
	public class main extends Sprite {
		
		const cntrStgX:int = stage.stageWidth / 2;
		const cntrStgY:int = stage.stageHeight / 2;

                private var maze:Bitmap;
		
		public function main():void {
			
			maze = new Bitmap(new map());
			maze.x = -1000;
			maze.y = -1000;
			this.addChild(maze);
			
			var hero:char = new char();
			hero.x = cntrStgX;
			hero.y = cntrStgY;
			this.addChild(hero);
			
			var touchLayer:Sprite = new Sprite();
			touchLayer.graphics.beginFill(0x000000, 0);
			touchLayer.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
			touchLayer.graphics.endFill();
			this.addChild(touchLayer);
			
		}
	}
}

As you can see I’ve made the map available to other functions in the class. We need to do this so that the other function can manipulate and move the map easily. I’ve set the map to display at -1000 on both x and y so we start in the middle of the map. I’ve also centered the character since our goal is to make the character appear to move by moving the map behind him. The touch-layer is a technique I picked up while work on my last game it acts as a buffer between the user and individual parts on the stage. Since we don’t want the user directly interacting with either the player or the map it’s a good idea to use it here.

Here’s what we have so far:

Next up lets add our interactivity. When a user clicks on the screen we want to map to constantly scroll as if the character were moving in that direction so I’m going to add two event listeners to the touch-layer. Next we need to add another constant variable called SPEED, set it to 5. Once I’ve added that I’m going to start doing the a math calculation to move the map using the ENTER_FRAME loop in action script. Add the following lines of code to the end of the class (Except for the constant variable which goes toward the top).

//Added to the top 
const SPEED:int = 5;

            touchLayer.addEventListener(MouseEvent.MOUSE_DOWN, scrollMap);  
			touchLayer.addEventListener(MouseEvent.MOUSE_UP, endScrollMap);	
		}
		
		private function scrollMap(m:MouseEvent):void {
			this.addEventListener(Event.ENTER_FRAME, moveMap);
		}
		
		private function endScrollMap(m:MouseEvent):void {
			this.removeEventListener(Event.ENTER_FRAME, moveMap); 
		}
		
		private function moveMap(evt:Event):void {
			
			var distX:Number = mouseX - cntrStgX;   
			var distY:Number = mouseY - cntrStgY;	
			
			if (Math.sqrt(distX*distX +  distY*distY) > SPEED){		
				var radian:Number = Math.atan2(distY, distX);		
				map.x -= Math.cos(radian) * SPEED;		
				map.y -= Math.sin(radian) * SPEED;		
			}
		}

The loop calculates your x and y distance on each frame. Next it tests to see if the distance is greater than the speed constant. If it is we will move the map based on the angle that the mouse is at in comparison to the center of the stage. With out going into extreme detail we are using radians (the way that flash prefers angles) to calculate the angle then we increment a fraction (by multiplying our speed) of that radian to the x and y values of the map.

This is all fine and dandy but I want the character to move to the point I clicked after I let go of the mouse. So lets add some more functionality to our mouse events. First I’m going to add a new function called goToPoint. We have to remember to set it for removal on the mouse down for two reasons; 1) garbage collection and 2) if we don’t if the user double clicks they will go twice as fast. (Don’t believe me go ahead and try it )

I’ve put the complete class in the code below.

package moto {
	
	import flash.display.Sprite;
	import flash.display.Bitmap;
	import flash.display.Stage;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	public class main extends Sprite {
		
		const cntrStgX:int = stage.stageWidth / 2;
		const cntrStgY:int = stage.stageHeight / 2;
		const SPEED:int = 4;
		
		var destX:Number;
		var destY:Number;
		
		private var map:Bitmap;		
		
		public function main():void {
			
			map = new Bitmap(new testmap(-1000, -1000));
			this.addChild(map);
			var hero:Jim = new Jim();
			hero.x = cntrStgX;
			hero.y = cntrStgY;
			this.addChild(hero);
			
			var touchLayer:Sprite = new Sprite();
			touchLayer.graphics.beginFill(0x000000, 0);
			touchLayer.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
			touchLayer.graphics.endFill();
			this.addChild(touchLayer);
			
			touchLayer.addEventListener(MouseEvent.MOUSE_DOWN, scrollMap);
			touchLayer.addEventListener(MouseEvent.MOUSE_UP, endScrollMap);
		}
		
		private function scrollMap(m:MouseEvent):void {
			this.removeEventListener(Event.ENTER_FRAME, goToPoint);
			this.addEventListener(Event.ENTER_FRAME, moveMap);
		}
		
		private function endScrollMap(m:MouseEvent):void {
			this.removeEventListener(Event.ENTER_FRAME, moveMap);
			destX = mouseX;
			destY = mouseY;
			this.addEventListener(Event.ENTER_FRAME, goToPoint);		
		}
		
		private function moveMap(evt:Event):void {
			
			var distX:Number = mouseX - cntrStgX;
			var distY:Number = mouseY - cntrStgY;
			
			if (Math.sqrt(distX*distX +  distY*distY) > SPEED){
				var radian:Number = Math.atan2(distY, distX);
				map.x -= Math.cos(radian) * SPEED;
				map.y -= Math.sin(radian) * SPEED;
			}
		}
		
		private function goToPoint(evt:Event):void {		
			
			var distX:Number = destX - cntrStgX;		
			var distY:Number = destY - cntrStgY;		
			
			if (Math.sqrt(distX*distX +  distY*distY) > SPEED){ 
				var radian:Number = Math.atan2(distY, distX);
				map.x -= Math.cos(radian) * SPEED;
				destX -= Math.cos(radian) * SPEED;
				map.y -= Math.sin(radian) * SPEED;
				destY -= Math.sin(radian) * SPEED;	
			}
		}		
	}	
}

The goToPoint function is just a simple modification to the moveMap function the only difference is that we set the current mouse X and Y to static variables and subtract the same increment that we move from the static varialbe. I used static variable instead of passing them because I was too lazy to create a custom event listener. Our final product is below.

Click here to download files.

In the next tutorial I will be going over how to create impassable areas (Walls, Buildings, Rivers, ect…) See you then