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.