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