Filters: Adding effects to sprites

Time to learn about adding some cool effects to those sprites! Adding effects to sprites is as easy as setting what are called filters to the sprite.

Filters can be added to any instance of DisplayObject class and to any of its subclasses. Remember, Sprite is one of the subclasses, which is what you usually play with, and makes it all perfect.

DisplayObject has a property called filters, which is an array. It means that we can add more than one filter to a sprite enabling us to combine more than one effect to a particular sprite to get the cool effect we want.

Flash provides a wide variety of filters under the package flash.filters. All filters are a subclass of the common base class known as BitmapFilter.

Here is a list of the ones available to us:

Filter Class

Description

BevelFilter

The BevelFilter class lets you add a bevel effect.

BlurFilter

The BlurFilter class lets you apply a blur visual effect.

ColorMatrixFilter

The ColorMatrixFilter class lets you apply a 4 x 5 matrix transformation on the RGBA color and alpha values of every pixel in the input image to produce a result with a new set of RGBA color and alpha values.

ConvolutionFilter

The ConvolutionFilter class applies a matrix convolution filter effect.

DisplacementFilter

The DisplacementMapFilter class uses the pixel values from the specified BitmapData object (called the displacement map image) to perform a displacement of an object.

DropShadowFilter

The DropShadowFilter class lets you add a drop shadow to display objects.

GlowFilter

The GlowFilter class lets you apply a glow effect.

GradientBevelFilter

The GradientBevelFilter class lets you apply a gradient bevel effect.

GradientGlowFilter

The GradientGlowFilter class lets you apply a gradient glow effect.

Modifying the filters of a display object or sprite is a three-step process:

  1. Assign the sprite's filter to a temporary array.
  2. Modify the temporary array the way you want, either remove an existing filter or add an additional filter.
  3. Assign the temporary filter back to the sprite's filter property, assuming that m_filter was defined as follows:
    private var m_filter:DropShadowFilter = new DropShadowFilter();

The following is the code to add a filter to the sprite m_sprite: 

var filters:Array;
filters = m_sprite.filters;
filters.push(m_filter);
m_sprite.filters = filters;

Next is a listing that demonstrates adding a drop shadow filter when the mouse is over the sprite and removing the filter when the mouse moves out of the sprite's bounds:

package {
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.filters.DropShadowFilter;
public class FilterTest extends Sprite
{
private var m_sprite:Sprite;
private var m_filter:DropShadowFilter = new DropShadowFilter();
public function FilterTest()
{
m_sprite = new Sprite();
m_sprite.graphics.beginFill(0xFFFF00);
m_sprite.graphics.drawCircle(0, 0, 10);
m_sprite.graphics.endFill();
m_sprite.addEventListener(MouseEvent.MOUSE_OUT,
onMouseOut);
m_sprite.addEventListener(MouseEvent.MOUSE_OVER,
onMouseOver);
m_sprite.x = m_sprite.y = 20;
addChild(m_sprite);
}
private function onMouseOver(e:MouseEvent):void {
var filters:Array;
filters = m_sprite.filters;
filters.push(m_filter);
m_sprite.filters = filters;
}
private function onMouseOut(e:MouseEvent):void {
var filters:Array;
filters = m_sprite.filters;
filters.splice(0, 1);
m_sprite.filters = filters;
}
}
}

Take your time and play with the rest of the filters and see how you can apply them. Choosing the right filters or a combination of them is what makes a game visually more appealing. Further, note that each filter comes with a bunch of little knobs (properties) that lets you create unique filters as your game demands.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.189.182.96