Creating Trail of dots in As3

This is a short tutorial on how to make a Trail in As3 flash (Flash Develop or Adobe Flash). While making MinBa or Minimal basketball, i created a simple trail quickly.  It was pretty simple to do, at least i think it is.

View Demo

(Cute Aeroplane made in Inkscape – Download it Here for Free to use)

Unoptimized Way 😉

Instead of posting the Code, i’ll summarize the steps i did.

1. Create a pool of around 50 dots (sprites with a circle drawn) and made it invisible.

2. Keep track of visible dots by keeping a poolindex and poolcount(for reseting).

3. Show one dot by passing x & y value of the tracked object and made visible that dot at that location.

4. [Optional] kept a timer to put some duration between placing the dots (kept it at a distance).

Code :

public class Trails extends Sprite 
	{
		private var trailArray:Array = [];
		
		private var interval:int = 0;
		private var timer:int = 0;
		
		private var poolIndex:int = 0; //points at first item
		
		private var usedPoolCount:int = 0;
		
		public function Trails(interval:int = 2) 
		{
			super();
			this.interval = interval;
			//Creating Pool
			for (var i:int = 0; i < 50; i++){
                                var shape:Shape = new Shape();
		                shape.graphics.beginFill(0xaa2407);
			 	shape.graphics.drawCircle(0, 0, 2); 
		 		shape.cacheAsBitmap = true;
                                addChild(shape);
                                shape.visible = false;
                                trailArray[trailArray.length] = shape; 			 			} 		 		
                        } 		 		 		
                     public function showTrail(pos:Vec2):void { 		                 	timer += 1; 			
                        if (timer > interval)
			{
				timer = 0;
				trailArray[poolIndex].x = pos.x;
				trailArray[poolIndex].y = pos.y;
				trailArray[poolIndex].visible = true;
				poolIndex += 1;
				if (poolIndex >= 50)
				{
					poolIndex = 0;
				}
				usedPoolCount += 1;
			}
		}
		
		public function clearTrail():void
		{
			if (usedPoolCount > 50)
			{
				usedPoolCount = 50;
			}
			
			for (var i:int = 0; i < usedPoolCount; i++)
			{
				trailArray[i].visible = false;
			}
		}
	}

So after a while i thought, why i need a pool and stuff like that, when i can just draw a circle again and again onto a bitmapData. That seems pretty neat.

Skip the above steps 1 & 2.

        public class Trails extends Sprite 
	{
		private var interval:int = 0;
		private var timer:int = 0;
		
		private var bitmapData:BitmapData = new BitmapData(480, 640, true);
		private var shape:Shape = new Shape();
		private var bmp:Bitmap;
		
		private var posMatrix:Matrix = new Matrix();
		
		public function Trails(interval:int = 2) 
		{
			super();
			this.interval = interval;
			shape.graphics.beginFill(0xaa2407);
			shape.graphics.drawCircle(0, 0, 2);
			shape.cacheAsBitmap = true;
			
			bmp = new Bitmap(bitmapData, "auto", true);
			addChild(bmp);
		}
		
		public function showTrail(pos:Vec2):void
		{
			timer += 1;
			if (timer > interval)
			{
				timer = 0;
				posMatrix.tx = pos.x;
				posMatrix.ty = pos.y;
				bitmapData.draw(shape, posMatrix);
			}
		}
		
		public function clearTrail():void
		{
			bitmapData.fillRect(bitmapData.rect, 0x00);
		}
	}

Feel free to add in your comments, doubts etc.