Полезное » Статьи для веб-мастера » Мультимедийные эффекты для MS Internet Explorer » Свойства и методы фильтров

Фильтры и превращения. Свойства и методы.

Создание визуальных эффектов фильтрами и превращениями

Доступ к фильтрам из сценариев

Особенности дизайна фильтров

Примеры программирования визуальных фильтров

Превращения

Превращения при межстраничных переходах

Полное описание свойств и методов визуальных фильтров

Свойства и методы фильтров. Описание.

Свойства и методы превращений. Описание.

Microsoft Internet Explorer 4.0 (и выше) представляет для использования следующие фильтры и превращения:

Фильтры (filters): alpha, blur, chroma, dropShadow, flipH, flipV, glow, gray, invert, light, mask, redirect, shadow, wave, xray
Превращения (transitions): blendTrans, revealTrans

Фильтры и превращения имеют свойства и методы для управления их поведением. Способы задания и использования визуальных фильтров можно найти в ПЕРВОЙ ГЛАВЕ.

Свойства и методы фильтров. Описание.

Все фильтры и превращения имеют одно общее свойство enabled отвечающее за "разрешенность" соответствующего визуального эффекта. Значение этого свойства равное true разрешает применение эффекта, иначе (при значении false) запрещает.

ALPHA

Фильтр alpha управляет степенью видимости объекта.

Свойства. (в скобках приведен тип доступа к переменной из сценария: ч – чтение; з – запись.)

style (ч/з) – вид градиента прозрачности. Возможные значения (целые числа):
0 – градиента нет (значение по умолчанию).
1 – линейный градиент.
2 – радиальный градиент.
3 – градиент по четырехугольнику (rectangle gradient).
opacity (по умолчанию 100), finishOpacity (по умолчанию 0) (ч/з) – степени непрозрачности.
finishX, finishY (ч/з) – x и y-координаты точки, где градиент заканчивается.
startX, startY (ч/з) – x и y-координаты точки, где градиент начинается.

Описание. Свойство непрозрачности (opacity) принимает значение в интервале 0..100 (0 – полностью прозрачный объект; 100 – полностью не прозрачный). Если стиль (style) фильтра равен 0 (нет градиента), то имеет значение только это свойство; другие свойства не имеют значение. Оно применяется ко всему объекту.

При других значениях style объект отрисовывается с соответствующим градиентом. При этом степень непрозрачности изменяется от начального уровня (opacity) до конечного (finishOpacity).

Линейный градиент (style=1) изменяет свойство непрозрачности фронтом из точки p1 (startX, startY) в точку p2(finishX, finishY). Для этого проводится отрезок (виртуально) из точки p1 в p2 и строятся перпендикуляры к этому отрезку в этих точка. Эти перпендикуляры и ограничивают эффект перехода фильтра alpha.

В случае радиального градиента (style=2) и градиента по четырехугольнику (style=3) эффект отображается из центра объекта к краям по окружности или по четырехугольнику соответственно.

Примеры. Ниже приводятся примеры для HTML-элемента SPAN

<span style="background-color:red; width:100; height:100;

filter:alpha(opacity=0, finishOpacity=100, дальнейшие параметры в примерах);">

</span>

1. style=1, startY=0, finishY=100, startX=0, finishX=100 2.style=1 3.style=1, startX=0, finishX=100 4.
style=1, startY=0, finishY=100, startX=finishX 5. style=1, startY=0, finishY=100

<span style="background-color:red; width:70; height:70;

filter:alpha(opacity=0, finishOpacity=100, дальнейшие параметры в примерах);">

</span>

6. style=2 7. style=3

Примечания.

Отрисовка градиентными методами более плавна для небольших объектов. Для протяженных объектов видна дискретность прорисовки.
Хотя в MSDN Library (справке по продуктам Microsoft) и говориться, что свойства finishX, finishY, startX, startY используются для всех градиентных методов, на самом деле (по крайней мере для MSIE4.0) они не влияют на эффекты с style=2 и 3.
Свойства finishX, finishY, startX, startY задаются в процентах!!! (В MSDN Library утверждается, что они задаются в пикселах).
По MSDN Library: незаданные свойства finishX, finishY, startX, startY не имеют значений по умолчанию. Однако, если сравнить примеры 1 и 5, 2 и 3, то станет ясно, что на самом деле значения по умолчанию startX=0, finishX=100.
Неверно заданные свойства opacity, finishOpacity, finishX, finishY, startX, startY устанавливаются в 100.

BLUR

Фильтр blur создает эффект движения объекта.

Свойства.

add (ч/з) – свойство, которое показывает, будет ли добавляться первоначальное изображение к изображению, полученному после применения фильтра. Принимает значение true(1) (значение по умолчанию) и false(0).
direction (ч/з) – направление, против которого происходит "движение". Отсчитывается от 12 часов по часовой стрелке. Допустимые значения кратные 45^o (т.е. 0, 45, 90, 135, 180, 225, 270 (значение по умолчанию), 315).
strength (ч/з) – интенсивность фильтра. Допустимые значения (1..100).

Описание. Работа фильтра заключается в сдвиге объекта так, что хвост следа оставался в направлении direction. Величина сдвига определается свойством strength. При этом изображения, соответствующие определенным фазам сдвига накладываются друг на друга, создавая впечатление размазанности (движения). В зависимости от свойства add на это полученное изображение можно наложить первоначальное (add=1). Это может быть необходимым, потому что при значениях свойства strength больших 15..20 текст становиться практически нечитаемым.

Примеры. Ниже приводятся примеры для SPAN

<span style="width:100%; background-color:yellow; color:blue; font-size:24pt; text-align:center; filter:blur(параметры в примерах);">
</span>

blur() blur(strength=5) blur(add=0,strength=10) blur(add=1,strength=10) blur(direction=45, strength=10)

Примечания.

Судя по всему, значение strenght является числом пикселов, на которое сдвигается объект. Хотя по MSDN Library допустимым значением для strenght является интервал 1..100, можно задавать и значения большие 100, однако, начиная с определенного значения, изображение приобретает вид, который не соответствует данному эффекту.
Для свойства direction также можно задавать любые значения (даже отрицательные). При этом фильтр приводит их к интервалу 0..360^o и приравнивает к ближайшему кратному 45.

CHROMA

Фильтр chroma переводит определенный цвет изображения в прозрачный (transparent).

Свойства.

color (ч/з) – цвет, с которым работает фильтр (задается по правилам HTML).

Примеры. Ниже приводятся примеры для SPAN

<span style="width:100%; color:blue; font-size:24pt; text-align:center;">
</span>

без фильтра chroma фильтр chroma(color=blue)

Примечания.

Эффект наиболее заметен для изображений с чистыми или преобладающими цветами. Для фотографий или различных "сглаженных" изображений, где цвета плавно меняют оттенок, фильтр не имеет значимого эффекта.
Для изображений фильтр chroma имеет тоже значение, что и прозрачный (transparent) цвет (например, для gif-файлов).

DROPSHADOW

Фильтр dropShadow отображает силуэт определенного цвета для выбранного объекта, создавая иллюзию, что объект находится над страницей, отбрасывая тень.

Свойства.

color (ч/з) – цвет падающей тени (задается по правилам HTML).
offX,offY (ч/з) – смещение падающей тени от объекта вдоль осей x и y соответсвенно.
positive (ч/з) – определяет, будет ли объект отбрасывать тень от прозрачных или непрозрачных пикселов. Принимает значение false(0) и true(1 – по умолчанию) соответственно.

Примеры. dropShadow(Color=gold,offX=3,offY=3, positive=1)

background-color:red color:red
dropShadow(Color=gold,offX=2,offY=2, positive=0)

Примечания.

Изображение должно иметь прозрачные цвета.
Особого пояснения требует свойство positive. В случае, если оно равно 1, контур изображения, составленный из непрозрачных (nontransparent) цветов, заливается цветом color, сдвигается на (offX, offY) пикселов и на него накладывается первоначальное изображение. Создается эффект "обычной" тени.
Если positive=0, контур изображения, составленный из непрозрачных (nontransparent) цветов, заливается цветом color, создавая маску отсечения. Первоначальное изображение сдвигается над этой маской на (offX, offY) пикселов. Элементы изображения, которые вышли за пределы маски отсечения, теряются (не отображаются). Таким образом, можно подобрать такие цвета, что будет иллюзия, что изображение утоплено (см. пример) или рельефно (если цвета фона и текста совпадают, см. пример выше).

FLIPH / FLIPV

Фильтр flipH отражает объект симметрично центральной вертикальной оси (вдоль горизонтальной плоскости).

Фильтр flipV отражает объект симметрично центральной горизонтальной оси (вдоль вертикальной плоскости).

Свойства. нет

Примеры.

flipH: filter:flipH()
flipV: filter:flipV()

Примечания.

Не перепутайте функции. В русской транскрипции они имеют противоположенное значение.

GLOW

Фильтр glow создает для объекта эффект сияния (или, буквально, сильного жара, раскаленности).

Свойства.

color (ч/з) – цвет сияния (задается по правилам HTML).
strength (ч/з) – интенсивность эффекта.

Примеры.

glow(Color=orange)
glow(Color=orange, Strength=5)
glow()

Примечания.

Изображение должно иметь прозрачные цвета.
Сравнивая первые два примера, можно предположить, что значение по умолчанию для Strength равно 5.
Из последнего примера видно, что значение по умолчанию для Color равно Red.

GRAY

Фильтр gray отображает объект в градациях серого

Свойства. нет

Примеры.

без фильтра gray с фильтром gray INVERT

Фильтр invert обращает цвета объекта

Свойства. нет

Примеры. Ниже приводятся примеры с различными свойствами стилей, но одинаковым визуальным представлением

style="color:#00ACFF; filter:invert();"

style="color:#FF5300"

Примечания.

Инвертированный цвет получается применение операции NOT к цвету элемента. (в примере, #FF5300 = NOT #00ACFF).

LIGHT

Фильтр light моделирует освещение объекта различными источниками цвета. Т.к. описание свойств фильтра достаточно объемно, оно вынесено на отдельную страницу (см. light).

MASK

Фильтр mask отображает прозрачные (transparent) символы определенным цветом, а непрозрачные делает прозрачными.

Свойства.

color (ч/з) – цвет маски (задается по правилам HTML).

Примеры.

без фильтра mask фильтр mask(color=blue)

Примечания.

Изображение должно иметь прозрачный цвет, иначе не будет заметно никакого эффекта.

REDIRECT

Фильтр redirect конвертирует объект в DAImage-объект, т.е. в изображение, которым может манипулировать Microsoft DirectAnimation.

Свойства. нет

Методы.

elementImage() – возвращает объект Microsoft DirectAnimation image (DAImage).

Примечание.

Этот фильтр требует браузер MS Internet Explorer 5.0 (и выше).
В задачи данной работы не входит описание Microsoft DirectAnimation. Более подробную информацию см. в справочной системе Microsoft.

SHADOW

Фильтр shadow отрисовывает в определенном направлении "боковые" грани объекта, создавая впечатление объемности объекта.

Свойства.

color (ч/з) – цвет тени (задается по правилам HTML).
direction (ч/з) – направление, против которого происходит "движение". Отсчитывается от 12 часов по часовой стрелке. Допустимые значения кратные 45^o (т.е. 0, 45, 90, 135, 180, 225, 270, 315).

Примеры. shadow() shadow(Color=gold) shadow(color=gold, direction=225)

Примечания.

Изображение должно иметь прозрачные цвета.
Относительно direction см. фильтр blur.
Из примеров видно, что значение по умолчанию для цвета тени black, для direction – 225^o.
В отличии от dropShadow этот фильтр не позволяет влиять на "объемность" объекта, т.е. управлять координатой z.

WAVE

Фильтр wave выполняет синусоидальное преобразование объекта вдоль вертикальной оси.

Свойства.

add (ч/з) – определяет, будет накладываться первоначальное изображение, на изображение с примененным эффектом (подробнее см. blur).
freq (ч/з) – целое число волн на изображение
lightStrength (ч/з) – контрастность (%) при переходе от минимума к максимуму волны (0 – низшая контрастность (нет контрастности), 100 – высшая контрастность (цвет в минимуме черный)).
phase (ч/з) – фаза синусоиды в %. 0% = 100% = 2пи. (по умолчанию 0%)
strength (ч/з) – амплитуда синусоиды (1..100).

Примеры.

wave() wave(add=1, strength=1) wave(strength=3) wave(strength=3, lightStrength=100) wave(strength=3, lightStrength=50) wave(strength=3, lightStrength=50, freq=3)

Примечания.