Flash tutorial on how to animate filters to create a fuzz Effect.	Home • Food • Mates • Members • Tutorials • Forum • Buy Templates • Contact Us

Flash Tutorial - Animated Filter Fuzz Effect

Free Flash Tutorial

The filters that come bundled with Flash are a fast and easy way to create sophisticated visual effects. This tutorial will teach you how to apply filters (Blur and Glow filters) to a Movie Clip and then animate it. You will learn how to animate Flash filters without any complicated ActionScript. The special effects created through the use of Flash filters enable you to achieve stylish graphic effects all created within Flash.

For this tutorial we'll be making this animation:

Example: Download the Flash file Beg 040a

Click by Click: If you would like to view this tutorial without all the notes: Click by Click

Step One: Setting up the Document

1. Open a New Flash Document: File > New (Ctrl N)
2. If the General Tab is not selected, select it:
3. Select Flash Document: Flash File (ActionScript 2.0) or (ActionScript 3.0)

Note: There is no ActionScript used in this tutorials so the version is not important. If you are not sure which version of ActionScript to use just default back to ActionScript 2.0. You can always change this to ActionScript 3.0 later by going to File > Publish Settings > Flash > ActionScript version.

4. Click: OK

Important Note: You will not see the Filters unless your Movie is set to be published in the Flash 8 Player.

5. Go to: File > Publish Settings
6. If the Flash Tab is not selected, select it:

Note: If you cannot see the Flash Tab make sure the Flash Box is selected: (look under the Formats Tab).

7. For Version select: Flash Player 8 (or up)

Note: The Flash filters will not be visible unless you select Player 8 (or up) so if you are using an earlier version of Flash you will not be able to follow this tutorial.

8. Click: OK
   
   
9. Go to: Modify > Document (Ctrl J)
10. Set the size: 250 x 50
11. Set the Frame Rate to: 24

Note: The default is 12fps (frames per second) which maybe a bit slow for animation. If you predict your file will end up being large stick to 12fps because any additional quality maybe lost as the users computer struggles to download the frames quickly enough. The choice between 12 and 24fps is always a compromise between quality and download speed. 24fps is higher quality but 12fps downloads faster.

12. Click: OK
    
    
13. If your Property Inspector is closed, open it: Window > Properties > Properties (Ctrl F3)

Your settings should look similar to this:



Settings as seen in the Property Inspector.

Step Two: Making the Text Movie Clip

1. Select the Text tool:
2. Click on Stage and type: webwasp (or whatever you like)
3. Go back to the Selection tool:
4. In the Property Inspector select: Static Text
5. Select any Font styles that you might want: Font Settings

Here are my settings:




My Font settings.

6. If your text is not selected, select it: Click Text



7. Go to: Modify > Convert to Symbol (F8)
8. Name the Symbol: Text
9. For Type select: Movie Clip
10. For Registration select: Centre



11. Click: OK

Step Three: Animating the Text Symbol

1. If the Library is closed, open it: Window > Library (F11) or (Ctrl L)

In the Library you will see your Symbol:



2. Drag your symbol out of the Library and into the centre of the: Stage



3. Select Frame 1 in the: Timeline
4. In the Property Inspector select: Tween > Motion



5. Select Frame: 170


Frame 170 is selected.

Note: 170 frames is approximately 7 seconds. If you wanted your animation longer you could select a frame further up the number scale or visa versa for a shorter animation.

6. Insert a Keyframe: Insert > Timeline > Keyframe (F6)



7. Select Frame: 4
8. Insert a Keyframe: Insert > Timeline > Keyframe (F6)



9. Select your: Text Movie Clip
10. If the Filter Panel is closed, open it: Window > Properties > Filters
11. Click on: Blur



This will add Blur to the Text MC:


The Text MC now has a small amount of Blur.



12. Select Frame: 10
13. Insert a Keyframe: Insert > Timeline > Keyframe (F6)



14. Select your: Text Movie Clip
15. In the Filter Panel click on: Glow



This will add Glow to the Text MC:


The Text MC now has a small amount of Blur and Glow.



16. Select Frame: 24
17. Insert a Keyframe: Insert > Timeline > Keyframe (F6)



18. Select your: Text Movie Clip
19. In the Filter Panel click on:
20. Change the Blur setting to: Blur X & Blur Y: 100



This will add additional Blur to the Text MC:


The Blur is now set to 100 x 100.



21. Select Frame: 70
22. Insert a Keyframe: Insert > Timeline > Keyframe (F6)
23. Select your: Text Movie Clip
24. In the Filter Panel click on:
25. Change the Blur setting to: Glow X & Glow Y: 100
26. Change the Blur setting to: Glow Strength: 1000



This will add additional Blur to the Text MC:


The Blur is now set to 100 x 100.

27. Continue adding Keyframes and changing the Filter settings: Add Keyframe & Filter Settings

Here are the settings that I have used for each frame:

Frame:	1	4	10	24	70	80	90	125	145	170
Blur X:	-	5	5	100	100	6	31	5	2	0
Blur Y:	-	5	5	100	100	6	31	5	2	0
Glow X:	-	-	5	5	100	28	0	2	50	0
Glow Y:	-	-	5	5	100	28	0	2	50	0
Glow Strength:	-	-	100	100	1000	300	0	300	160	0

28. Test Your Movie: Control > Test Movie (Ctrl Enter)
29. Close the Test Window:

Cheers, Flash-o-holic.

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