Иллюстрированный самоучитель по WEB-графике

       

Динамические фильтры


Эффекты постепенного появления (исчезновения) графического изображения и преобразования одной картинки в другую можно получить с помощью совместного применения динамического фильтра и сценария (скрипта). Разумное использование таких эффектов украшает Web-страницу. Есть несколько способов преобразования. Эти способы заранее определены, поэтому от вас лишь требуется указать номер выбранного способа. Ниже приведена таблица с названиями и номерами превращений.



Тип превращения Номер фильтра
Стягивающийся прямоугольник 0
Расширяющийся прямоугольник 1
Стягивающийся круг 2
Расширяющийся круг 3
Стирание вверх 4
Стирание вниз 5
Стирание вправо 6
Стирание влево 7
Вертикальные жалюзи 8
Горизонтальные жалюзи 9
Сужающиеся клетки 10
Закрывающаяся шахматная доска 11
Случайный наплыв 12
Вертикальное деление внутрь 13
Вертикальное деление наружу 14
Горизонтальное деление внутрь 15
Горизонтальное деление наружу 16
Стирание влево вниз 17
Стирание влево вверх 18
Стирание вправо вниз 19
Стирание вправо вверх 20
Случайные горизонтальные полосы 21
Случайные вертикальные полосы 22
Случайный выбор номера (из диапазона 0-22) 23

В следующем примере картинка с изображением карты мира постепенно становится видимой через открывающиеся вертикальные жалюзи. Картинка из файла word.gif сначала невидима (свойство visibility:hidden таблицы стилей). В тэге <DIV> применен динамический фильтр revealtrans, управляющий появлением изображений. Сценарий содержит одну функцию dyn_filter (), которая применяет фильтр (метод apply ()), делает картинку видимой (свойству visibility присваивается значение «visible»), устанавливает тип преобразования (Transition=8) и задает длительность преобразования 2 с (методу play () передается числовой параметр 2). Далее определено, что эффект постепенного появления картинки начнется сразу же после загрузки страницы. Это достигается привязкой функции dyn_filter () к событию ONLOAD в тэге<ВОDУ>.




<HTML>

<HEAD> <TITLE> Динамический фильтр </TITLE>

<SCRIPT >

function dyn fliter () {

Imagel . filters (0) . apply ()

I1 . style .visibility" visible" Imagel . filters (0) .Transition=8

Imagel .filters (0) .play(2)

}

</SCRIPT>

</HEAD>

<BODY ONLOAD="dyn_filter () ">

<DIV ID=Imagel STYLE="position: absolute;

height: 2 00; width: 300; left: 10; top : 10; filter : reveal trans">

<IMG ID=I1 STYLE="position:absolute; '

height : 200; width: 300; visibility : hidden" SRC=world. gif >

<H3 STYLE= "posit ion: absolute; top:210">

Динамическое преобразование картинки с помощью фильтра </НЗ>

</BODY>

</HTML>



Рис. 671. Динамическое преобразование картинки с помощью фильтра «Вертикальные жалюзи»

Заметим, что Image1— это имя (идентификатор) элемента-контейнера, заданного тэгом <DIV>; контейнер содержит единственный элемент (картинку), но мы использовали его только затем, чтобы применить к нему метод applay (), который не поддерживается элементом, созданным тэгом <IMG>; filters — коллекция всех фильтров, фильтр (единственный) указан номером в коллекции: Imagel.filters (0).

Если в приведенной выше программе изменить тип преобразования, например, на 3 (расширяющийся круг) путем замены в теле функции соответствующей записи Image 1. filters (0) .Transition=3, то получится такой эффект, как показано на следующем рисунке (картинка постепенно появляется в расширяющемся круге):



Рис. 672. Динамическое преобразование картинки с помощью фильтра «Расширяющийся круг»

При установке фильтра типа 12 возникает эффект постепенного повышения разрешения изображения путем случайного заполнения пикселами места, отведенного под картинку. Точки картинки постепенно выводятся на экран в случайном порядке.

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



Следующая программа аналогична рассмотренной выше, но в ней применяется другой фильтр (blendtrans), который создает эффект постепенного повышения яркости и насыщенности изображения. Этот фильтр имеет только один параметр — продолжительность преобразования (duration). Обратите внимание, что новая программа получилась из предыдущей путем замены двух строк.

<HTML>

<HEAD> <TITLE> Динамический фильтр </TITLE>

<SCRIPT>

function dyn_filter(){

Imagel.filters(0).Apply()

II . style.visibility="visible"

Imagel.filters (0) .play (2)

</SCRIPT>

</HEAD>

<BODY ONLOAD="dyn_f liter ()">

<DIV ID=Imagel STYLE="posi t ion : absolute;

height : 200; width: 300; left: 10; top: 10; f ilter :

blendtrans ">

<IMG ID=I1 STYLE="position:absolute;

height : 200; width: 300 ; visibility :

hidden" SRC=world. gif >

<H3 STYLE="position:absolute; top:210">

Динамическое преобразование картинки с помощью фильтра

</НЗ>

</BODY>

</HTML>

Попробуйте применить фильтр revealtrans, управляющий появлением картинки, при различных значениях (0-23) параметра transition, который задает тип преобразования. Для этого можно использовать в качестве основы один из рассмотренных выше текстов HTML-программы.

При создании динамических сцен может потребоваться переориентировать картинку при изменении направления ее движения. Например, при изменении направления движения самолета на противоположное следует развернуть его изображение на 180°. Конечно, можно иметь две картинки с самолетом, на одной из которых самолет летит направо, а на другой — налево. Тогда вам потребуется только динамически изменять аргумент атрибута SRC в тэге <IMG>. Другой способ состоит в том, чтобы две картинки поместить на одном и том же месте, но динамически управлять их видимостью так, что в любой момент видна лишь одна картинка. Наконец, можно просто применить соответствующий статический фильтр к одной картинке. Попробуйте самостоятельно разработать эти сценарии.


Содержание раздела