Mantra for successful app development

26 12 2008

Just wanted to jot down a few aspects of application development that can ensure success:

1. Version control: Manage your source code using a version control system. It will save you from accidents such as ” omygod!! an important file got deleted”, “damn! my hard disc crashed”, “shucks! client is asking for a previous version which has been updated now”, and more.  you can try MS VSS or TortoiseCVS. Client side TortoiseCVS is free to use.

2. TDD: Apply Test Driven Development so that much of the bug testing and fixing is done in the development phase and the code is relatively bug free. For Flash and Flex development you can use ASUnit or FlexUnit. FlexUnit gives you a very nice Flex based interface which is a nice advantage.

3. OOP and design patterns: Apply relevant OOP concepts and design patterns for ensuring optimized code that is reusable, scalable, and flexible.

4. UML modeling: Always start your project with creating the architecture class diagram. Spend as much time as possible on this. A robust diagram in the beginning will ensure less coding time and also flexibility or scaling issues in the later stages can be handled effectively.

5. Error handling: Incorporate effective error handling for saving your application crash from unexpected bugs while running and also letting the user know what might’ve gone wrong and provide an alternate path.

6. Be friendly with your fellow coders and share a good laugh :-) Okay, that’s a given for any kind of team work.

I’m sure there are lots more but right now I could think of  these as the most important ones from a developer’s perspective.





BitmapData effects

23 12 2008

Recently there was an actionscript competition at The Flash Blog – 25 lines that would impress Einstein. You need to create something innovative using only 25 lines of code. The absolutely fantastic  results were declared on Dec 18. It’s amazing to see what people can do with only 25 lines of code in Flash. Check out the top entries here…

http://theflashblog.com/?p=503

I noticed one common thing being used to create some of these effects is the BitmapData class for manipulating bitmap objects. Here, I will share a very basic example to show what can be done using this object.

1. Create a new file (actionscript 3.0) in Flash CS3 IDE.

2. Change the stage dimensions as 400 x 200 and frame rate as 24 fps.

3. Select frame 1. Copy the following code in code editor:

//import bitmap classes
import flash.display.Bitmap;
import flash.display.BitmapData;

//create a BitmapData object
var myBitmapDataObject:BitmapData = new BitmapData(400, 200, false, 0x00FF0000);

//create a random number which will be used for setting the seed for adding noise to the bitmadata object
var seed:Number = Math.floor(Math.random() * 100);
//set up a channel with a mix of  three main colors - red, blue, green
var channels:uint = BitmapDataChannel.GREEN | BitmapDataChannel.BLUE | BitmapDataChannel.RED
//create a new bitmap with the bitmapdata object
var myBitmap:Bitmap = new Bitmap(myBitmapDataObject);
addChild(myBitmap);
//use enterframe event for animating the bitmap effect
addEventListener(Event.ENTER_FRAME, updateImage);

var velo:int = 10;
function updateImage(e:Event):void
{
	if (velo >= 200)
	{
		velo = -Math.abs(velo);
	}
	//add noise with baseX and baseY properties set to var velo which is constantly changing
	myBitmapDataObject.perlinNoise(velo++, velo++, 6, seed, false, true, channels, false, null);
}

4. Publish the file.

There  you go. You will see a colorful animated cloud being zoomed in and zoomed out.

ColoredCloudEffect.swf

Bitmap Cloud Effect

Bitmap Cloud Effect





Dividing your Flex app in different SWF files

20 12 2008

I came across a Adobe live docs PDF that I believe is very important for any serious Flex developer. Sooner or later you will be developing an application that will scale up to proportions that might become unmanageable in terms of code, file size, and performance.

Flex provides 2 ways to deal with it – modular approach and sub-applications. Both ways you load and unload separate SWF files into the main application for keeping certain functionality separate and available only when required. Besides some other issues this can also give rise to an issue of having different version of Flex for the loading sub apps and that needs to be taken care of early on.

This PDF details all the considerations that should go into making a decision on which approach to follow for building a large application. A must read for all Flex developers.

http://livedocs.adobe.com/flex/3/loading_applications.pdf





Adobe Flash Catalyst – Coming Soon

6 12 2008

One grievance that Flash designers have about the evolution of Flash IDE is that it has become more developer oriented than (as originally intended) designer friendly. Earlier designers could easily add interactivity using the menu driven coding. The Expert Mode for the code editor was a secondary option (Flash 4 and 5 .)

Well, Adobe is certainly an organization which is very sensitive towards its core customers (i.e. designers.) and have announced a new product called Adobe Flash Catalyst (earlier codenamed Thermo.) Catalyst is a tool targetted for designers who want to add interactivity to their design. The result is that we can create a UI in Catalyst and then just convert graphics into dynamic content by selecting objects and specifying actions from menus. No coding required. Output the file as a SWF or AIR. You can easily build a RIA prototype.

Catalyst will be launched very soon. Read more about it here…

http://labs.adobe.com/technologies/flashcatalyst/





Collision Detection

4 12 2008

Whether it’s a shooting game, a car racing, a pin ball, or a pac man game, collision detection is one of the most important aspects in building games. Without proper colision detection none of these games can exist in Flash. I want to share a very basic collision detection using a ball bounce example. Below, see how the ball bounces back when it hits any of the side walls or the moving wall in the center.

BallBounce.swf

BallBounce in Flash AS3 using hitTestObject()

BallBounce in Flash AS3 using hitTestObject()

Here, collision is detected using two AS3.0 techniques:

1. movieclip1.hitTestObject(movieClip2)
2. checking the overlapping of x and y coordinates of the two movieclips

I have also used a custom event (BounceEvent) that helps in announcing when the ball hits a wall and specifically which wall(or which side.)

There are 5 classes being used in this example:

1. Ball: A ball that will move and bounce around.
2. MovingWall: A movieclip in the center that is constantly moving to create obstruction for the ball.
3. Splat: A movieclip object to show the collision effect.
4. BounceEvent: A custom event to announce that a ball has hit the wall.
5. main: This is the document class. Initiates all the objects and controls the collision detection.

Ball.as

package
{
	import flash.display.MovieClip;
	public class Ball extends MovieClip
	{
		public function Ball(xPos:Number, yPos:Number)
		{

			var b:MovieClip = new MovieClip();
			b.graphics.beginFill(0xFF9933);
			b.graphics.drawCircle(0, 0, 10);
			x = xPos;
			y = yPos;
			addChild(b);
		}
	}
}

Splat.as

package
{
	import flash.display.MovieClip;
	import fl.transitions.Tween;
	import fl.transitions.easing.*;
	public class Splat extends MovieClip
	{
		public function Splat()
		{
			alpha = 0;
		}

		public function explode(xPos:Number, yPos:Number):void
		{
			x = xPos;
			y = yPos;

			new Tween(this, "alpha", Strong.easeOut, 30, 0, 0.2, true);
		}
	}
}

MovingWall.as

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	public class MovingWall extends MovieClip
	{
		private var wallVelocityY:Number = 3;
		public function MovingWall(xPos:Number, yPos:Number)
		{
			x = 130;
			y = 40;
			setMotion();
		}
		private function setMotion():void
		{
			addEventListener(Event.ENTER_FRAME, moveWall);
		}
		private function moveWall(event:Event):void
		{
			y += wallVelocityY;
			if (y <= 40)
			{
				wallVelocityY = Math.abs(wallVelocityY);
			}
			else if (y >= 120)
			{
				wallVelocityY = -Math.abs(wallVelocityY);
			}
		}
	}
}

BounceEvent.as

package
{
	import flash.events.Event;
	public class BounceEvent extends Event
	{
		public static const BOUNCE:String = "Bounce";
		private var _side:String = "none";

		public function get side():String
		{
			return _side;
		}

		public function BounceEvent(type:String, side:String)
		{
			super(type, true);
			_side = side;
		}

		public override function clone():Event
		{
			return new BounceEvent(type, _side);
		}
	}
}

main.as

This is where the real action happens. First we instantiate the ball, movingWall, and the splat objects. Then we set the ball in motion. And then, using hitTestObject() we check when the ball hits the side walls. Using the custom BounceEvent we make an announcement when the ball hits a wall. The event also lets us know which wall has been hit. For the moving wall after checking with hitTestObject() we also need to find out which side of the wall has been hit. For that we check the overlapping of x and y coordinates of the ball and the moving wall.

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.display.MovieClip;

	public class main extends Sprite
	{
		private var ballVelocityX:Number = 2;
		private var ballVelocityY:Number = 3;
		private var ball:MovieClip;
		private var movingWall:MovingWall;
		private var splat:Splat;
		public function main()
		{
			stage.frameRate = 36;
			setGraphicObjects();
			startBallMotion();
		}
		private function setGraphicObjects():void
		{
			ball = new Ball(100, 100);
			addChild(ball);
			movingWall = new MovingWall(130, 40);
			addChild(movingWall);
			splat = new Splat();
			addChild(splat);
		}
		private function startBallMotion():void
		{
			ball.addEventListener(Event.ENTER_FRAME, moveball)
			addEventListener(BounceEvent.BOUNCE, bounceHandler);
		}
		private function moveball(event:Event):void
		{
			event.target.x += ballVelocityX;
			event.target.y += ballVelocityY;
			sideWallCollision();
			movingWallCollision();
		}
		private function sideWallCollision():void
		{
			if (ball.hitTestObject(wallLeft))
			{
				ballVelocityX = Math.abs(ballVelocityX);
				ball.dispatchEvent(new BounceEvent(BounceEvent.BOUNCE, "left"));
			}
			else if (ball.hitTestObject(wallRight))
			{
				ballVelocityX = -Math.abs(ballVelocityX);
				ball.dispatchEvent(new BounceEvent(BounceEvent.BOUNCE, "right"));
			}
			if (ball.hitTestObject(wallTop))
			{
				ballVelocityY = Math.abs(ballVelocityY);
				ball.dispatchEvent(new BounceEvent(BounceEvent.BOUNCE, "top"));
			}
			else if (ball.hitTestObject(wallBottom))
			{
				ballVelocityY = -Math.abs(ballVelocityY);
				ball.dispatchEvent(new BounceEvent(BounceEvent.BOUNCE, "bottom"));
			}
		}
		private function movingWallCollision():void
		{
			if (ball.hitTestObject(movingWall))
			{
				var movingWallLeft:Number = movingWall.x;
				var movingWallRight:Number = movingWall.x + movingWall.width;
				var movingWallTop:Number = movingWall.y;
				var movingWallBottom:Number = movingWall.y + movingWall.height;
				if (ball.x >= movingWallLeft)
				{
					ballVelocityX = -Math.abs(ballVelocityX);
					ball.dispatchEvent(new BounceEvent(BounceEvent.BOUNCE, "center left"));
				}
				else if (ball.x <= movingWallRight)
				{
					ballVelocityX = Math.abs(ballVelocityX);
					ball.dispatchEvent(new BounceEvent(BounceEvent.BOUNCE, "center right"));
				}
				if (ball.y >= movingWallTop)
				{
					ballVelocityX = -Math.abs(ballVelocityY);
					ball.dispatchEvent(new BounceEvent(BounceEvent.BOUNCE, "center top"));
				}
				else if (ball.y <= movingWallBottom)
				{
					ballVelocityX = Math.abs(ballVelocityY);
					ball.dispatchEvent(new BounceEvent(BounceEvent.BOUNCE, "center bottom"));
				}
			}
		}
		private function bounceHandler(event:BounceEvent):void
		{
			trace("Bounce on " + event.side + " side");
			splat.explode(event.target.x, event.target.y);
		}
	}
}

You can download all the files here:

BallBounce.zip