Учебная работа. Реферат: Анимации на веб страницах

Учебная работа. Реферат: Анимации на веб страницах

Содержание

Введение………………………………………………………………………

ГЛАВА 1. Анимация на web-страницах………………………………………

Введение в Web-сценарии……………………………………………………

Ограничения html…………………………………………………………

Web-сценарии………………………………………………………………..

Действия………………………………………………………………………

Главные принципы анимации…………………………………………….

Простая анимация………………………………………………………

Анимация настоящего времени………………………………………………..

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

Создание анимации в Dreamweaver………………………………………..

Создание простейшей анимации……………………………………………

Наиболее непростая анимация……………………………………………………

Управление анимациями…………………………………………………….

Анимация графических изображений……………………………………..

Недочеты анимации, основанной на Web-сценариях,

и их преодоление…………………………………………………………….

Заключение…………………………………………………………………..

Перечень литературы………………………………………………………….

Введение

Данная контрольная работа, затрагивает тему «Анимация на webстраницах». Анимация на web страничках служит почаще всего для декорации. время от времени анимация применяется для поэтапного представления инфы — в отдельных кадрах поочередно отображается слова какой-либо надписи либо раскрывается все больший фрагмент изображения. Этот эффект завлекает и держит внимание наблюдающего. Типовым форматом записи анимации для web страничек является GIF. В контрольной работе будут рассмотрены такие пункты, как: введение в Web-сценарии, ограничения html, web-сценарии, действия, главные принципы анимации, простая анимация, анимация настоящего времени, анимация — подход Dreamweaver, создание анимации в Dreamweaver, создание простейшей анимации, наиболее непростая анимация, управление анимациями, анимация графических изображений, недочеты анимации, основанной на Web-сценариях, и их преодоление.

ГЛАВА 1.
Анимация на
w
eb-страницах

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

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

Было сказано, что, не считая написания сценариев, фактически реализующих анимацию, и привязки их к определенным событиям, никакой особенной переделки html-кода не требуется. Но написание сценариев — задачка, достаточно непростая сама по для себя. Не достаточно того, что для этого необходимо знать сам язык программирования JavaScript, следует отлично представлять для себя, как работают внутренние механизмы программки Web-обозревателя и как получить к ним доступ, чтоб применять позже в собственных нуждах. Не считая того, нужно знать, как реализуется анимация, за счет что элемент странички будет казаться передвигающимся. И, естественно же, необходимо иметь художественный вкус и — непременно! — чувство меры.

Отлично! С художественным вкусом и чувством меры заморочек нет. Но есть препядствия с JavaScript и внутренними механизмами Web-обозревателя. Поточнее сказать, мы не знаем ни того, ни другого. И все таки весьма желаем сделать на собственных страничках какую-нибудь, хотя бы простенькую, анимацию. нужно пользоваться Dreamweaver. Он предоставляет весьма удачный метод сотворения анимационных частей без углубления в JavaScript и черные недра Web-обозревателя. Необходимо просто указать линию движения движения того либо другого элемента, опосля что задать некие характеристики — и сходу же выходит итог. Dreamweaver сам делает нужные JavaScript-сценарии и помещает их в HTML-код странички.

1.
Введение в Web-сценарии

Для чего необходимы сценарии? Чтоб преодолеть ограничения html. He все, естественно, — лишь одно.

2.
Ограничения html

Так в чем все-таки ограничивает нас html? Для чего пригодилось выдумывать очередной язык? Недозволено ли обойтись без него?

В общем, можно. Для таковых страничек хватит и «незапятнанного» html. Как лишь вы возжелаете «обучить» страничку вести взаимодействие с юзером, другими словами создать интерактивной, вы сходу упретесь в неодолимую стенку.

А все поэтому, что html не дозволяет задать поведение странички в ответ, скажем, на щелчок мыши по одному из ее частей. С его помощью задается лишь ее наружный вид. И сиим он в корне различается от «традиционных» языков программирования, описывающих как раз html — и не язык программирования, а язык описания Web-страниц — и не наиболее. Он обрисовывает, как обязана смотреться информация в окне Web-обозревателя, лишь и всего. При этом, этот наружный вид агрессивно стандартизирован; Web-дизайнер, как уже понятно, существенно посильнее ограничен в собственных способностях, чем дизайнер-полиграфист. Особенных вольностей на Web-страницах он не сделает. (Фреймы, таблицы разметки и каскадные таблицы стилей CSS снимают почти все ограничения, но не все.)

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

Можно сказать, что неважно какая Web-страница и так является интерактивной, потому что реагирует на щелчки по ссылкам. Но это не интерактивность, а обычное прямо на странице «тикают» цифровые часы. Вот это реальная интерактивность: в первом и втором вариантах страничка реагирует на деяния юзера, а в 3-ем — на действия наружной среды. (тут под наружной средой предполагается операционная система; работающий в ней системный таймер принуждает идти нарисованные часы.) И обыденный html не может ее обеспечить.

Чтоб преодолеть этот недочет «незапятнанного» html, были выдуманы два пути.

1-ый путь — это особые, как правило, неординарные, «фирменные», теги, расширяющие способности языка. В подавляющем большинстве случаев они добавляют Web-страницам интерактивные способности. К примеру, необычный парный тег <MARQUEE>. . .</MARQUEE>, поддерживаемый Internet Explorer, дозволяет сделать на страничке «прокручивающийся» текст. Но, необходимо согласиться, эти расширения ограничивают Web-дизайнера теми способностями, что вложили в их создатели Web-обозревателя. И не суметь вынудить текст в элементе <MARQUEE> не прокручиваться, а поочередно поменять цвета — создатели Internet Explorer этого не предусмотрели.

Мы желаем сами задавать руках. HTML их нам предоставить не может; ограничения, обусловленные самой его природой, — стенка, преодолеть которую нереально. Но, если стенку недозволено перепрыгнуть, ее можно обойти.

3.
Web-сценарии

2-ой путь — внедрение в html-код особенных программ, написанных на «традиционных» языках программирования, другими словами описывающих Script — сценарий). (Почему они так именуются? Сможете считать, что эти программки обрисовывают сценарии поведения какого-либо элемента при пришествии того либо другого действия.) Эти программки помещаются в html-код с помошыо особенного, специально для такового варианта стандартизированного комитетом WWWC парного тега <Script>. . .</SCRIPT>. Web-обозреватель, «расшифровывая» таковой html-код, читает сценарии и или делает их сходу же, или «откладывает в длинный ящик», чтоб выполнить опосля пришествия какого-нибудь действия.

Конкретно опосля «открытия» второго пути в интерактивность глобальная сеть стала «жив», а почти все Web-дизайнеры стали по совместительству к тому же Web-программистами.

Для того чтоб писать сценарии, были специально сделаны несколько языков программирования, именуемых языками написания сценариев (либо скриптовыми языками). Самую большую популярность из их получили всего два: JavaScript и VBScript.

Язык JavaScript был разработан в фирме Netscape на базе известного «традиционного» языка программирования Java. Потому в первый раз поддержка языка JavaScript возникла конкретно в Web-обозревателе Netscape Navigator 2.0. Microsoft Internet Explorer начал поддерживать JavaScript с версии 3.0. Не считая того, в фирме Microsoft был разработан собственный диалект JavaScript под заглавием JScript, отличающийся от «прародителя» лишь наличием нескольких новейших установок. Потому эти два языка весьма нередко не различают, называя их идиентично — JavaScript.

Язык VBScript был разработан в Microsoft в качестве «адекватного ответа» на JavaScript. Этот язык поддерживается лишь Internet Explorer, начиная с версии 4.0. Из-за собственной «несовместимости» VBScript не получил огромного распространения в Web, но захватил крепкие позиции в серверном программировании, а конкретно, написании активных серверных страничек Microsoft ASP (см. главу 15). В истинное время для написания Web-сценариев он фактически не применяется.

Не считая JavaScript и VBScript, были пробы использования для написания Web-сценариев языков Perl, Python и неких остальных. Но сколько-либо широкого распространения эти языки не получили.

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

Для поддержки языка сценариев употребляется так именуемый интерпретатор (либо виртуальная машинка) языка. Web-обозреватель выделяет сценарии из html-кода странички и передает его на выполнение интерпретатору. Крайний анализирует код сценариев, расшифровывает их и делает, передавая итог выполнения назад Web-обозревателю.

Для всякого языка написания сценариев, поддерживаемого Web-обозревателем, нужен собственный отдельный интерпретатор. Благодаря такому подходу Web-обозреватель можно «обучить» поддерживать сценарии, написанные фактически на любом языке программирования, если для этого языка существует интерпретатор, написанный определенным образом.

Языки сценариев именуются интерпретируемыми, потому что написанные на их программки расшифровываются при любом выполнении. Сиим они коренным образом различаются от компилируемых языков (C++, Pascal, Java и почти всех остальных). Написанные на компилируемых языках программки расшифровываются однократно и преобразуются в машинный код, который производится самим микропроцессором компа, без помощи интерпретатора. Для такового преобразования употребляются особые программки, именуемые компиляторами. естественно, откомпилированный код производится существенно резвее, но специфичность Web-программирования такая, что в нем могут применяться лишь интерпретируемые языки.

Ну, вот и все о языках программирования, на которых пишутся Web-сценарии. сейчас побеседуем о том, как эти Web-сценарии производятся.

4.
Действия

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

Если брать во внимание лишь действия, происходящие в Web-странице, то необходимо подразумевать, что действия могут происходить как в самой страничке, так и в отдельных ее элементах. По правде, если юзер щелкает мышью на части странички, не занятой какими-либо элементами, молвят, что событие происходит в самой страничке. Если же юзер щелкнет на графическом изображении либо текстовом абзаце, событие происходит в этом графическом изображении либо текстовом абзаце, другими словами сообщение о пришествии действия «щелчок левой клавишей мыши» в первом случае получит сама страничка, а во 2-м — один из ее частей.

Что все-таки нам созодать с этими событиями, спросите вы? Обрабатывать.

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

А именно, если требуется, чтоб при наведении курсора мыши на изображение понизу возникало его короткое описание, необходимо создать последующее. Под изображением помещается свободно позиционируемый элемент, содержащий текст описания, и этот элемент делается невидимым. Дальше пишутся два сценария, привязанные к событиям, возникающим при наведении курсора мыши на графическое изображение и при «уводе» его прочь. 1-ый из этих сценариев делает элемент с описанием видимым, 2-ой — невидимым. Опосля этого написанные сценарии привязываются к подходящим событиям, происходящим в элементе графического изображения. Вот и все.

В большинстве интерактивных Web-страниц большая часть сценариев представляет собой как раз обработчики событий. Конкретно они реализуют огромную часть логики поведения странички при содействии с юзером. (Хотя существует определенный процент сценариев, выполняемых сходу же опосля расшифровки; в главном, это код, производящий всяческие предустановки.) Таковой подход, когда практически вся программка представляет собой обработчики событий, именуется событийно-управляемым программированием.

5.
Главные принципы анимации

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

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

6.
Простая анимация

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

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

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

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

{х, у, z} = f(Q, q, dq)

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

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

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

2-ой параметр (q) обозначает позицию на линии движения, занимаемую в данный момент времени нашим элементом. Другими словами, это расстояние в единицах измерения линии движения Q, которое он уже «пробежал». Получив его, наша функция обязана сказать: «элемент тут» и, что именуется, «ткнуть пальцем» в точку на его линии движения.

Крайний, 3-ий параметр — dq. Он задает приращение, на которое будет изменяться дистанция q при любом «скачке» анимационного элемента. Beличина этого параметра задает скорость движения анимационного элемента.

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

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

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

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

4. Прирастить значение q на величину dq.

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

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

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

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

естественно, зацикленная анимация смотрится красивее. Но злоупотреблять ей не стоит, в особенности нескончаемой.

7.
Анимация настоящего времени

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

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

Представим двоих интернетчиков, решивших посетить его страницу с анимацией. У 1-го комп десятилетней давности, старенький, заслуженный, едва-едва обрабатывающий современные сложные Web-странички, даже без мультимедийных «наворотов». У другого — мощная наисовременнейшая машинка, лишь что сошедшая со сборочных столов какого-либо известного «брэнда». Вот они заходят-таки на страницу, загружают ее и принимаются следить за анимацией.

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

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

Но это половина беды. Неудача настанет, если наш незадачливый программер соберется сделать анимацию зацикленной, нескончаемой. сейчас смотрите, что получится. Страничка загружается в Web-обозревателе, интерпретатор начинает делать сценарии… и делает… делает… делает… А пока он их делает, юзер ничего не сумеет создать со страницей: ни щелкнуть по ссылке, ни даже прокрутить ее в окне. Единственный метод оборвать затянувшееся «кино» — закрыть сам Web-обозреватель.

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

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

{х, y, z} = f(Q, q, dq, t)

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

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

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

Дальше. Потому что функция линии движения вызывается лишь время от времени, а не работает повсевременно, юзер может нормально вести взаимодействие с Web-страницей. Web-обозревателю меж «тиками» таймера остается предостаточно времени, чтоб обработать пользовательские запросы.

Перечень задач новейшей функции линии движения в порядке выполнения.

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

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

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

4. Прирастить значение q на величину dq.

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

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

Таковая анимация, привязанная к системному таймеру, а не к микропроцессору, именуется анимацией настоящего времени. Конкретно она и применяется для сотворения передвигающихся частей на Web-страницах. Простая анимация, описанная нами ранее, фактически нигде не употребляется.

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

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

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

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

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

{х, у, z} = f([p1, t1, p2, t2…, t])

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

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

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

Этот подход и употребляется Dreamweaver.

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

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

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

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

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

• воскресить странички;
• привлечь к чему-либо внимание;
• показать что-либо в учебных целях.
• потому можно выделить три цели внедрения анимации:
• развлечение;
• реклама;
• образование.

Все другие цели, можно свести к трем вышеприведенным.

Утехи в Вебе — довольно юная ветвь Web-строительства. Вначале веб был сотворен как сеть для ученых, которым необходимо было обмениваться текстовыми документами (поначалу даже без графики) и связывать их в некоторое подобие структуры. Позже в сеть пришел мещанин, и Web-дизайнеры бросились угождать его вкусам. (Не будем спорить, как они возвышенны либо низки. Личное Мировоззрение создателя: мещанин очень разнолик, чтоб свести его к одному-единственному ярлычку.) В Вебе возникли аудио и видео, на Web-страницы пришли непростая графика и анимация. на данный момент все эти «навороты» употребляются так нередко, что ими уже не достаточно кого можно изумить.

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

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

Обычно для маркетинговых целей в сети употребляются так именуемые баннеры — маленькие графические изображения агрессивно стандартизированных форматов. Практически все баннеры создаются в формате «анимационный GIF», другими словами уже употребляют способности анимации по вербованию внимания потенциального клиента. Маркетинговую анимацию, основанную на Web-сценариях, похоже, никто еще не использовал, а если и употреблял, то весьма не достаточно. Так что перед вами пространное непаханое поле деятель, которое полностью может принести хорошие плоды.

Анимация, основанная на свободно позиционируемых элементах и Web-сценариях, существенно компактнее всех видеофайлов, будь то анимационный GIF, видеофайлы форматов AVI либо Apple QuickTime. Но анимационные GIF-файлы поддерживаются полностью всеми Web-обозревателями, даже самыми старенькыми, потому и используются так обширно. Web-сценарии же будут работать лишь на довольно новейших Web-обозревателях (которыми, нужно сказать, на данный момент пользуется подавляющее большая часть интернетчиков).

Так либо по другому, но испытать Web-сценарии в рекламе стоит.

От рекламы плавненько перебегаем к образованию. Программки — учебные пособия, нередко применяемые в образовании, как правило, пишутся на компилируемых языках программирования и представляют собой обыденные MS-DOS- либо Windows-приложения. Учебные пособия, изготовленные на базе «{живых}» Web-страниц, встречаются еще пока достаточно изредка, хотя это направление очень перспективно. Такие учебные пособия можно весьма стремительно создавать и видоизменять; а по сопоставлению с обыкновенными программками они только малогабаритны (ну сколько места могут занимать легкая Web-страница и пара изображений?). Вприбавок такие пособия прямо-таки просятся в Веб, на Web-сайты, а означает, можно без особенных заморочек организовать пристижное сейчас дистанционное обучение .

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

Вот три варианта, когда анимация будет весьма полезна.

9.
Создание анимации в Dreamweaver

До этого всего, нужно договориться о терминологии, применяемой в Dreamweaver. Познание ее поможет в предстоящей работе. Итак:

• набор анимационных частей, чье движение синхронизировано относительно одной и той же временной шкалы. Это необходимо, поэтому что одна Web-страница может содержать несколько независящих анимаций, другими словами наборов анимационных частей, синхронизированных относительно независящих временных шкал;
• полоса, проходящая из точки начала анимации 1-го из частей в точку ее конца, пусть именуется дорожкой анимации. Этот термин мы уже ввели и сейчас его закрепим. Дорожка указывает, когда анимиро-ванный элемент начнет двигаться и когда он остановится;
• свободное место на временной шкале анимации, которое быть может занято дорожкой, будет называться каналом. количество доступных каналов описывает наибольшее количество дорожек в одной анимации, а означает, наибольшее количество входящих в нее анимационных частей.

10.
Создание простейшей анимации

Для работы нам сходу же пригодится панель Timelines, в какой показываются все анимации, сделанные на Web-странице. Чтоб вывести эту панель на экран, включите пункт-выключатель Timelines
в подменю Others
меню Window
либо нажмите комбинацию кнопок <Alt>+<F9>. Сама панель Timelines
показана на рисунке 1.

Как видно, панель Timelines
находится в еще одном доке, занимающем нижнюю часть головного окна Dreamweaver. Это означает, что можно скрыть панель Timelines
, если она нам не нужна, щелкнув по кнопочке скрытия дока, а позже возвратить ее на экран.

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

Набросок 1.
Панель Timelines

«Но ведь Dreamweaver дозволяет работать сразу с несколькими временными шкалами. Где же другие шкалы?» Чтоб узреть их, необходимо избрать соответственный пункт комбинированного перечня анимаций, показанного на рисунке 2.

Набросок 2.
Комбинированный перечень анимаций

Чтоб анимировать какой-нибудь из доступных свободно позиционируемых частей, необходимо поместить его на шкалу времени, создав дорожку анимации. Для этого нужно выделить требуемый вольный элемент, щелкнуть по нему правой клавишей мыши и избрать в контекстном меню пункт Add to Timeline.
Вы также сможете избрать пункт Add Object
контекстного меню временной полосы либо пункт Add Object to Timeline
подменю Timeline
меню Modify.
И, в конце концов, вы сможете просто надавить комбинацию кнопок <Ctrl>+<Alt>+<Shift>+<T>.

Опосля прибавления в анимацию вольного элемента Dreamweaver выводит предупреждение, показанное на рисунке 3. Сиим он желает сказать, что может управлять в процессе анимации последующими параметрами вольного элемента:

• горизонтальной и вертикальной координатами левого верхнего угла (атрибуты LEFT и ТОР);
• шириной и высотой (атрибуты WIDTH и HEIGHT), при этом работать это будет лишь в Internet Explorer;
• порядком перекрытия, по другому говоря, z-индексом (атрибут Z-INDEX);
• видимостью (атрибут VISIBILITY).

Набросок 3.
Предупреждение, выводимое Dreamweaver опосля прибавления вольного элемента в анимацию

Это означает, что можно управлять местоположением, размерами и видимостью вольного элемента.

сейчас нужно закрыть данное предупреждение нажатием клавиши ОК.
Если нет желания больше его созидать, перед закрытием нужно включить флаг Don’t show me this Message again.

В конце концов, опосля всех треволнений, видно в перечне панели Timelines
новейшую дорожку (набросок 4). Она отображается в виде синей полосы, на которой написано имя вольного элемента, которому она принадлежит. По обеим сторонам данной полосы можно увидеть светлые кружки. Это главные точки; их пока всего две: начало и конец линии движения. 1-ая главная точка — начало — находится на первом кадре; это означает, что анимация для данного элемента начнется с первого кадра. 2-ая главная точка — конец линии движения — находится на пятнадцатом кадре; там наш анимационный элемент не станет двигаться.

Набросок 4.
Новенькая дорожка анимации

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

Набросок 5.
Маркер выделенного кадра

Можно просто поменять положение дорожки анимации, если оно не устраивает.

Для этого «ухватить» мышью дорожку (не главные точки!) и перетащить ее вдоль шкалы, пока она не займет подходящую позицию. к примеру, вы можно вынудить анимацию начинаться с десятого кадра, а заканчиваться — 20 пятым. Также вы сможете изменять длину дорожки, а означает, длительность анимации, перетаскивая на нужную позицию сейчас уже главные точки. И, очевидно, вы сможете удалить ненадобную дорожку, выделив ее и нажав кнопку <Del> либо выбрав пункт Remove Object
контекстного меню либо подменю Timeline
меню Modify.

Ну что ж, проверим свежесозданную анимацию. нужно надавить кнопку <F12>, чтоб загрузить страничку defaiilt2.php в Web-обозревателе, и… смотрим совсем недвижное изображение. В чем все-таки дело?

А дело в том, что начало и конец линии движения движения нашего анимиро-ванного заголовка совпадают, другими словами никакой линии движения нет, заголовок все время стоит в одной точке! Мы запамятовали задать линию движения!!!

Ну, ничего. Это не жутко. На данный момент мы все исправим.

Линия движения в Dreamweaver задается последующим образом. Любая главная точка представляет собой вроде бы «снимок» того состояния, в каком будет пребывать анимационный элемент. Выбрав главную точку, необходимо задать нужные характеристики свободно позиционируемого элемента (координаты, размеры и видимость), a Dreamweaver их запоминает, создавая тем данный «снимок». Исходя из этих снимков, он сам вычисляет все промежные состояния анимационного элемента, в каких он будет находиться меж главными точками. Потому, чтоб сделать анимацию хоть какой трудности, довольно будет задать нужные характеристики подходящих частей странички лишь в главных точках анимации. Dreamweaver сам сделает все другое.

Представим, заголовок будет «выплывать» из нижнего правого угла странички и передвигаться прямо на свое легитимное пространство. Так как линия движения его движения весьма ординарна (ровная линия), для ее задания возникает нужда всего в 2-ух главных точках. В первой главный точке заголовок находится в нижнем правом углу странички, а во 2-ой — в ее верхней части, там, где он и должен быть. В этих точках и должны задать характеристики нашего заголовка, поточнее, всего два параметра — горизонтальную и вертикальную координаты. (Наш заголовок во время движения не меняет ни размеры, ни видимость.)

нужно выделить первую главную точку, находящуюся сначала дорожки, щелкнув по ней мышью. Дальше «захватим» заголовок (вольный элемент Header) мышью и переместим его в правый нижний угол странички, в начало его линии движения. сейчас выделим вторую главную точку. тут поменять ничего не надо, потому что заголовок уже стоит на собственном месте.

На рисунке 6 показано то, что получится опосля всех этих манипуляций. Отлично видна узкая сероватая линия линии движения, отображаемая в окне документа, если в окне документа выделен анимационный элемент Header. При этом анимационный элемент будет находиться в том месте линии движения, которое нужно выделить на дорожке анимации. Так, если выделить вторую главную точку, он проскочит на свое легитимное пространство в высшей части странички. А если выделить какую-либо промежную точку меж первой и 2-ой главными точками, он займет соответственное данной нам точке пространство.

Набросок 6.
Готовая линия движения анимационного элемента (выделена 1-ая главная точка)

Вот сейчас можно и проверить творение. Нужно загрузить получившуюся страничку в Web-обозревателе и поглядеть, что получится. А получится… все тоже самое — снова-таки недвижный заголовок. Что все-таки сейчас позабыто?

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

Создать их весьма просто. нужно возвратиться в панель Timelines
и включим флаг Autoplay,
расположенный в верхней части данной нам панели. Dreamweaver, по собственному обыкновению, выдаст еще одно предупреждение, что на данный момент в код странички будет добавлен соответственный сценарий. Избавиться от этого предупреждения можно, нажав клавишу ОК;
если нет желания больше его созидать, сможете включить перед сиим флаг Don’t show me this Message again.
Вот сейчас все по сути готово. нужно загрузить страничку в Web-обозреватель и убедиться в этом.

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

11.
Наиболее непростая анимация

Все-же нехорошо, что заголовок и его момент. Для этого нужно будет добавить вольный элемент, создающий эту нужно избрать вольный элемент Headershadow и добавьте его в анимацию. Получившийся итог можно узреть на рисунке 7.

Прослеживаем, чтоб обе дорожки находились буквально друг под другом. Если 2-ая дорожка вышла смещенной относительно первой, изменяем ее положение и (либо) размер.

Набросок 7.
Две дорожки анимации

Для тени не нужно создавать линию движения движения, потому что она не движется, а стоит на месте. Она обязана просто появляться, когда заголовок «дойдет до точки». Потому никуда ее не нужно перемещать, а просто поменять параметр видимости.

Итак, сначала линии движения движения заголовка (1-ая главная точка) hidden
для параметра Vis.
сейчас тень остается невидимой до того времени, пока не изменим Vis
имеет inherit
(«наследование» видимости у родителя), а родитель (сама Web-страница) у нас видимый, специально задавать это необходимо. На всякий вариант проверяем, что на конце временной полосы inherit
либо visible).

Сохраняем итог работы и открываем его в Web-обозревателе. Сейчас тень будет робко «скрываться», пока не «подъедет» ее «владелец«.

Все! Надоели прямолинейные, как трамвайные рельсы, линии движения движения частей. Охото чего-нибудь зигзагообразного и извилистого, как несчастный путь к истин. Пусть заголовок в собственном пути «наверх» обходит всю Web-страницу. Это будет смотреться красивее, ну и заодно проверяем, так ли неплох этот Dreamweaver, как его расхваливают.

Что ж, Dreamweaver достойно выдержит испытание извилистостью. И на данный момент в этом убедимся. Но поначалу слегка удлиняем линию движения, скажем, до 50 кадров. «Захватываем» мышью вторую главную точку дорожки заголовка и переместим ее до соответственного деления временной шкалы. И не забудем создать то же самое с дорожкой элемента-тени!

Вот сейчас можно и попетлять.

Главные точки, фактически, и задают линию движения движения анимационного элемента. Добавим также, что линия движения его движения обязана задаваться наименьшим количеством главных точек. Для прямой, полностью хватает 2-ух точек, для изломанной полосы — 3-х, а для окружности их пригодится, как минимум, 10-ка два, чтоб движение анимационного элемента смотрелось более-менее плавным. В общем, Dreamweaver, приняв набор главных точек, должен выстроить такую линию движения движения анимационного элемента, которая для вас нужна. И количество таковых точек, как указывалось, обязано быть наименьшим.

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

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

До этого всего устанавливаем маркер выделенного кадра (см. набросок 5) на то деление временной шкалы, где будет находиться 1-ая из вновь создаваемых главных точек. Для этого нужно щелкнуть мышью по дорожке напротив подходящего деления. Дальше щелкаем на этом месте правой клавишей мыши и выбераем в показавшемся контекстном меню пункт Add Keyframe.
Также можно избрать одноименный пункт в подменю Timeline
меню Modify
либо просто надавить кнопку <F6>. На дорожке в этом месте покажется новенькая главная точка (набросок 8).

Набросок 8.
Главная точка, помещенная на дорожке анимации (в данный момент выделена)

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

Другие главные точки линии движения помещаются на дорожку анимации буквально таковым же образом. Поместить их и задать для их новое положение анимационного заголовка. Изобретём линию движения посложнее, чтоб вынудить Dreamweaver работать по-настоящему. Если поставили главную точку не в том месте, в каком желали, выделяем ее и выбераем пункт Remove Keyframe
контекстного меню. (Также можно избрать одноименный пункт в подменю Timeline
меню Modify.)
Опосля этого протестируем страничку с новейшей анимацией в Web-обозревателе. Увидем, что заголовок следует точь-в-точь по линии движения, которую для него задали.

Набросок 9.
Положение анимационного заголовка в новейшей главный точке

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

Создание линии движения вручную, методом расстановки на дорожке анимации главных точек и задания новейших характеристик анимационного элемента в этих главных точках годится лишь для относительно обычных случаев. По правде, нужно сделать таковым образом что-либо наиболее сложное, чем обычная дуга! К тому же, даже опытнейший Web-дизайнер далековато не с первого раза сделает конкретно ту линию движения, какая ему нужна. Как раз для таковых случаев Dreamweaver предоставляет восхитительную возможность просто нарисовать подходящую линию движения в окне документа. При всем этом он сам сформирует дорожку анимации и расставит на ней требуемое количество главных точек.

Поначалу нужно выполнить несколько предварительных действий. До этого всего, выделяем последнюю главную точку (конец) линии движения и запоминаем либо записываем конечные координаты заголовка. Это необходимо для того, чтоб потом, когда создастся новенькая анимация, буквально его позиционировать. Опосля этого удалим дорожку анимации заголовка, но оставим дорожку анимации его тени. Для этого выделим нужную дорожку и выберем пункт Remove Object
в контекстном меню. сейчас осталось лишь поставить заголовок в начало его предполагаемой линии движения — и можно приниматься за дело.

Выделим заголовок и щелкнем по нему правой клавишей мыши. В показавшемся контекстном меню выберем пункт Record Path.
Также можно избрать пункт Record Path of Layer
контекстного меню панели Timelines;
этот пункт становится легкодоступным, если в окне документа выделен какой-либо вольный элемент. Не считая того, в подменю Timeline
меню Modify
также доступен пункт Record Path of Layer.
Как видно, Dreamweaver предоставляет несколько способностей создать собственный выбор.

Что произойдет опосля этого? ничего. Не считая того, что при перемещении заголовка за ним будет тянуться узкая сероватая линия — Dreamweaver начнет выслеживать и записывать его линию движения. Как лишь отпустить клавишу мыши, устанавливая заголовок в конец его линии движения, он создаст новейшую дорожку анимации. Опосля этого остается лишь выставить координаты заголовка в его конечной точке, воспользовавшись значениями, записанными (запомненными) ранее, и «растянуть» или «сузить» дорожку

Набросок 10.
Непростая линия движения

анимации тени, чтоб она была равна дорожке собственного «владельца», по другому нужно сохранить страничку default2.php, открыть ее в Web-обозревателе и поглядеть на итог трудов.

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

12.
Управление анимациями

Dreamweaver дозволяет создавать несколько сразу работающих и независящих друг от друга анимаций. Они могут работать как синхронно, так и асинхронно, создавая на Web-странице истинные хороводы анимационных частей. естественно, если анимационных частей на страничке мало, полностью возможно обойтись и одной анимацией. Но если их количество превосходит десяток, существенно удобнее работать с несколькими независящими анимациями, любая из которых обхватывает маленькую группу частей, чем пробовать «запихать» их в одну анимацию.

на данный момент разглядим средства управления этими независящими анимациями.

В панели Timelines
в данный момент отображается лишь одна анимация. Чтоб переключиться на другую, нужно избрать соответственный пункт уже знакомого комбинированного перечня анимаций, показанного на рисунке 2.

Чтоб сделать новейшую анимацию, нужно избрать пункт Add Timeline
контекстного меню панели Timelines.
Также можно избрать одноименный пункт подменю Timeline
меню Modify.
Если сейчас открыть комбинированный перечень анимаций, видно, что в нем возник новейший пункт.

По дефлоту Dreamweaver присваивает вновь создаваемым анимациям имена вида Тimelinе<номер>. Если же охото отдать какой-нибудь анимации наиболее вразумительное имя, вводим его прямо в комбинированный перечень анимаций. иной метод — выбераем пункт Rename Timeline,
находящийся в контекстном меню панели Timelines
и в подменю Timeline
меню Modify.
Опосля этого на дисплее покажется диалоговое окно Rename Timeline
(набросок 11). Вводим новое имя анимации в единственное поле ввода этого диалогового окна и жмем клавишу ОК.

Набросок 11.
Диалоговое окно Rename Timeline

Чтоб удалить ненадобную анимацию, переключаемся на нее, использовав перечень анимаций, и избираем пункт Remove Timeline,
находящийся в контекстном меню панели Timelines
и в подменю Timeline
меню Modify.
Имейте, но, в виду, что самую первую анимацию, создаваемую Dreamweaver при первом открытии панели Timelines,
удалить недозволено — заместо удаления Dreamweaver ее просто очистит.

В верхней части панели Timelines
находятся несколько еще не знакомых частей управления. Разглядим некие из их.

Поле ввода Fps
служит для задания частоты кадров анимации, определяющей скорость ее проигрывания. Эта величина измеряется в кадрах в секунду (по-английски — frames per second, либо fps).

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

Флаг Loop
зацикливает анимацию. Если он включен, анимация будет проигрываться нескончаемое число раз. Если его включить, Dreamweaver выведет очередное из несметного огромного количества собственных сообщений; пока что просто нужно закрыть его. По дефлоту этот флаг выключен.

И, в конце концов, группа из 3-х клавиш и поля ввода, расположенная правее комбинированного перечня анимаций, служит для перемещения меж отдельными кадрами. Разглядим его подробнее (набросок 12).

Набросок 12.
Набор частей управления, служащий для перемещения меж кадрами анимации

Клавиши, на которых изображены направленные в различные стороны стрелки, дозволят передвигаться по отдельным кадрам анимации. Представим, выделили первую главную точку анимации (начало линии движения), находящуюся на первом кадре. Если щелкнуть клавишу со стрелкой на Право, то переместитесь на 2-ой кадр. При всем этом на втором кадре анимации в панели Timelines
будет установлен маркер выделенного кадра, а анимационный заголовок в окне документов переместится на один «скачок». Щелкая далее на кнопочке со стрелкой на Право, перемещение будет все далее к концу линии движения. Если же щелкнуть на кнопочке со стрелкой на лево, то перемещение произойдёт на предшествующий кадр.

Клавишу со стрелкой на Право можно применять для подготовительного просмотра сделанной анимации прямо в окне, документа, не открывая страничку в Web-обозревателе. Для этого нужно поставить на нее курсор мыши, надавить левую клавишу и не отпускать. При всем этом перемещение будет с кадра на кадр вперед по линии движения; в панели Timelines
по дорожке будет передвигаться маркер, а в окне документа — анимационный элемент. нужно отпустить клавишу, когда «прокрутица» анимацию до конца. К огорчению, наиболее комфортного метода подготовительного просмотра анимации Dreamweaver не дает.

Клавиша, на которой нарисована стрелка на лево, упирающаяся в препятствие, служит для резвого перемещения на самый 1-ый кадр.

Если необходимо переместиться прямо на некий кадр анимации, узнаваемый по номеру, можно просто ввести этот номер в поле ввода, расположенное меж кнопками-стрелками, и надавить кнопку <Enter>. Подходящий кадр будет тотчас найден и выделен.

Поглядим, какие Dreamweaver предоставляет способности для управления отдельными дорожками и кадрами.

Можно вырезать и копировать дорожки в буфер обмена Windows, также вставлять их в остальные каналы текущей анимации либо вообщем в другую анимацию на хоть какой Web-странице. Чтоб вырезать выделенную дорожку, нужно избрать пункт Cut
контекстного меню либо меню Edit
или надавить комбинацию кнопок <Ctrl>+<X>. Чтоб скопировать выделенную дорожку, нужно избрать пункт Сору
в этих же меню или надавить комбинацию кнопок <Ctrl>+<C>. Ну, а чтоб вставить находящуюся в буфере обмена дорожку в один из уже занятых каналов, добавив к уже имеющейся дорожке, нужно избрать пункт Paste
либо надавить комбинацию кнопок <Ctrl>+<V>. К огорчению, вставить дорожку в вольный канал нет способности вставить.

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

Опосля того как вставили новейшую дорожку из буфера обмена, можно возжелать присвоить ее другому вольному элементу. Dreamweaver предоставляет и такую возможность. Выбераем пункт Change Object
в контекстном меню либо подменю Timeline
меню Modify.
Опосля этого на дисплее покажется диалоговое окно Change Object, показанное на рисунке 13. Выбераем подходящий элемент в раскрывающемся перечне Object to Animate
и жмем клавишу ОК.

Набросок 13.
Диалоговое окно Change Object

время от времени бывает нужно растянуть какой-нибудь участок дорожки на несколько кадров либо, напротив, сузить. Для этого служат пункты Add Frame и Remove Frame,
находящиеся в контекстном меню и подменю Timeline
меню Modify.
1-ый пункт вставляет кадр в то пространство на дорожке, где находится маркер выделенного кадра, а 2-ой — удаляет оттуда кадр.

13.
Анимация графических изображений

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

правда, у этого правила есть одно исключение. Можно анимировать графические изображения, и Dreamweaver предоставляет такую возможность. Но изменяться в процессе анимации может лишь имя отображаемого файла (атрибут SRC тега <IMG>).

Но даже этого нередко бывает довольно. По правде, изменяя имя графического файла, можно создавать анимации с стремительно сменяющимися кадрами. (Практически, таковым образом можно проигрывать на Web-странице реальный кинофильм, не прибегая к созданию видеофайла, даже в формате «анимационный GIF».) необходимо будет лишь запастись нужным количеством графических файлов, содержащих различные фазы анимации, но это уже неувязка Web-художника.

Как анимировать графическое изображение? Весьма просто. Сделаем новейшую страницу и назовем ее 12.1.php. Она не будет иметь дела к веб-сайту Sample site 1, но возмет в долг из него графические файлы.

нужно поместить на эту страничку графическое изображение. В качестве отображаемого файла задать email.gif, находящийся в папке Pics, вложенной в папку Samplel (в ней размещены файлы веб-сайта Sample site 1). Это совершенно просто, потому нет смысла пускаться в долгие разъяснения.

сейчас нужно сделать новейшую дорожку анимации для вновь сделанного изображения. Выделяем его и выбераем пункт Add Object
в контекстном меню панели Timelines
(в контекстном меню графического изображения такового пт нет). Опосля этого Dreamweaver выведет еще одно сообщение, предупреждающее, что он может управлять лишь параметром имени отображаемого файла (набросок 14). Нужно закрыть его, нажав клавишу ОК.

Набросок 14.
Предупреждение, выводимое Dreamweaver опосля прибавления графического изображения в анимацию

Снаружи сделанная для графического изображения дорожка анимации не различается от такой для свободно позиционируемого элемента. имя графического изображения можно задать в поле ввода Image
редактора параметров.

Установим длительность анимации в 5 секунд либо 75 кадров (5 секунд помножить на 15 кадров в секунду). Для этого нужно перетащить на лево правую границу (вторую главную точку) дорожки до отметки «75» на шкале времени. И задать новейший графический файл, который отобразится во время заслуги 2-ой главный точки. Для этого проверяем, выделена ли 2-ая точка, и изменим содержимое поля ввода Src
редактора параметров так, чтоб оно указывало на файл Email2.gif, также находящийся в папке Pics, вложенной в папку Samplel. Данный файл будет отображен при достижении конца… нет, не линии движения, а дорожки (ведь изображение не движется).

Осталось включить флаг Autoplay
и загрузить страничку 12.1.php в Web-обозревателе. Через 5 секунд опосля окончания загрузки странички изображение, отображаемое в ней, поменяется, — анимация работает.

Если необходимо поочередно поменять несколько изображений (фаз анимации), нужно сделать соответственное количество главных точек на дорожке. В каждой из этих главных точек установить необходимое Src.

14.
Недочеты анимации, основанной на Web-сценариях, и их преодоление

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

Самый основной недочет анимаций, основанных на Web-сценариях, -это… нет, никак не несопоставимость со старенькыми программками Web-обозревателей. (Хотя, несопоставимость тоже следует принимать в расчет.) Это «тяжесть» нужного для их обработки программного обеспечения, его ресурсоемкость и не весьма высочайшее быстродействие. Это быть может критично, если посреди гостей веб-сайта будет много обладателей старенькых, маломощных компов, на которых оно будет работать весьма медлительно, из-за что анимация станет воспроизводиться рывками. Если вообщем будет…

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

В качестве решения данной нам препядствия можно лишь порекомендовать не создавать без нужды сложных анимаций. Но если уж без их не обойтись, стоит пошевелить мозгами о том, чтоб сделать специальную версию веб-сайта вообщем без использования анимации и вообщем сценариев. Тогда владельцы старенькых программ и (либо) маломощных компов сумеют посещать ее, а счастливые обладатели современной техники получат наслаждение от «полновесной» версии веб-сайта. Таковой подход употребляется весьма нередко; практически все большие и пользующиеся популярностью веб-проекты имеют «бессценарную» версию как раз на таковой вариант.

Есть и иной путь. Если анимация представляет собой набор поочередно сменяющихся картинок либо элемент, передвигающийся по маленькой площади странички, нужно испытать воплотить ее в виде видеофильма. Фактически все программки Web-обозревателей, кроме совершенно уже старенькых, поддерживают формат «анимационный GIF-файл«. Этот формат употребляется в Web-графике так длительно, что даже подмял под себя некие эталоны, к примеру эталон на маркетинговые баннеры. Существует большущее количество программ для сотворения анимации в формате GIF. А для помещения таковой анимации на Web-страницу нужен лишь отлично знакомый тег <IMG> — и никаких сценариев!

Буквально так же можно обойти делему несовместимости со старенькыми программками.

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

Разглядим обыденные программки, которыми пользуются. Это могут быть популярнейший текстовый редактор Microsoft Word, проигрыватель мультимедийных файлов Nullsoft WinAmp, игра Quake 3 либо сама операционная система Windows. Все эти программки были сделаны с внедрением компилируемых языков программирования, другими словами программка, написанная на каком-либо языке программирования (C++, Pascal либо Assembler), была откомпилирована в набор инструкций центрального микропроцессора и сохранена в файле с расширением ехе. Потом, если юзер запустит этот файл, он будет исполняться конкретно центральным микропроцессором, без роли каких-то программ-интерпретаторов.

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

Программки Web-сценариев пишутся на интерпретируемых языках программирования. Это означает, что в Web-странице такие программки находятся прямо в виде начального кода. Хоть какой JavaScript-программист может без усилий получить доступ к этому коду и узнать, как работает программка. А это означает, что никаких секретов в JavaScript-коде не утаишь.

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

Есть, вообще-то, еще один недочет, но он свойствен не самой анимации, основанной на Web-сценариях, а подходу, предлагаемому Dreamweaver. Дело в том, что нужный для сотворения анимации набор Web-сценариев помещается в секцию html-заголовка странички (тег <HEAD>). Из этого следует, что если применять для сотворения страничек шаблоны, можно сделать анимационные (и вообщем любые свободно позиционируемые) элементы лишь в самом шаблоне, но никак не в сделанных на его базе страничках. Dreamweaver просто не даст этого создать. По правде, секция заголовка — это неизменяемая область, а поместить какой-нибудь код в неизменяемую область Dreamweaver не дозволит. Хотя, естественно, можно отрешиться от анимации либо «открепить» страничку от шаблона, а позже уже созодать с ней все, что заблагорассудится.

Заключение

В данной контрольной работе рассмотрены такие пункты как: введение в Web-сценарии, ограничения html, web-сценарии, действия, главные принципы анимации, простая анимация, анимация настоящего времени, анимация — подход Dreamweaver, создание анимации в Dreamweaver, создание простейшей анимации, наиболее непростая анимация, управление анимациями, анимация графических изображений, недочеты анимации, основанной на Web-сценариях, и их преодоление.

Создание анимации на Web-странице — задачка достаточно обычная, если, естественно, работать в среде Dreamweaver. Нужно лишь задать линию движения движения подходящего элемента, a Dreamweaver делает всю остальную работу по «вдыханию» в него «жизни«. Если охото поглядеть, что все-таки он делает со страничкой в этом случае, нужно поглядеть начальный HTML-код в режиме отображения кода. Будет удивление, сколько всего сделал Dreamweaver лишь для того, чтоб заголовок странички двинулся с места, какие большие Web-сценарии он для этого сделал.

Перечень литературы

1. С.В.Симонович Информатика. Базисный курс. Издательство «Питер» 1999
2. Монастырский В.А. Киноискусство в социокультурной работе. — Тамбов: Изд-во Тамбов. ун-та, 1999.- 289с.
3. Шафрин Ю.А. Азбука компьютерных технологий: Образовательная книга-самоучитель для взрослых юзеров ПК IBM PC. М.: ИНФРА-М, 2002.-500 с.
4. Шафрин Ю.А. Базы компьютерной технологии. — М.: Наука, 1998.-230 с.

5. Стразницкас М. Photoshop 5.5 для подготовки Web-графики: Учеб. курс/ Пер.с англ.Т. Федорова.- СПб.: Питер, 2000.

6. Internet источники

]]>