Домашние Картинки разработка веб-сайтов в Челябинске
(351) 777-94-64info@homepictures.ru
/Полезное/Статьи для веб-мастера/Мультимедийные эффекты для MS Internet Explorer/Визуальные превращения

Визуальные превращения

Превращения

Превращения

Превращения – визуальные фильтры, изменяющиеся во времени. Их роль – в визуальной смене представления элемента при переходе от одного состояния к другому. Общий метод для этого смена SRC атрибута изображения, чтобы изменить одно экранное изображение на другое. Предоставляемые Interener Explorer 4.0 превращения обеспечивают эффект анимации при переходе к новому изображению. Они могут также применяться, чтобы заставить элемент постепенно появляться или постепенно исчезать, изменяя свойство видимости (visibility).

Фильтр-превращение при необходимости может вызывать событие onfilterchange. (Внимание. Согласно документации Microsoft (MSDN Labrary January 2000), это событие "вызывается, когда визуальный фильтр меняет состояние или завершает превращение". Однако в моем браузере это событие вызывается только при завершении фильтром превращения.) Обработчик этого события может использовать свойство srcFilter объекта event для получения всей необходимой информации о фильтре, это событие вызвавшем. Таким образом, сценарий может знать, когда и какое фильтр-превращение завершился. (В моем браузере свойство event.srcFilter недоступно, т.к. равно null).

Превращения имеют свойства и методы для доступа из сценариев. Interner Explorer 4.0 предоставляет для использования два фильтра-превращения: blendTrans и revealTrans. Эти фильтры имеют три общих свойства: duration, enabled и status (revealTrans имеет еще одно свойство – transition, тип перехода). Свойство duration выражает длительность визуального превращения в секундах. Свойство enabled имеет тот же смысл, что и для обычных визуальных фильтров. Свойство status (доступное только для чтения) отражает состояние фильтра-превращения.

Методы фильтров-превращений позволяют применять и проигрывать эти фильтры. У них всего три общих метода: apply, play и stop. Общий метод применения превращений заключается в следующей схеме:
1) элемент, к которому применяется эффект, "замораживается" применением метода apply. В "замороженном" состоянии элемент не реагирует на смену визуального превращения;
2) меняется визуальное превращение (например, сменой атрибута src тэге IMG или стилевого свойства visibility);
3) элемент "размораживается" методом play. С этого момента в течении времени, определяемого свойством duration, происходит постепенное превращение текущего представления элемента во вновь назначенное. Это превращение определяется типом фильтра-превращения и типом превращения (для revealTrans).
4) В любое время сценарий может завершить превращение вызывом метода stop. Следующий пример показывает, как выполнить автоматическую смену между изображениями.

<HTML>
<HEAD><TITLE>Transition Blend Демо</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
function startTrans(){
   if (SampleID.filters.blendTrans.status == 0){
       SampleID.filters.blendTrans.Apply();
       SampleID.style.visibility =
            (SampleID.style.visibility == "hidden")?"visible":"hidden";
       SampleID.filters.blendTrans.Play()
   }
}
</SCRIPT>
<p>Щелкните на изображении</p>
<div style="position:absolute; top:80; left:10; width:357; height:100;
	background-color:red; color:white; text-align:center;"
        onclick="startTrans()">
	<font size=+3><i>Microsoft</i><br>Internet Explorer 4.0</font>
</div>
<div id=SampleID style="position:absolute; top:80; left:10; width:357;
     height:100; background-color:blue; color:yellow; text-align:center;
     filter:blendTrans(duration=1);visibility:visible"
        onclick="startTrans()">
      <font size=+2>Фильтры-превращения предоставляет 
      пожалуй лишь один браузер в мире!!!</font>
</div>
</BODY>
</HTML>

(см. результат)

В приведенном примере показан фильтр Blend Transition, показывющий постепенное превращение одного изображения в другое. Второй фильтр Reveal Transition представляет собой множественную смену картинки, т.е. с помощью нескольких элементов; тип этих элементов задается свойством transition. В принципе, Blend Transition есть предельный случай Reveal Transition при уменьшении элементов до пикселей.

Следующий HTML код – пример фильтра Reveal Transition. В выпадающем списке приводятся типы превращений фильтра, при смене которых эффект отображается на картинке. Через определенное время (3000 мсек) эффект проигрывается вновь, чтобы восстановить прежнее состояние изображения. Для изменения визуального представления меняется свойство стиля visibility на hidden (невидимость). При этом верхняя картинка, полностью закрывающая нижнюю, начинает изчезать (применением метода play), проявляя под собой ниже лежащее изображение. При восстановлении visibility присваивается значение visible (видимость) и верхняя картинка восстанавливает свой вид, закрывая нижнюю.

<HTML>
<HEAD><TITLE>Transition reveal Демо</TITLE>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
var wait=false;
var t;
var tipText;
function startTrans(fselect){
   if ((wait && fselect)
	||
	SampleID.filters.revealTrans.status != 0)
		type.selectedIndex=t;
   else {
	t = type.options[type.selectedIndex].value;
	SampleID.filters.revealTrans.Apply();
	SampleID.filters.revealTrans.transition=t;
	SampleID.style.visibility =
		(SampleID.style.visibility == "hidden")?"visible":"hidden";
	SampleID.filters.revealTrans.Play()
   }
}
function FilterChange(){
  if (!wait){
	tipText=tip.innerText;
	tip.innerText="Ждите 3 сек";
	wait=true;
	setTimeout("startTrans(false)",3000);
  }
  else {
	wait=false;
	tip.innerText=tipText;
  }
}
</SCRIPT>
<p id=tip>Выберите тип из списка</p>
<select id=type onchange="startTrans(true)">
<option value=0>Box in
<option value=1>Box out
<option value=2>Circle in
<option value=3>Circle out
<option value=4>Wipe up
<option value=5>Wipe down
<option value=6>Wipe right
<option value=7>Wipe left
<option value=8>Vertical blinds
<option value=9>Horizontal blinds
<option value=10>Checkerboard across
<option value=11>Checkerboard down
<option value=12>Random dissolve
<option value=13>Split vertical in
<option value=14>Split vertical out
<option value=15>Split horizontal in
<option value=16>Split horizontal out
<option value=17>Strips left down
<option value=18>Strips left up
<option value=19>Strips right down
<option value=20>Strips right up
<option value=21>Random bars horizontal
<option value=22>Random bars vertical
<option value=23>Random
</select>
<br>
<div style="position:absolute; top:30; left:180; width:357; height:100;
	background-color:red; color:white; text-align:center;">
	<font size=+3><i>Microsoft</i><br>Internet Explorer 4.0</font>
</div>
<div id=SampleID style="position:absolute; top:30; left:180; width:357;
	height:100; background-color:blue; color:yellow; text-align:center;
	filter:revealTrans(duration=1);" onfilterchange="FilterChange()">

	<font size=+2>Фильтры-превращения предоставляет пожалуй лишь один
	браузер в мире!!!</font>
</div>
</BODY>
</HTML>

(см. результат)

В этом примере преведены несколько особенностей при программировании фильтров-превращений.

1) Показан корректный код "обращения" с фильтром. Как уже упоминалось ранее, пока фильтр "делает" свою работу обращение к его методам и изменение свойств безрезультатно. Поэтому необходимо проверять свойство status фильтра, равное 0, когда фильтр отработал (см. функцию startTrans).

2) Показан пример использования функции-обработчика события onfilterchange. Когда фильтр отработал первый раз срабатывает обработчик события onfilterchange – FilterChange. Переменная wait устанавливается в значение true, блокируя попытки изменения фильтра с помощью выбора из окна списка (вызов функции FilterChange таким образом устанавливает переменную fselect в true). По истечении 3 секунд срабатывает таймер, включенный при первом возникновении события onfilterchange (функция setTimeout("startTrans(false)",3000)). При этом вызывается функция startTrans, устанавливая fselect в false и запуская работу фильтра. При отработке фильтра отработчик события onfilterchange сбрасывает wait в false, разрешая тем самым выбор фильтра окном списка.

3) Этот пример также показывает различия между асинхронными и синхронными изменениями. Смена свойства innerText элемента синхронна - действие завершено, когда присваивание выполнено, т.е. браузер перерисовывает элемент незамедлительно. Изменение свойства visibility – асинхронно. Хотя на самом деле смена свойства visibility немедленна, визуальное состояние элемента не полностью обновлено, пока не отработает фильтр. Если фильтр применяется к графическому изображению необходимо дождаться полной его загрузки. Правильный сценарий должен ждать, пока не возникнет событие onreadystatechange для изображения, проверяя пока свойствo readyState изображения не будет установлено в "complete".

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

Microsoft Internet Explorer 4.0+ предоставляет еще одну интересную возможность дизайна Ваших страниц. Можно применять фильтры-превращения ко всему окну браузера (вернее к его клиентской части) при загрузке и покидании Web страницы.

Эти фильтры записываются в МЕТА тэгах, помещенными в раздел HEAD Web страницы. МЕТА тэг определяет тип превращения, продолжительность, а также должен ли эффект выполняться при загрузке и покидании страницы.

Синтаксис для межстраничных превращений состоит из трех частей: определение, когда событие должно быть проиграно (атрибут http-equiv), продолжительность перехода, и какого вида эффект перехода должен быть использован (атрибут content). Следующие два примера показывают, как установить переходы после входа и ухода на/со страницы.

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=1)" />

<META http-equiv="Page-Exit" CONTENT="RevealTrans(Duration=2.500,Transition=6)" />

Первый МЕТА тэг заставляет выполнять переход типа 1 продолжительностью 4 секунды, когда пользователь входит на страницу, второй (продолжительностью 2.5 секунды) - типа 6, когда пользователь покидает страницу. Вставьте эти тэги в любую страницу и загрузите ее в браузере.

Есть четыре события, которые могут инициируют переходы между страницами: Page-Enter, Page-Exit, Site-Enter и Site-Exit. Свойство продолжительности (duration) имеет максимальное значение - 30 секунд.

Примечание на последок. Согласно MSDN, эффекты-превращения правильно работают только на системах, цветовая палитра которых не менее 256 цветов.

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

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

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