What is Software? | What is Education? | What is Technology? | What is Research? | What is Wi-Fi? | What is Communication? | What is Customer Service?

Free SEO Tutorials & Help

Tutorials:   Adobe Flash   Adobe Photoshop   CorelDRAW   SEO  

Site Map

Website Development | Cable & Broadband Magazine | Solutions for Higher Education | Auction Anything Online

Adobe Flash Help & Tutorials

 Back to Topics

 

How to Use Filters and Blends

About filters (Flash Professional only)

About animating filters (Flash Professional only)

About filters and Flash Player performance (Flash Professional only)

Applying filters (Flash Professional only)

Creating preset filter libraries

Applying a drop shadow

Creating a skewed drop shadow

Applying a blur

Applying a glow

Applying a bevel

Applying a gradient glow

Applying a gradient bevel

Applying the Adjust Color filter

About blend modes (Flash Professional only)

Blend modes in Flash

Applying a blend mode (Flash Professional only)

About filters (Flash Professional only)

TOP

Filters let you add interesting visual effects to text, buttons, and movie clips and are most often associated with applying drop shadows, blurs, glows, and bevels to graphic elements. A feature unique to Flash is that you can animate the filters you apply using motion tweens. For example, if you create a ball (or sphere) with a drop shadow, you can simulate the look of the light source moving from one side of the object to another by changing the position of the drop shadow from its beginning and ending frames in the Timeline.

After you apply a filter, you can change its options any time, or rearrange the order of filters to experiment with a combined effect. You can enable or disable filters or delete them in the Property inspector. When you remove a filter, the object returns to its previous appearance. You can view the filters applied to an object by selecting it; doing so automatically updates the filters list in the Property inspector for the selected object.

In Flash, blend modes let you create composite images. Compositing is the process of varying the transparency or color interaction of two or more overlapping objects. Blending modes also add a dimension of control to the opacity of objects and images. You can use Flash blending modes to create highlights or shadows that let details from an underlying image show through, or to colorize a desaturated image.

 

About animating filters (Flash Professional only)

TOP

You can animate filters in the Timeline. Objects on separate keyframes joined by a tween have the parameters for corresponding filters tweened on intermediate frames. If a filter does not have a matching filter (a filter of the same type) at the opposite end of the tween, a matching filter is added automatically to ensure that the effect is at the end of the animation sequence.

Flash does the following to prevent motion tweens from functioning incorrectly in the event of a missing filter at one end of the tween, or filters applied in a different order at each end:

  • If you apply a motion tween to a movie clip that has filters applied to it, when you insert a keyframe at the opposite end of the tween, the movie clip automatically has the same filters, with the same stacking order, on the last frame of the tween as it did at the beginning of the tween.

  • If you place movie clips on two different frames with different filters applied to each, and you apply a motion tween between the frames, Flash first processes the movie clip with the most filters. Flash then compares the filters applied to the first movie clip against those used by the second movie clip.

  • If no matching filters are found in the second movie clip, Flash generates a "dummy" filter with no parameters and the color of the existing filters.

  • If a motion tween exists between two keyframes:

    • If you add a filter to the object in one keyframe, Flash automatically adds a dummy filter to the movie clip when it reaches the keyframe at the other end of the tween.

    • If you remove a filter from an object in one keyframe, Flash automatically removes the matching filter from the movie clip when it reaches the keyframe at the other end of the tween.

  • If you set filter parameters inconsistently between the beginning and end of a motion tween, Flash applies the filter settings of the starting frame to the interpolated frames. Inconsistent settings occur when the following parameters are set differently between the beginning and end of the tween: knockout, inner shadow, inner glow, and type of gradient glow and gradient bevel.

    For example, if you create a motion tween using the drop shadow filter, and apply a drop shadow with a knockout on the first frame of the tween, and an inner shadow on the last frame of the tween, Flash corrects the inconsistent use of the filter in the motion tween. In this case, Flash applies the filter settings used on the first frame of the tween--a drop shadow with a knockout.

 

About filters and Flash Player performance (Flash Professional only)

TOP

The type, number, and quality of filters you apply to objects can affect the performance of SWF files as you play them. The more filters you apply to an object, the greater the number of calculations Macromedia Flash Player must process to correctly display the visual effects you've created. For this reason, Macromedia recommends that you apply only a limited number of filters to a given object.

Each filter includes controls that let you adjust the strength and quality of the applied filter. Using lower settings improves performance on slower computers. If you are creating content for playback on a wide range on computers, or are unsure of the computing power available to your audience, set the quality level to low to maximize playback performance.

 

Applying filters (Flash Professional only)

TOP

You can apply one or more filters to selected objects using the Property inspector. Each time you add a new filter to an object, it is added to the list of applied filters for that object in the Property inspector. You can apply multiple filters to an object, as well as remove filters that have been previously applied.

The Add Filter menu in the Property inspector.

To apply a filter:

  1. Select a movie clip, button, or text object on the Stage that you want to apply a filter to.

    You can apply filters only to text, button, and movie clip objects.

  2. Select the Filter tab in the Property inspector.

  3. Click the Add Filter (+) button and select a filter from the Filters pop-up menu.

    The filter you select is applied to the object, and the controls for the filter settings appear in the Property inspector. Experiment with the settings until you get the look you want. For details about the settings available for each filter, see the following sections:

    • Applying a drop shadow

    • Applying a blur

    • Applying a glow

    • Applying a bevel

    • Applying a gradient glow

    • Applying a gradient bevel

Applying the Adjust Color filter

  1. To remove a filter:

  2. Select the movie clip, button, or text object that you want to remove a filter from.

  3. Select the Filter tab in the Property inspector.

  4. Select the filter you want to remove in the list of applied filters.

Click the Remove Filter (-) button to remove the filter.

You can create a filter settings library that lets you easily apply the same filter or sets of filters to an object. Flash stores the filter presets you create in the Property inspector on the Filters tab in the Filters > Presets menu.

You can delete or rename any presets.

To apply a preset filter to an object:

  1. Select the movie clip, button, or text object that you want to apply a filter preset to.

  2. Select the Filter tab in the Property inspector.

  3. Click the Add Filter (+) button, and select Presets from the Filters pop-up menu.

  4. Select the filter preset you want to apply from the list of available presets at the bottom of the preset menu.

NOTE : When you apply a filter preset to an object, Flash replaces any filters currently applied to the selected object(s) with the filter(s) used in the preset.

To enable or disable a filter applied to an object:

  • Click the enable or disable icon next to the filter name in the Filter list in the Property inspector.

NOTE : Alt-click (Windows) or Option-click (Macintosh) the enable icon in the Filter list to toggle the enable state of the other filters in the list. If you Alt-click the disable icon, the selected filter is enabled, and all others filters in the list are disabled.

To enable or disable all filters applied to an object:

  • Click the Add Filter (+) button in the Property inspector, and then select Enable All or Disable All from the pop-up menu.

NOTE : You can Control-click the enable or disable icon in the Filter list to enable or disable all of the filters in the list.

 

Creating preset filter libraries

TOP

You can save filter settings as preset libraries that you can easily apply to movie clip and text objects. You can also share your filter presets with other users by providing them with the filter configuration file. The filter configuration file is an XML file that is saved in the Flash Configuration folder. You can find this file is the following location:

  • Windows: C:\Documents and Settings\username\Local Settings\Application Data\Macromedia\Flash 8\language\Configuration\Filters\filtername.xml

  • Macintosh: Macintosh HD/Users/username/Library/Application Support/Macromedia/Flash 8/language/Configuration/Filters/filtername.xml

To create a library of filters with preset settings:

  1. Apply the filter or filters you want to use to the object.

  2. When you have a filter setting that you want to save for use later, click the Add Filter (+) button, and select Presets > Save As from the Filters pop-up menu.

  3. Enter a name for the filter settings in the Save Preset As dialog box, and click OK.

    The filter preset appears in the Presets menu.

To rename a filter preset:

  1. Click the Add Filter (+) button, and select Presets > Rename from the Filters pop-up menu.

    The Rename Preset dialog box appears.

  2. Double-click the preset name you want to modify.

  3. Enter a new preset name, and click Rename.

To delete a filter preset:

  1. Click the Add Filter (+) button, and select Presets > Delete from the Filters pop-up menu.

    The Delete Preset dialog box appears.

  2. Select the preset you want to remove, and click Delete.

 

Applying a drop shadow

TOP

The Drop Shadow filter simulates the look of an object casting a shadow onto a surface, or cutting out a hole in the background in the shape of the object.

Text with the Drop Shadow filter applied.

To apply a drop shadow to an object:

  1. Select the movie clip or text object that you want to apply a drop shadow to.

  2. Select the Filters tab in the Property inspector.

  3. Click the Add Filter (+) button, and select Drop Shadow from the Filters pop-up menu.

  4. Edit the filter settings on the Filter tab of the Property inspector:

    • Drag the Blur X and Y sliders to set the width and height of the drop shadow.

    • Drag the Distance slider to set the distance of the shadow from the object.

    • Click the Color box to open the Color pop-up window and set the shadow color.

    • Drag the Strength slider to set the darkness of the shadow. The higher the numerical value, the darker the shadow.

    • Enter a value to set the angle of the shadow, or click the angle selector and drag the angle dial.

    • Select the Knockout check box to knock out (or visually hide) the source object and display only the drop shadow on the knockout image.

    • Select the Inner shadow check box to apply the shadow within the boundaries of the object.

    • Select the Hide Object check box to hide the object and display only its shadow. The Hide Object option lets you more easily create a realistic shadow. For more information.

    • Select the quality level for the drop shadow. Setting the quality level to High is approximate to that of a Gaussian blur. Setting the quality level to Low is recommended to maximize playback performance.

 

Creating a skewed drop shadow

TOP

Use the Drop Shadow filter's Hide object option to create a more realistic look by skewing the shadow of an object. To achieve this effect, you need to create a duplicate movie clip, button, or text object, apply a drop shadow to the duplicate, and use the Free Transform tool to skew the duplicate object's shadow.

Skewing the Drop Shadow filter to create a more realistic looking shadow.

To create a skewed drop shadow:

  1. Select the movie clip or text object whose shadow you want to skew.

  2. Duplicate (select Edit > Duplicate) the source movie clip or text object.

  3. Select the duplicated object, and skew it using the Free Transform tool (Modify > Transform > Rotate and Skew).

  4. Apply the Drop Shadow filter to the duplicated movie clip or text object, and select the Hide Object check box. The duplicated object is hidden from view, leaving only the skewed shadow.

  5. Adjust both the Drop Shadow filter settings and the angle of the skewed drop shadow until you achieve the look you want.
     

Applying a blur

TOP

The Blur filter softens the edges and details of objects. Applying a blur to an object can make it appear as if it is behind other objects, or make an object appear to be in motion.

Text with the Blur filter applied.

To apply a blur to an object:

  1. Select a movie clip or text object that you want to apply a blur to.

  2. Select the Filters tab in the Property inspector.

  3. Click the Add Filter (+) button and select Blur from the pop-up menu.

  4. Edit the filter settings on the Filter tab of the Property inspector:

    • Drag the Blur X and Y slider to set the width and height of the blur.

    • Select the quality level for the blur. Setting the quality level to High is approximate to that of a Gaussian blur. Setting the quality level to Low is recommended to maximize playback performance.

 

Applying a glow

TOP

The Glow filter lets you apply a color all around the edges of an object.

To apply a glow to an object:

  1. Select a movie clip or text object that you want to apply a glow to.

  2. Select the Filters tab in the Property inspector.

  3. Click the Add Filter (+) button and select Glow from the pop-up menu.

  4. Edit the filter settings in the Filter tab of the Property inspector:

    • Drag the Blur X and Y slider to set the width and height of the glow.

    • Click the color box to open the color pop-up window and set the glow color.

    • Drag the Strength slider to set the sharpness of the glow.

    • Select the Knockout check box to knock out (or visually hide) the source object and display only the glow on the knockout image.

      Using the Glow filter with the Knockout option.

    • Select the Inner Glow check box to have the glow applied within the boundaries of the object.

    • Select the quality level for the glow. Setting the quality level to High is approximate to that of a Gaussian blur. Setting the quality level to Low is recommended to maximize playback performance.

     

 

Applying a bevel

TOP

Applying a bevel applies a highlight to the object that makes it appear to be curved up above the background surface. You can create an inner bevel, an outer bevel, or a full bevel.

To apply a bevel to an object:

  1. Select a movie clip or text object that you want to apply a bevel to.
  2. Select the Filters tab in the Property inspector.
  3. Click the Add Filter (+) button and select Bevel from the pop-up menu.
  4. Edit the filter settings in the Filter tab of the Property inspector:
    • Select the type of bevel you want to apply to the object from the Type pop-up menu. You can choose an inner, outer, or full bevel.
    • Drag the Blur X and Y slider to set the width and height of the bevel.
    • Select a shadow and highlight color for the bevel from the pop-up color palette.
    • Drag the Strength slider to set the opacity of the bevel without affecting its width.
    • Drag the Angle dial or enter a value to change the angle of the shadow cast by the beveled edge.
    • For Distance, enter a value to define the width of the bevel.
    • Select the Knockout check box to knock out (or visually hide) the source object and display only the bevel on the knockout image.

 

Applying a gradient glow

TOP

Applying a gradient glow produces a glow look with a gradient color across the surface of the glow. The gradient glow requires you to choose one color at the beginning of the gradient with an Alpha value of 0. You cannot move the position of this color, but you can change the color.

To apply a gradient glow to an object:

  1. Select a movie clip or text object that you want to apply a gradient glow to.

  2. Select the Filters tab in the Property inspector.

  3. Click the Add Filter (+) button and select Gradient Glow from the pop-up menu.

  4. Edit the filter settings on the Filter tab of the Property inspector:

    • Select the type of glow you want to apply to the object from the Glow Type pop-up menu. You can choose an inner, outer, or full glow.

    • Drag the Blur X and Y slider to set the width and height of the glow.

    • Drag the Strength slider to set the opacity of the glow without affecting its width.

    • Drag the Angle dial or enter a value to change the angle of the shadow cast by the glow.

    • Drag the Distance slider to set the distance of the shadow from the object.

    • Select the Knockout check box to knock out (or visually hide) the source object and display only the gradient glow on the knockout image.

    • Specify a gradient color for the glow. A gradient contains two or more colors that fade or blend into one another. The color you select for the beginning of the gradient is referred to as the alpha color.

      To change a color in the gradient, select one of the color pointers below the gradient definition bar and click the color space that appears directly below the gradient bar to display the Color Picker. Sliding these pointers adjusts the level and position of that color in the gradient.

      To add a pointer to the gradient, click on or below the gradient definition bar. You can add up to 15 color pointers, letting you create a gradient with up to 15 color transitions. To reposition a pointer on the gradient, drag the pointer along the gradient definition bar. Drag a pointer down and off the gradient definition bar to remove it.

    • Select the quality level for the gradient glow. Setting the quality level to High is approximate to that of a Gaussian blur. Setting the quality level to Low is recommended to maximize playback performance.

 

Applying a gradient bevel

TOP

Applying a gradient bevel produces a raised look that makes an object appear to be raised above the background, with a gradient color across the surface of the bevel. The gradient bevel requires one color in the middle of the gradient with an alpha value of 0. You cannot move the position of this color, but you can change the color.

To apply a gradient bevel to an object:

  1. Select a movie clip or text object that you want to apply a gradient bevel to.

  2. Select the Filters tab in the Property inspector.

  3. Click the Add Filter (+) button and select Gradient Bevel from the pop-up menu.

  4. Edit the filter settings on the Filter tab of the Property inspector:

    • Select the type of bevel you want to apply to the object from the Type pop-up menu. You can choose an inner, outer, or full bevel.

    • Drag the Blur X and Y slider to set the width and height of the bevel.

    • For Strength, enter a value to affect the smoothness of the bevel without affecting its width.

    • For Angle, enter a value or use the pop-up dial to set the angle of the light source.

    • Select the Knockout check box to knock out (or visually hide) the source object and display only the gradient bevel on the knockout image.

    • Specify a gradient color for the bevel. A gradient contains two or more colors that fade or blend into one another. The middle pointer controls the alpha color of the gradient. You can changethe color of the alpha pointer, but you cannot reposition this color in the gradient.

    To change a color in the gradient, select one of the color pointers below the gradient definition bar and click the color space that appears directly below the gradient bar to display the Color Picker. Sliding these pointers adjusts the level and position of that color in the gradient.

    To add a pointer to the gradient, click on or below the gradient definition bar. You can add up to 15 color pointers, letting you create a gradient with up to 15 color transitions. To reposition a pointer on the gradient, drag the pointer along the gradient definition bar. Drag a pointer down and off the gradient definition bar to remove it.

 

Applying the Adjust Color filter

TOP

The Adjust Color filter lets you adjust the brightness, contrast, hue, and saturation of the selected movie clip, button, or text object.

NOTE : If you only want to apply the Brightness control to an object, use the color controls located in the Properties tab of the Property inspector. Using the Brightness option in the Properties tab provides improved performance over applying a filter. For more information.

To apply the Adjust Color filter:

  1. Select a movie clip, button, or text object whose color you want to adjust.

  2. Select the Filters tab in the Property inspector.

  3. Click the Add Filter (+) button and select Adjust Color from the pop-up menu.

  4. Drag the slider for the color attributes you want to adjust, or enter a numerical value in the corresponding text box. The attributes and their corresponding values are as follows:

    Contrast adjusts the highlights, shadows, and midtones of an image. Values range from -100 to 100.

    Brightness adjusts the brightness of an image. Values range from -100 to 100.

    Saturation adjusts the intensity of a color. Values range from -100 to 100.

    Hue adjusts the shade of a color. Values range from -180 to 180.

  5. You can reset all of the color adjustments to 0, returning the object to its original state, by clicking the Reset button.

 

About blend modes (Flash Professional only)

TOP

Blend modes let you create composite images. Compositing is the process of varying the transparency or color interaction of two or more overlapping objects. Blending lets you create unique effects by blending the colors in overlapping movie clips.

A blending mode contains these elements:

Blend color is the color applied to the blend mode.

Opacity is the degree of transparency applied to the blend mode.

Base color is the color of pixels underneath the blend color.

Result color is the result of the blend's effect on the base color.

 

Blend modes in Flash

TOP

Since blend modes depend on both the color of the object you're applying the blend to and the underlying color, you must experiment with different colors to see what the result will be. Macromedia recommends that you experiment with the different blend modes to achieve the effect you want.

Flash provides the following blend modes:

Normal applies color normally, with no interaction with the base colors.

Layer lets you stack movie clips on top of each other without affecting their color.

Darken replaces only the areas that are lighter than the blend color. Areas darker than the blend color don't change.

Multiply multiplies the base color by the blend color, resulting in darker colors.

Lighten replaces only pixels that are darker than the blend color. Areas lighter than the blend color don't change.

Screen multiplies the inverse of the blend color by the base color, resulting in a bleaching effect.

Overlay multiplies or screens the colors, depending on the base colors.

Hard light multiplies or screens the colors, depending on the blend mode color. The effect is similar to shining a spot light on the object.

Difference subtracts either the blend color from the base color or the base color from the blend color, depending on which has the greater brightness value. The effect is similar to a color negative.

Invert inverts the base color.

Alpha applies an alpha mask.

NOTE : Alpha blend mode requires that a Layer blend mode be applied to the parent movie clip. You cannot change the background clip to Alpha and apply it because the object would appear invisible.

Erase removes all base color pixels, including those in the background image.

NOTE : Erase blend mode requires that a Layer blend mode be applied to the parent movie clip. You cannot change the background clip to Erase and apply it because the object would appear invisible.

To see examples of the blending modes, see Blend mode examples.

Blend mode examples

The following examples illustrate how different blend modes affect the appearance of an image. Be aware that the resulting effect of a blend mode may be considerably different, depending on the color of the underlying image and the type of blend mode you apply.
 

Original image

Layer

Darken

Multiply

Lighten

Screen

Overlay

Hard Light

Add

Subtract

Difference

Invert

 
Applying a blend mode (Flash Professional only)

TOP

You use the Property inspector for movie clips to apply blends to selected movie clips.

NOTE : Multiple graphic symbols are merged as a single shape when you publish the SWF. For this reason, you cannot apply different blend modes to different graphic symbols.

To apply a blend mode to a movie clip:

  1. Select the movie clip instance (on the Stage) that you want to apply a blend mode to.

  2. Adjust the color and transparency of the movie clip instance using the Color pop-up menu in the Property inspector. For more information.

  3. Select a blend mode from the Blend pop-up menu in the Property inspector for movie clips.

    The blend mode is applied to the selected movie clip instance.

  4. Position the movie clip with the blend mode over the graphic symbol whose appearance you want to modify.

  5. Verify that the blend mode you selected is appropriate to the effect you're trying to achieve.

    You might need to experiment with both the color and transparency settings of the movie clip and the different blend modes to achieve the effect you want. For information on adjusting the color of a movie clip.

Copyright ADOBE - All Rights Reserved Worldwide

 

 

More Topics:

Working with Flash Documents

How to work in Flash WorkSpace

Working with Projects in Flash

Process to Build your First Application in Flash

Using Symbols, Instances and Library Assets in Flash

How to Build Video Player in Flash

How to Work with Color, Strokes and Fills in Flash

How to Create Document in Flash

What is Vector and Bitmap Graphics in Flash

How to Create a Banner in Flash, Part 1

How to Work with Text in Flash

How to Create a Banner in Flash, Part 2

How to Use Imported Artwork in Flash

How to Create a Banner in Flash, Part 3

How to Work with Graphic Objects in Flash

How to Work with Layers in Flash

How to Use Filters and Blends

Working with Graphics in Flash

What is Accessibility Features in Flash

How to Create Motion (Shape Tween & Motion Tween) in Flash

How to Create an Application in Flash

What is Masking in Flash

How to Work with Video in Flash

How to Use Layout Tools in Flash

What are Behaviors in Flash

How to Work with Sound in Flash

How to Create Symbols and Instances in Flash

What is ActionScript in Flash

How to Write ActionScript With Script Assist in Flash

How to Add Button Animation and Navigation in Flash

What is Data Integration in Flash

How to Work with Screens

How to Create a Presentation with Screens

What is Extending Flash

How to Create Multilanguage Text in Flash

How to Create Graphics: Draw in Flash

What is Flash Lite

Ways of Data Integration

How to Create Graphics: Create a Timeline Animation in Flash

Getting Started with Flash Lite in Flash

How to Publish Flash Documents

How to Create Graphics: Making Animations with Easing

Learning Flash Lite 1.X ActionScript in Flash

How to Export Flash Content and Images from Flash

How to Create Graphics: Applying Gradients in Flash

Process of Writing and Editing ActionScript 2.0 in Flash

How to Create Accessible Content in Flash

How to Create Graphics: Apply Graphic Filters and Blends

What is Data and Data Types in Flash

Process of Printing from SWF Files in Flash

Using ActionScript: How to Use Script Assist mode in Flash

Learn Syntax and Language Fundamentals in Flash

How to Create E-learning Content in Flash

Using ActionScript: How to Write Scripts in Flash

Working with Functions and Methods in Flash

Process of Using Templates in Flash

Using ActionScript: Process of Adding Interactivity in Flash

What are Classes in Flash

Control Tag Summary of XML to UI in Flash

Using ActionScript: How to Create a Form with Conditional Logic and Send Data in Flash

What is Inheritance in Flash

What is Data Integration: Overview

Using ActionScript: How to Work with Objects and Classes in Flash

Overview on Interfaces in Flash

What is Data Integration: Using XML for a Timesheet

How to Work with Text and Strings in Flash

How to use Handling Events in Flash

What is Data Integration: Using XUpdate to Update the Timesheet

Learning Animation, Filters and Drawings in Flash

How to Work with Movie Clips in Flash

How to Create Interaction with ActionScript in Flash

How to Work with Images, Sound, and Video in Flash

How to Work with External Data in Flash

What is Security in Flash

How to Debug Applications in Flash

List of Error Messages in Flash

Using Object-Oriented Programming with ActionScript 1.0 in Flash

How to Write Scripts for Earlier Versions of Flash Player in Flash

List of all Keyboard Keys and Key Code Values for using in Flash

Terminology

Introduction to Components in Flash

What are Components in Flash

How to Create an Application with Components

How to Work with Components in Flash

How to Handle Component Events in Flash

How to Customize Components in Flash

How to Create Components in Flash

What is Collection Properties in Flash