Рис. 2-24. Анимация с помощью клиентского сценария

В окне браузера последовательно отображаются кадры анимационного изображения 2-25), в - а затем - в обратной носледо-вательности. Это выглядит так, как будто слово Noise периодически тонет в цветном щуме и затем : - вновь.

Рис. 2-25. Изображения отдельных кадров анимационной последовательности

Также обратите внимание вот на что: чтобы получить подобный эффект при помощи многосекционного файла GIF, размер этого файла удвоить, чина заключается в том, что Вам придется включить в файл кадры в

liijii.iori. а затем в обратной Клиентский сценарий позволя-

ет более тонко управлять процессом отображения кадров, причем относительно простыми средствами, в результате - Вам станут доступны достаточно сложные визуальные эффекты.

Исходный текст документа HTML, в котором имеется сценарий, выполняющий показан в листинге 2-18.

Листинг 2-18 Вы найдете в файле ch02/nolse/noise.litifil на прилагаемом к книге компакт-диске.

В теле документа с помощью тега мы разместили первый кадр анима-<IMG

С помощью параметра NAME мы задали имя Его использует сценарий для ссылки на объект.

Кроме того, в теле нащего документа вызов :. :,

J-PIPT

Создание анимационных изображений

Б следующем примере мы используя динамическую смену растро-

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

На рис. 2-24 мы показали документ HTML именно с такой анимацией.

ird=:filse;

. - - - г- iinpO -ь I -ь

. showNextlmageO , -

В области заголовка ... . HTML находится функции

showNextlmageидвyxглoбaльныxнepeмeнныx;

чаг 1=1:

var aFor*ard=true:

Неременная i хранит номер текущего кадра, стчпражаемнп) в окне браузера. Этотномер вначале увеличивается функцией showNextImage от 1 до 16, азатем снова уменьщается до 1. Изменение номера происходит на 1 (в ту или иную сторону) при каждом вызове функции showlextlnaoe,

В переменной bForwarci хранится направление изменения номера кадра. Значение true соответствует прямому направлению, а значение false - обратному.

KoгдaфyнкцияshowNextlmageпoлyчaeтyнpaвлeниe, она содер-

жимоепеременнойЬРог\уагс1. Еслив неременной находится значение true, функция showNextlmageyBeflH4HBaeT3Ha4eHHe переменной 1, а затем сравнивает результат с числом 17. Когда отображение всех кадров в прямой последовательности заверщено, в переменную bForwarri записывается falae. после чего при следующем вызове функции showNextlmage номер текущего кадра nv увеличится, а уменьшится.

Для отображения очередного кадрафункция showNext Image изменяетзначе-ние свойства sic изображения document. Iitg. как это - ниже:

cacpiant lig arc= imgO -ь i -ь

sliowNixtiBaaeO;

-> </SCRIPT>

</Ьосу>

Она предназначена для отображения очередного кадра анимационной последовательности в окне бразуери. Вот исходный текст функции showKe-xiiiiiajpr function sliowNextlmageO

Функции load4111иасв8 в качестве параметра передается общее количество изображений в анимационной носледовательности. В нашем случае оно равно 18.

Задача функции - заполнить массив . класса Image:

function

var i;

= new

Этот массив определен в области заголовка нашего документа НТМЕ: imgArray = new Аггау(18); Занолнение массива выполняется в цикле:

Имя файла, в котором ... кадра, из стро-

ки : номера кадра, и строки ;

Последнее, что делает функция showNextlmage, ... тем как возвратить управление, - , -- ,i ; функцию 3etTiiiei)ut: ..... iflOj,

Напомним, что функция setTimeout устанавливает таймер. Задержка срабатывания таймера определяется вторым параметром и в нашем случае равна 100 миллисекундам.

Когда таймер а. . начнется вынолнение строки которая

бьша передана функции setTimeout в качестве первого параметра. Мы вызываем после окончания задержки функцию showNextlmage и, таким образом, обеспечиваем вызов этой функции в бесконечном цикле.

Ожидание загрузки всех изображений

Если Вы собираетесь размещать в своем документе НТМЕ анимационное изображение, состоящее из отдельных кадров, которые, в свою расноложе-ны в отдельных файлах, возникает одна проблема. Она связана с трудностью определения времени загрузки [ гх изображений анимационной носледователь-ности через медленные и нестабильные каналы Интернета.

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

В листинге 2-19 мы привели исходный текст документа НТМЕ со сценарием, который работает подобным образом.

Листинг 2-19 хранится в файле ctii2/nciise/noise2.litiiil на прилагаемом к книге компакт-диске.

В теле документа НТМЕ расположен сценарий, вызывающий носледователь-но функции и showNextlmage: