Learn how to use bitmap noise to create and animate effects like TV static, clouds, a waving flag, and heat haze. Using the BitmapData class we’ll be looking at the noise and perlinNoise functions to generate the effects, then with the DisplacementMapFilter class we’ll create the wave effects.
One thing we’re going to do is keep things reusable. I prefer writing classes with the intent that I’ll be using them again in the future, whether I know I will or not. There have been countless times where I’ve needed something that I’d already written and simply needed to import the class and tweak some settings. In this tutorial we’ll end up writing some classes that get used in other classes. We’re not extending these classes, just using instances of them, you’ll see what I mean a little later.
Step 1: Create a new Flash File
Start a new Flash File (Actionscript 3.0). In this example I set my movie to 500×350. To set your size, click the Edit button beside the current size in the Properties panel.
Step 2: Create the Background Movieclip
Go to Insert > New Symbol to create a new movieclip and call it Background. Check the Export for Actionscript Box. Make sure Export in frame 1 is checked, the Class is Background and the Base class is flash.display.Movieclip. Hit OK.
Step 3: Import the Background Photo
For this piece I decided to get a nice photo of a desert road (not included in the source due to licensing). You should already be in the Background movieclip from the previous step, but if not, go into it. Go to File > Import > Import to Stage and import your photo. Make sure it’s at the 0,0 point. Now go back to your main timeline and drag the Background from the library to the stage. Get it set to x: 0 and y: 0. We’ve added the background to the stage to make it easier to position our other elements.
Step 4: Create the Foreground Movieclip
Just the like the Background, go to Insert > New Symbol to create a new movieclip and call it Foreground. (The reason we’re making a Foreground and a Background separately is because the Heat wave effect looks odd if applied to everything.) Check the Export for Actionscript Box. Make sure Export in frame 1 is checked, the Class is Foreground and the Base class is flash.display.Movieclip. Hit OK.
Step 5: Import the TV
I found a good retro TV image that was shot from slightly above, so you can see the top of the TV too (not included in the source due to licensing). It works well with the perspective of the background. I cut out the screen and added a shadow in Photoshop. You should already be in the Foreground movieclip from the previous step, but if not, go into it. Go to File > Import > Import to Stage and import your TV. It doesn’t matter where it’s positioned at this point because we need to get the Foreground to 0,0 before we can properly position the other elements.
