Macromedia Dreamweaver MX

Основные принципы анимации

Наконец-то дошла очередь и до анимации. Рассмотрим некоторые базовые понятия, без которых в дальнейшем нам не обойтись.

Не раз уже говорилось, что анимировать можно только свободно позицио­нируемые элементы. Не забывайте это. Только свободные элементы могут быть помещены в любое место страницы, и лишь они могут управляться из сценариев. Запомните это.

Простейшая анимация

Итак, за счет чего же достигается эффект анимации? Почему элемент стра­ницы кажется движущимся по ней?

Дело в том, что координаты элемента периодически меняются. И меняются весьма быстро, не реже 12 раз в секунду, за счет чего мы и наблюдаем не­прерывное движение. Такая частота выбрана оттого, что именно на ней че­ловеческий глаз теряет способность различать отдельные приращения, "скачки" прерывистого движения. Короче говоря, за этим пределом преры­вистое движение становится для человека визуально непрерывным. (На этом же принципе, кстати, работают кинематограф и телевидение.) Компь­ютеры у нас сейчас достаточно мощные, так что обеспечить такую частоту смены координат вполне реально.

Но мало всего лишь изменить координаты элемента. Нужно изменить их по особому закону, описывающему траекторию движения элемента. Если эле­мент движется по прямолинейной траектории, этот закон очень прост. В случае криволинейного движения он сильно усложняется. Поэтому не стоит создавать на своих страницах слишком сложные анимации: маломощ­ный компьютер просто не "потянет" чересчур замысловатые траектории.

Закон, по которому изменяются координаты анимированного элемента, иначе говоря, его траектория, описывается особой функцией (назовем ее функцией траектории). Такая функция принимает некоторые параметры и возвращает координаты элемента. Она имеет вид:

{х, у, г} = £ (о, д, ад)

С возвращаемыми этой функцией результатами все просто, х, у и г — коор­динаты анимированного элемента, соответственно, горизонтальная, верти­кальная и порядок перекрытия (уже знакомый вам г-ивдекс). Конечно, функция, возвращающая сразу три координаты, — это общий случай. Обычно изменяется одна или две координаты элемента — х и у.

А вот с параметрами, принимаемыми функцией, все несколько сложнее. Всего, как вы видите, их три, и назначение их неочевидно. Давайте же рас­смотрим все эти параметры по порядку.

Самый первый параметр — о. Это длина траектории движения анимирован­ного элемента. Она может измеряться в пикселах, миллиметрах, градусах или каких-либо относительных единицах, например процентах. Вообще, единица измерения зависит от самой траектории: для прямолинейной больше подойдут пикселы или миллиметры, а для круговой — градусы или радианы. Важно одно: параметр о должен каким-то образом обозначать полную длину траектории, по которой будет двигаться наш элемент.

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

Последний, третий параметр — ад. Он задает приращение, на которое будет меняться дистанция д при каждом "скачке" анимированного элемента. Ве­личина этого параметра задает скорость движения анимированного эле­мента.

Итак, что же должна делать функция траектории. Ниже перечислены все ее задачи в порядке выполнения.

1. Принять начальные параметры и выполнить предварительные установки (прежде всего, установить анимированный элемент в начальную точку траектории движения).

2. Вычислить значения координат анимированного элемента на основании значения д и переместить этот элемент в точку с вычисленными коорди­натами.

3. Проверить, дошел ли элемент до конечной точки траектории. Для этого д сравнивается с о, и, если они равны либо д больше о, анимация останав­ливается.

4. Увеличить значение д на величину ад.

5. Перейти к шагу 2.

Это общий алгоритм, которому должны следовать все функции траектории, даже самые сложные. Фактически основная сложность заключается в реали­зации шага 2, т. е. вычислении координат на основе значения д. Остальные шаги реализуются очень просто и не составят трудности даже для начи­нающего программиста.

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

Предполагалось, что когда анимированный элемент достигает конца траек­тории (д становится равной или больше о), анимация останавливается. На самом деле, функция траектории может продолжить работу. Она может, на­пример, просто снова выполнить начальные установки, поместив анимиро­ванный элемент в начало траектории, и запустить анимацию снова. Но лучше всего инвертировать значение ад (изменить положительное значение на отрицательное и наоборот) и пустить анимацию "задом наперед". Такая анимация, проигрывающаяся несколько или бесконечное количество раз, называется зацикленной.

Конечно, зацикленная анимация выглядит эффектнее. Но злоупотреблять ей не стоит, особенно бесконечной. Почему — вы сейчас узнаете.

Анимация реального времени

Мы только что рассмотрели способ создания на ¥еЬ-странице простейшей анимации. Но дело в том, что в реальной жизни такая анимация применя­

Ется крайне редко. Более того, автор категорически не рекомендует вам да­же пытаться ее сделать.

Почему? Дело в том, что вышеописанный способ создания анимации имеет только одно более чем сомнительное достоинство и два огромнейших не­достатка.

Достоинство — простота, более того, очевидность реализации. Любой про­граммист, даже малоквалифицированный, может сесть и в пять минут на­кропать сценарий, реализующий движение элемента по прямолинейной траектории. Да, он это сделает, даже если до этого ни разу не занимался ¥еЬ-программированием.

Но пусть он только попробует выложить свое творение в Сеть!

Давайте представим двоих интернетчиков, решивших посетить его странич­ку с анимацией. У одного компьютер десятилетней давности, старенький, заслуженный, едва-едва обрабатывающий современные сложные ¥еЬ-стра - нички, даже без мультимедийных "наворотов". У другого — мощнейшая наисовременнейшая машина, только что сошедшая со сборочных столов какого-нибудь известного "брэнда". Вот они заходят-таки на страничку, за­гружают ее и принимаются наблюдать за анимацией.

Компьютер первого посетителя с натугой загрузит ее и, треща жестким дис­ком, начнет ни шатко ни валко выполнять сценарии, реализующие анима­цию. Анимированный элемент худо-бедно движется по странице, посети­тель доволен — работает. Теперь оставим его и взглянем на посетителя но­мер два. Его компьютер мгновенно загрузит страничку и мгновенно же выполнит все сценарии. Анимированный элемент пролетит по своей траек­тории так быстро, что человеческий глаз его движения даже не заметит.

Спрашивается, кому нужна такая анимация?

Но это полбеды. Беда настанет, если наш незадачливый программист решит сделать анимацию зацикленной, бесконечной. Теперь смотрите, что полу­чится. Страница загружается в ¥еЬ-обозревателе, интерпретатор начинает выполнять сценарии... и выполняет... выполняет... выполняет... А пока он их выполняет, пользователь ничего не сможет сделать со страничкой: ни щелкнуть по гиперссылке, ни даже прокрутить ее в окне. Единственный способ прервать затянувшееся "кино" — закрыть сам ¥еЬ-обозреватель.

Но что делать? Ведь ¥еЬ-программисты как-то реализуют анимацию на своих страницах, и она работает нормально, в смысле, не мешает пользо­вателю прокручивать страницу и щелкать по ссылкам. Может, они знают какой-нибудь секрет?

Да, знают. И заключается этот секрет в том, что они используют немного другую функцию траектории:

{х, у, г} = £ (о, д, ад, Ь)

От уже знакомой нам функции она отличается тем, что принимает еще один параметр — 1;. Этот параметр — время. Иначе говоря, при расчете ко­ординат функция траектории учитывает текущее время. И анимация оказы­вается жестко привязанной к времени, которое везде течет одинаково, в от­личие от тактовой частоты процессоров, которые различаются у разных компьютеров.

Как это реализуется? Дело в том, что новая функция выполняется не все время, пока работает анимация, а вызывается время от времени, тогда, ко­гда нужно произвести очередной "скачок" анимации, и после этого прекра­щает свою работу, дожидаясь очередного вызова. Эта функция реализуется в виде сценария-обработчика внутреннего события — "тика" системного таймера.

Таким образом, анимация оказывается четко привязанной к времени. И на стареньком компьютере посетителя номер один, и на суперсовременной машине номера два анимированный элемент будет двигаться с одной и той же скоростью. (Конечно, на более мощном компьютере анимация, возмож­но, будет выполняться плавнее, но с той же скоростью, что и на более мощном.)

Далее. Так как функция траектории вызывается только время от времени, а не работает постоянно, пользователь может нормально взаимодействовать с ¥еЬ-страницей. ¥еЬ-обозревателю между "тиками" таймера остается пре­достаточно времени, чтобы обработать пользовательские запросы.

Давайте приведем список задач новой функции траектории в порядке вы­полнения.

1. Принять начальные параметры и выполнить предварительные установки (установить анимированный элемент в начальную точку траектории дви­жения, запустить системный таймер и привязать к его событиям сцена­рий - обработчи к).

2. Вычислить значения координат анимированного элемента на основании значения д и переместить этот элемент в точку с вычисленными коорди­натами.

3. Проверить, дошел ли элемент до конца траектории. Для этого ч сравни­вается с о, и, если они равны либо д больше о, выполняется переход к шагу 5.

4. Увеличить значение д на величину ад.

5. Остановить системный таймер и "отвязать" от его событий обработчик.

Для реализации этой функции используются два сценария. Один из них выполняется при загрузке страницы и реализует задачу шага 1. Второй — собственно обработчик событий системного таймера — реализует задачи ша­гов 2—5.

Такая анимация, привязанная к системному таймеру, а не к процессору, называется анимацией реального времени. Именно она и применяется для создания движущихся элементов на Web-страницах. Простейшая анимация, описанная нами ранее, практически нигде не используется. Вы уже поняли, почему.

Анимация — подход Dreamweaver

Описанный выше способ создания анимации с помощью сценариев, реали­зующих функцию траектории, обладает множеством достоинств. Такие сце­нарии имеют очень малый размер и очень быстро выполняются, т. к. про­граммист имеет возможность написать функцию траектории наиболее оп­тимальным способом. Однако у них есть один огромный недостаток — негибкость. Фактически для изменения траектории движения анимирован­ного элемента нужно писать новый сценарий, реализующий новую функ­цию траектории.

Но негибкость — не единственный недостаток этого способа создания ани­мации. Если анимированный элемент должен совершать достаточно слож­ное движение, реализующий эту траекторию сценарий получается очень большим и медленным. И чем сложнее траектория, тем больше и медленнее получается сценарий.

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

Однако и из этого положения есть выход. На помощь неопытным програм­мистам, не владеющим высшей математикой, придет новый вид функции траектории, принимающей всего два параметра: массив ключевых точек тра­ектории и, естественно, текущее время:

{х, у, z} = f ( [pi, tl, р2, t2 . . ., t] )

Насчет времени все понятно, но что такое массив ключевых точек? Ничего сложного: это набор точек, с помощью которого задается траектория дви­жения нашего анимированного элемента. Поясним это более подробно.

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

Можно сделать немного по-другому. Прежде всего, пометим и пронумеруем ключевые точки прямо на нарисованной траектории. Далее отдельно прове­дем по линейке прямую и проставим на ней координатную шкалу времени, проградуировав ее, скажем, в секундах. Отметим вдоль этой шкалы напро­тив соответствующих делений точки начала и конца анимации, проведем между ними линию потолще и назовем ее дорожкой анимации. После этого останется только пронумеровать ключевые точки и проставить их на дорож­ке напротив соответствующих отметок времени. В результате мы получим набор точек, координаты и время прохождения которых можно легко вы­числить (соответственно, на нарисованной схеме и временной шкале). Со­гласитесь, так много нагляднее.

Мы начертили траекторию движения нашего элемента на миллиметровой бумаге, после чего выделили на данной траектории нужное количество клю­чевых точек, которые ее, собственно, и создают (точки перегиба, начало и конец траектории и т. п.), и выписали их координаты на отдельную бумаж­ку. Далее, зная время, за которое анимированный элемент пройдет всю тра­екторию, мы можем выяснить, в какой момент времени он появится в той или иной ключевой точке. Осталось только выписать эти значения времени на ту же бумажку, проставив их напротив координат соответствующих то­чек. Вот мы и получили массив ключевых точек, который можно передать новой функции траектории.

Этот подход и используется Dreamweaver.

Для примера мы привели анимацию, включающую один-единственный анимированный элемент. Но Dreamweaver позволяет помещать на времен­ную шкалу сразу нужное количество элементов, создавая несколько анима­ционных дорожек, что может быть использовано для создания очень слож­ных анимаций, в которых все элементы движутся согласованно. Более того, Dreamweaver позволяет создавать на одной странице несколько работающих независимо друг от друга анимаций, каждая из которых может включать в себя любое количество анимированных элементов. Так что даже самый привередливый аниматор будет доволен.

Функция траектории, принимающая в качестве параметра массив ключевых точек, очень сложна, но нам и не нужно ее реализовывать. Многие мощные Web-редакторы предоставляют пользователям возможность создания анима­ции и используют для этого как раз такой подход. Набор Web-сценариев, реализующих функцию траектории, в этом случае вставляется в HTML-код страницы автоматически, пользователь даже не догадывается об этом.

Конечно, Dreamweaver не исключение. Он тоже предоставляет пользовате­лям такую возможность. И также делает всю черновую работу сам.

Недостатком такого способа создания анимации являются большой размер и не очень высокое быстродействие получившегося кода. Поэтому для про­стейших анимаций, наверное, будет оправдан все-таки первый подход: спе­циально написанные сценарии, непосредственно реализующие функцию траектории.

Ну вот, с техническими вопросами мы разобрались. Осталось выяснить, в каких случаях можно применять анимацию, а в каких — лучше воздер­жаться.

Зачем нужна анимация

Как правило, анимация на ¥еЬ-страницах преследует три цели:

□ оживить страницы;

□ привлечь к чему-либо внимание;

□ показать что-либо в учебных целях.

Поэтому можно выделить три цели применения анимации:

□ развлечение;

□ реклама;

□ образование.

Все остальные цели, на взгляд автора, можно свести к трем вышеприведен­ным. А о трех вышеперечисленных мы поговорим подробнее.

Развлечения в Интернете — достаточно молодая отрасль ¥еЬ-строительства. Изначально Интернет был создан как сеть для ученых, которым нужно бы­ло обмениваться текстовыми документами (сначала даже без графики) и связывать их в некое подобие структуры. Потом в Сеть пришел обыватель, и ¥еЬ-дизайнеры ринулись угождать его вкусам. (Не будем спорить, на­сколько они возвышенны или низменны. Личное мнение автора: обыватель слишком разнолик, чтобы свести его к одному-единственному ярлыку.) В Интернете появились аудио и видео, на ¥еЬ-страницы пришли сложная графика и анимация. Сейчас все эти "навороты" используются так часто, что ими уже мало кого можно удивить.

Умелое и умеренное использование анимации значительно оживит ваши страницы. Важно только понять, какого эффекта вы хотите достичь, и сде­лать все для того, чтобы он был достигнут. Не переусердствуйте — приме­няйте анимацию только там, где она действительно нужна. И уж, не дай бог, ваша страница будет рябить, как экран телевизора с отключенной ан­тенной, — в этом нет ничего хорошего. Никогда не забывайте принцип "со­держимое превыше всего, все остальное — украшения", не позволяйте украшениям заслонить содержимое.

Теперь реклама. Она появилась в Сети вместе с развлечениями, а значит, вместе с обывателем. Она уже здорово надоела, эта интернет-реклама, едва ли не больше, чем реклама телевизионная. Но отдадим должное рекламе (и интернетовской, и телевизионной) — благодаря ей получили возмож­ность существовать очень многие популярные некоммерческие проекты. Если реклама вдруг исчезнет, эти проекты пропадут сразу же вслед за ней.

Традиционно для рекламных целей в Сети используются так называемые баннеры — небольшие графические изображения жестко стандартизирован­ных форматов. Почти все баннеры создаются в формате "анимированный вШ", т. е. уже используют возможности анимации по привлечению внима­ния потенциального клиента. Рекламную анимацию, основанную на Veb - сценариях, похоже, никто еще не применял, а если и использовал, то очень мало. Так что перед вами обширное непаханое поле деятельности, которое вполне может принести неплохие плоды.

Анимация, основанная на свободно позиционируемых элементах и Veb - сценариях, значительно компактнее любых видеофайлов, будь то анимиро­ванный вШ, видеофайлы форматов АVI или Арр1е (^шскТипе. Однако ани­мированные вШ-файлы поддерживаются абсолютно всеми ¥еЬ-обозре - вателями, даже самыми старыми, поэтому и применяются так широко. Veb - сценарии же будут работать только на достаточно новых ¥еЬ-обозревателях (которыми, надо сказать, сейчас пользуется подавляющее большинство ин­тернетчиков).

Так или иначе, но попробовать ¥еЬ-сценарии в рекламе стоит. И, кажется, кое-кто уже пробует.

От рекламы плавно перейдем к образованию. Программы — учебные посо­бия, часто используемые в образовании, как правило, пишутся на компили­руемых языках программирования и представляют собой обычные М5- 005- или ¥тс! о¥8-приложения. Учебные пособия, сделанные на основе "живых" ¥еЬ-страниц, встречаются пока еще довольно редко, хотя это на­правление весьма перспективно. Такие учебные пособия можно очень бы­стро создавать и модифицировать; а по сравнению с обычными программа­ми они исключительно компактны (ну сколько места могут занимать не­сложная ¥еЬ-страница и пара изображений?). Вдобавок такие пособия прямо-таки просятся в Интернет, на ¥еЬ-сайты, а значит, можно без осо­бых проблем организовать модное ныне дистанционное обучение.

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

Вот три случая, когда анимация будет очень полезна. А в ряде случаев и не­обходима. Если же ваш случай к ним не относится, лучше обойтись обыч­ными ¥еЬ-страничками, больше внимания уделив их содержимому.