Browse the notebook

Tag: actionsnippet

Transparent copyPixels()

By Zevan
var canvas:BitmapData=new BitmapData(400,400,true,0x000000);
var eraser:BitmapData=new BitmapData(400,400,true,0x00000000);
addChild(new Bitmap(canvas));
var redOval:Shape = new Shape();
with(redOval.graphics) lineStyle(0,0), beginFill(0xFF0000), drawEllipse(0,0,10,50);

// draw a background to emphasize transparency 
createBackground();

addEventListener(Event.ENTER_FRAME, onLoop);

function onLoop(evt:Event):void {
	// clear canvas so that it is completely transparent
	canvas.copyPixels(eraser, eraser.rect, new Point(0,0), eraser);
	redOval.x = mouseX;
	redOval.y = mouseY;
	redOval.rotation += 10
	// transform.matrix contains all transformation information for
	// the redOval including scaleX, scaleY, x, y, rotation etc...
	canvas.draw(redOval, redOval.transform.matrix);
}

function createBackground():void {
	for (var i:int = 0; i<100; i++){
		with(graphics) lineStyle(0,0x000000), lineTo(Math.random()*400, Math.random()*400);
	}
}

This example builds on yesterdays snippet. Instead of just allowing the red oval to be continuously drawn to the canvas BitmapData… in this example the canvas BitmapData is erased again and again before the red oval is drawn to it. To erase it with a flat color you might use BitmapData.fillRect() but if you want to erase it so that it is completely transparent you need to use BitmapData.copyPixels():

canvas.copyPixels(eraser, eraser.rect, new Point(0,0), eraser);

The eraser BitmapData is a completely transparent BitmapData object. The key here is the fourth argument…. “alphaBitmapData”.This is what causes the canvas BitmapData to become completely transparent again at the beginning of each enterFrame.

This argument is separate from the first argument (sourceBitmapData) for added flexibility.

Read snippet: Transparent copyPixels()

Procedural Pattern – Navigation

By Zevan
var currentBtn:MovieClip;

var nav:Sprite = new Sprite();
nav.x = nav.y = 20;
addChild(nav);

createBtns();

nav.addEventListener(MouseEvent.CLICK, onClickBtn);

function createBtns():void{
	for (var i:int = 0; i<10; i++){
		var btn:MovieClip = new MovieClip();
		with(btn.graphics) beginFill(0x666666), drawRect(-10,-10,20,20);
		btn.x = i * (btn.width + 10);
		btn.buttonMode = true;
		btn.num = i;
		btn.alpha = .5;
		nav.addChild(btn);
	}
}

function onClickBtn(evt:MouseEvent):void {
	//
	// this is the important part
	//
	if (currentBtn){
		currentBtn.scaleX = currentBtn.scaleY = 1;
		currentBtn.alpha = .5;
	}
	currentBtn = MovieClip(evt.target);
	currentBtn.scaleX = currentBtn.scaleY = 1.3;
	currentBtn.alpha = 1;
	trace("current button:", currentBtn.num);
	//
}

This code will create 10 boxes that represent buttons on a navigation. When you click a box it indicates that it is selected by scaling up and changing alpha. Simple enough…

The term Procedural Pattern is just a spin on the idea of Design Patterns. I’ve come up with lots of small patterns to solve simple recurring problems over the years. Most of these relate to things like drawing programs, ecards and games.

Read snippet: Procedural Pattern – Navigation