Анимация элементов Web-страниц
Введение в Web-сценарии
Одним из основных преимуществ свободно позиционируемых элементов является возможность управлять их местоположением, размером и видимостью с помощью специально написанных сценариев. Вы можете создавать простую анимацию на Web-страницах, заставляя свободно позиционируемые элементы перемещаться по заданным траекториям.Ограничения HTML
Так в чем же ограничивает нас HTML? Зачем понадобилось придумывать еще один язык? Нельзя ли обойтись без него? | В общем, можно. Обходились же мы на протяжении целых одиннадцати глав обычным HTML, и ничего! Но дело в том, что странички-то мы делали неинтерактивные, т. е.Web-сценарии
Второй путь – внедрение в HTML-код особых программ, написанных на "классических" языках программирования, т. е. описывающих поведение элементов. Такие программы называются сценариями (или скриптами от англ, script – сценарий). (Почему они так называются?События
Событие в системе происходит при наступлении некого условия, внешнего или внутреннего. В зависимости от того, внутри или вне системы наступило это условие, различают внешние и внутренние события. К внешним событиям относятся щелчок мышью на странице или ее элементе, перемещение курсора мыши, нажатие клавиши на клавиатуре, изменение размеров окна Web-обозревателя и т. п.Основные принципы анимации. Простейшая анимация.
Наконец-то дошла очередь и до анимации. Рассмотрим некоторые базовые понятия, без которых в дальнейшем нам не обойтись. | Не раз уже говорилось, что анимировать можно только свободно позиционируемые элементы. Не забывайте это.Анимация реального времени
Мы только что рассмотрели способ создания на Web-странице простейшей анимации. Но дело в том, что в реальной жизни такая анимация применяется крайне редко. Более того, автор категорически не рекомендует вам даже пытаться ее сделать. | Почему?Анимация – подход Dreamweaver
Описанный выше способ создания анимации с помощью сценариев, реализующих функцию траектории, обладает множеством достоинств. Такие сценарии имеют очень малый размер и очень быстро выполняются, т. к. программист имеет возможность написать функцию траектории наиболее оптимальным способом.Зачем нужна анимация
Как правило, анимация на Web-страницах преследует три цели: | оживить страницы; | привлечь к чему-либо внимание; | показать что-либо в учебных целях. | Поэтому можно выделить три цели применения анимации: | развлечение; | реклама; | образование.Создание анимации в Dreamweaver. Простейшая анимация.
Вот и пришла пора нашей любимой программы – Dreamweaver. Сейчас будет рассказано, как она поможет в создании анимированного элемента. А в качестве элемента, который мы будем "оживлять", возьмем заголовок страницы default2.htm, созданной в главе 11.Более сложная анимация
Все-таки нехорошо, что заголовок и его тень (свободный элемент Headershadow) существуют отдельно. Давайте сделаем так, чтобы тень, пока заголовок движется к ней, была невидима на экране и появлялась лишь в самый последний момент.Управление анимациями
Вы уже знаете, что Dreamweaver позволяет создавать несколько одновременно работающих и независимых друг от друга анимаций. Они могут работать как синхронно, так и асинхронно, создавая на Web-странице настоящие хороводы анимированных элементов.Анимация графических изображений
Выше мы с вами рассмотрели анимацию свободно позиционируемых элементов. По идее только их и можно анимировать, ведь только они могут позиционироваться где угодно и иметь какие угодно размеры. А значит, только их можно двигать по странице, изменять их размеры и делать невидимыми.Недостатки анимации, основанной на Web-сценариях, и их преодоление
Напоследок поговорим о недостатках опробованного нами способа создания анимаций на Web-страницах. И выясним, когда стоит его применять, когда можно ограничиться обычными видеофайлами, а когда можно обойтись вообще без всякой анимации.