задача: разобраться в том, как работают программные графические фильтры Flash8: ColorMatrixFilter, ConvolutionFilter, DisplacementMapFilter.

Рецепт по большей части является демонстрацией того, что можно сделать при помощи программных графических фильтров Flash 8. Сам механизм использования фильтров в скрипте довольно прост — но зачастую совершенно неясно, какие параметры нужно задать фильтру, чтобы получить желаемое изображение. (Ранее опубликована первая часть рецепта).

назад к списку уроков и рецептов

1. как пользоваться фильтрами

2. ColorMatrixFilter: трансформации цвета

3. ConvolutionFilter: смешивание пикселей исходного изображения

4. DisplacementMapFilter: смещение пикселей исходного изображения

5. демо файл


1. Как пользоваться фильтрами

Подробный ответ дан в первой части рецепта.
в начало

2. ColorMatrixFilter: трансформации цвета

Трансформации цвета клипа, возможные с помощью данного фильтра, аналогичны трансформациям, которые мы раньше (до 8 флэша) задавали с помощью класса Color и метода setTransform().

Трансформация цветов пикселей с помощью матрицы размерностью 4х5 не является изобретением Макромедии — этот метод давно используется в компьютерной графике. Подробное описание механизма можно легко найти в сети (например, здесь), поэтому я опишу процесс только в общих чертах, но чуть подробнее, чем это сделано в хэлпе.

ColorMatrixFilter имеет один-единственный параметр — матрицу трансформации цветов. Выглядит она следующим образом:
    R    G    B    A    +   
R N N N N N
G N N N N N
B N10 N11 N12 N13 N14
A N15 N16 N17 N18 N19
Общая формула расчета цвета с трансформацией такова:
новый_красный = N0*красный + N1*зелёный + N2*синий + N3*альфа +N4

новый_зелёный = N5*красный + N6*зелёный + N7*синий + N8*альфа +N9

новый_синий = N10*красный + N11*зелёный + N12*синий + N13*альфа +N14

новая_альфа = N15*красный + N16*зелёный + N17*синий + N18*альфа +N19
Где "красный", "синий", "зелёный", "альфа" — это исходные значения цветов пикселя перед трансформацией. При применении фильтра к клипу, каждый пиксель изображения подвергается трансформации.

Пятая колонка в матрице (N4, N9, N14, N19) — это сдивиги цветов и альфа канала. Числа в этой колонке просто прибавляются к исходным значениям цвета соответствующих каналов.

В пятой колонке обычно содержатся значения от -255 до 255. В остальных колонках обычно содержатся значения от -1 до 1. В принципе можно задавать значения, выходящие за эти пределы, но это не дает никаких сочетаний результирующего цвета, отличных от тех, которые можно получить при нормальных значениях.

Внимание! Параметр matrix фильтра ColorMatrixFilter НЕ является двумерным массивом. Это одномерный массив, содержащий строки матрицы трансформации по порядку сверху вниз. Именно поэтому в матрице трансформации элементы пронумерованы построчно.

Поупражняться с фильтром можно здесь.

В восьмом флэше кроме класса ColorMatrixFilter для трансформаций цвета существет также класс flash.geom.ColorTransform, применяющийся в сочетании c классом Transform и свойством transform мувипклипов. То есть, можно использовать связку ColorTransform+Transform+MovieClip.transform, возможно это будет удобнее для простых трансформаций цвета. В любом случае, функциональность этой связки для трансформаций цвета не шире, чем функциональность фильтра ColorMatrixFilter.

в начало

3. ConvolutionFilter: смешивание пикселей исходного изображения

Пожалуй, самый нетривиальный из фильтров пакета flash.filters.* Он занимается смешиванием пикселей исходного изображения: цвет каждого из пикселей смешивается со всеми пикселями в определенном радиусе, что может дать различные эффекты вроде выдавливания (emboss), усиления граней (sharpen), скоса (bevel), размытия (blur) и т. п.

"Радиус" смешивания задается матрицей. В этой матрице мы указываем множители для соответствующих пикселей. Параметр matrix данного фильтра имеет вид одномерного массива (как и matrix фильтра ColorMatrixFilter), поэтому в качестве параметров фильтру надо передавать и размерности матрицы (как иначе он их определит?).

Два других важных параметра: делитель (divisor) и уклон (bias). Чтобы понять, за что они отвечают, рассмотрим формулу вычисления результирующего пикселя:
цвет_пикселя = (сумма произведений 
                значения цвета каждого из пикселей в радиусе матрицы 
                на его множитель в матрице) / делитель + уклон
В демо файле к рецепту ConvolutionFilter демонстрируется с матрицей 4х4. Рассмотрим этот случай подробнее. Матрица фильтра выглядит следующим образом:
    0    1    2    3   
0 N N N N
1 N N N N
2 N N N10 N11
3 N12 N13 N14 N15
Центральный элемент в матрице — N — отвечает за множитель "центрального" пикселя, цвет которого вычисляется из суммы окружающих. Его цвет складывается из:
цвет0,0* N0 + цвет0,1* N1 + цвет0,2* N2 + цвет0,3* N3 
+
...
+ 
цвет3,0* N12 + цвет3,1* N13 + цвет3,2* N14 + цвет3,3* N15
После сложения всё это делится на делитель и получившееся частное складывается со значением уклона. Эта же операция производится с каждым пикселем изображения.

Остальные параметры фильтра: color, alpha, preserveAlpha, clamp. Их описание можно найти в хэлпе.

Поэкспериментировать с фильтром можно здесь.


в начало

4. DisplacementMapFilter: смещение пикселей исходного изображения

Как видно из названия фильтра, речь о смещении пикселей исходного изображения в соответствии с некой картой. Для каждого пикселя исходного изображения выполняются следующие действия:
  • Берем пиксель (x,y) из карты смещения
  • Считаем смещение в зависимости от цвета этого пикселя (dx, dy)
  • Смотрим, куда нужно сместить соответствующий пиксель исходного изображения (x+dx, y+dy)
  • Рисуем пиксель в вычисленной точке, если эта точка находится в допустимыых границах
Вычисление точки, в которую нужно сместить исходный пиксель, подчиняется следующему правилу:
новый_пиксель[x] = исходный_пиксель[x]
                   +
                   (каналХ_цвета_пикселя_карты[x, y] - 128)
                   * масштаб_X / 256


новый_пиксель[y] = исходный_пиксель[y] + (каналY_цвета_пикселя_карты[x, y] - 128) * масштаб_Y / 256
При создании фильтра мы указываем, какой из каналов цвета карты использовать при смещении по оси икс, и какую по оси игрек. Для вычисления смещения может использоваться любой из четырёх каналов: красный(1), зелёный(2), синий(4) и альфа(8). То есть, при вычислении смещения берется не общее значение цвета пикселя, а значение цвета только того канала, который указан в параметрах фильтра для данной оси.

Из формулы видно, что смещение вызывается отличием значения канала цвета пикселя карты от 128 (середина диапазона 0—255). Если пиксель карты будет полностью серым и непрозрачным (цвет #808080), то он не будет смещать пиксели исходного изображения ни при каком выбранном канале.

Поэкспериментировать с фильтром можно здесь.
в начало

5. Демо файл

Здесь демонстрируется действие трех фильтров пакета flash.filters.*:
  • ColorMatrixFilter — трансформация цвета
  • ConvolutionFilter — смешивание пикселей
  • DisplacementMapFilter — смещение пикселей исходного изображения
Остальные шесть фильтров этого пакета рассматриваются в первой части рецепта.


Итак, демонстрация возможностей фильтров. Часть 2.






в начало
назад к списку уроков и рецептов


Корректировать материал помогли: