Анимация в HTML 4.0. Динамическое изменение свойств объектов в Internet Explorer 4.0. Технология слоев в Netscape Communicator.

В прошлых статьях мы упоминали о новых возможностях для создания динамичных страничек, предоставляемых новой версией HTML. Пришло время взглянуть на эти возможности подробно. В этой статье мы рассмотрим способы создания анимации и специальных графических эффектов на WEB-страничках при помощи динамического HTML, а также различия в применяемой в этом случае технике для MICROSOFT Internet EXPLORER 4.0 и NETSCAPE COMMUNICATOR 4.X. Начнем, пожалуй, с первого. Поскольку CSS известны еще со времен третьей версии IE, я относительно кратко опишу технику создания анимации для этого броузера, а более подробно остановлюсь на новой технологии слоев NETSCAPE, описываемой во второй части этой статьи. Итак, Internet EXPLORER.

Коньком IE 4.0 является объектная модель документа. Она позволяет изменять существующий HTML-код на лету при помощи любого доступного языка написания сценариев: JAVA, JAVASCRIPT, VBSCRIPT. Начнем с простого - чтобы заставить картинку как-нибудь перемещаться по экрану, вначале нужно ассоциировать ее с каким-либо идентификатором:

<IMG ID="PICTURE" STYLE="POSITION: ABSOLUTE;
LEFT: 14; TOP: 100; WIDTH: 64; HEIGHT: 64;
Z-INDEX: 5" SRC="PICTURE.JPG">

Теперь к этой картинке можно обратиться при помощи, например, JAVASCRIPT, используя следующий код:

DOCUMENT.ALL ('PICTURE')

Таким образом можно читать и изменять свойства объекта, например, его местоположение на экране:

DOCUMENT.ALL ('PICTURE').STYLE.LEFT = 215;
DOCUMENT.ALL ('PICTURE').STYLE.TOP = 367;

Перейдем к действию с картинкой. Заставим ее сжиматься и растягиваться.

Вначале установим ее ширину и высоту (начальное и конечное значения), а также количество и размер шагов, за которые она придет к новому размеру. Для вычисления отношения высоты к ширине используем параметр OTNOSHENIE. Свяжем наш объект с функцией изменения размера:

<SCRIPT LANGUAGE="JAVASCRIPT">
UVEL = DOCUMENT.ALL ('PICTURE');
OTNOSHENIE = 1; // отношение высоты к ширине
VAR STARTWIDTH = PARSEINT(UVEL.STYLE.WIDTH);
VAR STARTHEIGHT = STARTWIDTH * OTNOSHENIE;
VAR ENDWIDTH = MATH.ROUND(MATH.RANDOM() * 1024 + 200);
VAR NSTEP = MATH.ROUND(MATH.RANDOM() * 20)
+ 3; //случайное количество шагов.
VAR WIDTHINCREMENT = (ENDWIDTH - STARTWIDTH) /
NSTEP; //величина шага
VAR INC = 0;
</SCRIPT>

Теперь, установив все начальные параметры, используем цикл с количеством шагов NSTEP, добавляя каждый раз WIDTHINCREMENT к ширине UVEL, и WIDTHINCREMENT*OTNOSHENIE к высоте UVEL:

<SCRIPT LANGUAGE="JAVASCRIPT">
FUNCTION ZOOM( ) {
UVEL.STYLE.WIDTH = MATH.ROUND(STARTWIDTH +
(WIDTHINCREMENT * INC));
UVEL.STYLE.HEIGHT = PARSEINT(UVEL.STYLE.WIDTH) *
OTNOSHENIE;
IF(INC <= NSTEP) {
INC++;
SETTIMEOUT('ZOOM( );', 5);
}
}
</SCRIPT>

COMMUNICATOR, в отличие от IE, использует технологию слоев. Тег <LAYER>, которым они определяются, - контейнер. Вы помещаете внутрь желаемое содержимое и располагаете все это на странице там, где пожелаете:

<LAYER LEFT="112" TOP="432">
<!- здесь помещается HTML-код для содержимого слоя - >
</LAYER>

Помимо х, у-координат можно назначать слоям и координату Z, т.е. позиционировать их по глубине. Это достижимо двумя способами - указанием порядка слоя относительно других при помощи порядкового номера, либо указанием местоположения слоя относительно другого слоя при помощи атрибутов ABOVE и BELOW.

<LAYER NAME="FIRST" Z-INDEX="1" LEFT="132" TOP="12">

Первый слой - появится впереди всех остальных

</LAYER>
<LAYER NAME="PASTFIRST" ABOVE="FIRST" LEFT="43" TOP="67">
Всегда сразу под "первым слоем"
</LAYER>
<LAYER NAME="BACK" BELOW="PASTFIRST" LEFT="14" TOP="148">
Этот - позади слоя PASTFIRST
</LAYER>

С помощью JAVASCRIPT можно изменять атрибуты слоя, такие как LEFT, TOP, Z-INDEX, ABOVE, BELOW и CLIP, VISIBILITY, BGCOLOR. Таким образом мы можем нарисовать несколько картинок, представляющих кадры анимации, расположить их на разных слоях и затем, поочередно изменяя атрибут видимости, показывать зрителю одну картинку за другой, создавая эффект анимации. Для перемещения статической картинки по экрану можно просто менять позицию слоя, в котором она расположена.

Рассмотрим интересный пример создания несложной анимации при помощи слоев в NETSCAPE. Взгляните на иллюстрации: когда вы проводите мышью над картинкой серого облачка, под ним в ответ на это появляется изображение глаза (облачко и глаз - анимированные GIF-файлы), кроме того, область облачка одновременно является ссылкой на другой WEB-документ. Это иллюстрирует способ создания анимированных меню и оглавлений сайтов при помощи техники слоев. Текст с тенью выполнен также в этой технике (подробнее см. комментарии в коде). Более сложный пример - когда вы щелкаете на ссылке под изображением голубой звезды, между двумя вращающимися логотипами (звезда и логотипы - также анимированные GIF-файлы) появляется изображение руки, передвигающееся от одного логотипа к другому. Скоростью движения можно управлять, повторно нажимая на эту ссылку (подробнее см. комментарии в тексте кода). Данное сочетание традиционных анимированных GIF-файлов и новой технологии слоев NETSCAPE позволяет создавать привлекательные WEB-странички с высоким уровнем интерактивности.

<HTML>
<TITLE>Демонстрация работы со слоями в
NETSCAPE 4.0X. Анимация.</TITLE>
<HEAD>
<BODY BGCOLOR="DARKBLUE" TEXT="#FFFFFF" 
LINK="#FFFF00" VLINK="#FFFF00">
<LAYER NAME="BLAK" TOP=10 LEFT=103>
<IMG SRC="BLACKSQ.GIF" HEIGHT=120 WIDTH=627>
</LAYER>
<!- REDOUT.GIF и BLACKSQ.GIF - "пустые" изображения 
   для создания определенных эффектов:
   областей необходимого размера, невидимых активных областей,
   областей, скрывающих определенные изображения до поры-- >
<LAYER NAME="G" LEFT=700 TOP=80>
<IMG SRC=LOGO.GIF ALT="Логотип вашей фирмы">
</LAYER>
<LAYER NAME="G" LEFT=50 TOP=80>
<IMG SRC=LOGO.GIF ALT="Логотип вашей фирмы">
</LAYER>
<!- изображения логотипов по углам - >
<LAYER NAME="BLAK2" TOP=175 LEFT=0>
<IMG SRC="BLACKSQ.GIF" HEIGHT=150 WIDTH=800>
</LAYER>
<LAYER NAME="HAND" LEFT=500 TOP=86 VISIBILITY=HIDE>
<IMG NAME="HAND" SRC=HAND.GIF ALT="рука">
</LAYER>
<LAYER NAME="HAND2" LEFT=540 TOP=86 VISIBILITY=HIDE>
<IMG NAME="HAND2" SRC=HAND2.GIF ALT="рука2">
</LAYER>
<!- два вида "руки", пока что скрыты- >
<LAYER NAME="MN1" TOP=15 LEFT=32>
<FONT COLOR="RED" FACE=ARIAL>
<B>Анимация<BR>
в NETSCAPE. Слои<BR>
"CLICK ON" и "MOVE UNDER"</B><BR>
</LAYER>
<LAYER NAME="MN2" TOP=12 LEFT=29>
<FONT COLOR="YELLOW" FACE=ARIAL>
<B>Анимация<BR>
в NETSCAPE. Слои.<BR>
"CLICK ON" и "MOVE UNDER"</B><BR>
</LAYER>
<!- еще один пример создания тени - >
<LAYER NAME="KEEP" LEFT=450 TOP=24>
<FONT COLOR="YELLOW" FACE=ARIAL SIZE=4> ;
<B>Всемерно увеличивай привлекательность
   своей странички!</B>
</LAYER>
<LAYER NAME="KEEP" LEFT=476 TOP=100>
<FONT COLOR="LIGHTGREEN" FACE=ARIAL SIZE=5>
Изучай HTML 4.0!
</LAYER>
<LAYER NAME="CLIK2" LEFT=425 TOP=177>
<IMG SRC=MOVESTAR.GIF ALT="жми ниже!" BORDER=0
WIDTH=68 HEIGHT=51>
</LAYER>
<LAYER NAME="CLIKLOGO" TOP=324 LEFT=16>
<FONT COLOR="LIGHTGREEN" FACE=ARIAL SIZE=6>
<I><B>Надписи с<BR>
тенью</B></I><BR>
</LAYER><LAYER NAME="CLIKLOGO" TOP=320
LEFT=12>
<FONT COLOR="RED" FACE=ARIAL SIZE=6>
<I><B>Надписи с<BR>
тенью</B></I><BR>
</LAYER>
<LAYER NAME="TEST2" LEFT=215 TOP=250>
<TABLE BORDER=0 WIDTH=550>
<TR>
<TD>
<FONT COLOR="#FFFFFF" FACE=ARIAL SIZE=2> Данный пример
   иллюстрирует возможности работы со слоями
   в NETSCAPE COMMUNICATOR. <BR>
   Тег LAYER позволяет определять точно позиционируемые,
   перекрывающие друг друга слои.
   При помощи JAVASCRIPT кода возможно перемещать слои
   по координатам X и Y, скрывать их, менять их порядок
   по координате Z. Все это вместе позволяет создавать
   анимацию на вашей WEB-страничке. <BR>
<P>
<FONT COLOR="YELLOW" FACE=ARIAL SIZE=2><B>
Техника:</B></FONT>
<FONT COLOR="#FFFFFF" FACE=ARIAL SIZE=2> Приводим
   анимацию в движение по щелчку мыши.<BR>
   Используя атрибуты положения слоя, а также 
   функции OFFSET( ) и MOVETO( ),
   слои можно перемещать после загрузки страницы.
   Другие использованные функции:
   SETTIMEOUT( ) и MOVEBY( ).<BR>
<P>
<FONT COLOR="YELLOW" FACE=ARIAL SIZE=2><B>Возможности
   создания событий, привязанных к проходу указателя
   мыши над областью:</B></FONT><FONT
   COLOR="#FFFFFF" FACE=ARIAL SIZE=2><BR>
   Когда слой перемещается из первоначальной позиции
   в конечную небольшими шагами, создается эффект движения.
   Скоростью перемещения можно управлять, изменяя величину
   шага и пауз между шагами.<BR>
   Функция SETTIMEOUT() внутри рекурсивной функции используется
   для разделения во времени
   каждого очередного изменения свойств слоя.<BR>
</TD>
</TR>
</TABLE>
</LAYER>
<LAYER NAME="SHADOW" LEFT=12 TOP=409>
<TABLE BORDER=0 WIDTH=175>
<TR>
<TD ALIGN=RIGHT>
<FONT COLOR="YELLOW" FACE=ARIAL SIZE=2><B>Текст
   с тенью</B></FONT><BR>
<FONT COLOR="#FFFFFF" FACE=ARIAL SIZE=2> Тень в данном
   случае создана при помощи двух смещенных относительно        
   друг друга перекрывающихся слоев с одинаковым текстом
   разного цвета.<BR>
<P>
   Эта техника хорошо знакома тем, кто работает в графических
   пакетах типа ADOBE PHOTOSHOP.</TD>
</TR>
</TABLE>
</LAYER>
<LAYER NAME="CLICKER" LEFT=392 TOP=227>
<A HREF="#" ONCLICK="INITIALIZEHAND(); MOVEHAND2();
RETURN FALSE">
<FONT COLOR="LIGHTGREEN" FACE=ARIAL SIZE=3>
   Нажми здесь...</A>
</LAYER>
<SCRIPT>
FUNCTION INITIALIZEHAND()
{
VAR HAND = DOCUMENT.LAYERS["HAND"];
VAR HAND2 = DOCUMENT.LAYERS["HAND2"];

HAND.DIRECTION = "FORWARD";
HAND.FORWARDIMG = HAND.DOCUMENT.IMAGES["HAND"].SRC;
HAND.BACKWARDIMG = HAND2.DOCUMENT. IMAGES["HAND2"].SRC;
RETURN;
}

FUNCTION MOVEHAND2()
{
VAR HAND = DOCUMENT.LAYERS["HAND"];

HAND.VISIBILITY="SHOW";
IF (HAND.DIRECTION == "FORWARD")
{
IF (HAND.LEFT < 685) {HAND.MOVEBY(10, 0);}
ELSE {CHANGEDIRECTION();}
}
ELSE {
IF (HAND.LEFT > 100) {HAND.MOVEBY(-10, 0);}
ELSE {CHANGEDIRECTION();}
}
SETTIMEOUT("MOVEHAND2()", 100);
RETURN;
}

FUNCTION CHANGEDIRECTION ()
{
VAR HAND = DOCUMENT.LAYERS["HAND"];

IF (HAND.DIRECTION == "FORWARD")
{
HAND.DIRECTION = "BACKWARD";
HAND.DOCUMENT.IMAGES["HAND"].SRC = HAND.BACKWARDIMG;
}
ELSE
{
HAND.DIRECTION = "FORWARD";
HAND.DOCUMENT.IMAGES["HAND"].SRC = HAND.FORWARDIMG;
}
RETURN;
}
</SCRIPT>
<!- вот мы и описали движения руки. По щелчку мыши
   под изображением голубой
   звезды появляется изображение руки, перемещающееся
   от одной танцовщицы к другой,
   разворачиваясь всегда так, что указательный палец
   всегда смотрит в сторону движения.
   Если вы щелкнете на этой области снова, когда "рука"
   достигает одного из краев,
   скорость ее движения увеличится.- >
<LAYER NAME="RCRUMB" LEFT=240 TOP=15>
<IMG SRC=ME.JPG ALT="Читайте Мир Интернет!">
</LAYER>
<LAYER NAME="OPTION1" LEFT=69 TOP=220>
<IMG SRC="BLOP.GIF">
</LAYER>
<LAYER NAME="OPTION2" LEFT=69 TOP=210>
<IMG SRC="EYLOOK.GIF">
</LAYER>
<LAYER NAME="BASEMENU" LEFT=69 TOP=220>
<IMG SRC="BLOP.GIF">
</LAYER>
<!- выше определен вид областей, становящихся активными
   при движении мыши над ними -
   когда мышь проходит над облачком (BLOP.GIF), ниже появляется
   глаз (EYLOOK.GIF).
   А при проходе над полем "Попробуй здесь" облачко
   раздваивается.- >
<LAYER NAME="MAPMNU0" TOP=160 LEFT=69>
<A HREF="HTTP://DIX.DUBNA.RU/MAXIMOV/MAXIMOV.HTM"
ONMOUSEOVER="MOVE(MNU0,1)"
         ONMOUSEOUT="MOVE(MNU0,0)">
Попробуй здесь</A>
</LAYER>
<!- задает активную область под картинкой облачка->
<LAYER NAME="MAPMNU0" LEFT=69 TOP=231 >
<A HREF="HTTP:// DIX.DUBNA.RU/MAXIMOV/MAXIMOV.HTM "
ONMOUSEOVER="MOVE(MNU1,1)"
        ONMOUSEOUT="MOVE(MNU1,0)">
<IMG SRC="REDOUT.GIF" BORDER=0></A>
</LAYER>
<!-маскирует картинку глаза, когда она в позиции
   под облачком->
<LAYER NAME="BLUE2" LEFT=69 TOP=187 >
<IMG SRC="BLACKSQ.GIF" HEIGHT=33 WIDTH=80>
</LAYER>
<SCRIPT>

VAR MNU0=DOCUMENT.LAYERS["OPTION1"];
VAR MNU1=DOCUMENT.LAYERS["OPTION2"];
VAR MNU2=DOCUMENT.LAYERS["TEXT1"];
VAR OLDSTATE=0;

FUNCTION MOVE(UGAUGA,STATE) 
{
IF(STATE==0&&OLDSTATE==1)
{
FOR(I=0;I<7;I++) {
UGAUGA.OFFSET(0,-7);
}
OLDSTATE=0;
}
IF(STATE==1&& OLDSTATE==0) 
{
FOR(I=0;I<7;I++) 
{
UGAUGA.OFFSET(0,7);
}
OLDSTATE=1;
}
}
</SCRIPT>
<LAYER NAME="HITME" LEFT=50 TOP=199>
<FONT COLOR="LIGHTGREEN" FACE=ARIAL SIZE=3>
Проведи мышью над облачком ниже!
</LAYER>
<LAYER NAME="IW" TOP=175 LEFT=600>
<FONT COLOR="RED" FACE=ARIAL SIZE=5><I>
   Читай "Мир Интернет"!</I>
</LAYER>
</BODY>
</HEAD>
</HTML>
<LAYER NAME="RCRUMB" LEFT=19 TOP=680>
<FONT COLOR="#FFFF00" FACE=ARIAL SIZE=2>Демонстрация
   возможностей NETSCAPE 4.0X.
   Анимация. Работа со слоями.
</LAYER>

А теперь домашнее задание - попробуйте написать первый пример этой статьи, но в технологии слоев. Поскольку NAVIGATOR не допускает изменения установок стилей для изображения, для достижения того же эффекта понадобится пройти более сложные шаги. Например, следует учесть тот факт, что даже в слое изображение невозможно масштабировать "напрямую". Подсказка: каждый раз в цикле придется записывать новое, большее изображение для слоя. Пригодится также уже знакомая вам функция SETTIMEOUT().

Успехов!