BevelFilter

Package	spark.filters
Class	public class BevelFilter
Inheritance	BevelFilter BaseDimensionFilter BaseFilter EventDispatcher Object
Implements	IBitmapFilter

Language Version:

ActionScript 3.0

Product Version:

Flex 4

Runtime Versions:

Flash Player 10, AIR 1.5

The BevelFilter class lets you add a bevel effect to display objects. 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. You can apply the filter to any display object (that is, objects that inherit from the DisplayObject class), such as MovieClip, SimpleButton, TextField, and Video objects, as well as to BitmapData objects.

To create a new filter, use the constructor new BevelFilter(). The use of filters depends on the object to which you apply the filter:

To apply filters to movie clips, text fields, buttons, and video, use the filters property (inherited from DisplayObject). Setting the filters property of an object does not modify the object, and you can remove the filter by clearing the filters property.
To apply filters to BitmapData objects, use the BitmapData.applyFilter() method. Calling applyFilter() on a BitmapData object takes the source BitmapData object and the filter object and generates a filtered image as a result.

If you apply a filter to a display object, the value of the cacheAsBitmap property of the object is set to true. If you remove 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 the scaleX and scaleY properties are not set to 100%), the filter is not scaled. It is scaled only when the user zooms in on the Stage.

A filter is not applied if the resulting image exceeds the maximum dimensions. In AIR 1.5 and Flash Player 10, the maximum is 8,191 pixels in width or height, and the total number of pixels cannot exceed 16,777,215 pixels. (So, if an image is 8,191 pixels wide, it can only be 2,048 pixels high.) 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 maximum dimensions.

MXML Syntax expanded

Hide MXML Syntax

The <s:BevelFilter> tag inherits all of the tag attributes of its superclass and adds the following tag attributes:

  <s:BevelFilter 
    Properties
    angle="45"
    distance="4"
    highlightAlpha="1"
    highlightColor="0xFFFFFF"
    shadowAlpha="1"
    shadowColor="0x000000"
    type="inner"
  />

View the examples

More examples

Using filters with chart controls

Learn more

Filters in FXG and MXML graphics

Related API Elements

flash.filters.BevelFilter
flash.display.DisplayObject.filters
flash.display.DisplayObject.cacheAsBitmap
flash.display.BitmapData.applyFilter()

Public Properties

	Property		Defined By
		angle : Number The angle of the bevel, in degrees.	BevelFilter
		blurX : Number The amount of horizontal blur.	BaseDimensionFilter
		blurY : Number The amount of vertical blur.	BaseDimensionFilter
		constructor : Object A reference to the class object or constructor function for a given object instance.	Object
		distance : Number The offset distance of the bevel.	BevelFilter
		highlightAlpha : Number The alpha transparency value of the highlight color.	BevelFilter
		highlightColor : uint The highlight color of the bevel.	BevelFilter
		knockout : Boolean Specifies whether the object has a knockout effect.	BaseDimensionFilter
		quality : int The number of times to apply the filter.	BaseDimensionFilter
		shadowAlpha : Number The alpha transparency value of the shadow color.	BevelFilter
		shadowColor : uint The shadow color of the bevel.	BevelFilter
		strength : Number The strength of the imprint or spread.	BaseDimensionFilter
		type : String The placement of the filter effect.	BevelFilter

Public Methods

	Method		Defined By
		BevelFilter(distance:Number = 4.0, angle:Number = 45, highlightColor:uint = 0xFFFFFF, highlightAlpha:Number = 1.0, shadowColor:uint = 0x000000, shadowAlpha:Number = 1.0, blurX:Number = 4.0, blurY:Number = 4.0, strength:Number = 1, quality:int = 1, type:String = "inner", knockout:Boolean = false) Constructor.	BevelFilter
		addEventListener(type:String, listener:Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void Registers an event listener object with an EventDispatcher object so that the listener receives notification of an event.	EventDispatcher
		clone():BitmapFilter Returns a copy of this filter object.	BevelFilter
		dispatchEvent(event:Event):Boolean Dispatches an event into the event flow.	EventDispatcher
		hasEventListener(type:String):Boolean Checks whether the EventDispatcher object has any listeners registered for a specific type of event.	EventDispatcher
		hasOwnProperty(name:String):Boolean Indicates whether an object has a specified property defined.	Object
		isPrototypeOf(theClass:Object):Boolean Indicates whether an instance of the Object class is in the prototype chain of the object specified as the parameter.	Object
		notifyFilterChanged():void Propagates a change event when the filter has changed.	BaseFilter
		propertyIsEnumerable(name:String):Boolean Indicates whether the specified property exists and is enumerable.	Object
		removeEventListener(type:String, listener:Function, useCapture:Boolean = false):void Removes a listener from the EventDispatcher object.	EventDispatcher
		setPropertyIsEnumerable(name:String, isEnum:Boolean = true):void Sets the availability of a dynamic property for loop operations.	Object
		toLocaleString():String Returns the string representation of this object, formatted according to locale-specific conventions.	Object
		toString():String Returns the string representation of the specified object.	Object
		valueOf():Object Returns the primitive value of the specified object.	Object
		willTrigger(type:String):Boolean Checks whether an event listener is registered with this EventDispatcher object or any of its ancestors for the specified event type.	EventDispatcher

Events

Click for more information on events

	Event		Summary	Defined By
		activate	[broadcast event] Dispatched when the Flash Player or AIR application gains operating system focus and becomes active.	EventDispatcher
		deactivate	[broadcast event] Dispatched when the Flash Player or AIR application operating loses system focus and is becoming inactive.	EventDispatcher

Public Constants

	Constant		Defined By

Property Detail

angle

property

angle:Number

Language Version:

ActionScript 3.0

Product Version:

Flex 4

Runtime Versions:

Flash Player 10, AIR 1.5

The angle of the bevel, in degrees. Valid values are from 0 to 360. 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 the distance property is set to 0, the effect is not offset from the object and, therefore, the angle property has no effect.

The default value is 45.

Implementation
public function get angle():Number
public function set angle(value:Number):void

distance

property

distance:Number

Language Version:

ActionScript 3.0

Product Version:

Flex 4

Runtime Versions:

Flash Player 10, AIR 1.5

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

The default value is 4.

Implementation
public function get distance():Number
public function set distance(value:Number):void

highlightAlpha

property

highlightAlpha:Number

Language Version:

ActionScript 3.0

Product Version:

Flex 4

Runtime Versions:

Flash Player 10, AIR 1.5

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

The default value is 1.

Implementation
public function get highlightAlpha():Number
public function set highlightAlpha(value:Number):void

highlightColor

property

highlightColor:uint

Language Version:

ActionScript 3.0

Product Version:

Flex 4

Runtime Versions:

Flash Player 10, AIR 1.5

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

The default value is 0xFFFFFF.

Implementation
public function get highlightColor():uint
public function set highlightColor(value:uint):void

shadowAlpha

property

shadowAlpha:Number

Language Version:

ActionScript 3.0

Product Version:

Flex 4

Runtime Versions:

Flash Player 10, AIR 1.5

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

The default value is 1.

Implementation
public function get shadowAlpha():Number
public function set shadowAlpha(value:Number):void

shadowColor

property

shadowColor:uint

Language Version:

ActionScript 3.0

Product Version:

Flex 4

Runtime Versions:

Flash Player 10, AIR 1.5

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

The default value is 0x000000.

Implementation
public function get shadowColor():uint
public function set shadowColor(value:uint):void

type

property

type:String

Language Version:

ActionScript 3.0

Product Version:

Flex 4

Runtime Versions:

Flash Player 10, AIR 1.5

The placement of the filter effect. Possible values are flash.filters.BitmapFilterType constants:

BitmapFilterType.OUTER - Glow on the outer edge of the object.
BitmapFilterType.INNER - Glow on the inner edge of the object; the default.
BitmapFilterType.FULL - Glow on top of the object.

The default value is BitmapFilterType.INNER.

Implementation
public function get type():String
public function set type(value:String):void

Related API Elements

flash.filters.BitmapFilterType

Constructor Detail

BevelFilter

()

Constructor

public function BevelFilter(distance:Number = 4.0, angle:Number = 45, highlightColor:uint = 0xFFFFFF, highlightAlpha:Number = 1.0, shadowColor:uint = 0x000000, shadowAlpha:Number = 1.0, blurX:Number = 4.0, blurY:Number = 4.0, strength:Number = 1, quality:int = 1, type:String = "inner", knockout:Boolean = false)

Language Version:

ActionScript 3.0

Product Version:

Flex 4

Runtime Versions:

Flash Player 10, AIR 1.5

Constructor.

Parameters

	`distance:Number` (default = `4.0`) — The offset distance of the bevel, in pixels (floating point).

	`angle:Number` (default = `45`) — The angle of the bevel, from 0 to 360 degrees.

	`highlightColor:uint` (default = `0xFFFFFF`) — The highlight color of the bevel, 0xRRGGBB.

	`highlightAlpha:Number` (default = `1.0`) — The alpha transparency value of the highlight color. Valid values are 0.0 to 1.0. For example, .25 sets a transparency value of 25%.

	`shadowColor:uint` (default = `0x000000`) — The shadow color of the bevel, 0xRRGGBB.

	`shadowAlpha:Number` (default = `1.0`) — The alpha transparency value of the shadow color. Valid values are 0.0 to 1.0. For example, .25 sets a transparency value of 25%.

	`blurX:Number` (default = `4.0`) — The amount of horizontal blur in pixels. Valid values are 0 to 255.0 (floating point).

	`blurY:Number` (default = `4.0`) — The amount of vertical blur in pixels. Valid values are 0 to 255.0 (floating point).

	`strength:Number` (default = `1`) — The strength of the imprint or spread. The higher the value, the more color is imprinted and the stronger the contrast between the bevel and the background. Valid values are 0 to 255.0.

	`quality:int` (default = `1`) — The quality of the bevel. Valid values are 0 to 15, but for most applications, you can use `flash.filters.BitmapFilterQuality` constants: `BitmapFilterQuality.LOW` `BitmapFilterQuality.MEDIUM` `BitmapFilterQuality.HIGH` Filters with lower values render faster. You can use the other available numeric values to achieve different effects.

	`type:String` (default = "`inner`") — The type of bevel. Valid values are `flash.filters.BitmapFilterType` constants: `BitmapFilterType.INNER`, `BitmapFilterType.OUTER`, or `BitmapFilterType.FULL`.

	`knockout:Boolean` (default = `false`) — Applies a knockout effect (`true`), which effectively makes the object's fill transparent and reveals the background color of the document.

Related API Elements

flash.filters.BitmapFilterQuality
flash.filters.BitmapFilterType

Method Detail

clone

()

method

public function clone():BitmapFilter

Language Version:

ActionScript 3.0

Product Version:

Flex 4

Runtime Versions:

Flash Player 10, AIR 1.5

Returns a copy of this filter object.

Returns

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

Examples How to use this example

BevelFilterExample.mxml

<?xml version="1.0"?>
<!-- filters/examples/BevelFilterExample.mxml -->
<s:Application 
    xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    creationComplete="createFilters()">
    
  <fx:Script><![CDATA[ 
     import spark.filters.*;
     import flash.filters.BitmapFilterQuality;
     import flash.filters.BitmapFilterType;
  
     private var myBevelFilter:BevelFilter;  
     private var color:Number = 0xFF33FF;
  
     public function createFilters():void {        
        myBevelFilter = new BevelFilter(5, 45, 0xFFFF00, .8, 0x0000FF, .8, 3, 3, 1, BitmapFilterQuality.MEDIUM, BitmapFilterType.INNER, false);
        b1.filters = [myBevelFilter];
     }
  
  ]]></fx:Script>

    <s:VGroup>
        <!-- This button has a filter applied in ActionScript. -->
        <s:Button id="b1" label="Click me"/>
        
        <!-- This button has a filter applied in MXML. -->
        <s:Button id="b2" label="Click me">
            <s:filters>
                <s:BevelFilter 
                    distance="5"
                    angle="45"
                    highlightColor="0xFFFF00"
                    highlightAlpha=".8"
                    shadowColor="0x0000FF"
                    shadowAlpha=".8"                    
                    blurX="3" 
                    blurY="3" 
                    strength="1"
                    quality="{BitmapFilterQuality.MEDIUM}"
                    type="{BitmapFilterType.INNER}"
                    knockout="false"/>
            </s:filters>
        </s:Button>
        
    </s:VGroup>        
</s:Application>

Legal Notices | Online Privacy Policy

BevelFilter - AS3 Flex

Classes x

angle

distance

highlightAlpha

highlightColor

shadowAlpha

shadowColor

type

BevelFilter

clone