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

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

Вообще анимацию можно делать по-разному. И в разных программах. Для сегодняшнего урока нам не понадобятся никакие сторонние программы. Все рисунки мы сделаем в 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 г)