Page 1 of 4 Flash Professional 8 introduced a number of exciting new visual filters — such as drop shadow, blur, glow, and bevel — which reproduce many of the corresponding filters of Photoshop and Fireworks. Of these, most are available via the Property inspector's Filters tab. All filters are accessible to ActionScript, but a few actually require programming. One of these is the DisplacementMapFilter class, which distorts images based on the colors or transparency in a special reference map. Here in Part 1 of this series, you will learn how the displacement map filter works and how to use it to reposition pixels in an imported graphic file. In future installments, you will learn how to produce a handful of very cool visual effects that are only possible with ActionScript, including a magnifying class, fisheye lens, and ripples.
The secret of the DisplacementMapFilter class is that it uses color to decide how to move pixels around. In basic terms, pixels in the original image (the source) are compared against a second image (the displacement map) to produce a filtered final image (the destination). Pixels are re-positioned, or displaced, based on a mathematical formula that uses color to determine how strongly to apply itself.
Displacement can be simple, such as horizontal or vertical, in which case pixels are merely moved from one location to another. It can be complex, such as diagonal, in which case images may be skewed so that they lean or tilt. Combinations of various sorts of displacement can produce magnification, ripples, and other interesting transformations. The possibilities are pretty exciting!
Of course, shapes and symbols can be manipulated in many of these ways without ActionScript. The Transform tool is an age-old standard for manipulating objects by hand; but the DisplacementMapFilter class can actually bend and warp things, including text, symbols, and imported image files! Before Flash 8, this sort of transformation was only possible with shapes. Not only that, but script-based displacement can be applied to select areas of an image, rather than the whole — and, of course, programmed changes can be updated over time and in response to user input.
Let's get to tinkering!
According to the ActionScript 2.0 Language Reference — specifically, the DisplacementMapFilter class entry — this is the formula used to determine pixel displacement:
dstPixel[x, y] = srcPixel[x + ((componentX(x, y) - 128)* scaleX) / 256, y + ((componentY(x, y) - 128) *
Code 1 The DisplacementMapFilter displacement formula
The first time I saw that, I have to admit, my eyes glazed over! In spite of that, I forced myself to work through the algorithm — and I'm glad I did, because it really isn't as difficult as it looks. Let's step through the formula, section by section, and I hope you'll agree.
First, it helps to consider how images are represented and displayed. All images are composed of a rectangular arrangement of pixels. Even if an image depicts a circle, the image itself is actually a rectangle — it's just that the corners are transparent. A 10x10 pixel image, for example, contains 100 individual pixels.
Figure 1 Enlarged illustration of a 10x10 (100 pixel) image, showing individual pixels
A DisplacementMapFilter object starts with the upper left corner of the source image and follows the above formula to decide where to position that pixel in the destination image. Pixels are referred to by x/y coordinate pairs, so the upper left pixel of the source image is (0,0). The displacement object then visits each pixel in turn, moving through (0,1), (0,2), and so on, until it reaches the end — in this case, (9,9).
Figure 2 Decisions, decisions!
Remember, the formula depends on color to make its decision. Not color in the source, but color in the separate displacement map image. One of the simplest displacement maps possible is a map of a single, solid color. Let's use blue.
Figure 3 Decision is measured against displacement map
Let's start with the x position (horizontal), and run it through the displacement formula. Notice that the formula performs the same transformation on x as it does on y. This makes it easy to split the formula down the middle and learn merely half of it: learning half means you actually learn the whole thing in one step!
dstPixel[x, y] = srcPixel[
Code 2 Another look at the formula
In this case, the value of the source image's (0,0) pixel — that is, its horizontal position — is 0. This current value will have a new value added to it, a number determined by the expression highlighted here.
x + ((componentX(x, y) - 128) * scaleX) / 256
Code 3 The expression that determines what number is added to x, whose value is currently 0
In order to replace componentX(x, y) with a meaningful number, we'll have to figure out what componentX means. We're going to take a brief excursion to the ActionScript 2.0 Language Reference, so put a mental bookmark at this spot. When we return, we'll pick up where we left off.
Keywords
ActionScript, AS2, displacement map, filter, filters, DisplacementMapFilter, magnifying glass, fisheye lens, ripples
