Flash Bevel Filters & ActionScript

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Click by Click: Create a Bevel Filter with ActionScript

See Full Version: This is a shortened click by click version of a: Full Length Tutorial

 

 

Free Flash Tutorial

 

 

The Bevel Filter lets you add a bevel effect to a variety of objects in Flash. A Bevel effect gives objects a three-dimensional look. A bevel filter 3D look can be applied to objects such as Buttons, Movie Clips and Text. 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.

In this tutorial I will show you the ActionScript needed to apply the Flash Bevel Filter to Text, Movie Clips and Button symbols. In addition to this I will describe the parameters (settings) which enable you to customise the Bevel Filter.

 

Here is an example of what you will create in this tutorial:

Example: Download the Flash file Draw 212a

 


Movie Clip with Bevel Filter applied.

 

Step One: Setting up the Document

  1. Open a New Flash Document: File > New (Ctrl N)
  2. Go to: File > Publish Settings
  3. If the Flash Tab is not selected, select it:
  4. For Version select: Flash Player 8
  5. For ActionScript version select: ActionScript 2
  6. Click: OK
  7. Create a Movie Clip, Button or Text and place it on the Stage: Movie Clip, Button or Text
  8. If the Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)
  9. With the Symbol or Text still selected type an Instance Name: myObject


Step Two: The ActionScript

  1. In the Timeline insert a new Layer:
  2. Name the Layer: ActionScript
  3. Select Frame 1 of the Actionscript Layer: Frame 1
  4. Open the Actions Panel: Window > Actions (F9)
  5. If Script Assist is on, Switch it off:
  6. Type (or paste) the following into the Actions Panel:

    // Makes the filter available to use in the Movie.
    import flash.filters.BevelFilter;

    // Creates a variable with info about the Filter settings
    var myBevelFilter = new BevelFilter (7,45,0xff99ff,0.4,0x000000,0.4,16,8,5,3,"inner",false);

    // Applies the filter to the object named myObject
    myObject.filters = [myBevelFilter]

  7. Test your Movie: Control > Test Movie (Ctrl Enter)


Step Three: Bevel Filter Parameters

In this section detailed information is given on each of the BevelFilter parameters. This will enable you to set the Filter parameter's correctly. The parameters are set with this section of code:

(7,45,0xff99ff,0.4,0x000000,0.4,16,8,5,3,"inner",false);

Here is what the parameters set:

Distance, Angle, Highlight Color, Highlight Alpha, Shadow Color, Shadow Alpha, Blur X, Blur Y, Strength, Quality, Type, Knockout.

Each of these parameters has a default setting and if you are not familiar with the Filter it is often best to start with the default and then edit:

Example: Download both the Flash files Draw 212a & 212b


My Settings

Draw 212a


Default Settings

Draw 212b

Here are my parameter setting compared to the default setting:

Parameter
  My Setting   Default

Distance:
 

7

  4
Angle:
  45   45
Highlight Color:
  0xff99ff   0xffffff
Highlight Alpha:
  0.4   1
Shadow Color:
  0x000000   0x000000
Shadow Alpha:
  0.4   1
Blur X:
  16   4
Blur Y:
  8   4
Strength:
  5   1
Quality
  3   1
Type
  "inner"   "inner"
Knockout
  false   false

 

Distance: Any number - Default = 4
Number The offset distance of the bevel. Valid values are in pixels. The default value is 4.

Angle: 0 to 360 degrees - Default = 45
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.

Highlight Color: Hexadecimal number - Default = 0xFFFFFF (see notes on color below)
The highlight color of the bevel. Valid values are in hexadecimal format, 0xRRGGBB. The default value is 0xFFFFFF.

Highlight Alpha: 0 to 1 - Default = 1
The 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.

Shadow Color: Hexadecimal number - Default = 0x000000 (see notes on color below)
The shadow color of the bevel. Valid values are in hexadecimal format, 0xRRGGBB. The default value is 0x000000.

Shadow Alpha: 0 to 1 - Default = 1
The 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.

Blur X: 0 to 255 - Default = 4
The amount of horizontal blur in pixels. Valid values are from 0 to 255. 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.

Blur Y: 0 to 255 - Default = 4
The amount of vertical blur in pixels. Valid values are from 0 to 255. 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: 0 to 255 - Default: 1
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.

Quality: 0 to 15 - Default: 1
The number of times to apply the filter. Valid values are 0 to 15. 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, higher 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.

Type: "inner", "outer" and "full" - Default: "inner"
The type of bevel. Valid values are "inner", "outer" and "full". Inner bevels the inside of your object, outer the outside which gives a shadow type effect and full does both inner and outer.

Example: Download the Flash file Draw 212b


An example of a Bevel set to Full.

Knockout: true or false - Default: false
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). True and false are case sensitive and must be in typed in lower case only: true or false

Notes on Color:
In many programs color is written as a hexadecimal number. If you are not familiar with hexadecimal numbers they can be a bit tricky but in ActionScript they are always prefixed with Zero Ex and followed by six digits or letters:

A Hexadecimal number as written in ActionScript: 0xff00ff

Tip: To find the colour code you want look at the color pallet in the Flash tool box:


The hexadecimal code is displayed at the top of the pallet.

Note: Do not write the number as displayed in the color pallet. You need to remove the # and replace it with Zero Ex: 0xff00ff

Case Sensitive: The Ex is case sensitive: 0Xff00ff will result in an error message. For this reason use lower case for hexadecimal numbers in ActionScript:

Correct syntax: 0xff00ff

Correct syntax: 0xFF00FF

In-correct syntax: 0Xff00ff

In-correct syntax: 0XFF00FF

I hope you have found this useful. If so perhaps you could recommend this site to others and link to webwasp!

See Full Version of this: Tutorial


7005 visitors to this page since 21 March 07 •

Phil Schulz's Facebook Profile
Webwasp is Phil Schulz's baby. You are welcome to contact me or become my Facebook friend: Click here

 Top of Page HomeMembers Tutorials Forum iSnapChat Contact Us 
 All material on this site is protected under international copyright © law. DO NOT reproduce any material from this site without written permission. Please ask as permission is often granted.