Flash Drop Shadow Filters & ActionScript	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Click by Click: Create a Drop Shadow Filter with ActionScript

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

Free Flash Tutorial

The Drop Shadow Filter lets you add a Drop Shadow effect to a variety of objects in Flash including Movie Clips, Buttons & Text. A shadow image placed strategically behind an image to creates the effect of the image lifting off the page. You have several other options for the style of the drop shadow, including inner or outer shadow and knockout mode. A shadow that is offset from a shape gives the feeling of spatial 3D dimension.

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

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

Example: Download the Flash file Draw 214a

 

Flash Movie Clip with Drop Shadow 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.DropShadowFilter;

   // Creates a variable with info about the Filter settings
   var myDropShadowFilter = new DropShadowFilter (5,65,0xff3333,0.8,5,10,2,3,false,true,false);

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

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

Step Three: Drop Shadow Filter Parameters

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

(5,65,0xff3333,0.8,5,10,2,3,false,true,false)

Here is what the parameters set:

Distance, Angle, Color, Alpha, Blur X, Blur Y, Strength, Quality, Inner Shadow, Knockout & Hide Object.

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 214a & 214b

My Settings Draw 214a

Default Settings Draw 214b

Here are my parameter setting compared to the default setting:

Parameter   My Setting   Default Distance:   5   4 Angle:   65   45 Color:   0xff3333   0x000000 Alpha:   0.8   1 Blur X:   5   4 Blur Y:   10   4 Strength:   2   1 Quality   3   1 Inner   false   false Knockout   true   false Hide Object   false   false

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

Angle: 0 to 360 degrees - Default = 45
The angle of the shadow. Valid values are 0 to 360˚. 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.

Color: 0x000000 to 0xffffff - Default: 0x000000
The color of the shadow. Valid values are in hexadecimal format 0xRRGGBB. The default value is 0x000000.
Sets the color of the filter. 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

Alpha: 0 to 1 - Default = 1
The transparency value of the shadow color. Valid values are 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 shadow 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.

Inner: false
Indicates whether or not the shadow is an inner shadow. The value true indicates an inner shadow. The default is false, an outer shadow (a shadow around the outer edges of the object).

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

Hide Object: false
Indicates whether or not the object is hidden. The value true indicates that the object itself is not drawn; only the shadow is visible. The default is false (show the object).

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

Full Version of this: Tutorial