Flash Tutorials: Gradient Bevel Filter, Arrays & Parameters.

Home • Members Tutorials Forum iSnapChat Contact Us 

 


Flash Tutorials

   

Create Flash Gradient Bevel Filter with ActionScript

 

Free Flash Tutorial


Step 3    <<   Previous      Intro   1   2   3    >>      

 

Step Three: Gradient Bevel Filter Settings

In this section detailed information is given on each of the Gradient Bevel Filter settings. I will first explain what each line does and then go through how to set each of the individual settings. This will enable you to set and edit the Filter correctly. This is done with these sections of code:

[0x990000, 0xFFFFFF, 0xFF99FF]
[0.3, 1, 0.3]
[0, 100, 255]
(3, 225, colors, alphas, ratios, 8, 16, 6, 1, "inner", false)

This is what each of the above settings does:

[Lists the colors to use in the Gradient]
[Lists the Alpha or transparency of each color]
[Lists the Ratios or position of each color]
(Distance, Angle, Colors, Alphas, Ratios, Blur X, Blur Y, Strength, Quality, Type & Knockout)


Settings: Arrays & Parameters

The Arrays (lists) define the colors and color attributes that you want to use. These Arrays are set within the [Square Brackets]. The first Array sets the colors to be used. You can have as many colors as you want. I have used three:

[0x990000, 0xFFFFFF, 0xFF99FF]

The next group of Arrays set the Alpha (transparency) and then the Ratios (position) of each color. Each of these Arrays must have the same number of entries as colors listed. I my case three in each list:

[0.3, 1, 0.3]
[0, 100, 255]

The Parameters are the remaining settings which are set within the (Parentheses):

(3, 225, colors, alphas, ratios, 8, 16, 6, 1, "inner", false)

Each of the Parameter settings change the following

Distance, Angle, Colors, Alphas, Ratios, Blur X, Blur Y, Strength, Quality, Type & Knockout.

Each of these settings has a default 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 216b & 216c



My Settings


Draw 216b


Possible Default Settings


Draw 216c

Here are my setting compared to the default settings:

Parameter
  My Settings  
Possible Default Settings

Distance:
 

3

  4
Angle:
  225   45
Colors:
  0x990000,0xFFFFFF,0xFF99FF   0x000000,0xFFFFFF,0x666666
Alphas :
  0.3, 1, 0.3   1,1,1
Ratios:
  0, 100, 255   0,128,255
Blur X:
  8   4
Blur Y:
  16   4
Strength:
  6   1
Quality:
  1   1
Type:
  "inner"   "inner"
Knockout
  false   false

Note: Colors & Ratios as written in Italics don't have an actual default. Your array could have any number of colors so there cannot be a default.

Distance: Any Number - Default = 4
The offset value set the distance from the edge of your shape. This defines when the gradient starts and ends. Note that the spread and look of the gradient is not simple as it is based on the values of the blurX, blurY, and ratios as well as the distance value. The default distance is 4.

Angle: 360 to -360 - Default = 45
The angle, in degrees. Valid values are 0 to 360. The default is 45. The angle value represents the angle of the theoretical light source falling on the object. The value determines the angle at which the gradient colors are applied to the object: where the highlight and the shadow appear, or where the first color in the array appears. The colors are then applied in the order in which they appear in the array.

Colors: 0x000000 to 0xFFFFFF - Default: None
The Colors are set in the color Array. This is a list of RGB hexadecimal color values to use in the gradient. For example, red is 0xFF0000, blue is 0x0000FF. The colors, alphas, and ratios properties are all related. The first element in the colors array corresponds to the first element in the alphas array and in the ratios array, and so on.

Note: 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 the x. Correct syntax: 0xff00ff or 0xFF00FF

Alphas: 0 to 1 - Default = 1
An Alphas are set in the Alphas Array. They change the alpha (transparency) values for the corresponding colors in the colors array. Valid values for each element in the array are 0 to 1. For example, .25 sets a transparency value of 25%. The colors, alphas, and ratios properties are all related. The first element in the colors array corresponds to the first element in the alphas array and in the ratios array, and so on.

Ratios: 0 to 255 - No default but try first number 0, last number 255, intermittent numbers evenly spread. ie: 0, 128, 255
The ratios are set in the Ratio Array and control the color distribution. The Ratio spreads the colors through the gradient. If the numbers are close together the colors will be close together, if the number are far the colors will be spread apart. Valid values for each element in the array are 0 to 255. The colors, alphas, and ratios properties are all related. The first element in the colors array corresponds to the first element in the alphas array and in the ratios array, and so on.

Think of a gradient as composed of stripes of various colors, blending into each other, each ratio value sets the position of the color on the radius of the gradient, where 0 represents one side of the gradient and 255 the other. For a typical usage, the middle value is 128, and that is the main base or fill value. In the example below there are nine colours:

Example: Download the Flash file Draw 216d

The Ratio value is: [16, 32, 64, 96, 128, 160, 192, 224, 235]


Ratios affect the position of the colors.

Keep in mind that the spread of the colors in the gradient is complex as it is based on the values of the blurX, blurY, strength, and quality properties, as well as the ratios values.

Blur X: 0 to 255 - Default = 4
The amount of horizontal blur. Valid values are 0 to 255. A blur of 1 or less means that the original image is copied as is. 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. Valid values are 0 to 255. A blur of 1 or less means that the original image is copied as is. 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. 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. A value of 0 means that the filter is not applied. 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: "outer" or "inner" or "full" - Default = "inner"
The placement of the bevel effect. Possible values are:

Knockout: true or false - Default = false
Specifies whether the object has a knockout effect. A knockout effect makes the object's fill transparent and reveals the background color of the document. The value true specifies a knockout effect; the default is false (no knockout effect).

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

 

Please indicate what you thought of this tutorial 
10 is the best: 
10 9 8 7 6 5 4 3 2 1

         

Step 3    <<   Previous      Intro   1   2   3    >>      


10605 visitors to this page since 25 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.