Sign in to follow this  
  • entries
    90
  • comments
    66
  • views
    72301

Playing with the Blur Filter

Sign in to follow this  
Tesseract

62 views

I just finished playing around with the blur filter, combined with double buffering, in Actionscript 3. You can see the result here.

The class I am using is as follows:


package{
import flash.display.*;
import flash.events.*;
import flash.ui.Keyboard;
import flash.geom.*;
import flash.filters.BlurFilter;
[SWF(backgroundColor="0x000000",width="540",height="540",frameRate="50")]
public class KeyCodes extends Sprite {
/* */
/* EMBEDDED ASSETS */
/* */

[Embed(source="ship_1.gif")]
private var Ship:Class;
private var ship:Bitmap;

private var ball:Sprite;
private var flame:Sprite;
private var _bitmap:BitmapData;
private var _buffer:BitmapData;
private var _buffer_clear:BitmapData; // used to "clear" the bitmapdata
private var _blur_layer:BitmapData;
private var _image:Bitmap;
private var _blurFilter:BlurFilter;

private var SPEED:Number = Math.PI*2/100; // number of steps around a circle
private var THETA:Number = Math.PI*.5;
private var RAD_DEG:Number = 180/Math.PI;
private var radius:Number;
private var flameRadius:Number;
private var centerX:Number;
private var centerY:Number;
private var angle:Number;

private var xDirection:Number = 0;
public function KeyCodes() {
_blurFilter = new BlurFilter();
addEventListener(Event.ENTER_FRAME,init);
}
private function init(e:Event):void {
if(!stage) return;
removeEventListener(Event.ENTER_FRAME,init);
ball = new Sprite();
ship = new Ship();
ship.x = -(ship.width/2);
ship.y = -(ship.height/2);
ship.rotation = 90;
ball.addChild(ship);

flame = new Sprite();
flame.graphics.beginFill(0x990000,100);
flame.graphics.drawCircle(4,-10,4);
flame.graphics.endFill();
flame.graphics.beginFill(0x990000,100);
flame.graphics.drawCircle(4,10,4);
flame.graphics.endFill();

centerX = stage.stageWidth/2;
centerY = stage.stageHeight/2;
radius = stage.stageWidth*.3;
flameRadius = radius + (ship.height*1.5);
ball.x = centerX + radius*Math.cos(THETA);
ball.y = centerY + radius*Math.sin(THETA);
flame.x = centerX + flameRadius*Math.cos(THETA);
flame.y = centerY + flameRadius*Math.sin(THETA);
_bitmap = new BitmapData(stage.stageWidth,stage.stageHeight,true,0xff000000);
_buffer = new BitmapData(stage.stageWidth,stage.stageHeight,true,0x00000000);
_buffer_clear = new BitmapData(stage.stageWidth,stage.stageHeight,true,0xff000000);
_blur_layer = new BitmapData(stage.stageWidth,stage.stageHeight,true,0xff000000);
_image = new Bitmap(_bitmap);
addChild(_image);

stage.addEventListener(KeyboardEvent.KEY_DOWN,setDirection);
stage.addEventListener(KeyboardEvent.KEY_UP,unsetDirection);
addEventListener(Event.ENTER_FRAME,moveMe);
}
public function moveMe(e:Event):void {
THETA += SPEED * xDirection;
ball.x = centerX + radius*Math.cos(THETA);
ball.y = centerY + radius*Math.sin(THETA);
flame.x = centerX + flameRadius*Math.cos(THETA);
flame.y = centerY + flameRadius*Math.sin(THETA);
var r:Number = Math.atan2(centerY - ball.y , centerX - ball.x)*RAD_DEG;
ball.rotation = r;
flame.rotation = r;
// _buffer.draw(_buffer_clear);
_blur_layer.draw(flame,flame.transform.matrix);
_blur_layer.applyFilter(_blur_layer,_blur_layer.rect,new Point(),_blurFilter);
_buffer.draw(_blur_layer);
_buffer.draw(ball,ball.transform.matrix);
_bitmap.draw(_buffer);
}

public function setDirection(e:KeyboardEvent):void {
switch(e.keyCode) {

case Keyboard.LEFT :
xDirection = -1;
break;
case Keyboard.RIGHT :
xDirection = 1;
break;
default:
break;
}

}
public function unsetDirection(e:KeyboardEvent):void {
xDirection = 0;
}
}
}



Every day, I am a little more comfortable with the new version of Actionscript. Conceptually, it is easier to grasp than was AS2, and of course it is much cleaner code than AS1.

I still have a few details to iron out with the keyboard events; they are more precise than I am used to.

As a side note, today I figured out how to change the default display for the (ugly to the point of being unusable) command prompt in Windows: launch cmd.exe, then right-click anywhere on the window chrome, and select "defaults". Now I have a 1000px wide window with a black background displaying 12-point green lucida console text. Much easier to read than that gray VIC-20 - esque default style.
Sign in to follow this  


2 Comments


Recommended Comments

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now