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.
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
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.
BitmapFilter — A new BevelFilter instance with all the same properties as
the original BevelFilter instance.
Examples
BevelFilterExample.mxml
<?xml version="1.0"?>
<!--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!-- 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>
BaseDimensionFilter 
Hide MXML Syntax
Show MXML Syntax