Beginning Flash: Filters and Color Effects


To truly make an animation the best it can be, the understanding and implementation of Filters and Color Effects is essential. These techniques range from the commonly used Alpha Color Effect, to the image enhancing Bevel Filters. However, these aspects of Flash can be overused and unnecessarily incorporated into a project, so it is worthwhile to know when and how to use these techniques, so as to best target their effectiveness.

Preface
This tutorial is for Adobe Flash CS4. Due to several changes and upgrades in CS4, prior versions of Adobe Flash will not work the same as the latest version. Also, the animations shown below are low quality web images, and the pixelated appearance will not be prominent in Flash.

Programs you will need:
-Adobe Flash CS4

Color Effects

Alpha

Step 1
Open Flash and create an new document (either ActionScript 2.0 or 3.0) with a width of 550 px and a height of 400 px. Also, make sure the frame rate is set to 24 fps.

Step 2
Create a square with a matching width and height of 190 px. You may also choose any color for the square.

Step 3
Right Click (CTRL + Click on Mac) on the rectangle, and select Convert To Symbol.

Picture 2

Step 4
Name the rectangle “square” and save it as a Movie Clip.

c3

Step 5
Go to the Timeline and right click on Frame 60. Select Insert Keyframe. You can also press F6 to insert the frame.

Step 6
Click anywhere on the Timeline and select “Create Motion Tween.”

Step 7
Be sure that the square is selected on Frame 1 and go into the Motion Editor.

Step 8
Scroll down to the Color Effect section, click the plus sign, and select Alpha.

Step 9
Set the Alpha to 0%. This will make the square look invisible.

c1

Step 10
Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your square should fade in as demonstrated below.

green

Brightness

Step 1
Follow Steps 1-6 in the Alpha Tutorial.

Step 2
Select the square on Frame 60 and go into the Motion Editor.

Step 3
Scroll down to the Color Effect section, click the plus sign, and select Brightness.

Step 4
Set the Brightness to -100%. This will make the square look black.

c4

Step 5
Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your square should shift to black as shown below.

bright

Tint

Step 1
Follow Steps 1-6 in the Alpha Tutorial.

Step 2
Select the square on Frame 60 and go into the Motion Editor.

Step 3
Scroll down to the Color Effect section, click the plus sign, and select Tint.

Step 4
Set the Tint Color to your personal preference, and the Tint amount to 100%.

Step 5
Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your square should shift to become your selected color as shown below.

tint

Filters

Drop Shadow

Step 1
Follow Steps 1-6 in the Alpha Tutorial.

Step 2
Select the square on Frame 1 and go into the Motion Editor.

Step 3
Scroll down to the Filter section, click the plus sign, and select Drop Shadow.

Step 4
Set the Blur X and Blur Y to 1 px and the Strength to 50%.

c5

Step 5
Go to Frame 60 and go into the Motion Editor.

Step 4
Under the Drop Shadow Options, set the Blur X and Blur Y to 30 and the Strength to 500%.


Step 5
Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your square’s drop shadow should become more intense as shown below.

shadow

Blur

Step 1
Follow Steps 1-6 in the Alpha Tutorial.

Step 2
Select the square on Frame 1 and go into the Motion Editor.

Step 3
Scroll down to the Filter section, click the plus sign, and select Blur.

Step 4
Set the Blur X and Blur Y to 1 px and the Quality to High.

Step 5
Go to Frame 60 and go into the Motion Editor.

Step 4
Under the Blur Options, set the Blur X and Blur Y to 30 and the Quality to High.

c6

Step 5
Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your square should become gradually more blurry as shown below.

blur

Glow

Step 1
Follow Steps 1-6 in the Alpha Tutorial.

Step 2
Select the square on Frame 1 and go into the Motion Editor.

Step 3
Scroll down to the Filter section, click the plus sign, and select Glow.

Step 4
Set the Blur X and Blur Y to 1 px, the Strength to 100% and the Quality to High, and choose a color for the glow.

Step 5
Go to Frame 60 and go into the Motion Editor.

Step 4
Under the Glow Options, set the Blur X and Blur Y to 30 and the Strength to 500%.

c7

Step 5
Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your square should glow as shown below.glow

Bevel

Step 1
Follow Steps 1-6 in the Alpha Tutorial.

Step 2
Select the square on Frame 1 and go into the Motion Editor.

Step 3
Scroll down to the Filter section, click the plus sign, and select Bevel.

Step 4
Set the Blur X and Blur Y to 1 px, the Strength to 100% and the Quality to Low.

Step 5
Go to Frame 60 and go into the Motion Editor.

Step 4
Under the Bevel Options, set the Blur X and Blur Y to 20 and the Strength to 100%.

c8

Step 5
Press CTRL + Enter (Command + Enter on Mac) to test the movie. Your square’s bevel should become more apparent as shown below.bevel

The remaining filters (gradient glow and gradient bevel) are simply variations of the previously shown methods and work in the same fashion as their normal counterparts.

That’s all for the Motion Tween! I’m taking suggestions on what to cover for next week’s tutorial, so please leave comments with what you’d like to see.

If you have any questions or comments, please feel free to e-mail me at matthew.bitley@gmail.com.

This entry was posted in Tutorials. Bookmark the permalink.

One Response to Beginning Flash: Filters and Color Effects

  1. Ted Rex says:

    Great tutorial for Flash. I made this one of my three links for the day on my daily design blog:
    http://designthoughtfortheday.blogspot.com/

    Ted