AS3: Simple Filters

[crushy]

AS3 Main

Simple Filters

Ok, in this small tutorial I'm going to show you how to create a shape using API, add it to the stage, and then apply filters to the shape.

I'm going to show you this in the previously explained 3 steps...

1. Make the shape

var circle:Shape = new Shape();
circle.graphics.beginFill(0xFF0000, 1);
circle.graphics.drawCircle(100, 100, 50);
circle.graphics.endFill();

2. Add filter/s

var shadowF:DropShadowFilter = new DropShadowFilter;
shadowF.blurX = 5;
shadowF.blurY = 5;
shadowF.distance = 2;
shadowF.alpha = 1;
shadowF.strength = 1.4;
shadowF.angle = 45;
shadowF.color = 0x000000;
circle.filters = [shadowF];

3. Place the shape onto the stage

addChild(circle);

And then put it all together!

var circle:Shape = new Shape();
circle.graphics.beginFill(0xFF0000, 1);
circle.graphics.drawCircle(100, 100, 50);
circle.graphics.endFill();

var shadowF:DropShadowFilter = new DropShadowFilter;
shadowF.blurX = 5;
shadowF.blurY = 5;
shadowF.distance = 2;
shadowF.alpha = 1;
shadowF.strength = 1.4;
shadowF.angle = 45;
shadowF.color = 0x000000;
circle.filters = [shadowF];

addChild(circle);

You may have noticed all the changes made to the shadow filter. Here is a list of some of the features of the shape you can edit:
- color
- angle
- strength
- alpha
- distance
- blur
- quality

Obviously, there are also more types of filters, here is a small list of them:
- DropShadowFilter
- BevelFilter/GradientBevelFilter
- BlurFilter/GradientBlurFilter
- GlowFilter

You can edit the shapes in loads of ways...

var square:Sprite = new Sprite();
square.graphics.beginFill(0x0000FF, 1);
square.graphics.drawRect(100, 100, 50, 50);
square.graphics.endFill();

var glowF:GlowFilter= new GlowFilter();
glowF.blurX = 20;
glowF.blurY = 20;
glowF.alpha = 1;
glowF.strength = 1.2;
glowF.color = 0x00FF00;
square.filters = [glowF];

addChild(square);

You can see from this example that you can make a range of shapes from this format; create shape, add filters, add to stage. I also made the square a Sprite to show that it doesn't have to have the class Shape.

Thanks for reading!

Crushy out.

[kernalphage]

great tutorial, nice and simple, but i gotta add something.

to add more than one filter, you could use:

myCircle.filters.push(myShadow);

or:

myCircle.filters = [myShadow, myBevel];

filters is an array, and you can't directly edit it.

right? i recommend the first one if it still works from as2, because it will add a new filter, and not just replace what was there.

correct me if anything is wrong!

[GuyWithHisComp]

Not a very good tutorial.
You named a bunch of things you CAN do but not HOW. To teach how to do something is the actual meaning behind tutorials...