ДВАДЦАТЬ ПЯТЫЙ УРОК

Анимация без анимации

Вообще анимацию можно делать по-разному. И в разных программах. Для сегодняшнего урока нам не понадобятся никакие сторонние программы. Все рисунки мы сделаем в Adobe Photoshop. Вам нужно сделать несколько изображений одинакового размера и назвать их соответственно sl1.gif, sl2.gif... sln.gif. Я решила ограничиться четырьмя изображениями размерами 100х100, и назвала их sl1.gif, sl2.gif, sl3.gif и sl4.gif, и сохранила их в папке image

Все остальное мы сделаем с помощью Java Script. В любом месте странички, между тегами head и /head, там где вы решите вставить рисунок напишите следующий код:

<script language="JavaScript"> // Предварительная загрузка изображений numimg = 0 imgslide = new Array() imgslide[0] = new Image() imgslide[1] = new Image() imgslide[2] = new Image() imgslide[3] = new Image() imgslide[0].src = "image/sl1.gif" imgslide[1].src = "image/sl2.gif" imgslide[2].src = "image/sl3.gif" imgslide[3].src = "image/sl4.gif" //чередование изображений function demoslides() { document.images[0].src = imgslide[numimg].src numimg++ if (numimg == 4) numimg = 0; setTimeout("demoslides()", 1000) } </script> <body bgcolor="#FFFFFF" onLoad="demoslides()"> <img src="slidimg1.gif" width="100" height="100">

Обратите внимание на строчку setTimeout("demoslides()", 1000)

1000 - это время смены кадров, или правильней - задержки каждого кадра. Увеличивая или уменьшая это число вы можете регулировать это время.

Нажмите на ссылку, чтобы посмотреть на результат в новом окне!

Конечно, это нельзя назвать анимацией в том смысле, в каком мы его понимаем. Здесь просто - смена изображений. И формат изображений может быть как .gif, так и .jpg.

А вот на следующем уроке мы займемся самой настоящей анимацией! И в этом нам поможет программа ImageReady, которая входит в состав моей любимой программы Adobe Photoshop. Так что готовьтесь!

К списку всех уроков

(В. Ахметзянова, 2005 г)