By Zevan | December 27, 2008
Actionscript:
-
var canvas:BitmapData = new BitmapData(500, 500, true, 0xFFFFFFFF);
-
var color:BitmapData= new BitmapData(500, 500, true, 0x81666666);
-
var over:BitmapData = new BitmapData(500, 500, true, 0xFF000000);
-
addChild(new Bitmap(canvas, "auto", true));
-
var circle:Shape = new Shape();
-
circle.graphics.beginFill(0xFFFFFF,1);
-
circle.graphics.drawCircle(0,0,50);
-
var m:Matrix = new Matrix();
-
m.tx = 0;
-
m.ty = 1;
-
addEventListener(Event.ENTER_FRAME, onLoop);
-
function onLoop(evt:Event):void {
-
circle.x = mouseX;
-
circle.y = mouseY;
-
canvas.draw(circle, circle.transform.matrix);
-
canvas.copyPixels(color, color.rect, new Point(0,0), null, null, true);
-
over.copyPixels(canvas, canvas.rect, new Point(0,0), null, null, true);
-
canvas.draw(over, m, null, BlendMode.SCREEN);
-
over.applyFilter(over, over.rect, new Point(-2,-2), new BlurFilter(10,10,1));
-
canvas.draw(over, m, null, BlendMode.SUBTRACT);
-
}
Grayscale emboss technique. More info here.
By Zevan | December 26, 2008
Actionscript:
-
var vars:Dictionary = new Dictionary();
-
-
var sp:Sprite = new Sprite();
-
-
// associate variables with a sprite (or any non-dynamic class)
-
vars[sp] = {posX:100, posY:100, velX:1, velY:1};
-
-
// read
-
trace(vars[sp].posX);
I've heard people mention that they wish the sprite class were dynamic... meaning they wish they could add methods and properties to a Sprite instance at runtime. There's no way I know of to do this, however... the dictionary class can be used to associate variables with any non-dynamic class instance... as it does in this the above example.
The dictionary class is similar to an associative array except that instead of using strings for keys, dictionaries use object instances.
By Zevan | December 25, 2008
Actionscript:
-
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():
Actionscript:
-
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.
By Zevan | December 24, 2008
Actionscript:
-
var canvas:BitmapData=new BitmapData(400,400,true,0xFFCCCCCC);
-
addChild(new Bitmap(canvas));
-
-
var redOval:Shape = new Shape();
-
with(redOval.graphics) lineStyle(0,0), beginFill(0xFF0000), drawEllipse(0,0,10,50);
-
-
addEventListener(Event.ENTER_FRAME, onLoop);
-
function onLoop(evt:Event):void {
-
-
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);
-
}
A very easy way to create a BitmapData brush.