Tutorial Details
- Program: Flash
- Estimated Completion Time: 30 mins
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.
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 500×300, black background, and 30 fps.
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′.
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:
package {
import flash.display.Sprite;
import flash.display.SimpleButton;
public class JitteryButton extends Sprite {
private var myButton:SimpleButton; // holds the reference to our simple button
// CLASS CONSTRUCTOR
public function JitteryButton(button:SimpleButton) {
myButton = button; // the button on the stage gets passed in
}
}
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:
package {
import flash.display.MovieClip;
public class Game extends MovieClip {
private var startButton:JitteryButton;
// CLASS CONSTRUCTOR
public function Game() {
// create the jittery button from the simple button on the stage
startButton = new JitteryButton(button1);
// add the new button to the stage
addChild(startButton);
}
}
}
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.
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 277×56, and my image is 310×220.
We’re starting with a neutral grey because that won’t effect our 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.
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.
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’.
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’.
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:
// create the displacement map filter
private function createDMFilter():DisplacementMapFilter {
var mapBitmap:BitmapData = new StaticMap(0,0); // use the bitmap data from our StaticMap image
var mapPoint:Point = new Point(0, 0); // position of the StaticMap image in relation to our button
var channels:uint = BitmapDataChannel.RED; // which color to use for displacement
var componentX:uint = channels;
var componentY:uint = channels;
var scaleX:Number = 5; // the amount of horizontal shift
var scaleY:Number = 1; // the amount of vertical shift
var mode:String = DisplacementMapFilterMode.COLOR;
var color:uint = 0;
var alpha:Number = 0;
return new DisplacementMapFilter(
mapBitmap,
mapPoint,
componentX,
componentY,
scaleX,
scaleY,
mode,
color,
alpha );
}
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:
import flash.display.BitmapData; import flash.display.BitmapDataChannel; import flash.filters.DisplacementMapFilter; import flash.filters.DisplacementMapFilterMode; import flash.geom.Point;
(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):
package {
import flash.display.Sprite;
import flash.display.SimpleButton;
import flash.display.BitmapData;
import flash.display.BitmapDataChannel;
import flash.filters.DisplacementMapFilter;
import flash.filters.DisplacementMapFilterMode;
import flash.geom.Point;
import caurina.transitions.Tweener;
public class JitteryButton extends Sprite{
private var myButton:SimpleButton;
//create a variable to hold the displacement map filter
private var dmFilter:DisplacementMapFilter = createDMFilter();
// CLASS CONSTRUCTOR
public function JitteryButton(button:SimpleButton) {
myButton = button;
// apply the filter to the button
myButton.filters = new Array(dmFilter);
}
// create the displacement map filter
private function createDMFilter():DisplacementMapFilter {
var mapBitmap:BitmapData = new StaticMap(0,0); // use the bitmap data from our StaticMap image
var mapPoint:Point = new Point(0, 0); // this is the position of the StaticMap image in relation to our button
var channels:uint = BitmapDataChannel.RED; // which color to use for displacement
var componentX:uint = channels;
var componentY:uint = channels;
var scaleX:Number = 5; // the amount of horizontal shift
var scaleY:Number = 1; // the amount of vertical shift
var mode:String = DisplacementMapFilterMode.COLOR;
var color:uint = 0;
var alpha:Number = 0;
return new DisplacementMapFilter(
mapBitmap,
mapPoint,
componentX,
componentY,
scaleX,
scaleY,
mode,
color,
alpha );
}
}
}
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:
// returns a random number between the specified range (inclusive)
private function randRange(min:int, max:int):int {
var randomNum:int = Math.floor(Math.random() * (max - min + 1)) + min;
return randomNum;
}
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:
// called on ENTER_FRAME
private function displayStatic(e:Event):void {
dmFilter.scaleX = randRange(fuzzMin, fuzzMax);
dmFilter.mapPoint = new Point(0, randRange(0, -160));
myButton.filters = new Array(dmFilter);
}
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:
private var fuzzMin:int = 0; private var fuzzMax:int = 2;
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:
// start displaying the static effect addEventListener(Event.ENTER_FRAME, displayStatic);
And don’t forget to import the Event class at the top of the JitteryButton file:
import flash.events.Event;
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:
// increase the intensity of the static to MEDIUM
private function setStaticMedium(e:MouseEvent = null):void {
fuzzMin = 2;
fuzzMax = 6;
staticLength = randRange(8, 12);
}
// increase the intensity of the static to HIGH
private function setStaticHigh(e:MouseEvent = null):void {
fuzzMin = 12;
fuzzMax = 25;
staticLength = 12;
}
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:
private var staticLength:int;
// called on ENTER_FRAME
private function displayStatic(e:Event):void {
dmFilter.scaleX = randRange(fuzzMin, fuzzMax);
dmFilter.mapPoint = new Point(0, randRange(0, -160));
myButton.filters = new Array(dmFilter);
staticLength--;
if(staticLength <= 0){
fuzzMin = 0;
fuzzMax = 2;
}
}
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:
// add the rollover event listeners to the button myButton.addEventListener(MouseEvent.ROLL_OVER, onButtonRollOver); myButton.addEventListener(MouseEvent.ROLL_OUT, onButtonRollOut);
Now create the two event handlers that are referenced in those two new lines. These also go in the JitteryButton class:
// called on button ROLL_OVER
private function onButtonRollOver(e:MouseEvent):void {
setStaticHigh();
}
// called on button ROLL_OUT
private function onButtonRollOut(e:MouseEvent):void {
setStaticMedium();
}
To make this all work we’ll have to import the MouseEvent class at the top of our JitteryButton file:
import flash.events.MouseEvent;
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:
import caurina.transitions.Tweener;
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:
// called on button ROLL_OVER
private function onButtonRollOver(e:MouseEvent):void {
Tweener.addTween(myButton, {scaleX: 1.1, time: .5, transition: "easeOutElastic"});
setStaticHigh();
}
// called on button ROLL_OOUT
private function onButtonRollOut(e:MouseEvent):void {
Tweener.addTween(myButton, {scaleX: 1, time: .5, transition: "easeOutElastic"});
setStaticMedium();
}
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:
import flash.media.Sound;
Then we’ll initialize it (add this line just before the constructor function):
private var staticSound:Sound = new StaticSound();
Inside the rollover handler we’ll tell the sound to play:
// called on button ROLL_OVER
private function onButtonRollOver(e:MouseEvent):void {
Tweener.addTween(myButton, {scaleX: 1.1, time: .5, transition: "easeOutElastic"});
setStaticHigh();
staticSound.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:
package {
import flash.display.MovieClip;
public class Game extends MovieClip {
private var startButton:JitteryButton;
private var menuButton:JitteryButton;
// CLASS CONSTRUCTOR
public function Game() {
// create the jittery buttons from the simple buttons on the stage
startButton = new JitteryButton(button1);
addChild(startButton);
// adding a new button is easy!
menuButton = new JitteryButton(button2);
addChild(menuButton);
}
}
}
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!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Cadin Batrack
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Nice effect!
Cool!
looks really cool
that’s kind of like the logo treatment on my website: http://www.inkoperated.com
Hey no offense, but that logo seems a bit misplaced – in that it really steals the attention from everything else
but yours looks like sh****
amazing.
the tutorial is well written and easy to follow and understand;
thanks
Amazing!! and very easy.
Gostei muito do efeito. Realmente ficou muito bom. Só faltou mesmo disponibilizar o som usado no tutorial, mas de qualquer forma, ficou muito mesmo
(translate.google.com: Portugese, for those who’re interested..)
I liked the effect. It really was very good. The only thing missing make the same sound used in the tutorial, but in any event, it was much the same.
This sound would work really well with the demo :)
http://www.sonoflash.com/sounds/#TransformerSignal
I thought showing how to create the sound was a bit beyond the scope of the tutorial, since it’s more about using the DisplacementMapFilter class. Also I used GarageBand to make the sound which is a Mac-only program, so It wouldn’t be useful to everyone.
I’ll keep that in mind for next time though. Thanks for the feedback.
Very nice!!!!
Awesome idea! Thanks!
hi, i love the idea but id really like to be able to make a still image jitter like that. im quite the ametuer when it comes to flash and id really like to learn how to do that seeing as i tried getting your source files and they didnt work for me. hope i can hear from you
If you want to use an image instead of a button you’ll need to modify the JitteryButton class to accept a DisplayObject rather than a SimpleButton.
(Remember to change the myButton var’s datatype to DisplayObject too, and import flash.display.DisplayObject).
You’d probably also want to change the rollover stuff to happen on a timer instead of reacting to the mouse too.
If you can give me a more specific idea of what you are trying to do I’ll try to post some sample code for you.
thanks this is a huge help!
Good read with an interesting result.
Covers a nice range of little overlooked things, and those tuts i love best.
Super!
Really Nice Effect. :)
WOW…now that is pretty cool stuff!!!
great effect. i will try it in my next project. thanks
Amazing … that could be a really game menu.
in this tutorial i did in may last year i explain alot more about how the differend mechanisms work in the displacementmap filter and how it reads the map pixels
http://active.tutsplus.com/tutorials/effects/create-an-impressive-magnifying-effect-with-actionscript-30/
you can also se many other examples on what you can get from the displacement map filter on my website : thonbo.com
i would like to call my self an expert on displacementmapping
i also did a similar effect with dsp.map last winter –
http://thonbo.com/Banners/Nortlander_bigPromo.html
im my example i actually generated the noisemap in the code
both noise and lines can be coded with either a setpixels loop or perlin noise
this ways it will fill under 1 k
in this example i made a stadium crowd come to live with a displacement effect
http://thonbo.com/Banners/stadium3.html
Cool stuff.
I’m definitely not an expert on displacement mapping so people should check out those links if they want to go deeper.
Generating the noise map dynamically is a good idea. I thought for people unfamiliar with displacement mapping it would be helpful to see the image so they would be able to visualize how it is affecting the image.
Very nice turorial
Wow, i came back today from my vacation, and get this amazing tutorial, really nice one, thanks a lot for this, it´s a little complex, the kind of tutorial i like!!
..and the good news is you can expect more from Cadin. 2010 is looking good.. :)
This is absolutely cool!
Nice effect. Good stuff for this site :)
Beautiful i like ““
Thanks for this great tutorial !
I was wondering if it would be easy to change the script to make the effect apply on a MovieClip (on the click of a button) instead of the button itself.
Thanks
It should be fairly easy.
First, you’ll need to modify the JitteryButton class to accept a MovieClip or DisplayObject rather than a SimpleButton.
(Remember to change the myButton var’s datatype too, and import flash.display.DisplayObject or flash.display.MovieClip).
That should allow you to use the effect on a MovieClip.
Next you’ll need to change the rollover and rollout handlers to public so they can be accessed from outside the JitteryButton (JitteryClip?) class.
Then instead of adding the mouse listeners inside the JitteryButton class, you’ll add them to your button, but still specify the handlers inside the JitteryButton class. Something like this:
//myClip is a movie clip on the stage
var myJitteryClip:JitteryClip = new JitteryClip(myClip);
//myButton is a button on the stage
myButton.addEventListener(MouseEvent.ROLL_OVER, myJitteryClip.onButtonRollOver);
Hopefully that makes some sense.
I love you! marry me :D
Sorry, I’m taken. :)
ur a god!
how did u think of that thing>???
I developed this effect for the buttons and other elements in my game Plant Pong.
We also used it a lot when I was helping out on the Exoriare ARG at Smoking Gun.
Hmm. The comment thingy ate the link to Plant Pong for some reason:
Plant Pong
i’m stoped in the step 7…
when i’m testing the movie, i get 1 script error from the JitteryButton as files.
it seems to need one more rightbrace to close the script but even if i add one more, it doesn’t change anything.
could you help me.
You’re right, there’s a brace missing in the code in Step 5. Sorry about that.
Adding one to the end should fix it though.
What is the error you get after adding the extra brace?
Great article! Thanks a lot for explanations.
One question. Could you please create a lesson about distortion+color shifting (similar toTV image noise). I saw this effect on several sites and very interesting about how it was developed.
Funny you should ask. I actually have something like this planned for an upcoming tutorial. It might not be exactly what you’re looking for but it should point you in the right direction.
Very cool. Here’s some TV static code:
http://www.kirupa.com/forum/showthread.php?t=313205
G r e a t ! !
hey Nice tutorial but I cant open the .fla file in you source file. I have flash CS3. it says “Unexpected File Format”
Hey, sorry I didn’t see this comment until now. I’ll try to get a CS3 version up here.
In the meantime you can send me an email and I’ll send you one. (Link from my name to find my email address).
Hi Great tutorial, I was wanting to create a menu like this for a website, could you tell me how to get individual buttons link to html pages, is it even possible?
Thanks
Yes, very possible, but not really related to this tutorial.
You’d just add MouseEvent listeners to each button, and then use flash.net.navigateToUrl() in the event handler methods.
Hi,
I was wondering if someone could help. seems No-one else has Encountered this problem.
At stage 8 I’m getting this error;
“1067: Implicit coercion of a value of type Class to an unrelated type flash.display:SimpleButton.
I have followed this tutorial exactly and I’m now getting this error.
’1046: Type was not found or was not a compile-time constant: SimpleButton.
It sounds like you’re missing the SimpleButton import line
import flash.display.SimpleButton;
That should be in the JitteryButton class.
You might also need that same line in your main document class depending on your publish settings.
FIle Publish Settings > Flash > ActionScript 3.0 : Settings.
if ‘Automatically declare stage instances’ is not checked it can cause errors like this sometimes.
You might also try downloading the source and see what’s different from what you’ve made.
Hope that helps.
Thank you.
that has helped it out. it works fine now. this was a very helpful tutorial!
Hi,
I’ve read through some of your comments especially the one here:
http://active.tutsplus.com/tutorials/effects/create-a-static-distortion-effect-using-the-displacement-map-filter/comment-page-1/#comment-16611
I too would like to get this kind of effect working on an image rather than a button, and you mentioned you’d be able to provide some code snippets if more detail was given so here it goes:
For my example I’ve got a countdown timer working over which I would like the basic static effect going all the time. Every 30 seconds or so, I’d like the more extreme static effect (which happens on hover in your button version).
For me it’s over some text counting down (and I’ll also mix in an image with the extreme static), but for others it would probably just be an image which they’d want this effect over for a logo or something.
Would you be able to elaborate on the code changes which take away the button functionality and just have the basic static running all the time like in your example, with the extreme (hover) static on some kind of timer?
Many thanks in advance, this is such an awesome looking effect you’ve created! :D
First, you’ll need to modify the JitteryButton class to accept a DisplayObject rather than a SimpleButton.
(Remember to change the myButton var’s datatype too, and import flash.display.DisplayObject).
That should allow you to use the effect on any DisplayObject (MovieClip, Bitmap, etc).
In the JitteryButton constructor function create a new Timer instance with the delay time you want between the fuzzes (you can use randRange to set a random delay time).
Remember to import the Timer class.
Attach an event listener to your timer to listen for the TimerEvent.TIMER event.
The function that handles this event should call the setStaticHigh() function.
If you want to add some randomness to the time between fuzzes, you can reset the timer in this function, set a new delay time and restart it.
That should be about it.
If you’re going to have more than one object and you want the fuzzes to be in sync you can have the Timer running outside the Jittery class, and just have the event handler call the setStaticHigh() function on each of the objects when it fires.
Hope that helps.
good one
Sorry I am an absolute noob in the field of Flash and AS.
So if I want to use this as a button in a website, where do I add so when its clicked it will lead to a link?
Do I change it in AS, or can I do it in HTML codes?
For those of you wondering how to dynamically create a noisemap like I was, here’s some code:
package
{
import flash.display.*;
public class StaticMap extends BitmapData
{
private var mapGraphic:Sprite;
public function StaticMap(width:int, height:int)
{
mapGraphic = new Sprite();
mapGraphic.graphics.drawRect(0, 0, width, height);
drawLines();
super(width, height, false, 0×808080);
super.noise(2, 64, 192, 2, true);
super.draw(mapGraphic);
}
private function drawLines():void
{
for (var i:int = 0; i <= mapGraphic.height; i += 2)
{
var colorPicker:int = randRange(1, 2);
var color:uint;
if(colorPicker == 1)
{
color = 0×000000;
}
else if(colorPicker == 2)
{
color = 0xffffff;
}
mapGraphic.graphics.lineStyle(1, color);
mapGraphic.graphics.moveTo(0, i);
mapGraphic.graphics.lineTo(mapGraphic.width, i);
}
}
private function randRange(min:int, max:int):int
{
var randomNum:int = Math.floor(Math.random() * (max – min + 1)) + min;
return randomNum;
}
}
}
it's a StaticMap class I drew up. Just give it the dimensions you want for your noisemap, so, something like this:
var mapBitmap:BitmapData = new StaticMap(310, 220);
Hi! Thanks for the great tutorial you made ;) I’ve tryied to make this buttons using Flash CS3, but i have problems in step 7. When i press ctrl+enter there is an error that i need to insert one more rightbrace in JitteryButton.as. I’ve added this brace, but after that one more message appears:
ReferenceError: Error #1056: Cannot create property button1 on Game.
at flash.display::Sprite/flash.display:Sprite::constructChildren()
at flash.display::Sprite$iinit()
at flash.display::MovieClip$iinit()
at Game$iinit()
Could you please tell what’s wrong there? I would really appreciate it, because i have no idea what to do with this…(
I keep on getting the,
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at JitteryButton()
at Game()
for the few tutorials I’ve tried on this site here.
Sigh!
Very interesting effect, i like it.
I have a problem in my line 30
package {
import flash.filters.DisplacementMapFilter;
import flash.display.Sprite;
import flash.display.SimpleButton;
import flash.display.BitmapData;
import flash.display.BitmapDataChannel;
import flash.filters.DisplacementMapFilterMode;
import flash.geom.Point;
public class JitteryButton extends Sprite {
private var myButton:SimpleButton; // holds the reference to our simple button
//create a variable to hold the displacement map filter
private var dmFilter:DisplacementMapFilter = createDMFilter();
// CLASS CONSTRUCTOR
public function JitteryButton(button:SimpleButton) {
myButton = button; // the button on the stage gets passed in
// apply the filter to the button
myButton.filters = new Array(dmFilter);
}
}
}
// create the displacement map filter
private function createDMFilter():DisplacementMapFilter {
var mapBitmap:BitmapData = new StaticMap(0,0); // use the bitmap data from our StaticMap image
var mapPoint:Point = new Point(0, 0); // position of the StaticMap image in relation to our button
var channels:uint = BitmapDataChannel.RED; // which color to use for displacement
var componentX:uint = channels;
var componentY:uint = channels;
var scaleX:Number = 5; // the amount of horizontal shift
var scaleY:Number = 1; // the amount of vertical shift
var mode:String = DisplacementMapFilterMode.COLOR;
var color:uint = 0;
var alpha:Number = 0;
return new DisplacementMapFilter(
mapBitmap,
mapPoint,
componentX,
componentY,
scaleX,
scaleY,
mode,
color,
alpha );
}
and the error message like this
Line 30 1013: the private attribute may be used only on class property bla bla….
please help me to solve this problem..
T.T
i’m stuck…
It’s because you define createDMFilter outside of the package. It should be inside both the class and the package like this.
package {
import flash.filters.DisplacementMapFilter;
import flash.display.Sprite;
import flash.display.SimpleButton;
import flash.display.BitmapData;
import flash.display.BitmapDataChannel;
import flash.filters.DisplacementMapFilterMode;
import flash.geom.Point;
public class JitteryButton extends Sprite {
private var myButton:SimpleButton; // holds the reference to our simple button
//create a variable to hold the displacement map filter
private var dmFilter:DisplacementMapFilter = createDMFilter();
// CLASS CONSTRUCTOR
public function JitteryButton(button:SimpleButton) {
myButton = button; // the button on the stage gets passed in
// apply the filter to the button
myButton.filters = new Array(dmFilter);
}
// create the displacement map filter
private function createDMFilter():DisplacementMapFilter {
var mapBitmap:BitmapData = new StaticMap(0,0); // use the bitmap data from our StaticMap image
var mapPoint:Point = new Point(0, 0); // position of the StaticMap image in relation to our button
var channels:uint = BitmapDataChannel.RED; // which color to use for displacement
var componentX:uint = channels;
var componentY:uint = channels;
var scaleX:Number = 5; // the amount of horizontal shift
var scaleY:Number = 1; // the amount of vertical shift
var mode:String = DisplacementMapFilterMode.COLOR;
var color:uint = 0;
var alpha:Number = 0;
return new DisplacementMapFilter(
mapBitmap,
mapPoint,
componentX,
componentY,
scaleX,
scaleY,
mode,
color,
alpha );
}
}
}
wow amazing.
With what tools or program I can do this, please…
Nice effect, thank you for sharing.
I got it up and running till step 15, so i tried your sample but it didn’t work. and i put caurina in the directory. can anyone help me out here? thx
What version of Flash Pro are you running?
Flash pro 5.5
flashplayer 10.2
could you tell me what i should have in my directory?