Creatively sharing Flash Creations, News, and Tutorials

Flash Tutorials Filters

July 27, 2008 7:07 pm t. m. Uncategorized

 

Flash 8 Pro comes with some great Filters. These can be applied to text, images or other graphics. You can do this either whilst you are editing the Flash Movie or on the fly with ActionScript. Here is what Flash 8 help says:

Graphics Effects Filters: You can apply graphics Filters to objects on the Stage. These are called Filters because they pass the image data of the object through an algorithm that filters the data in a specific way. With these filters, you can make objects glow, add drop shadows, and apply many other effects and combinations of effects.

 

 

In this tutorial you will learn how to create graphics and text with Filters like this:

 

 

All the Filters Listed:

All the filters as listed in the Property Inspector:

Filter are listed in the Property Inspector.

 

I have drawn a rectangle in Flash 8 Pro and applied the various Filters:

No Filter	Drop Shadow	Blur	Adjust Color
Glow	Gradient Glow	Bevel	Gradient Bevel

Note: Any particular Filter can look very different depending on the options used. Both of these are the same Filter but with different option settings:

Gradient Glow

Gradient Glow

Both of the above are created with the Gradient Glow Filter.

Step One: Adding Text to a Flash Movie

 

In this part of the Tutorial I will show you hoe to apply Filters to Text. The first thing to do is open a new Flash document and add some text.

Warning: This tutorial has been written for Flash 8 Pro. There are no filters with the standard version of Flash 8 or with previous versions of Flash.

1. Go to: File > New > General Tab > Flash Document > OK(Ctrl N)
2. Select the Text Tool:
3. Click on Stage and: Type

I Type: Flash Professional 8 - Filters



Note: Your Text will probably look different as it will have different colours or other properties. If you wish you can change your Text”s properties in the Property Inspector: Window > Properties > Properties(Ctrl F3)


My Text”s properties.

Note: If your text does not fit into a single line you probably have a Fixed With Text Block instead of an Expandable Text block.

Definition: Fixed Width & Expandable Text Blocks

Step Two: Adding Filters to Text

1. Go back to the Selection Tool:

2. Select the: Text
3. If the Property Inspector is closed, open it: Window > Properties > Properties(Ctrl F3)
4. Click on the Tab: Filters
5. Click on the Add Filter Button:

Note: If the Add Filter Button is grayed out your Text is not selected: Click on the Text

6. Select: Glow
7. In the Glow options select Quality: High
8. Change any other: Options

Here are my Option Settings:


My Glow Options.


My text with a red Glow.

9. Click on the Add Filter Button:
10. Select: Drop Shadow
11. In the Drop Shadow options select Quality: High
12. Change any other: Options

Here are my options:


My Drop Shadow Options.


My text with a red Glow & a Drop Shadow.

At this stage I thought that the text looked too dense and decided to change the Font Color to White. Although if my Flash Movie was going to have a black background it could look intense: Modify > Document(Ctrl J)


Flash Movie set with a Black background and

13. In the Property Inspector click on the Tab: Properties(Ctrl F3)
14. For Text Fill Colour select: White

My Text is now complete:



You may want to return to the filters and add additional filters and play with the options. Have fun!

Step Three: Filter Order

It is possible to drag the filters up and down the list so that they appear in different orders. In the above example I used:

Glow
Drop Shadow

It is possible to reverse this by dragging the Filter Label up or down:

Drop Shadow
Glow

In this instance the difference in the effect is subtle but if you look carefully you can see:

The Drop Shadow goes under the Glow.

You can see that the red Glow goes right around the bottom of the Drop Shadow.

Step Four: Multiple Filters

It is possible to have the same filter repeated several times either with the same options of with different options for each. In the example below I have used three Glows. Each with a different colour and different Blur setting:

Three Glows each with different colours and Blurs.

Step Five: Applying Filters to Other Objects:

Filters can only be applied to Text, Buttons & Movie Clips. If you want to apply a Filter to an other type of object such as Clip Art or a Drawn object (such as a rectangle) you have to draw the shape and then convert it to a Movie Clip:

Here is an example:

1. Select the Paint Brush:

2. Paint a shape on Stage (work area): Paint


My painted shape.

3. Return to the Selection Tool:
4. Convert to a Symbol: Modify > Convert to Symbol (F8)
5. For Type select: Movie Clip
6. Click: OK

Note: You will now have a Move Clip with your painted Shape embedded inside the Clip.


The painted Shape is now embedded in a Movie Clip.

Symbols: You can tell that it is a Symbol because when selected with the Selection Tool you can see:

  A cross that depicts the where the X Y zero point is located.
  A circle representing the rotational centre point.

The cross and circle does not tell you what type of Symbol and if you what to know if it is Movie Clip, Button or a Graphic you need to look in the Property Inspector.


Property Inspector with info about the type of Symbol.

Note: Only Movie Clip & Buttons Symbols can have Filters applied.

7. If the Property Inspector is closed, open it: Window > Properties > Properties(Ctrl F3)
8. Click on the Tab: Filters
9. Click on the Add Filter Button:
10. Select the Filters of your choice: Apply Filters
    

    
    I Selected Gradient Glow then a Bevel Filter.

    Note: Even though the visual effect looks like the painted Shape has a Filter applied, it is actually the Movie Clip that has the Filter applied.

Photoshop and other Graphics programs have had Filters for years and I feel Flash has lagged behind and that its was a long time in coming. I think that Filters are a big step forward and really enhance the visual effects that you can create.

Steam Effect created with animated Filters.

Cross Ref: Learn how to use Filters to create an animated steam effect: Animating Smoke, Steam or Dry Ice

 

 

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

… Read More of this tutorial at WebWasp.co.uk Tutorials