To become proficient at Flash you need to learn how to utilize the amazing community we have for inspiration and code samples. This tutorial will show you how to bring a still photo to life using the mysterious displacement map filter and some Perlin noise. Completely understanding this filter isn't necessary in order to achieve some stunning effects with it. What is important however, is the ability to take some example code and experiment with it until you achieve the effect that you're looking for.
If you'd like to download the files used in this tutorial to practice these techniques, visit www.layersmagazine.com and navigate to the Magazine section. All files are for personal use only.
1. Open the psd file
For this tutorial we'll work with this photo of a canal in Amsterdam and we'll make the water come to life. Open the water.psd file from the tutorial folder in Photoshop CS3 so we can take a look at the layer structure. This file contains two layers with the photo on each layer. The original layer contains the untouched photo. The other layer contains the same photo except the canal has been masked out. Once we get into Flash we'll apply the filter effect to the bottom layer; only the water of that layer will be visible under the masked layer.
Credit: Lee Brimlow
2. Open tha fla file
Now open the water.fla file from the tutorial folder in Flash CS3. This file was set up by creating a new ActionScript 3.0 document, setting the frame rate to 30, resizing the stage to the photo's size, and renaming the first layer to actions and locking it. It's important to note that all the techniques we'll show you here are also available in ActionScript 2.0 but there will be considerable performance increases if you use the latest version of the language.
3. Import the psd file
In Flash, select File>Import>Import to Library to open the import dialog. Select the water.psd file and click the Import to Library button to open the PSD importer. Here you can adjust the settings that affect how the Photoshop file is imported. Click the masked layer and under Publish Settings change the Quality to Custom: 90. Now select the original layer and click the Create Movie Clip for This Layer checkbox. Also set the Quality of this layer to Custom: 90. Click OK to complete the import.
4. Laying out the assets
Click the Insert Layer icon to create a new layer above the actions layer. Double-click on the layer's name and rename it photo. In the Library panel (Window>Library), go into the water.psd Assets folder by double-clicking it, and drag out a copy of the original movie clip onto the stage. In the Property inspector (Window>Properties>Properties), set its X and Y values both to zero and give it an Instance Name of photo. Create another new layer and name it masked. Drag out a copy of the masked image from the Library panel onto the stage and position it to X:0, Y:0 in the Property inspector. You can now lock all of the layers on the Timeline.
5. Start writing the code
Now that we've taken care of the entire visual layout, it's time to start writing the ActionScript code that will turn the photo of the canal into a beautiful moving animation. Select the first keyframe in the actions layer and then open the Actions panel by selecting Window>Actions. One helpful tip for working with the Actions panel is to pin your script so that your code will always be visible no matter what you're clicking on. Click on the Pin Active Script (pushpin) icon to pin the main script into the Actions panel.
6. Create the displacement filter
Copy the code you see above into your Actions panel. On line 1, we create an instance of the BitmapData class that will allow the filter to manipulate our image on a pixel-level basis and we set its width and height to the same as our photo. On line 2 we create an instance of the DisplacementMapFilter and pass to it the BitmapData object we created on line 1. You can look in the help files to see what the rest of the parameters do. As always, experimentation is key here.
7. Some perlin properties
We'll use something called Perlin noise to create the water effect. (You can read more about Perlin noise at the end of this tutorial.) In order to use this we need to create a few variables that the Perlin noise function requires. Copy the code you see above into the Actions panel. On lines 4 and 5 we create a couple of Point objects. These are objects that contain an X and Y position. On line 6, we create a new Array that will hold the two Point objects. An Array is simply an object that holds other objects.
8. Set up the event
In order for us to make the water move we'll need to apply the displacement filter continuously in a loop, altering some of its properties as we go. To create a loop we need to set up the ENTER_FRAME event. This event calls a function every time the player hits a new frame. Since we set our movie to 30 fps, the function will be called 30 times a second. Copy the code you see above into the Actions panel. It creates a new ENTER_FRAME event and tells it to call the loop function every time it fires.
9. Create the loop function
In the last step we told the ENTER_FRAME event to call the loop function each time it fires. In this step we'll actually create this function. Copy the code you see above into the Actions panel. This code creates a new function named loop. Inside of this we'll adjust properties of the displacement filter and then apply this filter to our photo movie clip. Again, if some of this is confusing don't worry. The beauty of Flash is that you don't need to understand all of the code in order to use it!
10. Increment the offsets
Enter the code you see above into the Actions panel. On lines 12 and 13 we made increments for the Point objects we created earlier. Changing these two values can create a wide array of different effects. (The values I chose here were based on my experimenting until a realistic water effect was reached.) Line 12 controls the effect on the X axis and line 13 the Y axis. These values will change 30 times a second and are what causes the displacement filter to do its magic.
11. Create some noise
Copy this line of code shown above into the Actions panel, which calls the perlinNoise function on the bitmap data object we created in Step Six. This function takes a slew of parameters and it's not important that you understand what each of them does. The main thing to take notice of is that we pass in the perlinOffset object that we manipulated in the previous step. (I definitely recommend that you look up perlinNoise in the help files to learn more about what each of the parameters does.)
12. Apply the filter
The last step needed to make this effect work is to simply apply the displacement filter to the photo movie clip. Copy the code shown above into the Actions panel. Here we're setting the filter to the movie clip's filters property. We use square brackets since the filters property is actually an Array designed to hold multiple filters. Test your movie and you should now see the canal come to life. I'm still amazed how realistic this effect looks. If you added some ambient sound people would swear it was video footage.
More About Perlin Noise
As mentioned in the tutorial, generating Perlin noise is the key to making this technique work. It's also vital in the creation of hundreds of other effects like fire, smoke, and clouds. Perlin noise is named after its creator, Ken Perlin, who created the algorithm while doing the special effects for the movie Tron. He won the Academy Award for Technical Achievement in 1997. The actual math behind this technique can get quite complex but if you want to learn more about it you can point your browser at http://en.wikipedia.org/wiki/Perlin_noise. I have tried a number of times to get a firm grasp on all of the details of this algorithm but gave up in the end. The beauty of Flash is that you don't need to understand how everything works in order to use it to create some stunning effects. I mean do Photoshop users actually understand how the Liquify filter achieves its effects?
More Flash & Swish: 
