Advertisement
  1. Code
  2. Effects
Code

Create a Static Distortion Effect Using the Displacement Map Filter

by
Difficulty:IntermediateLength:LongLanguages:

Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Activetuts+. This tutorial was first published a year ago in January, 2010.

In this tutorial you'll learn how to use AS3's DisplacementMapFilter class to create a reusable static distortion effect for button rollovers.


Final Result Preview

Let's take a look at the final result we will be working towards:


Step 1: About Displacement Mapping

A displacement map works by using the color values from one image to alter the position of pixels in another image. This effect is often used to make a flat graphic 'wrap' around a dimensional image. We're going to use it here to distort a button so it looks like it's receiving static interference.

displacement example

You can read more about displacement mapping here.


Step 2: Set up Your Flash File

Create a new Flash file (ActionScript 3).

Your movie settings will vary depending on your game. For this demo I'm setting up my movie as 500x300, black background, and 30 fps.

Flash file setup

Step 3: Create a Simple Button

Create a new Button symbol on the stage (Insert > New Symbol). Design the 4 states for your button. The exact design should be something that matches your game. Something glowy and semi-transparent works well with this effect.
I used a font called Genetrix Square for mine, but you should use something that matches the look of your game.

Give your button an instance name of 'button1'.

button properties

Step 4: Test

If you save and test your movie (Control > Test Movie) now you should see your button on the stage responding to the mouse with the rollover states you designed. Like this:


Step 5: Create the JitteryButton Class

We need to add custom functionality to our button. We'll accomplish this by creating a new custom class and putting our simple button inside it.

Create a new ActionScript file named 'JitteryButton.as'. Save this file in the same directory as your main Flash file. Add this code to create the wrapper for our button:

All this code does so far is accept the simple button and store a reference to it. We'll add more functionality later.


Step 6: Create the Game Class

Create a new ActionScript file named 'Game.as'. This will be the document class for our movie. Save it in the same directory as the main Flash file.

This code will add our custom button wrapper around the button on the stage:

This code creates a new instance of our custom JitteryButton class and passes it the button on the stage ('button1').

Of course your document class will end up looking much different since it will have the code for your game in it. Here we're just concerned with the code for our button.

Back inside your Flash file set the document class to 'Game'. Remember, you don't include the file extension here.

set the document class

Step 7: Test Again

If you save and test your movie again at this point you should see exactly the same thing as when we tested in Step 4. The only difference is that now our code is set up to be able to add our custom behavior.


Step 8: Create the Displacement Map Image

We'll now create the image of the static pattern that we'll use to distort our button graphic.

Open Photoshop and create a new image filled with neutral grey (#808080). The image should be slightly wider than your button and about 3 or 4 times as high. My button is 277x56, and my image is 310x220.

We're starting with a neutral grey because that won't effect our image.

create a new image

Step 9: Add Noise

We'll now add a little bit of noise to our image. This won't be very noticeable in our static effect, but it gives it a bit of extra shimmer. You can skip this step if you like.

Duplicate the background layer and name the new layer 'Noise'. You should now have 2 layers filled with neutral grey. Select the new Noise layer and choose Filter > Noise > Add Noise. Set Amount to 120% and Distribution to Uniform. Check Monochromatic.

Hit OK.

Set the 'Noise' layer to 10% opacity.

add noise to the Noise layer

Step 10: Add Lines

Create a new layer called 'Lines'. Now use a 1px pencil brush to add some horizontal black and grey lines to the image.

Remember how these lines will effect our image: anything darker than neutral will shift our image in one direction and anything lighter will shift it in the other.

draw horizontal lines

Step 11: Save the Displacement Map Image

Choose File > Save for Web & Devices and save your image as an 8 color gif named 'staticMap.gif'.

save for web

Step 12:

Back in Flash, import the 'staticMap.gif' to your library (File > Import > Import to Library...). Open the linkage properties, check Export for ActionScript, and set the Class name to 'StaticMap'.

import the image

We can now reference this image in our code by using the StaticMap class name.


Step 13: Create the Displacement Map Filter

Add this function to your JitteryButton class:

This function simply creates the Displacement Map Filter using the BitmapData from our StaticMap image. This doesn't need to be in it's own function, I'm just doing it for clarity.

In order for it to work we'll need to import these classes at the top of our JitteryButton class:

(You can learn more about the DisplacementMapFilter class in the AS3 documentation)


Step 14: Apply the Filter

We'll now create a variable to hold the filter. We apply it to the button by setting the button's 'filters' property to an array that contains our filter.

Here's the JitteryButton class so far (lines 18 and 25 are new):


Step 15: Test Again

If we save and test the file now we can see the displacement map filter being applied to our button:

You can see how the horizontal lines we drew in the StaticMap are shifting the pixels in our button left and right. The amount of the shift is dependent on the darkness of the lines in the image and the scaleX setting in our Displacement Map Filter.

Unfortunately, the static isn't animating so it looks pretty lame. Let's fix that now...


Step 16: Add the randRange Function

This is a simple function that returns a random integer within a specified range:

I find it makes it a little easier to generate random values. We'll be randomizing a few different values for our static effect so it will come in handy.

Add it to your JitteryButton class.


Step 17: Animate the Displacement Map Filter

There are a couple of ways we can animate the static effect. The first will be to alter the amount of horizontal shift applied to our button. This is done through the scaleX property of the DisplacementMapFilter.

We can also animate the position of the StaticMap image in relation to our button. This will ensure that the same areas of the button aren't always getting shifted.

To animate the effect we'll add a function called 'displayStatic' that gets called every frame to update these two properties of the filter. Add this function to your JitteryButton class:

The first line of this function randomizes the amount of horizontal shifting to a value between the variables fuzzMin and fuzzMax. Add these two variables to your JitteryButton class:

The second line of the displayStatic function randomizes the Y position of the StaticMap in relation to our button. We already told the filter to use our StaticMap image so we just need to update the position.

The third line just re-applies the filter to our button.

The last thing we need to do to get this animating is to add the ENTER_FRAME event listener. Add this line to the JitteryButton constructor function:

And don't forget to import the Event class at the top of the JitteryButton file:


Step 18: Test Again

If you save and test the movie now you'll see the effect is making our button shimmer and jump:

That's pretty cool, but we want the effect to react to the mouse as well. Onward...


Step 19: Adjust the Intensity of the Effect

We'll now add two functions to adjust the intensity of the jitter effect. We'll call the effect we currently have Low intensity so we'll add a setting for Medium and High intensity. Add these functions to your JitteryButton class:

You can see that we're adjusting the intensity by setting the values of the fuzzMin and fuzzMax variables. This way our displayStatic function will use these new values when it sets the horizontal shift of the filter.

We also added a variable called staticLength. We'll use this to set how long the more intense effect should last (the number of frames) before returning to low intensity. Add this variable to your JitteryButton class and modify your displayStatic function like so:

This new code decrements the staticLength variable and resets fuzzMin and fuzzMax to the low intensity values once the value of staticLength reaches zero.


Step 20: Set up the Button Rollover Handlers

To make our button react to the mouse we need to add two mouse event listeners and an event handler function for each.

Add the mouse listeners in the constructor function of your JitteryButton class:

Now create the two event handlers that are referenced in those two new lines. These also go in the JitteryButton class:

To make this all work we'll have to import the MouseEvent class at the top of our JitteryButton file:

Now when our button detects a ROLL_OVER event it will call the event handler which in turn calls our setStaticHigh function. This function increases the values of fuzzMin and fuzzMax (used for setting the horizontal shift) for the duration specified by the staticLength variable.


Step 21: Add the Scale Effect

We could stop here. Our effect is animating nicely and reacts to the mouse rollovers. I still feel like something is missing here though. Let's add a little scaling effect.

You'll need to download the Tweener Library for this step if you don't already have it. Place the 'caurina' folder in your project directory and import the Tweener classes at the top of your JitteryButton file:

Tweener allows us to add some nice scaling effects with only a couple lines of code. We can add one line to each of our rollover event handlers:

Here we're adding an animation to the rollover handler that scales the button's scaleX property to 110% over .5 seconds. We're using an elastic transition type to give it that bouncy feel. In the rollout handler we're doing the same thing in reverse, scaling it back to 100%.

You can learn more about how to use Tweener in the Tweener documentation.


Step 22: Add Sound

The last thing we need to do make this effect complete is to add some sound. I made my sound effect in Garage Band. You can make your own or try to find one online.

Once you have one you like, import it into your library and set the linkage to export as 'StaticSound'.

To add it to our JitteryButton we first need to import the Sound class:

Then we'll initialize it (add this line just before the constructor function):

Inside the rollover handler we'll tell the sound to play:

Now we're good to go. Test your movie and everything should be working. If your button or sound isn't working right check the source files to see my completed JitteryButton class.


Step 23: Add More Buttons

The cool thing about building this effect as a separate class that wraps our button is that we can easily reuse it on other buttons.

If you want to add more buttons to your game menu just create a new button and add it to the stage. Give it the instance name 'button2'. Then inside your document class (the 'Game.as' file) create a new JitteryButton and pass it the new button. Here's how that might look:


Conclusion

You will almost certainly need to change this code a bit to get it to fit into the structure of your game. Hopefully this tutorial will give you a good starting point though.

If you want to change the look of this effect you can try using different types of images for your StaticMap graphic, and adjusting the values for fuzzMin and fuzzMax.

This is my first tutorial so let me know if there's anything I can do better next time. Thanks for reading!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.