Учебник Macromedia Dreamweaver (стр. 97 из 135)

Этот код включает определение двух функций: setupAnimation И movelmage. Первая функция выполняет некие предустановки, необходимые для правильной работы анимации, а вторая — осуществляет само движение аними-рованного элемента. (В дальнейшем вы тоже старайтесь давать вашим функциям "говорящие" имена.) Но, кроме этих функций, здесь есть и другой код, выполняющийся при загрузке страницы:

var dx, timer; dx = 2;

В этом коде мы объявляем две переменные: dx и timer. Первая из них задает значение приращения, "скачка" анимации, и с ней все понятно. Мы присваиваем ей значение 2; если движение анимированного элемента покажется вам слишком медленным, вы можете это значение увеличить. А вот второй переменной займемся поближе.

Рис. 13.2. Анимированный элемент страницы

Уже не раз говорилось, что анимация всегда привязывается к системному таймеру. Это позволяет проигрывать одно и то же "кино" и на самых медленных, и на самых быстрых компьютерах с одинаковой скоростью. Как правило, делается это следующим образом: пишется специальная функция-обработчик события "тика" этого системного таймера, которая и заставляет анимированный элемент двигаться.

Для того чтобы привязать функцию-обработчик к событию "тика" таймера, нужно использовать метод setintervai объекта window. Этот метод принимает в качестве параметра строку с именем функции-обработчика и интервал между "тиками" в миллисекундах, а возвращает особое значение, называемое идентификатором интервала. Впоследствии, когда анимация должна быть закончена, нужно будет вызвать метод ciearinterval объекта window, передав ему этот самый идентификатор. Но, т. к. у нас анимация проигрывается бесконечно, то и метод ciearinterval не вызывается, и идентификатор, хранимый в переменной timer, фактически не нужен.

Функцию-обработчик мы привязываем к "тику" таймера в функции setupAnimation. Ее код приведен ниже.

function setupAnimation() {

timer = window.setlnterval("movelmage()", 100) }

Эта функция, в свою очередь, является обработчиком события onLoad, возникающего сразу по окончании загрузки Web-страницы. В качестве параметров метода setlnterval МЫ Передаем ИМЯ функции movelmage И 100 -

интервал между "тиками" в миллисекундах. Обратите также внимание на следующий код:

С его помощью к событию onLoad привязывается функция-обработчик.

Обратимся теперь к функции, выполняющей движение анимированного элемента, — movelmage. Ее код выглядит так:

function movelmage() {

livediv.style.pixelLeft += dx;

if (livediv.style.pixelLeft + livediv.style.pixelWidth >= document.body.clientwidth) dx = -dx;

if (livediv.style.pixelLeft <= 0) dx = -dx; }

Разберем его по строкам. Первая строка:

livediv.style.pixelLeft += dx;

или, как понятнее,

livediv.style.pixelLeft = livediv.style.pixelLeft + dx;

увеличивает значение свойства pixelLeft объекта style на значение переменной dx. Свойство pixelLeft представляет значение горизонтальной координаты элемента страницы в пикселах.

Вторая строка:

if (livediv.style.pixelLeft + livediv.style.pixelWidth >= document.body.clientwidth) dx = -dx;

осуществляет проверку, дошел ли анимированный элемент до правого края страницы. Для этого мы сначала складываем значение уже знакомого свойства pixelLeft и нового свойства pixeiwidth, представляющего ширину элемента страницы в пикселах. После этого мы сравниваем получившуюся сумму со значением свойства ciientwidth объекта body и, если она стала больше этого значения, меняем знак у значения переменной dx. Свойство ciientwidth представляет ширину элемента страницы в пикселах, а объект

body — саму Web-страницу, значит, выражение body.clientwidth возвращает значение ширины всей страницы в пикселах.

И последняя, третья, строка:

if (livediv. style. pixelLeft <= 0) dx = -dx;

осуществляет проверку, дошел ли анимированный элемент до левого края страницы. Для этого мы просто сравниваем значение свойства pixelLeft с нулем и, если оно стало меньше нуля, изменяем знак значения переменной dx.

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

Кстати, рассмотренный нами Web-сценарий не будет работать только в Navigator 4.x. Чтобы он работал в этой капризной программе, его нужно немного изменить. Измененный код страницы 13.2.htm по имени 13.3.htm приведен ниже. Подробно описываться он не будет — попробуйте разобраться с этим кодом сами, на досуге.

if (livediv. style. pixelLeft <= 0) dx = -dx;

<TITLE>Анимация</TITLE> <SCRIPT>

var dx, timer; dx = 2;

function move Image ( ) {

document. livediv. left += dx;

if (document. livediv. left >= document .width) dx = -dx;

if (document. livediv. left <= 0) dx = -dx;

}

function setupAnimation ( ) {

timer = window. setlnterval ("movelmage () ", 100) }

</SCRIPT> </HEAD>

<BODY onLoad="setupAnimation() ;

" STYLE="font-size: 72; font-weight: bold">

<DIV ID="div1" STYLE="top: 50; left: 50; position: absolute;

z-index: 1">J</DIV> <DIV ID="div2" STYLE="top: 50; left: 100; position: absolute;

<DIV ID="div3" STYLE="top: 50; left: 150; position: absolute;

z-index: l">v</DIV> <DIV ID="div4" STYLE="top: 50; left: 200; position: absolute;

z-index: -l">a</DIV> <DIV ID="livediv" STYLE="top: 80; left: 0; width: 30;

position: absolute">'<IMG SRC="tips.gif"></DIV> </BODY> </HTML>

Правда, исправленный вариант страницы перестанет работать в других Web-обозревателях...

Вот такая анимация...

Web-сценарии — подход Dreamweaver. Поведения

Сейчас, когда все объяснено, вам может показаться, что писать Web-сценарии проще простого. Однако это совсем не так. Web-программирование — штука очень и очень непростая. Хотя бы из-за того, что вам придется держать в голове множество имен объектов, классов, свойств, методов и событий, с помощью которых создается тот или иной эффект. Вдобавок многие вещи делаются отнюдь не так очевидно, как, скажем, анимация. Поверьте, но над первыми своими Web-сценариями автор сидел не один час.

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

Когда вы задаете какое-либо поведение для того или иного элемента страницы, Dreamweaver автоматически создает необходимый для этого набор Web-сценариев и помещает его в HTML-код страницы. Это делается незаметно от пользователя; пользователь просто работает со списком созданных им поведений, отображаемым в специальном списке. Таким образом, Dreamweaver дает возможность прикоснуться к Web-программированию даже тем Web-дизайнерам, которые не знают ни языка JavaScript, ни объектной модели документа.

Все поведения, поддерживаемые Dreamweaver, приведены в табл. 13.2.

Таблица 13.2. Поведения, поддерживаемые Dreamweaver

Название в терминологии Dreamweaver	Описание
Call JavaScript	Вызов фрагмента JavaScript-кода или функции, написанной на JavaScript
Change Property	Изменение значения свойства какого-либо объекта
Check Browser	Перенаправление посетителей на разные Web-страницы в зависимости от программы Web-обозревателя
Check Plugin	Перенаправление посетителей на разные Web-страницы в зависимости от того, установлен ли у них нужный модуль расширения Web-обозревателя
Control Shockwave or Flash	Управление проигрыванием фильма Shockwave или Flash
Drag Layer	Позволяет посетителю перетаскивать свободно позиционируемый элемент страницы с места на место
Go to Timeline Frame	Перемещение к заданному кадру анимации
Go to URL	Перенаправление посетителей на другую Web-страницу
Hide Pop-Up Menu	Скрытие меню гиперссылок, выведенного ранее на экран с помощью поведения Show Pop-Up Menu
Jump Menu	Привязывается самим Dreamweaver при создании раскрывающегося списка гиперссылок. Пользователю обычно не нужно создавать это поведение самому
Jump Menu Go	Привязывается самим Dreamweaver при создании раскрывающегося списка гиперссылок к кнопке Go (Перейти). Пользователю обычно не нужно создавать это поведение самому
Open Browser Window	Открытие какой-либо Web-страницы в новом окне Web-обозревателя
Play Sound	Проигрывание аудиофайла
Play Timeline	Запуск проигрывания анимации
Popup Message	Вывод окна-предупреждения с заданным текстом и кнопкой ОК
Preload Images	Загрузка из файлов графических изображений. Эти изображения могут использоваться затем для вывода на страницу в качестве ответа на событие
Set Nav Bar Image	Создается самим Dreamweaver при создании полосы навигации. Пользователю обычно не нужно создавать это поведение самому

Set Text of Frame	Помещение какого-либо текста во фрейм
Set Text of Layer	Помещение какого-либо текста в свободно позиционируемый элемент
Set Text of Status Bar	Помещение какого-либо текста в строку статуса окна Web-обозревателя
Set Text of Text Field	Помещение какого-либо текста в поле ввода
Show Pop-Up Menu	Вывод на экран меню гиперссылок, например, в ответ на помещение посетителем страницы курсора мыши над каким-либо элементом страницы
Show-Hide Layers	Показ или скрытие свободно позиционируемого элемента
Stop Timeline	Остановка проигрывания анимации
Swap Image	Замена одного графического изображения другим
Swap Image Restore	Восстановление изначально присутствовавшего на странице графического изображения после его замены с помощью поведения Swap Image
Validate Form	Проверка введенных в форму данных на правильность (о формах см. главу 16)

Осталось привести список поддерживаемых Dreamweaver событий (табл. 13.3). Имейте, однако, в виду, что это не полный список поддерживаемых событий — некоторые события используются достаточно редко, и поэтому описываться здесь не будут.