Packageflash.filters
Classpublic class BevelFilter
InheritanceBevelFilter Inheritance BitmapFilter Inheritance Object

Player version: Flash Player 8

The BevelFilter class lets you add a bevel effect to a variety of objects in Flash. A bevel effect gives objects such as buttons a three-dimensional look. You can customize the look of the bevel with different highlight and shadow colors, the amount of blur on the bevel, the angle of the bevel, the placement of the bevel, and a knockout effect.

The use of filters depends on the object to which you apply the filter:

You can also apply filter effects to images and video at authoring time. For more information, see your authoring documentation.

If you apply a filter to a movie clip or button, the cacheAsBitmap property of the movie clip or button is set to true. If you clear all filters, the original value of cacheAsBitmap is restored.

This filter supports stage scaling. However, it does not support general scaling, rotation, and skewing. If the object itself is scaled (if _xscale and _yscale are not 100%), the filter is not scaled. It is scaled only when you zoom in on the Stage.

A filter is not applied if the resulting image exceeds 2880 pixels in width or height. If, for example, you zoom in on a large movie clip with a filter applied, the filter is turned off if the resulting image exceeds the limit of 2880 pixels.

See also

MovieClip.filters
MovieClip.cacheAsBitmap
Button.filters
Button.cacheAsBitmap
TextField.filters
flash.display.BitmapData.applyFilter()
MovieClip

Public Properties
 Property
  angle : Number
The angle of the bevel.
  blurX : Number
The amount of horizontal blur in pixels.
  blurY : Number
The amount of vertical blur in pixels.
  distance : Number
The offset distance of the bevel.
  highlightAlpha : Number
The alpha transparency value of the highlight color.
  highlightColor : Number
The highlight color of the bevel.
  knockout : Boolean
Applies a knockout effect (true), which effectively makes the object's fill transparent and reveals the background color of the document.
  quality : Number
The number of times to apply the filter.
  shadowAlpha : Number
The alpha transparency value of the shadow color.
  shadowColor : Number
The shadow color of the bevel.
  strength : Number
The strength of the imprint or spread.
  type : String
The type of bevel.
 Properties inherited from class Object
 __proto__, __resolve, constructor, prototype
Public Methods
 Method
  
BevelFilter([distance:Number], [angle:Number], [highlightColor:Number], [highlightAlpha:Number], [shadowColor:Number], [shadowAlpha:Number], [blurX:Number], [blurY:Number], [strength:Number], [quality:Number], [type:String], [knockout:Boolean])
Initializes a new BevelFilter instance with the specified parameters.
  
clone():BevelFilter
Returns a copy of this filter object.
 Methods inherited from class BitmapFilter
 clone
 Methods inherited from class Object
 addProperty, hasOwnProperty, isPropertyEnumerable, isPrototypeOf, registerClass, toString, unwatch, valueOf, watch
Property detail
angleproperty
public var angle:Number

Player version: Flash Player 8

The angle of the bevel. Valid values are from 0 to 360 degrees. The default value is 45.

The angle value represents the angle of the theoretical light source falling on the object and determines the placement of the effect relative to the object. If distance is set to 0, the effect is not offset from the object and, therefore, the angle property has no effect.


Example
The following example changes the angle property on an existing MovieClip instance (rect) when a user clicks it: 
import flash.filters.BevelFilter;

var rect:MovieClip = createBevelRectangle("BevelDistance");
rect.onRelease = function() {
    var filter:BevelFilter = this.filters[0];
    filter.angle = 225;
    this.filters = new Array(filter);
}

function createBevelRectangle(name:String):MovieClip {
    var w:Number = 100;
    var h:Number = 100;
    var bgColor:Number = 0x00CC00;

    var rect:MovieClip = this.createEmptyMovieClip(name, this.getNextHighestDepth());
    rect.beginFill(bgColor);
    rect.lineTo(w, 0);
    rect.lineTo(w, h);
    rect.lineTo(0, h);
    rect.lineTo(0, 0);
    rect._x = 20;
    rect._y = 20;

    var filter:BevelFilter = new BevelFilter(5, 45, 0xFFFF00, 0.8, 0x0000FF, 0.8, 20, 20, 1, 3, "inner", false);
    rect.filters = new Array(filter);
    return rect;
}

blurXproperty 
public var blurX:Number

Player version: Flash Player 8

The amount of horizontal blur in pixels. Valid values are from 0 to 255 (floating point). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16, and 32) are optimized to render more quickly than other values.


Example
The following example changes the blurX property on the existing MovieClip instance (rect) when a user clicks it: 
import flash.filters.BevelFilter;

var rect:MovieClip = createBevelRectangle("BevelBlurX");
rect.onRelease = function() {
    var filter:BevelFilter = this.filters[0];
    filter.blurX = 10;
    this.filters = new Array(filter);
}

function createBevelRectangle(name:String):MovieClip {
    var w:Number = 100;
    var h:Number = 100;
    var bgColor:Number = 0x00CC00;

    var rect:MovieClip = this.createEmptyMovieClip(name, this.getNextHighestDepth());
    rect.beginFill(bgColor);
    rect.lineTo(w, 0);
    rect.lineTo(w, h);
    rect.lineTo(0, h);
    rect.lineTo(0, 0);
    rect._x = 20;
    rect._y = 20;

    var filter:BevelFilter = new BevelFilter(5, 45, 0xFFFF00, 0.8, 0x0000FF, 0.8, 20, 20, 1, 3, "inner", false);
    rect.filters = new Array(filter);
    return rect;
}

blurYproperty 
public var blurY:Number

Player version: Flash Player 8

The amount of vertical blur in pixels. Valid values are from 0 to 255 (floating point). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16, and 32) are optimized to render more quickly than other values.


Example
The following example changes the blurY property on the existing MovieClip instance (rect) when a user clicks it: 
import flash.filters.BevelFilter;

var rect:MovieClip = createBevelRectangle("BevelBlurY");
rect.onRelease = function() {
    var filter:BevelFilter = this.filters[0];
    filter.blurY = 10;
    this.filters = new Array(filter);
}

function createBevelRectangle(name:String):MovieClip {
    var w:Number = 100;
    var h:Number = 100;
    var bgColor:Number = 0x00CC00;

    var rect:MovieClip = this.createEmptyMovieClip(name, this.getNextHighestDepth());
    rect.beginFill(bgColor);
    rect.lineTo(w, 0);
    rect.lineTo(w, h);
    rect.lineTo(0, h);
    rect.lineTo(0, 0);
    rect._x = 20;
    rect._y = 20;

    var filter:BevelFilter = new BevelFilter(5, 45, 0xFFFF00, 0.8, 0x0000FF, 0.8, 20, 20, 1, 3, "inner", false);
    rect.filters = new Array(filter);
    return rect;
}

distanceproperty 
public var distance:Number

Player version: Flash Player 8

The offset distance of the bevel. Valid values are in pixels (floating point). The default value is 4.


Example
The following example changes the distance property on the existing MovieClip instance (rect) when a user clicks it: 
import flash.filters.BevelFilter;

var rect:MovieClip = createBevelRectangle("BevelDistance");
rect.onRelease = function() {
    var filter:BevelFilter = this.filters[0];
    filter.distance = 3;
    this.filters = new Array(filter);
}

function createBevelRectangle(name:String):MovieClip {
    var w:Number = 100;
    var h:Number = 100;
    var bgColor:Number = 0x00CC00;

    var rect:MovieClip = this.createEmptyMovieClip(name, this.getNextHighestDepth());
    rect.beginFill(bgColor);
    rect.lineTo(w, 0);
    rect.lineTo(w, h);
    rect.lineTo(0, h);
    rect.lineTo(0, 0);
    rect._x = 20;
    rect._y = 20;

    var filter:BevelFilter = new BevelFilter(5, 45, 0xFFFF00, 0.8, 0x0000FF, 0.8, 20, 20, 1, 3, "inner", false);
    rect.filters = new Array(filter);
    return rect;
}

highlightAlphaproperty 
public var highlightAlpha:Number

Player version: Flash Player 8

The alpha transparency value of the highlight color. The value is specified as a normalized value from 0 to 1. For example, 0.25 sets a transparency value of 25%. The default value is 1.


Example
The following example changes the highlightAlpha property on the existing MovieClip instance (rect) when a user clicks it: 
import flash.filters.BevelFilter;

var rect:MovieClip = createBevelRectangle("BevelHighlightAlpha");
rect.onRelease = function() {
    var filter:BevelFilter = this.filters[0];
    filter.highlightAlpha = 0.2;
    this.filters = new Array(filter);
}

function createBevelRectangle(name:String):MovieClip {
    var w:Number = 100;
    var h:Number = 100;
    var bgColor:Number = 0x00CC00;

    var rect:MovieClip = this.createEmptyMovieClip(name, this.getNextHighestDepth());
    rect.beginFill(bgColor);
    rect.lineTo(w, 0);
    rect.lineTo(w, h);
    rect.lineTo(0, h);
    rect.lineTo(0, 0);
    rect._x = 20;
    rect._y = 20;

    var filter:BevelFilter = new BevelFilter(5, 45, 0xFFFF00, 0.8, 0x0000FF, 0.8, 20, 20, 1, 3, "inner", false);
    rect.filters = new Array(filter);
    return rect;
}

highlightColorproperty 
public var highlightColor:Number

Player version: Flash Player 8

The highlight color of the bevel. Valid values are in hexadecimal format, 0xRRGGBB. The default value is 0xFFFFFF.


Example
The following example changes the highlightColor property on the existing MovieClip instance (rect) when a user clicks it: 
import flash.filters.BevelFilter;

var rect:MovieClip = createBevelRectangle("BevelHighlightColor");
rect.onRelease = function() {
    var filter:BevelFilter = this.filters[0];
    filter.highlightColor = 0x0000FF;
    this.filters = new Array(filter);
}

function createBevelRectangle(name:String):MovieClip {
    var w:Number = 100;
    var h:Number = 100;
    var bgColor:Number = 0x00CC00;

    var rect:MovieClip = this.createEmptyMovieClip(name, this.getNextHighestDepth());
    rect.beginFill(bgColor);
    rect.lineTo(w, 0);
    rect.lineTo(w, h);
    rect.lineTo(0, h);
    rect.lineTo(0, 0);
    rect._x = 20;
    rect._y = 20;

    var filter:BevelFilter = new BevelFilter(5, 45, 0xFFFF00, 0.8, 0x0000FF, 0.8, 20, 20, 1, 3, "inner", false);
    rect.filters = new Array(filter);
    return rect;
}

knockoutproperty 
public var knockout:Boolean

Player version: Flash Player 8

Applies a knockout effect (true), which effectively makes the object's fill transparent and reveals the background color of the document. The default value is false (no knockout).


Example
The following example changes the knockout property on the existing MovieClip instance (rect) when a user clicks it: 
import flash.filters.BevelFilter;

var rect:MovieClip = createBevelRectangle("BevelKnockout");
rect.onRelease = function() {
    var filter:BevelFilter = this.filters[0];
    filter.knockout = true;
    this.filters = new Array(filter);
}

function createBevelRectangle(name:String):MovieClip {
    var w:Number = 100;
    var h:Number = 100;
    var bgColor:Number = 0x00CC00;

    var rect:MovieClip = this.createEmptyMovieClip(name, this.getNextHighestDepth());
    rect.beginFill(bgColor);
    rect.lineTo(w, 0);
    rect.lineTo(w, h);
    rect.lineTo(0, h);
    rect.lineTo(0, 0);
    rect._x = 20;
    rect._y = 20;

    var filter:BevelFilter = new BevelFilter(5, 45, 0xFFFF00, 0.8, 0x0000FF, 0.8, 20, 20, 1, 3, "inner", false);
    rect.filters = new Array(filter);
    return rect;
}

qualityproperty 
public var quality:Number

Player version: Flash Player 8

The number of times to apply the filter. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality. Filters with lower values are rendered more quickly.

For most applications, a quality value of 1, 2, or 3 is sufficient. Although you can use additional numeric values up to 15 to achieve different effects, larger values are rendered more slowly. Instead of increasing the value of quality, you can often get a similar effect, and with faster rendering, by simply increasing the values of blurX and blurY.


Example
The following example changes the quality property on the existing MovieClip instance (rect) when a user clicks it: 
import flash.filters.BevelFilter;

var rect:MovieClip = createBevelRectangle("BevelQuality");
rect.onRelease = function() {
    var filter:BevelFilter = this.filters[0];
    filter.quality = 1;
    this.filters = new Array(filter);
}

function createBevelRectangle(name:String):MovieClip {
    var w:Number = 100;
    var h:Number = 100;
    var bgColor:Number = 0x00CC00;

    var rect:MovieClip = this.createEmptyMovieClip(name, this.getNextHighestDepth());
    rect.beginFill(bgColor);
    rect.lineTo(w, 0);
    rect.lineTo(w, h);
    rect.lineTo(0, h);
    rect.lineTo(0, 0);
    rect._x = 20;
    rect._y = 20;

    var filter:BevelFilter = new BevelFilter(5, 45, 0xFFFF00, 0.8, 0x0000FF, 0.8, 20, 20, 1, 3, "inner", false);
    rect.filters = new Array(filter);
    return rect;
}

shadowAlphaproperty 
public var shadowAlpha:Number

Player version: Flash Player 8

The alpha transparency value of the shadow color. This value is specified as a normalized value from 0 to 1. For example, 0.25 sets a transparency value of 25%. The default value is 1.


Example
The following example changes the shadowAlpha property on the existing MovieClip instance (rect) when a user clicks it: 
import flash.filters.BevelFilter;

var rect:MovieClip = createBevelRectangle("BevelShadowAlpha");
rect.onRelease = function() {
    var filter:BevelFilter = this.filters[0];
    filter.shadowAlpha = 0.2;
    this.filters = new Array(filter);
}

function createBevelRectangle(name:String):MovieClip {
    var w:Number = 100;
    var h:Number = 100;
    var bgColor:Number = 0x00CC00;

    var rect:MovieClip = this.createEmptyMovieClip(name, this.getNextHighestDepth());
    rect.beginFill(bgColor);
    rect.lineTo(w, 0);
    rect.lineTo(w, h);
    rect.lineTo(0, h);
    rect.lineTo(0, 0);
    rect._x = 20;
    rect._y = 20;

    var filter:BevelFilter = new BevelFilter(5, 45, 0xFFFF00, 0.8, 0x0000FF, 0.8, 20, 20, 1, 3, "inner", false);
    rect.filters = new Array(filter);
    return rect;
}

shadowColorproperty 
public var shadowColor:Number

Player version: Flash Player 8

The shadow color of the bevel. Valid values are in hexadecimal format, 0xRRGGBB. The default value is 0x000000.


Example
The following example changes the shadowColor property on the existing MovieClip instance (rect) when a user clicks it: 
import flash.filters.BevelFilter;

var rect:MovieClip = createBevelRectangle("BevelShadowColor");
rect.onRelease = function() {
    var filter:BevelFilter = this.filters[0];
    filter.shadowColor = 0xFFFF00;
    this.filters = new Array(filter);
}

function createBevelRectangle(name:String):MovieClip {
    var w:Number = 100;
    var h:Number = 100;
    var bgColor:Number = 0x00CC00;

    var rect:MovieClip = this.createEmptyMovieClip(name, this.getNextHighestDepth());
    rect.beginFill(bgColor);
    rect.lineTo(w, 0);
    rect.lineTo(w, h);
    rect.lineTo(0, h);
    rect.lineTo(0, 0);
    rect._x = 20;
    rect._y = 20;

    var filter:BevelFilter = new BevelFilter(5, 45, 0xFFFF00, 0.8, 0x0000FF, 0.8, 20, 20, 1, 3, "inner", false);
    rect.filters = new Array(filter);
    return rect;
}

strengthproperty 
public var strength:Number

Player version: Flash Player 8

The strength of the imprint or spread. Valid values are from 0 to 255. The larger the value, the more color is imprinted and the stronger the contrast between the bevel and the background. The default value is 1.


Example
The following example changes the strength property on the existing MovieClip instance (rect) when a user clicks it: 
import flash.filters.BevelFilter;

var rect:MovieClip = createBevelRectangle("BevelStrength");
rect.onRelease = function() {
    var filter:BevelFilter = this.filters[0];
    filter.strength = 10;
    this.filters = new Array(filter);
}

function createBevelRectangle(name:String):MovieClip {
    var w:Number = 100;
    var h:Number = 100;
    var bgColor:Number = 0x00CC00;

    var rect:MovieClip = this.createEmptyMovieClip(name, this.getNextHighestDepth());
    rect.beginFill(bgColor);
    rect.lineTo(w, 0);
    rect.lineTo(w, h);
    rect.lineTo(0, h);
    rect.lineTo(0, 0);
    rect._x = 20;
    rect._y = 20;

    var filter:BevelFilter = new BevelFilter(5, 45, 0xFFFF00, 0.8, 0x0000FF, 0.8, 20, 20, 1, 3, "inner", false);
    rect.filters = new Array(filter);
    return rect;
}

typeproperty 
public var type:String

Player version: Flash Player 8

The type of bevel. Valid values are "inner", "outer", and "full".


Example
The following example changes the type property on the existing MovieClip instance (rect) when a user clicks it: 
import flash.filters.BevelFilter;

var rect:MovieClip = createBevelRectangle("BevelType");
rect.onRelease = function() {
    var filter:BevelFilter = this.filters[0];
    filter.type = "outer";
    this.filters = new Array(filter);
}

function createBevelRectangle(name:String):MovieClip {
    var w:Number = 100;
    var h:Number = 100;
    var bgColor:Number = 0x00CC00;

    var rect:MovieClip = this.createEmptyMovieClip(name, this.getNextHighestDepth());
    rect.beginFill(bgColor);
    rect.lineTo(w, 0);
    rect.lineTo(w, h);
    rect.lineTo(0, h);
    rect.lineTo(0, 0);
    rect._x = 20;
    rect._y = 20;

    var filter:BevelFilter = new BevelFilter(5, 45, 0xFFFF00, 0.8, 0x0000FF, 0.8, 20, 20, 1, 3, "inner", false);
    rect.filters = new Array(filter);
    return rect;
}

Constructor detail
BevelFilter()constructor
public function BevelFilter([distance:Number], [angle:Number], [highlightColor:Number], [highlightAlpha:Number], [shadowColor:Number], [shadowAlpha:Number], [blurX:Number], [blurY:Number], [strength:Number], [quality:Number], [type:String], [knockout:Boolean])

Player version: Flash Player 8

Initializes a new BevelFilter instance with the specified parameters.

Parameters
distance:Number [optional] — The offset distance of the bevel, in pixels (floating point). The default value is 4.
 
angle:Number [optional] — The angle of the bevel, from 0 to 360 degrees. The default value is 45.
 
highlightColor:Number [optional] — The highlight color of the bevel, 0xRRGGBB. The default value is 0xFFFFFF.
 
highlightAlpha:Number [optional] — The alpha transparency value of the highlight color. Valid values are 0 to 1. For example, .25 sets a transparency value of 25%. The default value is 1.
 
shadowColor:Number [optional] — The shadow color of the bevel, 0xRRGGBB. The default value is 0x000000.
 
shadowAlpha:Number [optional] — The alpha transparency value of the shadow color. Valid values are 0 to 1. For example, 0.25 sets a transparency value of 25%. The default value is 1.
 
blurX:Number [optional] — The amount of horizontal blur in pixels. Valid values are 0 to 255 (floating point). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.
 
blurY:Number [optional] — The amount of vertical blur in pixels. Valid values are 0 to 255 (floating point). The default value is 4. Values that are a power of 2 (such as 2, 4, 8, 16 and 32) are optimized to render more quickly than other values.
 
strength:Number [optional] — The strength of the imprint or spread. The larger the value, the more color is imprinted and the stronger the contrast between the bevel and the background. Valid values are 0 to 255. The default value is 1.
 
quality:Number [optional] — The number of times to apply the filter. The default value is 1, which is equivalent to low quality. A value of 2 is medium quality, and a value of 3 is high quality.
 
type:String [optional] — The type of bevel. Valid values are "inner", "outer", and "full". The default value is "inner".
 
knockout:Boolean [optional] — Applies a knockout effect (true), which effectively makes the object's fill transparent and reveals the background color of the document. The default value is false (no knockout).

Example
The following example instantiates a new BevelFilter and applies it to the MovieClip instance (rect): 
import flash.filters.BevelFilter;

var distance:Number = 5;
var angleInDegrees:Number = 45;
var highlightColor:Number = 0xFFFF00;
var highlightAlpha:Number = 0.8;
var shadowColor:Number = 0x0000FF;
var shadowAlpha:Number = 0.8;
var blurX:Number = 5;
var blurY:Number = 5;
var strength:Number = 5;
var quality:Number = 3;
var type:String = "inner";
var knockout:Boolean = false;

var filter:BevelFilter = new BevelFilter(distance, 
                                            angleInDegrees, 
                                            highlightColor, 
                                            highlightAlpha, 
                                            shadowColor, 
                                            shadowAlpha, 
                                            blurX, 
                                            blurY, 
                                            strength, 
                                            quality, 
                                            type, 
                                            knockout);

var rect:MovieClip = createRectangle(100, 100, 0x00CC00, "bevelFilterExample");
rect.filters = new Array(filter);

function createRectangle(w:Number, h:Number, bgColor:Number, name:String):MovieClip {
    var rect:MovieClip = this.createEmptyMovieClip(name, this.getNextHighestDepth());
    rect.beginFill(bgColor);
    rect.lineTo(w, 0);
    rect.lineTo(w, h);
    rect.lineTo(0, h);
    rect.lineTo(0, 0);
    rect._x = 20;
    rect._y = 20;
    return rect;
}

Method detail
clone()method
public function clone():BevelFilter

Player version: Flash Player 8

Returns a copy of this filter object.

Returns
BevelFilter — A new BevelFilter instance with all the same properties as the original BevelFilter instance.

Example
The following example creates three BevelFilter objects and compares them. You can create the filter_1 object by using the BevelFilter constructor. You create the filter_2 object by setting it equal to filter_1. You create the clonedFilter by cloning filter_1. Notice that while filter_2 evaluates as being equal to filter_1, clonedFilter does not, even though it contains the same values as filter_1. 
import flash.filters.BevelFilter;

var filter_1:BevelFilter = new BevelFilter(5, 45, 0xFFFF00, 0.8, 0x0000FF, 0.8, 20, 20, 1, 3, "inner", false);
var filter_2:BevelFilter = filter_1;
var clonedFilter:BevelFilter = filter_1.clone();

trace(filter_1 == filter_2);        // true
trace(filter_1 == clonedFilter);    // false

for(var i in filter_1) {
    trace(">> " + i + ": " + filter_1[i]);
    // >> clone: [type Function]
    // >> type: inner
    // >> blurY: 20
    // >> blurX: 20
    // >> knockout: false
    // >> strength: 1
    // >> quality: 3
        // >> shadowAlpha: 0.8
    // >> shadowColor: 255
    // >> highlightAlpha: 0.8
    // >> highlightColor: 16776960
    // >> angle: 45
    // >> distance: 5
}

for(var i in clonedFilter) {
    trace(">> " + i + ": " + clonedFilter[i]);
    // >> clone: [type Function]
    // >> type: inner
    // >> blurY: 20
    // >> blurX: 20
    // >> knockout: false
    // >> strength: 1
    // >> quality: 3
    // >> shadowAlpha: 0.8
    // >> shadowColor: 255
    // >> highlightAlpha: 0.8
    // >> highlightColor: 16776960
    // >> angle: 45
    // >> distance: 5
}
To further demonstrate the relationships between filter_1, filter_2, and clonedFilter, the following example modifies the knockout property of filter_1. Modifying knockout demonstrates that the clone() method creates an instance based on values of the filter_1 instead of referring to the values. 
import flash.filters.BevelFilter;

var filter_1:BevelFilter = new BevelFilter(5, 45, 0xFFFF00, 0.8, 0x0000FF, 0.8, 20, 20, 1, 3, "inner", false);
var filter_2:BevelFilter = filter_1;
var clonedFilter:BevelFilter = filter_1.clone();

trace(filter_1.knockout);            // false
trace(filter_2.knockout);            // false
trace(clonedFilter.knockout);        // false

filter_1.knockout = true;

trace(filter_1.knockout);            // true
trace(filter_2.knockout);            // true
trace(clonedFilter.knockout);        // false




© 2004-2010 Adobe Systems Incorporated. All rights reserved.
Wed Apr 7 2010, 4:41 PM GMT-07:00