Professional Documents
Culture Documents
Леше в
Создание
интерактивного
web-сайта
ББК 32.988.02я7
УДК 681.324(075)
Л54
Книга посвящена созданию web-сайта: его разработке, дизайну, верстке и публикации в Сети.
В ней приводится описание работы с различными приложениями, которые используются при созда-
нии web-страниц. Основное внимание уделяется созданию интерактивных эффектов, не требующих
написания серверных сценариев, а также описанию двух альтернативных технологий — JavaScript
и Flash, с помощью которых можно «оживить» страницы своего сайта. Для удобства книга допол-
нена краткими справочниками по HTML, Flash, JavaScript и ActionScript, а также описанием ресур-
сов Интернета и новинок Flash MX.
ББК 32.988.02я7
УДК 681.324(075)
.
Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как надежные. Тем не
менее, имея в виду возможные человеческие или технические ошибки, издательство не может гарантировать абсолютную
точность и полноту приводимых сведений и не несет ответственности за возможные ошибки, связанные с использованием книги.
Ter<FORM> 263
Кнопки 263
Картинка 264
Текст 265
Текстовое поле 268
Флажок 271
Переключатель 272
Раскрывающийся список 273
Отправка данных формы 274
Пересылка данных формы между страницами 276
Ссылка на e-mail 277
Готовые формы и услуги 277
Гостевые книги 277
Чаты 279
Опросы 279
Рассылка 279
Размещение информации с других сайтов . 280
Формы во Flash 281
Текст и переменные 281
Использование внешних данных 289
Меню 298
Ссылка на web-страницу и e-mail 301
Обмен данными между Flash и JavaScript 303
Что нового мы узнали 307
Предположения автора
относительно своего читателя
Адресуя кому-то свои слова, мы всегда строим некоторые предположения отно-
сительно их получателя. Мы ожидаем, что наши слова будут поняты, или, на-
оборот, даже не предполагаем этого. В зависимости от этого мы можем попы-
таться найти другие слова, по-другому построить фразы или вообще обойтись
без ненужного сотрясания воздуха или порчи бумаги.
Аналогично и я, автор данной книги, делаю определенные предположения отно-
сительно своего будущего читателя. Первое предположение касается уровня
культуры чтения компьютерной литературы. То есть я считаю, что человек, от-
крывший данную книгу и желающий освоить новую (а для кого-то, может быть,
уже хорошо известную) технологию создания кусочка виртуального мира, уже
имеет некоторое представление о компьютерах, а именно:
• Он знает, что слово «мышь» обозначает не только всем известного грызуна,
но и графический манипулятор — одну из аппаратных составляющих совре-
менного компьютера — и его указатель на экране.
• Он не станет стучать мышью по монитору в условленном месте, столкнув-
шись с выражениями «подвести мышь», «щелкнуть мышью» и т. д.
• Он знает или, по крайней мере, догадывается о значении слов «монитор»,
«компакт-диск», «гибкий диск» и «жесткий диск».
• Он имеет представление об интерфейсе современных программ, и слова
«окно», «флажок», «поле», «список» и т. п. вызывают у него правильные ас-
социации.
• Он знаком с устройством файловой системы, и файлы, папки и директории
не вызывают у него благоговейного ужаса.
• В крайнем случае, при встрече неизвестного ему термина, которого не ока-
жется в указателе данной книги, он будет способен отыскать его смысл, на-
пример, в книгах из списка литературы.
Второе и главное предположение состоит в том, что читатель данной книги дей-
ствительно хочет создать свой персональный интерактивный сайт. То есть он
В переводе В. Марковой.
Введение 17
От издательства
Ваши замечания, предложения, вопросы отправляйте по адресу электронной
почты comp@piter.com (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
Все файлы примеров, приведенных в книге, вы можете найти по адресу
www.piter.com/download.
На web-сайте издательства www.piter.com вы найдете подробную информацию
о наших книгах.
Занятие 1
Спасение утопающих
Бабочки полет
Будит тихую поляну
В солнечном свету.
1
Мацу о Басе'
Интерактивность
Интерактивность — краеугольное понятие не только для данной книги. Что же
оно означает? Обычно под этим словом подразумевают наличие некоторого ак-
тивного начала, проявляемого с обеих взаимодействующих сторон. В нашем
случае одно безусловно активное начало несет пользователь, который пришел
поискать что-либо в Интернете, другое — сайт. Иными словами, интерактивный
сайт — это сайт, который активно взаимодействует с пользователем, предостав-
ляя (или, наоборот, скрывая) необходимую информацию.
Представим себе простой пример. Вы зашли в магазин, чтобы купить свой люби-
мый йогурт (или пиво — кому что больше нравится), но обнаруживаете себя пе-
ред километрами полок, заваленных какими угодно, но только не кисломолочными
продуктами. Что делать? Естественно, что вы подходите к продавцу, объясняете,
что вы ищете, и он подводит вас к полке с вожделенным йогуртом. Дальнейшие
технические и коммерческие трудности мы оставим за кадром, в край- ности, вы
снова сможете обратиться все к тому же продавцу за консультацией.
В нашем случае продавец (и магазин в его лице) был интерактивным: он выслу-
шал вашу просьбу, осознал (!) и выполнил ее. Но представим себе, что магазин
за границей и ни один из продавцов не понимает вашего идеального английско-
го, а слово «йогурт» слышит впервые в жизни. Вы активно размахиваете друг
перед другом руками, но долгожданная цель не приближается — и вы в отчая-
нии идете самостоятельно исследовать содержимое многочисленных стеллажей.
Но и в данном случае продавец выступил в роли «интерактивной» сущности,
ведь на каждый ваш взмах руками он реагировал целым каскадом труднопроиз-
носимых звуков и телодвижений. Конечно, это пустая интерактивность, так как
она не принесла вам ощутимой пользы, но все же интерактивностью осталась,
ведь потом будет о чем вспомнить долгими зимними вечерами в сотне километ-
рах от приличного магазина.
И на закуску третий вариант. Вы попали в полностью автоматизированный ма-
газин, где людей просто нет — сплошь автоматы и многочисленные надписи.
И, если внимательно изучить хотя бы некоторые из них, поиск нужного продук-
та не составит особого труда (по крайней мере, для человека, умеющего читать
и выполнять простые инструкции, наподобие «вам туда»). Но в данном случае
интерактивности нет! (Зачаточную интерактивность в виде выдачи продуктов и
пробивания чеков мы не будем учитывать.) Магазин, безусловно, помог нам ра-
зобраться в своих недрах, но он это делал пассивно.
А теперь добавим небольшой штрих: пусть изначально все надписи будут сдела-
ны на тарабарском языке (вам никогда не приходило электронное письмо в не-
верной кодировке?), и вы этого языка совсем не знаете. Задача поиска могла бы
сильно усложниться, если бы создатели магазина любили поиздеваться над
Интерактивность 21
1
Думаю, не далек тот час, когда, позвонив по телефону, вы сможете влиять не только на действие
в шоу, но и на сценарии мыльных опер и мультиков.
22 Занятие 1. Спасение утопающих
Серверы, предоставляющие
бесплатный хостинг
Итак, вы уже полны решимости рассказать миру о себе, создав свою виртуаль-
ную страничку. Но вас еще точит червь сомнения: а вдруг за страничку надо бу-
дет платить, как за собственную рекламу? Если наличие многочисленных серве-
ров, предоставляющих бесплатные услуги электронной почты, вас не убеждает,
повторю: размещение web-страницы во Всемирной сети может быть абсолютно
бесплатным удовольствием (конечно, не считая оплаты услуг провайдера за под-
ключение к Интернету, если вы платите за них из своего кармана).
Серверов, предоставляющих бесплатный хостинг, появилось довольно много и в
Рунете, и за его пределами. Вначале мы обсудим два наиболее популярных сер-
вера, а в приложении 1 приведем список таких серверов, зарегистрированных на
Яндексе.
В качестве обсуждаемых параметров сервера будут фигурировать следующие по-
казатели:
• количество пространства на жестком диске сервера, выделяемое под вашу
страничку;
• основная кодировка сервера;
• тип регистрации и загрузки файлов (WWW или FTP);
• дополнительные сервисы;
• наличие e-mail;
• дополнительные приятные и не очень приятные особенности сервера.
Естественно, за время выхода в печать цифры могут измениться, но думаю, что
в большую сторону. Начнем же мы с самого народного сервера Рунета, который
так и называется — narod.ru.
www.narod.ru
Предоставляемое дисковое пространство не ограничено (по крайней мере, так
утверждается на самом сервере). Вначале вы получаете в свое пользование
Инструменты создания Web 23
100 Мбайт, и затем эти мегабайты автоматически растут, как только сервер «по-
чувствует», что вам стало мало места1. Одновременно с названием сайта вы ре-
гистрируете и почтовый адрес. Доступ — по FTP. Однако вы можете сделать
свой сайт с помощью конструктора и шаблонов, предоставляемых сервером, в
режиме on-line (HTTP-доступ). Дополнительно можно получить множество
благ: гостевую книгу и счетчик, ежедневную статистику посещений, персональ-
ный (со свободным входом) или частный (с паролем) чат. На сервере работает
служба поддержки и форум по проблемам сервера. Но ложка дегтя есть и в этой
бочке: Яндекс разместит на вашем сайте свой рекламный баннер, «не портящий
дизайн страницы».
ПРИМЕЧАНИЕ
На самом деле при работе с Яндексом вы скоро обнаружите не одну ложку дегтя. Основ-
ные проблемы связаны с тем, что сервер загружен и даже высокоскоростные линии не спо-
собны организовать быстрый доступ к своим страницам в часы пик.
www.geocities.com
Видимо, самый популярный иностранный сервер, раздающий бесплатные стра-
ницы и e-mail — дитя монстра Yahoo!. Дискового пространства дают существен-
но меньше — всего 15 Мбайт, так что цените русские просторы и широту души.
В дальнейшем можно будет расшириться, если очень захотите. Зато предостав-
ляются многочисленные услуги, благодаря близкому родству с Yahoo!: свой
HTML-редактор, статистика (трэкер), так же как и на narod.ru, масса шаблонов
для создания сайта, гостевая книга, счетчик и многое другое. Так же как и на
narod.ru, на страницу сайта встроят баннер спонсоров. Если сайт на narod.ru -
ключик в сообщество почитателей Яндекса, то на geocities.com — ваш пропуск
к ресурсам Yahoo!.
.
HTML и JavaScript
Как вы уже, наверное, знаете, основной язык страниц Интернета — HTML -
даже не является языком программирования или сценариев. Как следует из его
названия, это просто язык разметки текста, на котором указывают браузеру, ка-
ким образом следует оформить тот или иной участок текста. Откуда же берется
активное и тем более интерактивное содержание на страницах Сети? Оно появ-
ляется в основном благодаря встроенным в HTML-документ сценариям. Сцена-
рии в Интернете пишутся на двух языках, один из которых — VBScript — явля-
А ведь еще недавно жесткий диск на 200 Мбайт считался пределом мечтаний!
24 Занятие 1. Спасение утопающих
СОВЕТ
Если вы в браузере выполните команду Вид > Код страницы (Просмотр HTML-кода или
В виде HTML) на заинтересовавшей вас web-странице, то браузер без утайки покажет вам
все ее внутреннее устройство: и теги HTML, описывающие структуру и форматирование
страницы (они заключены в угловые скобки), и код сценариев, выполняющихся при ее
просмотре. В большинстве случаев даже не придется конфликтовать по поводу авторских
прав. Если вам понравиться какой-либо сценарий, вы сможете договориться с его автором
или отыскать в Сети место, где он лежит специально для этой цели — берите, не жалко.
Как правило, цена за использование чужого сценария не велика: вас просто попросят
честно написать имя создателя.
Однако и в этой бочке меда можно отыскать свою ложку дегтя. И состоит она в
следующем. Лучшее в Интернете делается мастерами своего дела, поэтому если
вы хотите стать оригинальным на этом поприще, вам придется стать мастером
(ни много, ни мало). Ведь как бы вы умело ни копировали оригинал, копия ос-
тается копией. А вам только и остается пытаться проявить свою оригинальность
в тексте или картинках. Некоторым и этого бывает достаточно. Впрочем, всегда
есть «но»...
•
Flash
В не столь далеком прошлом в руки web-дизайнеров попал новый и удивитель-
ный по своим свойствам инструмент создания виртуального мира — Flash. Его
родитель — фирма Macromedia — наделила свое детище рядом противоречивых
свойств. С одной стороны, Flash предназначен для создания анимации, и его по-
рождения должны бы быть слишком тяжеловесными для Web. Однако многие
ролики оказываются более компактными, чем картинки в графических форматах
GIF или JPEG (о графических стандартах Сети см. занятие 10). Дополнитель-
ные модули, созданные самой Macromedia, позволяют просматривать фильмы
практически в любом обозревателе Интернета. То есть вам не надо тестировать
ваше произведение на совместимость с разными браузерами (о том, почему это
необходимо для HTML-документов и, в особенности, для сценариев JavaScript,
будет рассказано в следующих занятиях). А главное — Flash имеет простой и
понятный интерфейс и прозрачную логику создания фильмов и при этом прак-
тически неограниченные возможности!
С появлением пятой версии Flash получил возможность конкурировать с HTML
и JavaScript в главном деле — конструировании сайтов. Теперь с помощью Flash
можно создать не только баннер или отдельный ролик, а при желании целый
сайт (!), который мало в чем уступит созданным по классическим технологиям,
Что нового мы узнали 25
ПРИМЕЧАНИЕ
Когда книга выйдет в свет, распространенной версией Flash станет уже Flash MX. Новые
возможности программы описаны в приложении 6. Не пугайтесь нового — интерфейс про-
граммы хоть изменился, но в лучшую сторону, и остался таким же дружелюбным и понят-
ным, как и раньше.
Мастерская на www.narod.ru
Ну вот мы и приступаем к первому практическому занятию. Для начала загру-
жаем браузер, подключаемся к Интернету и в строке адреса набираем адрес
www.narod.ru. Он благополучно меняется на www.narod.yandex.ru, подтверждая, что
сервер narod.ru имеет к Яндексу самое непосредственное отношение. Впрочем,
об этом же сообщит и загрузившаяся страница (рис. 2.1).
1
В переводе В. Марковой.
Мастерская на www.narod.ru 27
Главная страница
В глаза бросается белым по синему лозунг: «Постройте свой сайт за 60 секунд».
Конечно, одной минуты явно недостаточно, чтобы сделать что-либо путное, по-
этому не будем сразу регистрироваться, а вначале пройдемся по ссылкам, кото-
рые расположены чуть ниже, чтобы познакомиться с «жителями» Народа и его
правилами.
• Первые две ссылки, Первый раз с народом? и Зачем это надо, ведут на страни-
цу, где подробно описаны прелести «виртуального Я».
• Ссылка Что здесь дают расскажет, какими благами хостинга вы сможете вос-
пользоваться.
• Пробный тур — краткий перечень шагов, которые вы должны сделать, прежде
чем ваш сайт заживет полнокровной жизнью. Обратите внимание на первый
пункт списка — Выберите имя для сайта. Если вы думаете, что это просто, то
сильно ошибаетесь. В Народе вы не встретите двух жителей с одинаковы-
ми именами — придется придумать и свое — красивое и функциональное.
Помните, что «как вы яхту назовете, так она и поплывет».
• Ссылка Образцы страниц приведет вас к описаниям шаблонов, которые пре-
доставляются Народу в помощь.
• Собственно Помощь придет в качестве ответов на Часто задаваемые Вопросы
(сокращенно — ЧаВо или FAQ, Frequently Asked Questions) со множеством
полезных ссылок на услуги сервера.
• Обязательно просмотрите Пользовательское соглашение — оно, конечно, слег-
ка длинновато, но, например, только там написано, что на вашу страницу бу-
дет приколот баннер Яндекса. Там же написано, что можно, а что нельзя раз-
28 Занятие 2. О пользе бесплатного сыра
Регистрация
Вначале вы должны разрешить вашему браузеру выполнять сценарии JavaScript
и принимать файлы cookie, и лучше также разрешить автоматическую загрузку
изображений. Затем можно набрать имя вашего будущего сайта в поле на глав-
ной странице и нажать кнопку Занять (Submit). Дальше вы попадете на страницу
с регистрационной формой, состоящей из нескольких разделов: Логин и Пароль,
Идентификационные данные, Персональные данные. Обязательными для заполнения
являются только поля, отмеченные красной звездочкой: Логин, Пароль, Подтвер-
дите пароль, Контрольный вопрос, Ваш ответ, Фамилия и Имя.
Теперь обо всем по порядку.
СОВЕТ
В Netscape Communicator все настройки браузера собраны в диалоговом окне Настройки.
Оно вызывается одноименной командой меню Правка, а настройки автоматической загруз-
ки изображений и использования сценариев JavaScript собраны на странице категории До-
полнительные. В Internet Explorer окно называется Свойства обозревателя, вызывается ко-
мандой меню Сервис, а необходимые установки расположены на вкладке Дополнительно.
Логин — это ваше имя в Яндексе. Оно действительно во всех его службах, как
и пароль. Если вы не угадали и имя уже существует, вы сможете подобрать
другое.
Мастерская на www.narod.ru 29
ПРИМЕЧАНИЕ
Транслит — запись русских букв схожими по названию латинскими.
СОВЕТ
Не используйте в пароле кириллицу! С большой вероятностью пароль может быть переко-
дирован по пути, и вы потеряете доступ к своему сайту. Постарайтесь не забыть пароль
и периодически (лучше чаще, чем реже) меняйте его.
ВНИМАНИЕ
Если браузер не показывает кнопку на экране (если у вас отключена загрузка графических
изображений), то нажать вам ее не удастся: при щелчке на длинном белом поле вас вы-
бросит на страницу с девственно чистой регистрационной формой.
Плохой Пароль:
Пароль является необходимым параметром! Надо заполнить оба поля: Пароль
и Повторите пароль.
Недостаточно информации для восстановления пароля:
Вы можете выбрать один из способов восстановления пароля на случай, если
Вы его забудете.
В первом случае пароль будет высылаться Вам на адрес электронной почты,
который Вы ввели в регистрационной форме.
Во втором случае Вам будет предложено ввести ответ, введенный Вами в мо-
мент регистрации, на выбранный вопрос. Второй способ является предпочти-
тельным. Если Вы не выбрали ни одного из способов — Вы не сможете вос-
становить пароль.
Имя:
Имя — поле, обязательное для заполнения!
Фамилия:
Фамилия — поле, обязательное для заполнения!
Вернуться к заполнению формы:
Как вы, наверное, догадались, последняя строчка является ссылкой, которая
приведет вас опять к заполнению анкеты. Все правильно введенные поля
останутся заполненными, и вам не придется заполнять их заново. Если вы
просто не угадали логин (то есть предложенный вами логин уже есть), то вы
останетесь на странице с формой и вам даже будет предложено подставить
новый логин, близкий к вашему.
Паспорт
ш»:
Введите, пожалуйста, имя вашего будущего сайг»:
RSSS ; Jurod.ru
Подписаться на общие
нов ости сайга?
Подписаться на анонсы
"Народной газеты"?
Если же вы все сделали правильно и даже угадали еще никем не занятый логин,
тогда после нажатия ОК! вы попадете на совсем маленькую страничку, где вас
попросят задать имя вашего будущего сайта и почтового ящика (рис. 2.2). Если
вы удачно выбрали логин, то нет смысла менять что-либо. Также на этой форме
расположены два флажка. Если вы их установите, то вам будут приходить ново-
сти сайта и анонсы народной газеты.'
После нажатия кнопки Сохранить вы перейдете уже в свои владения — в Мастер-
скую. Впоследствии вы сможете попасть сюда, щелкнув на ссылке Мастерская
(см. рис. 2.1), расположенной на главной странице Народа, и введя логин и па-
роль. Теперь подробнее рассмотрим, какие инструменты собраны в Мастерской.
Мастерская
В левой части страницы собраны ссылки, предназначенные для конструирова-
ния сайта, а в правой — для редактирования уже существующего сайта и управ-
ления личными настройками, а также новости и Народная газета.
Сначала мы коснемся личных настроек, а затем перейдем к созданию сайта.
В разделе Мои данные собраны следующие ссылки.
• Персональные данные (Паспорт) — ваша «штаб-квартира» на Яндексе, откуда
вы можете управлять своими виртуальными владениями. Здесь собраны
ваши личные данные, доступ к почтовому ящику, адресной книге и другим
сервисам.
• Семейный фильтр — настройка браузера на ограждение детей от просмотра
сайтов для взрослых.
М Настройки (подписка, кодировки и другое) — несколько ссылок для настройки
приходящей почты.
• Переименовать сайт и Удалить регистрацию — ссылки говорят сами за себя.
Теперь перейдем к созданию собственного сайта, пока — по шаблонам. Все нуж-
ные ссылки собраны в левой части Мастерской в разделе, который так и назы-
вается — Создание сайта.
Создание сайта
Так как мне не известно, какой сайт вы собираетесь строить, я кратко опишу все
подразделы и ссылки, посвященные созданию сайта с помощью Конструктора
страниц. Вы можете составить свой сайт из любого мыслимого и немыслимого
набора страниц: романтика и бизнес, объявления и общение. Но начнется экс-
курсия с основного — с главной страницы.
Главная страница
Создание главной страницы начинается со щелчка на ссылке Шаблоны, располо-
женной в разделе Моя главная страница. Шаблонов не так и много — всего де-
вять. Кроме этого присутствует возможность сделать свой шаблон, но это мы
оставим на закуску. А начнем с уже существующего шаблона, например под на-
званием Пустынный. Устанавливаем переключатель на этот шаблон (щелкаем в
пустом кружке вверху слева от шаблона) и нажимаем кнопку Далее.
32 Занятие 2. О пользе бесплатного сыра
СОВЕТ
Обратите внимание на обои страницы, изображенной на рисунке. Они представляют собой
яркий негативный пример их использования: сливаясь с текстом, они мешают чтению.
Текст и заголовки должны контрастно смотреться по отношению ко всем использованным
в рисунке обоев цветам.
$@Ш *вйи» Я
«Главная страница **» «ЛЩ
«fe*
....... ИМ
,-.:
1,
safes «Мм
а
Диз ав :ом
•ло
шаолоне
:
»
ВНИМАНИЕ
На самом деле битва у вас будет в основном не с самим дизайном, а с неповоротливым
Яндексом, который регулярно «забывает» обновлять рисунки на странице и пользуется
кэшем в самых неподходящих случаях (чтобы этого избежать, всегда переименовывайте
графический файл после внесения изменений и загружайте его под новым именем), и т. д.
Также не забывайте обновлять страницу при просмотре (кнопка Обновить на панели
управления браузера).
Итак, будем считать, что подвигов ради этой «прекрасной дамы» вы совершили
уже достаточно, так что можно перейти к покорению других...
Другие страницы
Шаблоны из разных разделов различаются, но имеют почти одни и те же пара-
метры. Поэтому дальше мы пройдемся «галопом по Европам». Единственный
пункт, которого не было на главной странице, но который есть на большинстве
остальных, — это просьба ввести имя HTML-файла с пояснением («если вы хо-
тите, чтобы эта страница была главной страницей вашего сайта, введите имя
файла index»). Итак, в Мастерской предлагают шаблоны следующих типов.
• Про меня — Пастельный, Зубчатый, Мышеходный — для любого характера и на-
строения, чтобы рассказать о себе любимом.
• Фотоальбом — оформление страниц с любимыми фотографиями, не хуже чем
в ларьках Kodak. Возможны варианты с предварительным просмотром (где
расположены миниатюры) и сразу в полную величину фотографии.
2 Зак. 96
34 Занятие 2. О пользе бесплатного сыра
СОВЕТ
Некоторые элементы сайта могут располагаться на других страницах, например опросы,
формы поиска, счетчики. Если вы будете их использовать, просмотрите их дизайн перед
оформлением страницы размещения и постарайтесь оформить всю страницу в едином
стиле.
Я н декс.За кладки
В этом разделе мы коснемся еще одной службы Яндекса — Закладки. Она не свя-
зана напрямую с интерактивными элементами, однако будет полезна для запол-
нения страницы с любимыми ссылками, а главное — вы сможете найти в за-
кладках пользователей множество полезных ссылок.
Для того чтобы попасть в службу закладок, необходимо щелкнуть на ссылке За-
кладки в списке служб Яндекса или набрать адрес http://zakladki.yandex.ru/. Слева
расположены ссылки на страницы с папками и закладками пользователей. По-
бродите по ним — наверняка найдете что-нибудь интересное.
Справа на странице закладок расположена панель Мои закладки, которая нас в
первую очередь и интересует. Проще всего загрузить закладки, пользуясь за-
грузкой закладок из браузера. Только вначале приведите свои закладки в поря-
док. Выберите в Netscape Communicator команду меню Компоненты > Закладки >
Изменить закладки, в Internet Explorer — Избранное > Упорядочить избранное. В от-
крывшемся окне упорядочьте свои закладки: создайте новые папки, переместите
в них закладки, удалите ненужные или соберите их в одну папку. Данная опера-
ция поможет вам сэкономить много времени при работе в Сети.
Теперь можно приступать к загрузке. Для этого служит кнопка Загрузите свои
закладки в сеть на панели Мои закладки. Яндекс сам попробует определить ваш
браузер и предложит один из вариантов: Импортировать закладки из Netscape Navi-
gator/Internet Explorer 4/5/Internet Explorer 5. Если вы сомневаетесь в том, что Ян-
декс правильно «угадал» тип вашего браузера, можете пройтись по ссылкам,
расположенным чуть ниже, и более точно определить его. Если же вы считаете,
что все нормально, — жмите ОК. Затем, нажав кнопку Обзор, выберите файл с за-
кладками на вашем компьютере; пояснительный текст укажет вам, где его ис-
кать. После завершения поиска нажимайте Продолжить. На следующей странице
отметьте флажками папки и закладки, которые вы решили поместить в общий
доступ, введите имя папки ваших закладок и нажмите кнопку Сохранить, распо-
ложенную вверху страницы.
Вот, собственно, и все, теперь вы сможете воспользоваться своими закладками
с любого компьютера, подключенного к Интернету. С помощью меню, распо-
ложенного на странице Мои закладки, вы сможете оперировать закладками не
хуже, чем в браузере.
Теперь перейдем к использованию импортированных закладок на странице с
любимыми ссылками. После того как вы выберете шаблон для страницы и на-
жмете Дальше, появится страница для ввода ссылок и текста. Среди прочего
36 Занятие 2. О пользе бесплатного сыра
Редактирование сайта
После того как вы создали основные страницы сайта, самое время вернуться к
редактированию главной страницы, чтобы вставить ссылки на новые страницы.
Для этого надо пройти в Мастерскую и щелкнуть на ссылке Редактирование стра-
ниц, созданных по шаблонам, расположенной в правой части окна. Появившаяся
страница содержит список всех страниц сайта, созданных по шаблонам. Устано-
вите флажок рядом с файлом index.html — так назвается главная страница сай-
т а — и нажмите кнопку с изображением карандаша — Редактировать (edit). Вы
попадете на страницу с заполненным шаблоном. Пролистните до конца и запол-
ните ссылки. Если вы почувствовали, что дизайн главной страницы сильно от-
личается остальных элементов сайта, можно подправить и его.
Стиль сайта
Одним из существенных минусов использования шаблонов при создании сайта
на Народе является отсутствие стилей дизайна (подробнее о дизайне см. заня-
тие 8). Подобрать для разных страниц даже похожие шаблоны в данный момент
нельзя. Выход состоит в использовании «самодельного» шаблона. Поэтому пред-
лагается следующий порядок действий.
• Вначале набросайте на бумаге примерную структуру сайта: какие страницы,
сколько страниц одного типа, какие ссылки будут идти между ними. При-
мерный план сайта приведен на рис. 2.4.
Персональная страничка
persona.html
Главная страница,
index.html
Работа, О семье,
rabota.html family.html
Хобби, Фотоальбом,
hobby.html foto.html
СОВЕТ
Если вам понравился шаблон и вы не хотите делать свой, тогда выдержать единый стиль
можно следующим образом: все страницы сайта вам надо сделать в одном шаблоне! Каж-
дый раз только изменяйте название страницы и наполняйте ее другим содержанием, и вы
автоматически выдержите стиль.
Размещение в каталоге
Чтобы посетители Яндекса смогли добраться до ваших страниц, надо зарегист-
рировать их в Каталоге. Каждая страница сайта может попасть в свою рубрику.
Всего можно зарегистрировать 3 страницы, а в каждой рубрике — не более од-
ной.
Чтобы зарегистрировать страницу в каталоге, необходимо на страницах Управле-
ние файлами или Редактирование страниц, созданных по шаблонам установить фла-
жок рядом с файлом и нажать кнопку Изменить позицию в каталоге (rubrics).
Далее вам будет предложено выбрать один из следующих 166 вариантов (полу-
жирным выделены названия разделов).
Автомобили и мотоциклы
Мотоциклы Новости и обзоры
Ремонт, обмен опытом и советы Продажа, покупка, обмен
Автомобили Другое
Бизнес и финансы
Инвестиции Консалтинг
Маркетинг Менеджмент
Недвижимость Новости и аналитика
Полиграфия и издательская деятельность Рекламный и выставочный бизнес
38 Занятие 2. О пользе бесплатного сыра
Дом и семья
Дети Домашние животные
Кухня Обустройство дома
Моя семья Другое
Здоровье
Медицина Нетрадиционная медицина
Оздоровительные средства и лекарственные Социальная и психологическая реабилитация
препараты
Другое
Знакомства
Страницы девушек Страницы мужчин
Нетрадиционные знакомства Обмен опытом и советы
Другое
Красота и мода
Мода и стиль Новости и обзоры
Советы Услуги
Другое Культура, религия, философия
История культуры Культурная жизнь
Мистика Религия
Философия Психология
Астрология Другое
Мастерская на www.narod.ru 39
Литература и искусство
Архитектура Дизайн
Декоративно-прикладное искусство Изобразительное искусство
Новости и обзоры Образовательная литература и публицистика
Поэзия Приключения и детективы
Фантастика и фэнтези Фотоискусство
Художественная литература Скульптура
Театр Другое
Музыка и кино
Авангард Авторская песня
Альтернативная музыка Блюз и джаз
Классическая музыка Новости и обзоры
Панк Поп
Продажа, покупка, обмен Рок
Русский рок Собственные страницы музыкантов
Электронная музыка Этническая и религиозная музыка
Гранж Хип-хоп
Мультипликация Отечественное кино
Зарубежное кино Другое
Наука и образование
Естественные науки Новости и обозрения
Общественные науки Образовательные организации и программы
Студенты Клубы выпускников
Моя школа Экология
Рефераты и курсовые Другое
Политика и право
Государство Новости и аналитика
Политика Право
Вооруженные силы Другое
Работа и карьера
Вакансии Обмен опытом и советы
Работа за рубежом Резюме
Другое
40 Занятие 2. О пользе бесплатного сыра
Спорт
Командные виды спорта Единоборства
Зимние виды спорта Настольные игры
Спортивные клубы и секции Теннис
Футбол Формула-1
Хоккей Экстремальный спорт
Легкая атлетика Бодибилдинг и рестлинг
Дайвинг Спортивное снаряжение
Другое
Техника и производство
Авиация Транспорт
Строительство Электроника
Легкая промышленность Другое
Туризм Автостоп
Велотуризм Водный туризм
Охота и рыболовство Путевые заметки
Пеший туризм Спортивный туризм
Туристическое снаряжение Туристические услуги
Вокруг света По историческим местам
Мой город Другое
Интерактивные элементы
Как уже говорилось на первом занятии, интерактивные элементы позволяют
сделать сайт интересней. Кратко все подобные элементы, предоставляемые Ян-
дексом, уже упоминались, и сейчас мы остановимся на них подробнее. Начнем
же мы со встраиваемого в любую страницу счетчика посещений.
Счетчик
Если вы обратили внимание, на странице Мастерской Список страниц, созданных
по шаблонам справа от каждой созданной страницы имеется ссылка нет в столб-
це Счетчик. Достаточно щелкнуть на ней, чтобы перейти к установке счетчика на
соответствующей странице. Выберите понравившийся дизайн и нажмите Устано-
вить. Счетчик будет установлен в самом низу страницы, вместо нет появится 0 -
значение счетчика. Если вы выберете вариант Невидимый, то счетчик никто не
увидит, однако он будет работать, в чем вы сможете убедиться, посетив список
страниц. Этот вариант удобен тем, что такой счетчик не сможет испортить вам
дизайн страницы.
Если вы создали страницу сами и передали ее на сайт по FTP, счетчик можно
установить и на нее. Если вы просто загрузили новую версию страницы, где был
счетчик, — тогда нажмите кнопку Восстановить на странице настройки счетчика.
Гостевая книга
Гостевая книга состоит из формы для отправки сообщения и списка сообщений,
расположенного ниже. Она, в отличие от остальных интерактивных элементов,
изначально выдается каждому владельцу сайта на Народе. Вы можете получить
к ней доступ, перейдя по ссылке Гостевая книга. На этой странице вам как вла-
дельцу доступны следующие операции.
• Просмотр — здесь вы можете посмотреть, как выглядит ваша гостевая книга,
и оставить в ней запись или две, чтобы «размочить» книгу, для поддержания
разговора, так сказать. Чтобы посетители также могли отправлять в гостевую
книгу сообщения, необходимо установить на одной из страниц ссылку на
нее. Для этого надо в списке ссылок выбрать пункт Гостевая книга. Конструк-
тор страниц автоматически пропишет правильный адрес, если же вы будете
вставлять ссылку с помощью HTML-редактора, то ее точный вид приведен
вверху этой страницы.
• Администрирование — здесь вы можете удалять и отвечать на сообщения.
• Изменение дизайна — дизайн гостевой книги можно выбрать. И даже боль-
ше — вы можете создать свой, не только пользуясь «шаблоном для шабло-
на», но и написав практически полноценный HTML-код. О том, как это сде-
лать, можно прочесть в Помощи и узнать на следующем занятии.
• Дублирование сообщений по e-mail — здесь вы можете задать адрес электрон-
ной почты, на который будут посылаться копии сообщений, помещаемых в
42 Занятие 2. О пользе бесплатного сыра
Анкета
Анкета представляет собой отдельную страницу-форму. Яндекс предлагает не-
сколько шаблонов, но можно создать и свой собственный. Основное, над чем
вам надо подумать при определении анкеты, — это вопросы, которые вы соби-
раетесь задать, и поля для ввода ответов.
Вначале вы должны понять, какого типа будут ответы. Для указания ответа
можно использовать поле ввода, область ввода и флажок (в терминологии Ян-
декса — галочка).
• Поле ввода — поле для ввода строки текста. Используйте этот элемент, если
ответ на вопрос составляет одно-два слова.
• Область ввода — поле для ввода нескольких строк текста; при необходимости
появляется полоса прокрутки. Используется для ввода развернутого ответа.
Старайтесь применять область ввода только в крайнем случае: поверьте,
мало кто готов написать даже небольшое эссе ради прекрасных, но недоступ-
ных для обозрения глаз.
• Галочка - флажок. Служит для отметки одного или нескольких вариантов
ответа на вопрос, оформленный в виде элемента Просто текст. В отличие от
других полей, подпись к флажку выровнена по левой стороне текста
(рис. 2.5, 2.6).
После вопросов вам будет необходимо заполнить поля, отвечающие за техниче-
скую сторону дела: адрес электронной почты, на который будут приходить за-
полненные анкеты; заголовок страницы, которая появится после нажатия анке-
тируемым кнопки Отправить; строка текста, которая будет появляться перед
ответами пользователя; URL страницы, на которую появится ссылка внизу ан-
кеты, и описание этой ссылки, а также следующие директивы: направлять ли
анкету автоматически по указанному в ссылке адресу, какой использовать раз-
делитель полей в письме, запрашивать ли e-mail пользователя, прикреплять ли
анкету в виде файла или просто вставлять в письмо (рекомендуется не прикреп-
лять файл к анкете, так как в прикрепленных файлах с большой степенью веро-
ятности могут содержаться вирусы).
Использовать анкету на сайте можно в самых различных целях:
• для проведения опроса о вашем сайте, если по каким-то причинам вы не хо-
тите помещать это обсуждение в гостевую книгу;
• если вы завели романтическую страничку, то анкета может стать первой ни-
точкой для завязывания знакомства;
• на бизнес-сайте анкета может касаться товаров и услуг, к которым вы имеете
отношение;
• любое простое тестирование.
Мастерская на www.narod.ru 43
f :
It^'"' ij>>:-'' '-" fe U i>b*<*i D>
/ : :
';•: | '•i: -:: '. ". /::/i '-:. . Ой:*о.>>т
p://dinwovich narod ru/question.Wmi "| .i'i^* H.ri no ier-:-> •'.
Основам элементы анкеть
Поле ввода
Просто текст
Галочка Г
Еще одна галочка г
Третья галочка г
1
Область ввода
'.-
J1
Галочка
Третья галочка
А здесь область ввода А здесь область ввода А здесь
Область ввода область ввода А здесь область входа А здесь область
ввода
Результат вы видите на рис. 2.7. Естественно, номер после id= у вас будет дру-
гой, так же как и текст на странице.
Опрос
Проголосовал!
100 % Оо>« 2
Ваше кия:
Сообщение: |ДинВович
|dimvovlch@narod.ru
Ваш сайт:
Чат
Чтобы создать свой чат, как и другие интерактивные элементы, необходимо
заглянуть в соответствующий раздел Мастерской. На странице Создание личного
чата вы должны указать его название, пароль и подтверждение пароля (если вы
хотите завести частный чат), выбрать подходящий шаблон и нажать кнопку Соз-
дать. После того как вы введете уникальное название чата, появятся параметры
вашего входа в чат: ваш ник (псевдоним или прозвище) в чате, цвет текста, вре-
мя обновления и количество выводимых строк. Постарайтесь не трогать список
Название чата, если вы хотите попасть в свой чат, иначе вам придется искать его в
неотсортированном списке, содержащем более 100 пунктов. После заполнения
полей нажмите Войти в чат, и вы попадете на только что созданную страничку
своего чата (рис. 2,10).
hal. «h!ml?new.43086!,lKChak.896453621114500
:
.СгЫравить :' : О6н<?Е!пь Шсгеоикй
Зайти в любой чат можно через ссылку Чаты на главной странице Народа. Не за-
будьте также вставить ссылку на свой чат на страницах сайта!
48 Занятие 2. О пользе бесплатного сыра
Регистрация
Для того чтобы зарегистрироваться на Yahoo! и получить место под сайт, снача-
ла введите в браузере адрес www.geocities.com. На открывшейся странице найди-
те раздел Try GeoCities for free! (Бесплатные услуги на GeoCities), а в нем ссылку
Sign up for a free web site (Подписаться на бесплатный сайт). На следующей стра-
нице щелкните на ссылке Sign up now (Подписаться сейчас) и заполните регист-
рационную анкету. Она мало чем отличается от анкеты на Яндексе, разве что
здесь все будет на английском языке. В табл. 2.1 приведены поля для заполне-
ния, их примерный перевод и пояснения. Однако до того как вы заполните ре-
гистрационную форму, стоит ознакомиться с Правилами предоставления услуг
(GeoCities Terms of Service) и Соглашением о конфиденциальности (Privacy Policy).
Ссылки на них расположены под регистрационной формой. Они мало чем отли-
чаются от их аналогов на сервере narod.ru.
Yahoo! ID Логин, ваше имя на Yahoo! Под этим именем вы будете вхо-
дить в службы Yahoo!
Password Пароль
Re-type Password Подтвердить пароль
Security Question Контрольный вопрос Как всегда, чтобы иметь возмож-
ность восстановить забытый па-
роль, вам надо указать контроль-
ный вопрос и ответ на него
Your Answer Ответ на контрольный вопрос Приводить перевод вариантов
контрольных вопросов я счел не-
нужным, так как ответ может быть
любым, в том числе и бессмыслен-
ным
Birthday (Month, День рождения (месяц, день, год)
Day, Year)
Alternate Email Адрес электронной почты На этот адрес вам будет выслан
восстановленный пароль
First Name Имя
Last Name Фамилия
Language & Content Язык Русского в списке нет, вместо него
можно выбрать пункт [other]
Zip/Postal Code Индекс
Под крылом www.geocities.com 49
Тема Перевод
Продолжение
50 Занятие 2. О пользе бесплатного сыра
Тема Перевод
Celebrities Знаменитости
Computers & Internet Компьютер и Интернет
Family Семья
Fashion & Beauty Мода и красота
Fitness Фитнесс
Food Еда
Friends Друзья
Games Игры
Health Здоровье
Hobbies & Crafts Хобби и увлечения
Home Дом
Issues & Causes Политика и право
Military Вооруженные силы
Movies Кино
Music Музыка
Pets Домашние животные
Religion & Beliefs Религия и вера
Romance Романтика
Schools & Education Школа и образование
Science Наука
Seniors Пенсионеры
Sports Спорт
Teens Подростки
Travel Путешествия
Television Телевидение
Women Женщины
После нажатия очередной кнопки Submit this form (Отослать форму), перед вами
предстанет адрес вашей странички с призывом Build your page now! (Построй свою
страницу сейчас!).
Строительство сайта
Как только вы зарегистрируетесь, вы в любой момент можете приступать к про-
цедуре создания сайта. Для этого вам понадобится с главной страницы сайта
пройти по ссылке Home Page Directory (Каталог домашних страниц), и там, введя
пароль, вы попадете в свой домашний уголок Yahoo! (рис. 2.11). Обратите вни-
мание на ссылку на свой сайт, расположенную справа. Если вы щелкнете на ней,
то увидите страницу, уже заполненную полезной информацией. В частности,
здесь присутствует и ссылка на конструктор сайта — Yahoo! Page Wizards (Мастера
Под крылом www.geocities.com 51
Редактирование сайта
Обратите внимание на правую сторону главной страницы Каталога домашних
страниц (Home Page Directory) (см. рис. 2.11). Здесь расположены инструменты
для модификации существующего сайта. В разделе Advanced Toolbox (Дополни-
тельные инструменты) расположены следующие ссылки:
• File Manager — управление каталогом с вашими файлами на www.geocities.com
при работе в Сети;
• Easy Upload — загрузка на сервер файлов с вашего компьютера;
• HTML Editor — простой HTML-редактор;
• Site Statistic — статистика по сайту.
Ниже расположены несколько интерактивных элементов, которые предоставляет
в ваше пользование хостер (запустить свои сценарии на сервере вам не удастся):
• Counter (Счетчик);
• Guestbook (Гостевая книга);
• Headlines (Заголовки новостей);
• Stock Quotes (Биржа);
• Weather (Погода);
• Webcam (web-камера);
• Yahoo! Maps (Карты);
• Yahoo! Presence (Показ статуса присутствия в Сети);
• Yahoo! Search (Поиск).
Если вы хорошо знаете английский или другой язык, поддерживаемый Yahoo!,
то работа над сайтом для вас не составит труда. Но если вы не освоили другой
язык, кроме родного, лучше попытать счастья в другом месте: не слишком ра-
зумно выставлять свое незнание на весь мир.
www.spylog.ru и www.hotlog.ru
Одним из лучших серверов, предоставляющих услуги по сбору статистики, яв-
ляется сервер www.spylog.ru. В верхней части главной страницы расположено
приглашение разместить счетчик Spylog на своем сайте: Получи свой счетчик!.
Если перейти по ссылке прикеры наших кнопок, то вы сможете составить пред-
ставление о том, как он будет выглядеть у вас на странице. Кроме размера мож-
но выбрать и тип счетчика: простой, анимированный, счетчик-индикатор и рас-
ширенный счетчик.
Кроме счетчика компания Spylog предоставляет трэкеры. Трэкер (tracker) -
это расширенный вариант счетчика, предназначенный для сбора информации о
посетителях вашей странички. Сведения, собираемые трэкерами, включают: имя
и версия используемого браузера; операционную систему, под управлением кото-
рой работает компьютер посетителя; разрешение экрана и глубину цвета; инфор-
мацию о том, разрешил ли пользователь применение языков сценариев и др.
Также можно определить географическое расположение посетителя (регион),
время посещения и некоторые другие персональные, но не конфиденциальные
сведения.
К сожалению, из когда-то обширного списка услуг бесплатным остался только
пакет «Кроха» — весьма обедненный, для начинающих.
Итак, вам необходимо выбрать пакет или счетчик, зарегистрироваться и ждать,
когда по электронной почте придет HTML-код, который необходимо встроить
в страницу сайта.
В связи с резким переходом работы Spylog на «платные» рельсы, образовав-
шуюся нишу попыталась заполнить петербургская компания ANK, с перечнем
услуг которой можно ознакомиться на сервере www.hotlog.ru. Как следует из рек-
ламы на сервере, все услуги системы HotLog предоставляются бесплатно. Ста-
тистика, собираемая трэкером, довольно обширна: это не только информация
о том, какими параметрами обладает компьютер и браузер пользователя, но и от-
куда он «узнал» о вашем сайте. Для того чтобы начать «копить бесценную ста-
тистику», необходимо зарегистрироваться и опять-таки ждать ответа по e-mail.
54 Занятие 2. О пользе бесплатного сыра
www.thecounter.com
Одним из самых удобных и мощных иностранных серверов, предлагающих счет-
чики, является www.thecounter.com. Он предоставляет услуги по созданию как
текстового, так и графического счетчиков посетителей страницы. Вы выбираете
шрифт и цвет текста и фона. Отдельным вариантом является невидимый счет-
чик. Результаты его работы в этом случае доступны только вам. Подобный ва-
риант удобен для определения популярности не сайта в целом, а, например, его
конкретного раздела.
Счетчик от TheCounter.com удобен не только своими обширными настройками
и небольшими размерами. В нем предусмотрены функции сбора информации о
посетителях, результаты которого будут представлены на сайте в виде графиков
и числовых значений, то есть, по сути, он выполняет функции трэкера.
Найдите на главной странице сервера (рис. 2.12) следующий текст: «TfieCounter.com
Free Version will track number of visitors (unique and total) with a visible counter, and will
send you a weekly stats report. Register here!»\ — и зарегистрируйтесь.
.W.sb..D.s.5.!gr>
Global Statistics Search the.Web
GloiaLSlaiiSiiCS offer you a peek at our mega-report, which combines E-Cooinerca Solutions
the traffic reports from our more than 1 million customers worldwide.
Find out how Internet users are viewing the Web.
Article Submissions
Have a tip to share with your fellow subscribers? Submit an article for
possible inclusion in TheCounter.com Professional Edition, by sending an
e-mail to submissionsiSinternet.com. Articles focused on topics relevant
to webmasters will be reviewed. (Only approved submissions will be
Included In TheCounter.com Professional Edition newsletter.) Check our
Windows Internet Tech
Linux/Open Source
Highlighted Articles Web Developer
Revenue Sharing 101 £
How To Identify Quality Affiliate Programs ISP Resources
Understanding Affiliate Commission Structure ASP Resources
C.Q.O.tmLS.8.!].S Wireless Internet
ved affiliate articles]
1
Бесплатная версия видимого счетчика TheCounter.com будет считать количество уникальных посе-
тителей и общее число посещений и посылать еженедельный статистический отчет. Регистрируй-
тесь здесь!
Что нового мы узнали 55
ПРИМЕЧАНИЕ
Общее число посещений — это количество всех обращений к данной странице или сайту,
а число уникальных посетителей — это количество различных IP-адресов, запросивших
данный сетевой ресурс.
СОВЕТ
Не устанавливайте элементы сайта с разных серверов: браузеру придется обращаться к
разным серверам, в результате время загрузки увеличится. Если уж вы решили воспользо-
ваться определенными услугами, ищите «все в одном флаконе», с одного сервера.
В переводе В. Марковой.
Создание сайта на HTML 57
Разместим мы сайт все там же, на сервере narod.ru. Но прежде чем приступить
к работе, я советую реализовать несколько страниц по различным «народным»
шаблонам и просмотреть их код, чтобы составить представление о том, как ра-
ботают определенные теги и какие из них используют для получения нужных
эффектов. Можно также заглянуть и на самые популярные страницы. Ваша
главная задача на первом этапе — понять, как должен быть устроен ваш сайт,
что он будет содержать и как будет выглядеть. Персональный сайт — это ваш
имидж в Интернете, так что постарайтесь подойти к его созданию со всей ответ-
ственностью.
Дизайн
Моя задача при построении сайта будет не совсем совпадать с вашей: мой «по-
казательный» сайт, с одной стороны, должен быть устроен достаточно просто,
а с другой — должен быть цветной иллюстрацией и живым воплощением опи-
санного в книге, а не меня самого.
В качестве достаточно практичного стиля дизайна, не требующего больших уси-
лий ни при создании, ни при тестировании, я выбрал растягивающиеся страни-
цы (см. занятие 8). Основное содержание страницы помещается в ячейку таблицы,
размер которой указан в процентах. Вокруг такой «резиновой части» помещает-
ся рамка, имеющая жестко определенные угловые части и столь же динамично
устроенную середину (как по вертикали, так и по горизонтали).
Чтобы автоматически решить проблему сочетаемости цветов на странице, в ка-
честве фона я выбрал отсканированные зеленые березовые листья и кусочек
бересты с его бежево-коричневой гаммой. Такой выбор сразу же определяет не
только гамму, но и многие другие элементы сайта, например логотип. Понятно,
что в качестве логотипа должна выступить надпись, «выдавленная» на бересте,
содержащая, например, фразу «Записки на бересте» или «Берестяные летопи-
си». Логотип можно разместить в правом верхнем и нижнем углах страницы.
Уменьшенные изображения листьев можно использовать для графических ссы-
лок или их частей. Поскольку засечки сложнее выдавливать, для заголовков
надо взять шрифт без засечек (например, Arial), а для основного текста — с за-
сечками (например, Times New Roman).
ПРИМЕЧАНИЕ
На занятии 8 в разделе «Этапы работы» вы обнаружите пункт «Разработка дизайна» толь-
ко на пятом месте. Однако на самом деле кроме дизайна мы между делом определили
ИДЕЮ сайта. Сайт о книге и ее авторе будет сделан в виде записок на бересте, служившей
верой и правдой нашим предкам в качестве бумаги.
Навигация по сайту
После некоторого раздумья, общая структура сайта получилась следующей.
• Первой серфингиста встречает главная страница (файл index.html). Это почти
пустая страница, с нее ведут всего три ссылки: первая — на главную стра-
ницу HTML-сайта (файл index_html.html), вторая — на сайт-фильм (файл
index_flash.html), третья — на сервер компании Macromedia, чтобы желающие
могли установить Flash plug-in к своему браузеру.
• Главную страницу HTML-версии сайта тоже не хочется загромождать ссылка-
ми. Пусть их будет две: персональные страницы (все тот же файл index_htrnl.html)
и страницы, посвященные данной книге (файл book.html). Лучше всего сде-
лать их в виде закладок в верхней части страницы. На каждой странице-раз-
деле надо установить ссылку на гостевую книгу или форум, а также на e-mail.
По сути, главной страницы не будет: все страницы сайта будут выполнены
похожим образом.
• С персональной страницы в виде закладок с левой стороны будут располо-
жены ссылки на разные темы: о себе и о сайте (файл index_html.html), стра-
ничка, посвященная жене (irina.html), сыну (elisey.html), работе1 (cas.html), по-
эзии (poetry.html), а также коллекция интересных ссылок личного характера
(ref.html) и фотоальбом (photo.html).
• На странице, предназначенной Интернет-поддержке данной книги, будут на-
ходиться ссылки-закладки на следующие разделы: общая страница (book.html),
иллюстративные материалы к книге (download.html), которые можно загрузить
из Сети, вырезки из глав (quote.html) и страница со ссылками (appl.html) -
аналог приложения 1.
Обсуждая навигацию, мы заодно наметили и еще один элемент дизайна -
меню. Оно будет выполнено в виде закладок, что, конечно, отнимает простран-
ство, но автоматически решает проблему обратной связи между страницами:
с любой страницы второго уровня можно попасть на любую страницу первого
и второго уровней этого раздела.
Подготовка текста
Разработав навигацию, вы, по сути, должны уже понимать, какой текст на какой
странице будет находиться. Например, очевидно, что ссылка, ведущая на стра-
ничку авторской поэзии, должна содержать поэтические строки и больше ничего.
Наберите весь нужный вам текст в Word, проверьте и сохраните его, а затем
скопируйте в Блокнот и сохраните теперь уже в формате ТХТ. Впоследствии
при верстке сайта вы сможете легко брать части текста и вставлять их в HTML-
файл.
ВНИМАНИЕ
Никогда не вставляйте текст напрямую из Word в HTML-редакторы: вместо текста вы уви-
дите описание стилей во внутреннем формате Word.
1
Честно говоря, я научный сотрудник.
Создание сайта на HTML 59
Подготовка графики
Если вы определились с текстом, настал черед графики. Вы должны решить, ка-
кие графические элементы вам понадобятся и как вы их будете получать. На-
верняка вам понадобятся фотографии и рисунки с текстом для меню, логотипа
и прочих элементов интерфейса.
Сканирование
Начнем с обработки фотографий и «даров природы»: нам понадобится оциф-
рованное изображение бересты и листьев. Если у вас есть цифровая камера, то
многие проблемы с оцифровкой изображений снимутся сами собой: в результа-
те ее работы вы получаете не живописный отпечаток, а набор байтов на элек-
тронном носителе. Тогда достаточно открыть файл, обработать его в программе
Photoshop и поместить на сайт
Если же цифровой камеры у вас нет или ее качество вам не по душе (большин-
ству цифровых фотоаппаратов еще далеко до аналогового), тогда вам понадо-
бится сканер или небольшие финансовые затраты на сканирование нужных вам
изображений. Услуги по превращению фотографии или пленки (что лучше, но
дороже) в файл предоставляют сейчас почти в каждом центре вездесущего Kodak.
Если речь идет о двух-трех фотографиях, это может стать самым простым и де-
шевым способом получить себя, любимого, на экране. Есть и специализирован-
ные фирмы, которые могут помочь вам не только в сканировании, но и в обра-
ботке полученного материала.
Но если случилось так, что за соседним столом на работе стоит сканер, то мож-
но попробовать самому превратить бумажный вариант изображения в электрон-
ный. Сделать это довольно просто.
Запустите программу Photoshop, выберите команду File > Import > Twain (Файл >
Импорт > Twain). После этого надо нажать кнопку Preview (Начать новое сканиро-
вание), чтобы призвать сканер к работе (рис. 3.1). В окне появится изображение,
отсканированное «на скорую руку» с низким разрешением. Теперь вам необхо-
димо выбрать фрагмент фотографии и установить параметры сканирования и
корректировки. Учтите, что размер фотографии на экране зависит не от ее фи-
зических размеров, а от разрешения, которое вы ее указали. Для первого раза
вам надо настроить только несколько параметров, остальные можно оставить
«как есть».
СОВЕТ
Если вы считаете, что безразлично, в какое место сканера поместить фотографию, — вы
не правы. На его поверхности всегда присутствуют мелкие дефекты: пыль, царапины. Най-
ти место, где сканер будет приЕ;носить в рисунок наименьший «шум», достаточно просто.
В настройках сканера поставьте максимальное разрешение. Проведите «пустое» сканиро-
вание — не кладя в сканер ничего. Полученное изображение (это будет просто белый пря-
моугольник) откройте в Photoshop и увеличьте. Там, где изображение будет самым «чис-
тым», и находится самое лучшее; место для сканирования.
СОВЕТ
Для сканирования предпочтительно использовать глянцевые отпечатки. И не забудьте сте-
реть с фотографии пыль!
60 Занятие 3. Сам себя не похвалишь...
^f г: Д<зполнитепьнь!е настройки.
.размера вывода
ПРИМЕЧАНИЕ
Разрешение — это характеристика устройства (монитора, принтера или сканера), говоря-
щая о его способности отображать (или различать) мелкие детали. Разрешение измеряет-
ся в единицах, указывающих количество точек на дюйм, — dpi (dot per inch). Минимальный
элемент изображения (то есть одна точка) называется пикселом. Таким образом, разреше-
ние связывает физический размер рисунка с размером пиксела, изменяющегося в зависи-
мости от разрешения.
Создание сайта на HTML 61
Геке-'-и изображение
Черно-белый рисунок •
Черно.-(5елая Фотография • .
Цветной рисунок
Обычная цветная Фогогг. дчша (256 цветов!
* Йспо'льедйте переона
, Ука
(тол
Auto Contrast & Color Correction (Автокоррекция контраста и цвета) Эти две
функции (автоматическая настройка контраста и цветокоррекции) могут
пригодиться, когда сканер хорошего качества.
62 Занятие 3. Сам себя не похвалишь...
ПРИМЕЧАНИЕ-
Комплектность диалогового окна настройки сканирования зависит от марки оборудования.
Как вы можете видеть из рисунка, последних двух пунктов настройки у данного сканера
нет.
ПРИМЕЧАНИЕ
Гистограмма — это график распэеделения яркости пикселов.
Если основная масса (гора) располагается ближе к левому краю — значит, изо-
бражение темное, если ближе к правому — светлое. Черный и белый треуголь-
ники по краям обозначают черную и белую точки — самое темное и светлое
места в изображении. Их сведение усиливает контраст, но уводит тени в черный
цвет, а светлые части — в белый. Кроме того, на гистограмме есть точка среднего
тона. Если требуется плавно затемнить или осветлить изображение, надо дви-
гать ее в ту или другую сторону. Пробелы в гистограмме говорят об отсутствии
64 Занятие 3. Сам себя не похвалишь...
"Ж~Ш
Рис. З.5. На шаблоне страницы сайта показаны рамки вокруг
Графический текст
Для начала вы должны наметить размеры графических элементов интерфейса,
которые вам понадобятся. Текст будет содержаться в рисунке логотипа и эле-
ментах меню. Как мы уже решили, это будут выдавленные на бересте слова
(рис. 3.6). Подробно мы обсудим только логотип, а пункты меню можно будет
легко сделать по аналогии.
Создание сайта на HTML 67
Пусть высота логотипа будет 60 пикселов. Длину пока можно взять с запасом -
400 или 500 пикселов.
1. Создаем новый файл такого размера.
2. На слой фона загружаем отсканированное изображение бересты, вырезав его
из большего.
3. Откроем палитру Layers (Слои) и создадим новый слой. На нем инструмен-
том Text (Текст) напишем Записки на бересте.
4. Выбираем размер шрифта равным 40 пикселов (это порядка 30 пунктов1). Текст
должен занимать примерно 2/3 логотипа по высоте. Как мы уже обсуждали,
лучше выбрать шрифт без засечек и установить полужирный стиль шрифта.
5. Затем растрируем слой командой Layer > Rasterize (Слой > Растеризовать).
6. Выделяем текст (например, «волшебной палочкой» щелкаем за пределами
букв и в контекстном меню выбираем Обратить выделение) и заполняем его
растровой заливкой, более темной, как будто мы вырезаем в бересте буквы
(можно выбрать, например, заливку древесиной). Для этого выполняем ко-
манду Edit > Fill (Правка > Заливка), в открывшемся окне в верхнем списке
устанавливаем Model (Модель) и выбираем нужный пункт в списке Custom
Pattern (Произвольная текстура).
Можно поступить другим способом: воспользоваться инструментом Type-
Mask (Текст-маска), который не печатает буквы, а создает область выделения
такой формы. Вам будет достаточно написать нужный текст на темной бере-
сте и удалить остальное. А можно поступить еще проще — написать текст
цветом, наиболее соответствующим темной бересте (#7В5А4В).
7. После этого тексту необходимо придать эффект вдавленности. Для этого его
надо выделить и в меню слоев выбрать команду Style (Стиль). В открывшемся
меню необходимо выбрать Bevel and Emboss (Фаска и рельеф). В окне настрой-
ки эффекта вы можете настроить внешний вид вырезаемых букв. Нет необ-
ходимости обсуждать это подробно, так как вы сможете сами все увидеть с
помощью предварительного просмотра тут же в окне.
8. Останется только сохранить файл в формате JPG.
В меню текста наверху рабочей области Photoshop находится список, управляю-
щий эффектом сглаживания текста (anti-aliasing). Он пригодится для мелких
(но не самых мелких) надписей. Можно выбрать один из четырех вариантов
сглаживания:
• Anti-Alias None (Без сглаживания);
• Anti-Alias Crisp (Четкое сглаживание);
1
Пункт равен 1/72 дюйма.
68 Занятие 3. Сам себя не похвалишь...
ПРИМЕЧАНИЕ
При использовании сглаживания текста следует иметь в виду, что растеризация может
привести к существенному искажению шрифта. Чтобы избежать этого, разработчики сове-
туют снять флажок функции Fractional Width (Дробная ширина) в палитре Character (Сим-
вол) и не использовать сглаживание.
СОВЕТ
Если вам некогда возиться еще с одной программой для записи графических файлов, вы
можете воспользоваться Flash. Задайте необходимый размер стола в окне Movie Properties
(Свойства фильма), открываемого одноименной командой контекстного меню, нарисуйте
необходимое и сохраните изображение с помощью команды Export Image (Экспорт изобра-
жения) в нужном формате.
Верстка
Рассказывать, как сверстать десяток страниц сайта, — не менее утомительное и
скучное занятие, чем слушать этот рассказ. Писать, конечно, легче, ведь всегда
Создание сайта на HTML 69
можно просто скопировать часть текста и повторить ее, но читать такую книгу
становится невыносимо...
Мы поступим разумно: обсудим, как будут выглядеть две страницы, принци-
пиально разные, — главная и заглавная (одна из страниц HTML-версии сайта).
Особняком будут стоять страницы фотоальбома, но разобраться, как их надо
спроектировать, не составит труда.
СОВЕТ
Создайте на основе первой сверстанной страницы шаблон. Это поможет вам в будущем
сэкономить время. Если для верстки вы используете Блокнот, в котором нет возможности
сохранить файл в виде шаблона, сохраните вариант страницы без текстового и графиче-
ского наполнения, содержащий только элементы интерфейса.
ВНИМАНИЕ
При использовании языка разметки HTML помните о требовании вложенности тегов. Нель-
зя закрывать теги в другом порядке, кроме как в том, в каком они были открыты. То есть
не допускается следующая структура: <ТЕГ_1хТЕГ_2х/ТЕГ_1х/ТЕГ_2>. Чем раньше
был открыт тег, тем позже он должен быть закрыт: <ТЕГ_1><ТЕГ_2><ДЕГ_2></ТЕГ_1>.
HTML — регистронезависимый язык, то есть названия тегов и атрибутов могут быть запи-
саны как строчными, так и прописными буквами, и даже теми и другими одновремен-
но. Если вы напишите <HTML>, <html> или <htML>, браузер поймет вас в любом случае.
Исключение составляют значения некоторых атрибутов, например стандартные названия
цветов, которые следует писать с прописной (Black, Red и т. д.). Для единообразия и на-
глядности в книге мы будем писать теги прописными буквами, атрибуты — строчными.
Главная страница
Для начала разметим страницу. Логотип будет размещен, как и везде, посредине
вверху и внизу. Примерное расположение ячеек показано на рис. 3.7.
Внутренняя
таблица
га
5й
1
1 1
СОВЕТ
Чтобы содержание страницы загружалось по частям, необходимо вместо одной таблицы
использовать несколько последовательных. Браузер показывает таблицу после того, как
он ее нарисует, поэтому чем меньше таблица, тем раньше она появится на экране.
Параметры страницы
•Общие Цвет и фон IТэги МЕТА j
;' ; Цвета страницы
Параметры страницы
книга, интеракт!
«.аиия;
пикеела(ав). Ц V
JO .пикселфе) . | ^ I I;. . . I -^ЬШ:
1100 И % о т р о д и т е л ь ск с:|р |
;
Г
СОВЕТ
Если у вас нет подходящих изображений, нарисуйте любые, только надо соблюсти правиль-
ные размеры.
Однако после всех вставок вы увидите в окне web-мастера не совсем то, что хо-
тели. Сохраните файл и откройте его в окне навигатора. Там он выглядит еще
хуже: фон ячейки не отображается, пока в нем нет содержимого.
N
Создание сайта на HTML 73
Изображение, j Ссышб}:АбЩ;
дрес-введите адрес URL или: :
——.,, ™!ЖЦщ11||"'
'//D|/Books/My/Flash2/Rash/a
щ. звЩЩ .
0
:
Jin
'i
•ки, |0 то-
: Доп. HTML
Отмона.
ПРИМЕЧАНИЕ -
Честно говоря, HTML-документы, автоматически сгенерированные программой, выглядят
не так красиво, как приведенные в книге примеры. В ходе работы их подправили, пригла-
дили и причесали.
ПРИМЕЧАНИЕ
Строка <!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en"> должна предварять
любой документ на HTML 4. В книге она может быть опущена для экономии места и упро-
щения примеров. О теге <!DOCTYPE> см. приложение 2.
СОВЕТ
Будьте внимательны к пробелам, которые расставляет web-мастер. Некоторые из них бу-
дут вам мешать, а некоторых будет не хватать... Старайтесь не переносить код между тега-
ми <TD> и </TD>, если ячейка пустая — браузер может воспринять это как пробел. В кни-
ге переносы могут присутствовать для улучшения читаемости текста.
СОВЕТ
Сохраните текст страницы, который будет повторяться на других страницах сайта, в каче-
стве шаблона. Можно завести общий шаблон — обычную текстовую страничку, которую вы
будете каждый раз заполнять содержанием и сохранять под другим именем (а еще лучше
всегда иметь несколько копий шаблона). Шаблон будет включать стандартные теги, кото-
рые повторяются на всех сграницах Сети. Самый простой шаблон должен включать сле-
дующий код:
</BODY>
</HTML>
</BODY>
</HTML>
76 Занятие 3. Сам себя не похвалишь...
И еще один обязательный штрих: всем рисункам надо приписать атрибут alt,
чтобы пользователи, у которых отключен показ графики, смогли понять, что там
нарисовано. Значение этого атрибута будет выводиться либо в качестве подсказ-
ки при наведении мыши на рисунок, либо вместо рисунка, если у пользователя
отключено отображение графики в настройках их браузера. Код этого фрагмен-
та должен выглядеть примерно так:
<IMG src="corner_lt.jpg" height=60 width=40 аН="Логотип сайта - Записки на бересте">
Для того чтобы таблица занимала всю страницу, в теге <BODY> необходимо про-
писать значения атрибутов для отступов от края страницы (в этом же теге будут
находиться и значения цветов и фона):
<BODY topmarg1n=0 leftmargin=0 rightmargin=0 marginwidth=0 raarginheight=0>
Если теперь открыть файл в окне Netscape Communicator или Internet Explorer,
страница уже будет похожа на желаемую.
Теперь осталось вставить в центральную ячейку нужный текст и ссылки. Мож-
но снова воспользоваться web-мастером, а можно и вписать требуемый текст и
теги в Блокноте. Нам необходима таблица, состоящая из трех ячеек: одной верх-
ней с текстом и двух нижних со ссылками. В качестве ссылки будет служить зе-
леный лист и текстовый комментарий.
Свойства символа
И" : адрес URL или но, локальный файл: ать файл... Удалить ссылку |
index_flash.html
l
Рис. 3.12. Задание ссылки
Создание сайта на HTML 77
<TR>
<TD COLSPAN="2">
<FONT size=+l face="Times New Roman Cyr. serif">Доброго времени
суток, путник!
<BR>Te6e надоело скитаться бездомным по виртуальным просторам?
На этом сайте ты узнаешь, что сколотить свою пристань в этом изменчивом море не так
уж и сложно... Кто я? Автор этого сайта и книги, живой иллюстрацией к которой он
является. Оглянись&пЬ5р;—&пЬзр;и ты сам сможешь построить свой виртуальный дом.
Дом. который будет жить своей жизнью, он будет приветствовать своих гостей и
изменяться, стараясь угодить их вкусам.
<BR> :
<ВР>Оглянись на свои следы
<BR>Cepon лентою, в кружевах воды.
<ВР>Оглянись...
<ВК>Жизнь пройдет как сон.
<BR>Bce кружащий сон
<ВР>Ярко-белых птиц.
<ВР>Оглянись...
<BR> :
<BR>Tbi построил свой дом?
</FONT>
</TD>
</TR>
<TR>
<TD width=50«>
<A href="index_html .html">
<IMG src-"image/leaf.jpg" height=50 width=50 аН="лист
березы" border="0">
<FONT size=+l face="Times New Roman Cyr. serif">
HTML-версия caйтa<BR>
</FONT>
</A>
</TD>
<TD width=50£>
<A href="index_flash.html">
<IMG src="image/leaf. jpg" height=50 width=-50 alt-''лист
березы" border="0">
<FONT size=+l face="Times New Roman Cyr, serif">
Flash-версия сайта
</FONT>
</A>
</TD>
</TR>
<TR>
<TD colspan=2>
<CENTER>
Если у вас не установлен Flash plug-in, загрузите его с сервера компании
<А href="http://down!oad.macromedia.com/pub/shockwave/flash/english/
wi n95nt/6.0.29.0/fl ashplayer6i nstaller.exe">Macromedia</A>
</CENTER>
</TD>
</TR>
</TABLE>
</CENTER>
</TD>
<TO width="40" background="image/ramka_r.jpg"> </TD>
</TR>
<TR>
<TD height=60 width-40>
.
Создание сайта на HTML 79
; сврнчаледы
Серой
/"ГЧ
-: •:-:'•-•.- . -.-.:-:•>:.>.. V |
ПРИМЕЧАНИЕ
Рисунок 3.13 может не совсем точно соответствовать HTML-тексту и реальной странице сайта:
иллюстрации имеют свои особенности.
В заголовок страницы перед закрывающим тегом </head> надо вставить такой сце-
нарий:
<SCRIPT language?"JavaScript">
var height2=screen.width;
van width2=screen.height:
function intro(URL)
{window.open('URL'.'name'. 'left-0. top=0, height=height2.width=width2,
status=no.1ocati on=no.toolbar=no.di rectori es=no.resi zable=yes.ful1screen«no.menubar=n
o'); }
</SCRIPT>
Страница сайта
Остальные страницы сайта будут иметь схему, несколько отличную от главной
страницы. Поверх рамки слева появится табличка со ссылками на страницы раз-
дела, а вверху под логотипом разместятся ссылки на разделы сайта (рис. 3.14).
Рис. 3.14. Схема большинства страниц сайта: меню слева выполнено в виде отдельной таблицы
<А href="Elisey.html">
<IMG src="image/menu_Elisey.GIF" height=60 width-20
а!1="Елисей" border=0>
</A>
</TD>
<TD width=20></TD>
</TR>
<TR height=60>
<TD width=20>
<A href="Poetry.htral">
<IMG src="image/poetry.GIF" height=60 width=20 alt-''стихи"
border=0>
</A>
</TD>
<TD width=20></TD>
</TR>
<TR height=60>
<TD width=20>
<A href="ref.html">
<IMG src="image/ref.GIF" height=60 width=20 alt-''ссылки"
border=0>
</A>
</TD>
<TD width=20></TD>
</TR>
<TR height-60>
<TD width=20>
<A href="science.html">
<IMG src="1mage/menu_science.GIF" height=60 width=20
аН="наука" border=0>
</A>
</TD>
<TD width=20></TD>
</TR>
<TR height=60>
<TD width=20>
<A href="photo.html">
<IMG src="image/menu_photo.GIF" height=60 width=20
аН="фотоальбом" border=0>
</A>
</TD>
<TD width=20></TO>
</TR>
</TABLE>
</TD>
<TD colspan="3" width="100^" height="100^" valign=top>
<TABLE border=0 cellspacing=0 cellpadding=0 width-"100X">
<TR height=20>
<TD width=100>
<A href="index_html.html">
<IMG src="image/my.GIF"
height=20 width=100 а!1="персональные страницы" border=0>
</A>
</TD>
<TD width=100>
<A href="book.htral">
<IMG src="image/book.GIF" height=20 width=100 аИ="книга"
border=0>
Создание сайта на HTML 83
</TD>
<TD width=100*></TD>
</TR>
<TR height=l>
<TD width=100></TD>
<TD width=100 background-"image/pixel.6IF">
<IMG src="image/pixel.GIF" height=l width=l>
</TD>
<TD width=100£ background="image/pixel.GIF">
<IMG src="image/pixel.GIF" height=l width=l>
</TO>
</TR>
<TR>
<TD co!span="3" width-"100r height-"100r>
Основное содержание
</TD>
</TR>
</TABLE>
</TD>
<TD width="40" background-"1mage/ramka_r.jpg"> </TD>
</TR>
<TR>
<TD height=60 width=40>
<IMG src-"image/corner_lb.jpg" height-60 width=40></TD>
<TD width="50r' height="60" background="image/ramka_top.jpg">
&nbSp;</TD>
<TD height=60 width-400>
<IMG src="image/1ogo.jpg" height-6'0 width=400>
</TD>
<TO width="50r' he1ght=-"60" background="image/ramka_top.jpg">
</TD>
<TO height=60 width-40?
<IMG src="image/corner_rb.jpg" height=60 width=40>
</TD>
</TR>
</TABLE>
</BOOY>
</HTML>
Тестирование
Тестирование, которое кажется на первый взгляд достаточно простым и быст-
рым процессом, может отнять на первых порах до 90 % рабочего времени над
страницей. Для начала вы должны установить у себя несколько браузеров, по
меньшей мере 2: Internet Explorer и Netscape Communicator. Последний, хоть и
относится к редким и вымирающим программам, иногда (особенно если в ва-
шем характере присутствуют черты мазохиста и трудоголика) бывает очень по-
лезен — он очень трепетно относится к правильности расстановки тегов и не до-
думывает ничего, в отличие от детища Microsoft.
Вам необходимо добиться, чтобы в каждом из браузеров страница выглядела
именно так, как вам хочется. Если что-то не так, проверьте код страницы, внеси-
те исправления и проверьте еще раз. При работе с таблицами лучше временно
включить показ границ ячеек — установить атрибут border в теге <table> равным
ненулевому значению. Границы разных табличек можно покрасить в разные
цвета с помощью атрибута bordercol or. Старайтесь стадию тестирования начи-
84 Занятие 3. Сам себя не похвалишь...
Размещение в Сети
Как и на прошлом занятии, мы воспользуемся услугами Яндекса и разместим
сайт на страницах сервера narod.ru.
1. Вначале вам придется зарегистрироваться (см. занятие 2) и зайти в свою Мас-
терскую.
2. В Мастерской надо щелкнуть на ссылке Загрузка файлов на сайт.
3. На открывшейся странице нажимаете любую кнопку Browse. Выбираете на
компьютере нужный файл, нажимаете Открыть и повторяете процедуру для
другого файла в другом поле. Когда все 10 полей будут заполнены или все
нужные файлы окажутся выделенными, нажмите кнопку Загрузить файлы.
Картинки надо загружать в директорию image. Для этого необходимо ее сна-
чала создать в разделе Управление файлами и HTML-редактор, а потом на стра-
нице загрузки нажать ссылку Выбрать каталог. Все очень просто. Не забудьте,
что корневой файл (главная страница) должен иметь имя index.html.
Теперь вы можете набрать свой адрес в строке браузера и стать первым гостем
своего дома. После тестирования ссылок и комплектности рисунков можете за-
нести ваш сайт в каталог Народа. И ждите гостей!
Учитесь в Сети
Как сделать хороший сайт? С одной стороны, это сложно, так как надо много
знать: от HTML и JavaScript до графического дизайна и оптимизации графики.
И тут перед вами непаханое поле: «Учиться, учиться и еще раз учиться!». Но на
помощь может прийти другая сторона той же монеты: в Сети сложно что-то
скрыть. Конечно, есть методы, как не показать HTML-код посетителю, но, как
правило, если код страницы получил обозреватель, то его может увидеть и чело-
век — было бы время и желание его посмотреть. Таким образом, любой понра-
вившийся вам прием оформления (кусок кода) вы всегда можете использовать
и у себя (только не забудьте оставить ссылку на автора, если оно того стоит).
Если вы научитесь правильно подходить к созданию страниц, то вы всегда смо-
жете просмотреть результат, конечный или промежуточный. Не понравилось -
Что нового мы узнали 85
топор в руки, и только щепки полетят во все стороны. Ну а дальше можно поси-
деть и подумать: а что, собственно, меня не устраивает? И разобраться, как это
можно исправить, как это сделано у других, как это можно адаптировать к ва-
шей странице и т. д., и т. п.
ПРИМЕЧАНИЕ
В частности, мой сайт вы можете посмотреть по адресу www.dimvovich.narod.ru. Если в код
в книге закрадется какая-либо ошибка, вы всегда сможете проверить ее по версии в Ин-
тернете.
Фильм на Flash
Любитель цветов!
Ты стал неприметно
Рабом хризантем.
1
Бусон
Знакомство с Flash
Поскольку фильмы Flash представляют собой исполняемый файл, просмотреть,
как он устроен, не так просто, как в случае HTML. Но так как Flash — это тво-
рение одной компании, устройство фильмов, созданных с его помощью, доволь-
но прозрачно. Если вы поймете, что вы хотите сделать, то проблема как это сде-
лать станет уже второстепенной и вполне решаемой.
ПРИМЕЧАНИЕ
Если создание сайта на Flash для вас окажется непосильной задачей, отложите ее на пару
занятий. Получив некоторый опыт работы с редактором Flash, вы с легкостью все преодо-
леете.
ПРИМЕЧАНИЕ
Здесь и далее основное описание будет соответствовать работе во Flash 5, однако в прило-
жении б вы сможете найти краткое описание нововведений в уже увидевшей свет версии
Flash MX. В этом же приложении вы найдете более подробное описание команд и инстру-
ментов Flash.
ПРИМЕЧАНИЕ
Символ — это термин Flash, означающий отдельный объект — понятие, по смыслу очень
близкое аналогичному понятию в ООП. Представьте, что вы создаете мультфильм, пере-
двигая отдельную фигурку по листу бумаги. Ее можно каждый раз рисовать в очередном
кадре — тогда она будет просто рисунком, а можно вырезать и перемещать по фоновому
изображению — тогда она будет символом. Flash позволяет встроить анимацию в отдель-
ный символ, то есть, например, внутри символа можно задать движения рук и ног, а на
основной киноленте — движение символа в целом по фону. После создания все символы
попадают в библиотеку. Там же можно найти звуковые файлы, импортированные рисунки
и раскадровки.
«Flash 5-[Movie!]
tdrt Yisw Insert Modify Ie<t Qoiwoi iYimiow Щ
Рис. 4.1. Фильмы во Flash создаются на столе, так же как и в настоящей мультипликации
СОВЕТ -
Советую вам делать отдельными только те панели, которые вы часто используете вместе,
например Swatches (Цветовые модификаторы) и Mixer (Палитра).
СОВЕТ
Одной из самых полезных команд является команда Undo (Отменить). Нажав Ctrl+Z, вы
легко сможете отменить любое неправильное или неудачное действие.
Сайт-фильм
При создании сайта-фильма на Flash есть две возможности. Первая — написать
единый фильм, который загружается целиком, вторая - - подгружать* части
фильма по мере необходимости. Понятно, что для больших сайтов более приго-
ден второй вариант: нехорошо заставлять зрителя загружать весь сайт, если он
собирается посмотреть всего одну-две страницы. Но для небольших сайтов, ка-
ким будет и наш с вами, наиболее приемлемым оказывается первый вариант.
Заставлять ждать, пока загрузится каждая страница, — значит, терять все пре-
имущества Flash перед HTML.
С чего начинается работа над созданием фильма? Конечно, с написания сцена-
рия! Мы воспользуемся и сценарием, и дизайном, разработанным для HTML-
версии. Таким образом, мы можем уже приступать к «съемке». Несмотря на ис-
пользование инструмента анимации, собственно оживших картинок у нас не бу-
дет. Flash просто послужит удобным инструментом компоновки сайта.
1. При запуске Flash на экране появляется новый пустой фильм. Его также
можно создать командой New (Создать) из меню File (Файл).
2. Щелкаем на столе правой кнопкой мыши и в контекстном меню выбираем
строчку Movie Properties (Свойства фильма). В открывшемся одноименном
окне задаем новые размеры экрана фильма, соответствующие размеру откры-
того окна Internet Explorer при разрешении экрана 1024x800: в поле Width
(Ширина) — 1014, в поле Height (Высота) — 738. Это будет размер нашего
фильма в пикселах.
3. Закрываем окно (кнопкой ОК) и сразу же выполняем команду Save As (Сохра-
нить как) из меню File (Файл). Чтобы не пришлось переименовывать создан-
ный Flash HTML-файл, дадим фильму название index_flash.
4. Сразу же настроим параметры публикации: выберем команду File > Publish Set-
tings (Файл > Настройки публикации). На вкладке Formats (Форматы) долж-
ны быть установлены два флажка: Flash и HTML. На вкладке Flash вам, скорее
всего, тоже ничего не придется менять. А вот на страничке, посвященной HTML,
надо в списке Dimensions (Единицы измерения) выбрать пункт Percent (Про-
цент). В двух полях ниже должно быть указано число 100. Остальные пункты
можно оставить заданными по умолчанию. Теперь можно нажать кнопку Pub-
lish (Опубликовать), а затем ОК.
Слои 91
Слои
Как и в Photoshop, во Flash работа происходит на слоях. На одном слое лучше
всего располагать только один анимированный объект. Основная техническая
задача при создании фильма — переложить рутинную работу на программу, что-
бы не прорисовывать в отдельности каждый кадр. Flash позволяет это сделать с
помощью раскадровки, которую можно задать только для слоя целиком. Исклю-
чением могут быть символы, «живущие своей жизнью», вся анимация которых
задана на внутренней киноленте.
Слоев у нас будет не много. Если смотреть снизу вверх, они будут располагать-
ся в такой последовательности:
• фон,
• рамка,
• логотип,
• содержание,
• вертикальное меню,
• горизонтальное меню.
Чтобы задать новый слой, щелкните на значке с жирным плюсом в нижней час-
ти палитры слоев. Чтобы переименовать слой, дважды щелкните на его имени
и внесите исправления.
Теперь мы обсудим каждый слой отдельно.
Фон
Слой фона, как и в HTML-версии сайта, будет заполнен изображением бересты.
1. Сначала необходимо выполнить команду Import (Импорт) из меню File (Файл).
С помощью стандартного окна выбора файла найдите нужный файл tile.jpg. На-
жмите кнопку Открыть. Если теперь открыть окно библиотеки (Ctrl+L), вы обна-
ружите в нем открытый файл, добавленный в библиотеку наряду с символами.
СОВЕТ
Окно библиотеки, панель Проводника по фильму и редактора ActionScript, а также панели
Info (Информация), Mixer (Палитра), Character (Шрифт) и Instance (Экземпляр) можно от-
крыть с помощью кнопок на панели быстрого запуска, которая находится в правом нижнем
углу окна программы. Все панели и окна управляются также командами меню Window (Окно)
и соответствующими им «горячими клавишами».
2. Теперь рисунок можно использовать в качестве заливки. В слое Фон (он дол-
жен быть предварительно выделен) нарисуйте прямоугольник, покрывающий
весь стол, с помощью инструмента Rectangle (Прямоугольник). Лучше нари-
совать прямоугольник без контура. Для этого выделите маркер контура на па-
нели инструментов и нажмите кнопку No Color (Без цвета).
3. Выберите инструмент Arrow (Стрелка) и выделите весь прямоугольник, обве-
дя его мышью. Откройте панель Info (Информация, Ctrl+Alt+I) и в полях W
(ширина) и Н (высота) задайте размеры фильма.
92 Занятие 4. Фильм на Flash
СОВЕТ
Панель Align (Выравнивание) служит для выравнивания выделенных объектов относитель-
но друг друга или относительно стола (в последнем случае должна быть нажата кнопка То
Stage (Относительно стола)). Для выделения нескольких объектов необходимо последова-
тельно щелкать на них, держа нажатой клавишу Shift. Изображения на кнопках панели
имеют достаточно понятный смысл.
ПРИМЕЧАНИЕ
В отличие от HTML, при изменении размеров окна размер элемента заливки тоже будет из-
меняться. Чем больше окно, тем больше будут полоски на бересте. Лучше всего, если вы
зададите в свойствах фильма реальные ожидаемые размеры окна браузера. Для каждого
разрешения можно будет загружать свой фильм: это несложно сделать с помощью Action-
Script.
СОВЕТ
Если вы закончили работать со слоем, даже на время, — заблокируйте его. Это избавит
вас от многих неудобств в работе. Повторный щелчок на замке снимает блокировку.
Слои 93
Рамка
Приступим теперь к созданию рамки.
1. С помощью инструмента Rectangle (Прямоугольник) нарисуем прямоугольник
со скругленными краями. Радиус скругления можно задать, щелкнув на кноп-
ке Round Rectangle Radius (Радиус скругления углов прямоугольника) и задав
значение, например 10.
2. Теперь выделим весь прямоугольник вместе с контуром, щелкнув на первом
кадре слоя Рамка.
3. Скопируем фигуру, нажав Ctrl+C, а потом вставим ее командой Edit > Paste in
Place (Правка > Вставить на место).
4. Аккуратно, чтобы не снять выделение, открываем панель Transform (Преобра-
зование). В верхних полях задаем значение 95 %. Выделенный прямоуголь-
ник станет меньше.
5. Теперь выделите внутреннюю область заливки, щелкнув на ней инструмен-
том Arrow (Стрелка), и удалите, нажав клавишу Del. Получилась рамка.
6. Осталось покрасить ее в нужный цвет. Можно заполнить рамку растровой за-
ливкой, однако оценить это для узкой рамки будет сложно. Проще подобрать
подходящий цвет и поработать с ним. Если вы жаждете разнообразия — соз-
дайте градиентную заливку.
7. Чтобы было проще работать, выделим рамку и нажмем F8, чтобы преобразо-
вать ее в отдельный символ Рамка. Это имя надо ввести в диалоговом окне.
Там же необходимо указать поведение символа Graphic (Графический рису-
нок) и нажать ОК. Рамка превратится в отдельный символ.
8. Теперь выберем символ Рамка в раскрывающемся меню Edit Symbols (Редакти-
рование символов), расположенном в правом верхнем углу. Выделим область
заливки в рамке и нажмем Ctrl+C.
9. Создадим новый слой, назвав его Заливка, и командой Edit > Paste in Place
(Правка > Вставить на место) поместим на него скопированный фрагмент.
10. Таким же образом перенесем внутренний контур на отдельный слой.
11. Перейдем на слой Заливка, выделим содержимое и откроем панель Mixer (Па-
литра). На ней мы настроим цвет заливки. В полях R (Красный), G (Зеле-
ный), В (Синий) необходимо задать соответствующие компоненты цвета: 123,
90, 74.
12. Заблокируем заливку и выделим внешний контур. Если контуры не видны,
выделите мышкой слой заливки и перетащите его в самый низ списка слоев.
94 Занятие 4. Фильм на Flash
Логотип
Теперь займемся логотипом.
1. Логотип сделаем отдельным символом. Для этого нажмем Ctrl+F8, назовем его
Логотип и определим его поведение как Graphic (Графический рисунок).
2. Если вы хотите встроить анимацию, установите положение переключателя в
Movie clip (Клип). Впрочем, вы можете сделать это и позже, открыв окно биб-
лиотеки, куда попадают все символы, и выбрав в контекстном меню другое
значение для команды Behavior (Поведение).
3. Внутри символа откройте панель Character (Шрифт) и задайте необходимые
параметры текста. Текст не имеет контура и окрашивается только в цвет за-
ливки. Лучше выбрать те же параметры шрифта, что и для HTML-версии.
4. После этого возьмите инструмент Text (Текст) и напишите текст логотипа.
5. Затем выделите весь текстовый блок целиком и дайте команду Modify > Break
Apart (Изменить > Преобразовать в графику). Текст превратится в обычный
графический объект.
Слои 95
Меню
Слой содержания мы оставим «на закуску», а сейчас займемся меню.
В отличие от обычной растровой графики (прозрачный GIF — исключение), во
Flash видно только то, что нарисовано, и даже оно может быть невидимым, если
установить свойство прозрачности в О1. Поэтому для элемента меню нам необ-
ходимо только написать название и сделать рамку, придающую выпуклость.
1. Для каждого элемента надо создать свой символ, в котором нарисовать рамку
нужного размера, а в ней — надпись. Не забудьте выровнять рамку по центру
стола.
2. Эффектом вогнутости букв можно не заниматься — символы будут слишком
мелкими. А вот цвета рамки, нарисованной инструментом Line (Линия), луч-
ше подобрать так, чтобы закладка была выпуклой. Нижняя граница должна
быть выполнена цветом фона, а левая и верхняя должны быть покрашены в
более светлый цвет. Конечно, если вы хотите сделать меню более контраст-
ным, можно покрыть его другой растровой заливкой, но контур все равно
лучше делать разноцветным для выпуклости.
3. В отличие от предыдущих символов, пункты меню будут кнопками (Button).
У символа-кнопки первые 4 кадра имеют название: Up (Приподнята), Over (Под
указателем), Down (Нажата) и Hit (Срабатывание). Изображение в каждом кад-
ре определяет вид кнопки в разных положениях. Сначала нарисуйте кнопку в
ее обычном, не нажатом положении, то есть для кадра Up (Приподнята).
4. Если хотите, можно задать ключевыми и другие кадры, выделив их и нажав F6,
что соответствует команде Insert > Keyframe (Вставка > Ключевой кадр). В этих
кадрах можно перекрасить, например, буквы в другой цвет. Обратите внимание,
что кадр Down (Нажата) показывается только непосредственно при щелчке на
1
Правильнее, конечно, говорить «свойство непрозрачности», но так уж повелось, что этот параметр
(alpha transparency) назвали «прозрачность».
96 Занятие 4. Фильм на Flash
Содержание
На слое Содержание постранично разместятся текст и иллюстрации. Одна стра-
ница соответствует одному кадру. Если вы решите включить в страницы анима-
цию, кадров может быть больше. Прежде всего выделим, например, кадр 15 во
всех слоях. Для этого щелкайте на кадрах, удерживая клавишу Shift. Затем на-
жмем F5, вставляя простой кадр.
Дальше для всех страниц сайта выполним следующую процедуру.
1. Выделяем следующий кадр в слое Содержание и нажимаем F6. Кадр становит-
ся ключевым.
2. Открываем панель Frame (Кадр) и в поле Label (Метка) даем кадру «говоря-
щее название». Использовать для него лучше только латинские буквы. На-
пример, фотоальбому логично дать имя foto. Первому кадру тоже надо дать
название.
3. Заполняем кадр на слое Содержание собственно содержанием страницы: тек-
стом, фотографиями, анимационными клипами.
4. Затем переходим к следующему кадру.
Если вы потом захотите задать на страницах общую анимацию, можно просто
выделить нужный кадр, который вы решили продолжить, и нажать F5 или F6.
Новые кадры надо заполнить содержимым. Не забудьте также продлить осталь-
ные слои, добавив в них кадры, чтобы все они были одной длины.
По умолчанию Flash внедряет используемые символы. Однако вы можете умень-
шить размер SWF-файла, использовав шрифты с компьютера пользователя,
особенно если текст составляет основную часть сайта. Для этого необходимо
установить флажок Use Device Fonts (Использовать типы шрифтов) на панели
Text Options (Параметры текста), а на панели Character (Шрифт) выбрать в каче-
стве шрифта один из следующих типов гарнитур:
• _sans — шрифты без засечек, типа Verdana, Arial и Helvetica (обычно их на-
зывают шрифтами sans serif);
• _serif — шрифты с засечками, типа Times, Palatine и Baskervill;
• „typewriter — это моноширинные шрифты, такие как Courier.
Слои 97
Фотоальбом
Если правила хорошего тона в HTML требуют помещения больших фотографий
на отдельных страницах, то во Flash такое ни к чему. Фотоальбом можно также
оформить в виде миниатюр, но каждая из них будет не ссылкой на другую стра-
ницу сайта, а кнопкой. Фотография будет раскрываться во всей своей красе,
если на нее навести указатель мыши.
Как устроен такой эффект, вы уже, наверное, догадались: каждую фотографию
необходимо сделать символом Button (Кнопка). В кадре Over (Под указателем)
надо поместить большое изображение фотографии, сдвинутое в сторону. Обра-
тите внимание, что в кадре Hit (Срабатывание) должен быть нормальный, ми-
ниатюрный вид фото, иначе области срабатывания будут перекрываться. В кадре
Down (Нажата) также должен быть помещен ключевой кадр с рисунком нор-
мального размера.
Растворение текста
Один из основных приемов перехода от одного текстового изображения к дру-
гому состоит в растворении или затемнении текста.
Эффект растворения достигается доведением до нуля прозрачности текста. При
затемнении, наоборот, в момент перехода верхний слой становится полностью
непрозрачным, закрывая текст. Мы зададим эффект растворения, так как затем-
нение будет закрывать не только текст, но и другие элементы сайта.
Для каждого именного кадра необходимо провести следующую процедуру.
1. Установить считывающую головку на именной кадр в слое Содержание и де-
сять раз нажать клавишу F5.
2. В образовавшейся последовательности выбрать средний кадр и превратить его
в ключевой, нажав F6. То же самое сделать для последнего кадра.
3. Выделить всю последовательность кадров и выполнить команду Insert > Create
Motion Tween (Вставка > Выполнить раскадровку).
4. В первом и последнем кадрах последовательности выделить содержание слоя,
на панели Effect (Эффект) в раскрывающемся списке выбрать Alpha (Прозрач-
ность) и установить для него значение 0.
Обратите внимание, что именной кадр должен быть первым в последовательно-
сти (рис. 4.2). Во время раскадровки, о наличии которой говорят стрелки, может
происходить не только смена прозрачности, но и вращение, перемещение и про-
чие анимационные эффекты.
4 Зак. 96
98 Занятие 4. Фильм на Flash
а •«, "50 .. в;
;;. ; ;
;> r0i.0p*t»-:r,tf
шШшЕи
-} Щ$$Щъ
<
00*
JBi
Рис. 4.2. Так должна выглядеть кинолента для реализации эффекта растворения
Эффект интерактивности
Чтобы изменить фоновый рисунок на HTML-странице, вам понадобится созда-
вать страницы с разным фоном. На Flash такое изменение можно сделать очень
просто, хотя это и будет довольно обременительно для фильма в смысле его
размера на диске.
1. Вставьте новый слой над слоем Фон и назовите его Новый фон.
2. Создайте несколько символов-клипов, представляющих собой прямоугольни-
ки размером со стол, и заполните их растровым рисунком. В качестве поведе-
ния вы должны указать именно Movie Clip (Клип), поскольку только клипам
можно дать имя.
3. Создайте несколько кнопок, которые будут содержать небольшой элемент это-
го растрового изображения или его название. Поместите эти кнопки на слой
Новый фон так, чтобы они не мешали основному содержанию фильма.
4. На тот же слой необходимо поместить символы-прямоугольники, сделанные
в пункте 2. На панели Instance (Экземпляр) зададим их имена латинскими бу-
квами (в поле Name). Например, рисунок, изображающий небо, можно назвать
sky и т. д. Расположить эти символы надо за пределами стола, чтобы они не
были видны. Для этого их придется уменьшить с помощью панели Transform
(Преобразование).
5. Выделив одну из кнопок для изменения фона (пусть это будет sky ), откройте
панель редактора ActionScript. Панель имеет контекстно-зависимое название
и в данном случае должна называться Object Actions (Действия с объектом).
Справа на панели введите следующий сценарий, перейдя в режим эксперта:
on (release) {
sky._x=_root._width/2;
sky._y=_root._height/2;
sky._wi dth=_root._wi dth;
sky._height=_root._height;
}
6. Повторите пункт 5 для всех кнопок изменения фона. Несложно понять, что
так можно изменить весь дизайн фильма, а не только фон.
Впрочем, можно предложить и другой путь, аналогичный отдельным страницам
HTML. Ведь для каждого из именных кадров на слое Содержание можно сделать
вариант с другим фоном. Так как фон изменяется в другом слое, слой содержа-
Слои 99
ActionScript
Осталось только оживить сайт. Сделать это нам поможет язык сценариев, встро-
енный во Flash, который называется ActionScript.
1. Сначала выделяем первый именной кадр в слое Содержание и открываем па-
нель Frame Actions (Действия с кадром). На правой панели вводим самый про-
стой и самый распространенный сценарий:
stopO;
Эта команда заставит фильм остановиться.
2. Затем определим переходы между кадрами. Для этого выделим одну из кно-
пок меню и перейдем на панель редактора ActionScript, которая теперь долж-
на называться Object Actions (Действия с объектом). Сценарий, введенный в
окно панели, для кнопки, отвечающей за ссылку на фотоальбом, будет таким:
on (release) {
gotoAndPlay ("foto");
}
Или таким, если вы реализовали эффект растворения:
on (release) {
gotoAndPlay (_currentframe+l);
Pass="foto";
}
3. Теперь осталось ввести сценарий, который будет направлять посетителя к сле-
дующей странице. Его надо вставить в завершающий кадр последовательности:
gotoAndPlay (Pass):
Этот сценарий перенаправит зрителя к странице, имя которой присваивается
кнопкой переменной Pass. В итоге в каждой последовательности после имен-
ного кадра протянутся две стрелки раскадровки, автоматически меняющие
прозрачность текста, а также два сценария, управляющие течением фильма,
и один именной кадр (рис. 4.2).
Вводить сценарии можно вручную, выбрав в меню режим эксперта (Expert Mode).
Меню раскрывается при щелчке на широкой стрелке, которая находится в пра-
вом верхнем углу редактора. В обычном режиме (Normal Mode) Flash не даст вам
внести в текст сценария никаких неположенных изменений.
Команды в обоих режимах вводятся двойным щелчком или перетаскиванием из
левой части панели. Команды stop и goto находятся в папке Basic Actions (Про-
стые действия), а команда on — в папке Actions (Действия). В обычном режиме
при вводе команды внизу панели появляются поля для параметров команды.
В случае команды goto надо указать четыре параметра:
• Scene (Сцена). Оставляем значение, заданное по умолчанию, — <currentscene>.
• Туре (Тип ссылки). В списке необходимо выбрать значение Frame Label (Мет-
ка кадра).
• Frame (Кадр). Введите имя кадра без кавычек.
100 Занятие 4. Фильм на Flash
• RGB — три верхних поля будут содержать компоненты цвета по схеме RGB:
R — Red (красный), G — Green (зеленый), В — Blue (синий). Значения каж-
дого компонента могут изменяться от 0 до 255. Черный цвет по данной схеме
выглядит как (0; 0; 0), а белый — как (255; 255; 255). Оттенки серого, естест-
венно, имеют одинаковые значения компонентов.
• HSB — поля будут содержать значения разложения цвета по компонентам: Н -
Hue (оттенок), S — Saturation (контрастность), В — Brightness (яркость). Конт-
растность и яркость измеряются в процентах, а оттенок — в градусах (0...360).
• Hex — поля также отражают значения по схеме RGB, однако записываются
они в шестнадцатеричной системе счисления от 0 до FF.
Если известны значения компонентов цвета, который вы решили добавить в палит-
ру, можно установить значения в соответствующих полях, посмотрев в окне моди-
фикатора результат, и выполнить команду Add Swatch (Добавить модификатор).
Рис. 4.3. С помощью градиентов серого цвета можно создавать объемные эффекты
Рис. 4.4. Смещая управляющие маркеры градиента, можно изменить его вид
Задание собственной палитры во Flash 103
«FlashS-fMoviell yjsj x
ТгЫ Control Window 'iielj; ,,!.^5.
Рис. 4.5. С помощью линейного градиента нельзя достичь столь эффектного ощущения объема,
зато можно нарисовать радугу
Растровая заливка
Если вы хотите достичь более реалистичного изображения в фильме, вам при-
дется прибегнуть к использованию растровой заливки. При использовании
только градиентов и сплошных цветов вам вряд ли удастся воспроизвести хотя
бы один реальный материал, будь то бумага, ткань или дерево, они будут выгля-
деть нарисованными. Следующие шаги пояснят, как создать заливку из растро-
вого рисунка.
1. Для импорта во Flash растрового файла (такого, как BMP, PICT) выберите
команду File > Import (Файл > Импорт) из главного меню или нажав Ctrl+R.
Удалите появившееся на столе содержимое импортированного файла.
2. Нарисуйте большой квадрат, чтобы использовать его для примера. Откройте
панель Fill (Заливка) и окно Library (Библиотека), чтобы проверить, появился
ли там нужный файл.
3. Выделите область заливки квадрата, который вы нарисовали на столе. В спи-
ске на панели Fill (Заливка) выберите Bitmap (Растровый рисунок). Щелкните
на миниатюрном изображении вашего растрового рисунка, который покажет-
ся в меню. Если в библиотеке есть несколько изображений, они будут показа-
ны все. Когда вы выберете изображение в меню панели Fill (Заливка), квадрат
на столе будет заполнен рисунком (рис. 4.6).
m
Рис 4.6. Растровым изображением можно замостить область заливки выделенного объекта1
1
В качестве рисунка использован файл для обоев Windows — Пузырьки.Ьтр.
Изменение HTML-страницы 105
Изменение HTML-страницы
У меня файл HTML-страницы со встроенным фильмом выглядит следующим
образом:
<нтм>
<НЕАО>
<TITLE>index_flash</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<!-- URL's used In the movie-->
<!-- text used in the movie-->
OBJECT classid="clsid:D27CDB6E-AE6D-llcf-9688-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5.
0,0.0"
width=100£ height=100£>
<PARAM name=movie value="index_flash.swf">
<PARAM name=menu value=false>
<PARAM name=quality value=high>
<PARAM name=wmode value=transparent>
<PARAM name=bgco1or value=#FFFFFF>
<EMBED src="index_flash.swf" menu=false quality=high
wmode-transparent bgcoloHfFFFFFF width=100£ height=1003!
TYPE="application/x-shockwave-flash"
PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?Pl_Prod_Version-Shoc
kwaveFlash">
</EMBED>
</OBJECT>
</BODY>
</HTML>
Очевидно, какие исправления необходимо внести. Во-первых, надо перенести
из остальных HTML-фалов сайта все до тега <body> включительно. В теге <body>
можно убрать определение цветов текста и ссылок:
<HTML>
<НЕАО>
<МЕТА name="OESCRIPTION" content-''Фильм Создание интерактивного сайта">
<МЕТА name="KEYWORDS" content-''книга интерактивность Flash Лещев Дмитрий">
<Т1^Е>Фильм Создание интерактивных сайтов</Т1Т1Е>
</HEAD>
<BODY background="image/tile.jpg" topmargin=0 leftmargin=0 rightmargin=0 marginwidth=0
marginheight=0>
Если размеры окна будут заданы непропорционально размерам фильма, повто-
рение фона сгладит неточность.
Принято, чтобы страница с фильмом открывалась во весь экран в другом окне.
Сделать это можно, добавив на страницу со ссылкой (у нас это будет index.html)
следующий сценарий:
106 Занятие 4. Фильм на Flash
<SCRIPT language»"JavaScript">
function Flash(URL){
var screen_height=600:
var screen_width=800;
if (self.screen) { // от 4 версий браузеров
screen_width = screen.width
screen_height = screen.height
}
else if (self.Java) { // 3 версия NN
var jkit = Java.awt.Toolkit.getDefaultToolkitO;
var scrsize = jkit.getScreenSizeO;
screen_width = scrsize.width;
screenjieight = scrsize.height;
}
screen_width = screen_width-10;
screen_height - screen_height-30:
window.open(URL.'name'.'width=' + screen_width + '.
height=' + screen_height + '.
top=0,1eft=0.resi zable=no.toolbar=no,
1ocati on=no,di rectori es=no.status=no.menubar=no,
scrollbars=no,copyhistory=no')
}
</SCRIPT>
Саму ссылку надо также немного изменить. Значок решетки «#», стоящий вме-
сто ссылки, указывает на текущую страницу. То есть главная страница останет-
ся такой, как есть, а в новом окне откроется фильм:
<А href="#" onclick="Intro('index_flash.html')">
<IMG src="image/leaf.GIF" height=50 width=50 аИ="лист березы">
<FONT size=+l face="Times New Roman Cyr. serif">
Flash-версия сайта
</FONT>
Путешествия в Интернете
Представьте себе: вы приехали в незнакомый город. Для начала вы хотите най-
ти подходящую гостиницу. Такую, чтобы и кошелек не сильно похудел, и тара-
каны ночью чемодан не унесли. Что делать? Можно спросить первого встречного
или второго встречного, если первый не понравился. С большой вероятностью
он ответит, где находится гостиница, но со столь же большой вероятностью эта
гостиница вам не подойдет. Если вы встретите аборигена (это такой человек,
который живет в своей хижине, а не в казенной), то вряд ли он будет в курсе,
как в их городе обстоят дела с гостиницами, так как последний раз он пользо-
1
В переводе Т. Соколовой-Делюсиной.
108 Занятие 5. Реклама — двигатель торговли
вался ими в годы бурной молодости. А если вам попадется свой же брат-приез-
жий, то он, как и вы, ничего про гостиницы не знает. Так что гораздо более ра-
зумно будет обратиться к справочной службе, где вам все подробно объяснят и
расскажут. А если уже слишком поздно и на ее окошке висит табличка «Закры-
то», можно попробовать отыскать рекламный плакат где-нибудь на стенах вок-
зала. В крайнем случае вы можете поехать на главную улицу города и поискать
гостиницу там.
Примерно таким же образом необходимо действовать в трущобах Интернета.
В качестве аборигена здесь может выступить первый попавшийся сайт: на его
страницах наверняка найдется пара-тройка ссылок на любимые места, но впол-
не вероятно, что они вам не подойдут. Справочная служба-Интернета — это по-
исковая система или хороший каталог сайтов. Там вы сможете найти почти все
что угодно, даже если вы знаете всего одно слово, которое содержится на иско-
мой странице. Введите его в поле поиска и нажмите кнопку Найти (Поиск или
Search), расположенную рядом. В результате поисковый сервер представит пе-
ред вами обширный список страниц, которые содержат данное слово.
Роль другого приезжего может играть либо ваш коллега, сидящий за соседним
монитором, либо толстый, но порядком устаревший гроссбух с множеством уже
недействительных ссылок. Ну а аналогия рекламных плакатов — это баннеры,
которых в Интернете пруд пруди.
Угадывание адресов в Интернете имеет больше смысла, чем в обычной жизни.
Набрав адрес \мл/\л/.название_фирмы.сот, вы с большой вероятностью попадете на
главный сайт компании, а введя у\ллм.название_фирмы.ш — на ее представитель-
ство в Рунете.
Итак, ключевой фигурой в поиске требуемого сайта будут поисковые системы и
каталоги. Их работа вызывает восхищение — перелопатить весь Интернет за не-
сколько секунд! Однако на самом деле все, конечно, не так, и результаты работы
поисковых служб — это долгий труд многих людей. Очень часто бывает так: вы
точно знаете, что данное слово есть на нужной странице, но поисковая служба
недвусмысленно вам сообщает: «Искомая комбинация слов нигде не встречает-
ся». Чтобы понять, почему так происходит, давайте разберемся, как работают
поисковые службы.
Поисковые службы
Наивно было бы полагать, что по каждому вашему запросу поисковый сервер
перерывает все «мировое виртуальное болото». Только из-за проблем со связью
на это ушли бы многие годы. Вполне естественно, что люди нашли выход, пусть
не оптимальный, но работающий.
Во-первых, каждый создатель сайта, если он хочет видеть свое детище в резуль-
татах работы поискового сервера, должен послать туда заявку. Во-вторых, сер-
вер эту заявку принимает и рассматривает. На некоторых серверах заявленную
страницу просматривают люди и заносят страницу в тот или иной раздел ката-
лога. Обычно вместе с людьми бродит по Сети и программа-робот, которая про-
сматривает web-страницы и специальным образом сохраняет слова, которые на
них встречаются. Таким образом, все просмотренное и заявленное содержимое
Раскрутка сайта 109
СОВЕТ
Каждая поисковая система работает по-своему, поэтому полезно осуществлять поиск сразу
на нескольких поисковых сайтах. Точно так же и посылать заявки на регистрацию ресурса
лучше сразу на несколько серверов.
Таким образом, первый шаг, который необходимо сделать на пути к славе, — это
регистрация в основных поисковых системах. Их список наверняка есть у вас на
панели поиска или в меню браузера. На всякий случай приведем некоторые из
возможных вариантов (табл. 5.1).
Раскрутка сайта
Чтобы стать популярным исполнителем, совсем необязательно иметь голос,
красивые ноги и прочие второстепенные атрибуты имиджа. Главное — чтобы
тебя «раскрутили». И не слишком далеко забросили.
Еще в большей степени это относится к сайту. Какими бы полезными и инте-
ресными данными вы его ни наполнили, он останется в полной безызвестности,
если вы серьезно не займетесь его раскруткой. И, как уже говорилось, первый
шаг — это регистрация в поисковых системах.
110 Занятие 5. Реклама — двигатель торговли
СОВЕТ
В игру с ключевыми словами можно играть и не совсем честно. Можно, например, вставить
в теге <МЕТА> популярные слова типа «эротика» или «секс», даже если они заведомо не
имеют никакого отношения к вашему сайту. Однако злоупотреблять количеством и качест-
вом ключевых слов не стоит. Особенно не надо переписывать в этот тег все известные и
неизвестные слова. Также убедитесь, что слова не повторяются более трех раз. Обнару-
жив что-нибудь подобное, система проигнорирует ваш сайт и может даже занести его в
черный список, чтобы в дальнейшем сюда уже не возвращаться. А главное — чем меньше
ключевых слов в списке, тем больше вероятность, что ваш сайт появится раньше всех в
конкретном запросе, так как многие поисковые системы располагают список результатов
поиска по мере соответствия введенному запросу.
СОВЕТ
Старайтесь в заголовке дать как можно больше конкретной информации. Если страничка
посвящена фирме, где вы работаете, то кроме ее названия укажите, чем она занимается,
где находится, сколько лет существует. Чем больше конкретной информации человек уви-
дит рядом со ссылкой, тем больше вероятность, что он ею заинтересуется.
Обмен ссылками
Еще один простой, но довольно трудоемкий способ повысить посещаемость сай-
та — попросить, чтобы ваши коллеги и знакомые ставили ссылки на ваш сайт,
упоминая его на своих страницах. Понятно, что ставить ссылки за просто так
никто не будет, поэтому практикуется обмен ссылками. Вы мне — я вам. Вы на-
ходите сайт с близкой тематикой, прикидываете, насколько он интересен и по-
пулярен, и пишите его хозяину электронное письмо с предложением взаимного
обмена ссылками. Ссылка при этом может быть простой текстовой ссылкой или
баннером. Но учтите, что имеет смысл обмениваться с сайтами одного уровня
интересности и популярности. Зачем кому-то ставить ссылку на заведомо скуч-
ный сайт?
Сделать свой баннер довольно просто: рисуете картинку или фильм определен-
ного размера — и баннер готов! Если вы участвуете в баннерном обмене, тогда
HTML-код, который вы должны вставить в свои страницы, вам пришлют.
По своей сути баннер является обычной графической ссылкой, и для него ис-
пользуется следующий код:
<А href="http://Baui_URL"><IMG src=" название_файла.д1Г аН="Описание_ссылки" border=0
w1dth=100 height=100></A>
Тег <а> — это тег ссылки, href — адрес ссылки, <img> — тег рисунка, остальное -
его атрибуты и их значения: src — путь и название файла, alt — текстовое опи-
сание (подсказка), border — толщина рамки в пикселах, width — ширина изобра-
жения, a height — его высота.
ПРИМЕЧАНИЕ
Численное значение атрибутов типа border, width, height можно писать в кавычках и без,
в отличие от атрибутов со значением-строкой, для которых кавычки играют принципи-
альную роль. При задании чисел можно придерживаться удобства и личных предпочтений.
В тексте могут встречаться оба написания для привития навыков чтения кода чужих стра-
ниц.
Баннерные стандарты
Интернет — стихийное образование, однако люди, любящие порядок больше все-
го на свете, есть везде. И поэтому рано или поздно любая серийная вещь при-
обретает свой стандарт. В частности, Internet Advertising Bureau (Рекламное
бюро Интернета, www.iab.net) совместно с CASIE (The Coalition for Advertising
Supported Information & Entertainment, Ассоциация информационной поддерж-
ки рекламы и развлечений) предложило такие стандарты (табл. 5.2).
Кнопка 120x90
Заглушка 120x60
Меню
Графическое меню по своей сути представляет собой набор баннеров, располо-
женных определенным образом. Конечно, оно не преследует рекламных целей,
но в техническом плане выполнено как панель графических элементов, являю-
щихся ссылками.
Для начала создадим картинку для меню. В качестве примера я возьму картин-
ку нотной строки (рис. 5.1), которую мы создадим на занятии 11, а вы можете
взять любое подходящее графическое изображение, которое есть под рукой.
Заглянем ненадолго в будущее. Анимированная заставка, к созданию которой
мы приступим несколько позже, имеет следующий сюжет. Первые капли летне-
го дождя, разбиваясь о невидимую преграду, превращаются в полоски нотной
строки. Капли, падающие за ними, становятся нотами, окрашиваясь в цвета ра-
дуги. Уже готовая нотная строка переворачивается и занимает место вдоль ле-
вой границы экрана. Каждая нота становится пунктом меню.
Во Flash можно сделать кнопку любой формы, а в HTML нам придется выре-
зать под каждую графическую ссылку прямоугольник с нотой. Для удобства на
рис. 5.1 оставлено горизонтальное расположение рисунка (не пытайтесь сыграть
эту строку на пианино — это просто демонстрация идеи).
Рисунок
Для эксперимента вы можете взять любую картинку и открыть ее в Photoshop.
Затем создайте новый слой и при необходимости сделайте надписи к кнопкам.
Пока все изображение представляет собой единое целое, вы сможете легко вы-
ровнять слова относительно друг друга. В случае с нотами надписи могут поме-
116 Занятие 5. Реклама — двигатель торговли
СОВЕТ
Не забудьте предварительно сохранить полное изображение в отдельном файле, чтобы
случайно не испортить оригинал.
HTML-код
Осталось совсем немного — добавить в HTML-файл необходимый код (лис-
тинг 5.1).
Листинг 5.1. HTML-код, отвечающий добавляемому меню
<TABLE border=0 width=150 cenpadding=0 censpacing=0
align-left valign=top>
<TR><TD><A href="http://news.html ">
<IMG src="news.gif" аН="Новости сайта"
border=0 width=150 height=31></A<@062></TD>
</TR>
<TR><TD><A href="http://history.html">
<IMG src="history.gif" аИ="История оркестра"
border=0 width-150 height=31></A<@062></TD>
</TR>
<TR><TD><A href="http://discks.html">
<IMG src="discks.gif" аН="Музыкальные отрывки"
border=0 width=150 height=31></A></TD>
</TR>
<TR><TD><A href="http://conductors.html">
<IMG src= "conductors.gif" аИ="Дирижеры"
border=0 width=150 height=31></A<ia062></TD>
</TR>
<TR><TD><A href="http://soloists.html">
<IMG src-"soloists.gif" аН="Солисты"
border=0 width=150 height=31></A<@062></TD>
</TR>
<TR><TD><A href="http://participants.html">
<IMG src="participants.gif" аи="Участники оркестра"
border=0 width-ISO height=31></A<@062></TD>
</TR>
<TR><TO><A href="http://tours.html ">
<IMG src="tours.gif" аи="Гастроли"
border=0 width=150 height=31></A<@062></TD>
</TR>
<TR><TO><A href-"http://photo.html">
<IMG src="photo.gif" аН="Фотоальбом"
Баннеры с JavaScript 117
Баннеры с JavaScript
Многие сети баннерного обмена не поддерживают баннеры, использующие Java-
Script, так как web-серфингисты часто отключают выполнение сценариев, чтобы
они не мешали перемещаться по Сети. И все-таки мы попрактикуемся в созда-
нии простых сценариев. Во-первых, с профилактической целью, просто чтобы
не бояться JavaScript, а во-вторых — чтобы при желании и необходимости вы
смогли использовать этот динамический элемент у себя на страницах. И начнем
мы с привлекательного на первый взгляд эффекта — бегущей строки.
Бегущая строка
JavaScript — объектно-ориентированный язык. Это означает, в частности, что он
оперирует объектами, их свойствами и методами. Объектами в этом случае яв-
ляются формы и их элементы, и с помощью операторов JavaScript их можно из-
менять уже после того, как страница отображена в браузере.
ПРИМЕЧАНИЕ
В браузерах, поддерживающих DOM (Document Object Model, объектную модель докумен-
та), объектом является любой элемент документа, заключенный в тег, и его можно изме-
нить уже на загруженной странице (то есть динамически). Именно поэтому HTML, поддер-
живающий DOM, назвали dHTML. На самом деле, конечно, поддерживает DOM не HTML
и даже не JavaScript, а современные браузеры.
118 Занятие 5. Реклама — двигатель торговли
Бегущая строка в данном исполнении будет полем ввода (самым простым и рас-
пространенным элементом форм), в котором символы передвигаются слева на-
право (впрочем, поле при этом по-прежнему остается полем для ввода, и вы мо-
жете посоревноваться с машиной в скорости печати).
Вначале между тегами <HEAD> и </HEAD> надо вставить описание функции Di spl a -
cement, которая будет «сдвигать» текст в поле:
<SCRIPT language-"JavaScript">
<i -,_
var RATE=100;
var CHARS=1:
var TEXT = "Привет! Это пример бегущей строки" +
"Если вы хотите знать, как она устроена, посмотрите код страницы." +
function Displacement() {
setTimeoutCDisplacement)'. RATE);
TEXT = document.forml.fi eld.value;
document.forml.field.value -
TEXT.substring( CHARS ) + TEXT.substhngt 0. CHARS);
</SCRIPT>
ПРИМЕЧАНИЕ
Вставки тегов комментария (<!-- и //-->) нужны только для совместимости со старыми
браузерами, не понимающими JavaScript. Конечно, комментарий не заставит их исполнить
сценарий, но, по крайней мере, текст функции JavaScript не окажется выведенным на эк-
ран вместе со всем остальным содержанием страницы.
СОВЕТ
Конечно, можно всегда указывать параметры явно, например, вместо setTimeout('Displace-
mentQ', RATE) писать setTimeout('Displacement()', 100). Но в таком случае, если вам за-
хочется изменить скорость «бега», придется просматривать все тело функции. Поэтому
хорошим стилем программирования считается использование внутри сценария только пе-
ременных и констант, а их определение должно быть вынесено в начало страницы.
ВНИМАНИЕ
Если вы используете в своих сценариях функцию setTimeoutQ, лучше предупредить об
этом своих посетителей, написав об этом на странице с бегущей строкой или в ссылке на
нее. Дело в том, что в старых операционных системах эта функция будет активно «по-
едать» ресурсы компьютера, что может привести к «зависанию». В операционных систе-
мах, которые по-настоящему поддерживают многозадачность, проблем не возникает.
ПРИМЕЧАНИЕ
Метод clearTimeoutQ отключает таймер, установленный при помощи метода setTimeout().
Его синтаксис такой: ClearTimeout (timeoutID), где timeoutID — идентификатор, который
используется только для того, чтобы отменить вычисление методом clearTimeoutQ.
ПРИМЕЧАНИЕ
В Internet Explorer бегущую строку можно сделать и без применения JavaScript. Для этого
надо использовать тег <MARQUE>, который воспринимается этим браузером. Код страни-
цы с бегущей строкой должен быть таким:
<html>
<head>
<Ш1е>Бегущая строка</1Н1е>
</head>
<body bgcolor="#FFFFFF">
<р><тагдиее>Текст бегущей CTpcmM</marquee></p>
</body>
</html>
В Netscape Communicator это будет выглядеть как обычный статический текст.
Картинки-кнопки
Если рисунок, который вы хотите разместить на странице, получился не слиш-
ком «тяжелым», к нему можно добавить простой эффект, который поможет ра-
зобраться в многочисленных картинках-ссылках. Эффект заключается в изме-
нении изображения в тот момент, когда над ними проходит указатель мыши.
Часто данный эффект называют «ролловером» (от англ, roll over). Создается он
довольно просто с помощью JavaScript.
Не хотелось бы вдаваться в подробности объектно-ориентированного програм-
мирования (ООП), поэтому нужные для понимания материала термины поясню
на примере.
Представьте себе комнату, заполненную взрослыми и детьми, играющими в мяч.
Взрослые — люди степенные, они спокойно ловят мяч и перебрасывают его дру-
гому. Дети же, наоборот, стремятся сообщить всему миру о том, что они пойма-
ли или собираются поймать мяч.
Если перейти на язык ООП, то дети являются объектами, которые в определен-
ных ситуациях генерируют события (радостные возгласы). Мяч в нашем приме-
ре являет собой прообраз указателя мыши. Если мяч пролетает над ребенком,
ПРИМЕЧАНИЕ
Обычное изображение также генерирует эти события (см. приложение 3), но только в
браузерах, корректно поддерживающих объектную модель документа (DOM).
ПРИМЕЧАНИЕ
Подобных ссылок можно сделать множество — необходимо лишь вместо имени рисунка
image написать imagel, image2, image3 и т. д., а в параметре href указать другие HTML-
страницы. Если удачно подобрать их сочетание, то не придется даже увеличивать объем
перекачиваемой информации, ведь можно рисунки менять местами между собой. Немного
подумав, вы легко сможете реализовать игру «пятнадцать».
</SCRIPT>
Если вы осознали суть обработки событий, вы сможете создать другие функции,
вызываемые событиями onMouseOver и onMousedut, которые смогут изменять дру-
гие изображения. Можно сделать перемигивающиеся картинки, убегающий мяч
или мышь и многие другие интересные эффекты.
Можно создать эффект смены еще проще. Для этого надо включить код
JavaScript прямо в тег <img> (так называемый встроенный сценарий):
<А href="page.htm" onMouseOver="document.image.src='imageOver.gif'"
onMouseOut="document.image.src='imageOut.gif'">
<IMG src="imageOut.gif" border=0 name="image" width=100 height=100 а Неменяющаяся
картинка"></А>
А вот тот же самый встроенный сценарий для тега <img>:
<IMG src="iinageOut.gif" border=0 name="image" width=100 height=100 аН="меняющаяся
картинка" onMouseOver="document.i mage.s rc='imageOver. gi f"
onMouseOut="document.i mage.src='imageOut.gi f ">
Как видите, сценарии на JavaScript можно поместить на страницу тремя спосо-
бами:
1) в виде тега <script>;
2) как встроенный сценарий;
3) как присоединенный файл (если использовать атрибут src тега <script>).
Какой способ удобнее, можно выбрать, руководствуясь следующими прави-
лами.
• Нельзя встраивать большие сценарии. Также не стоит встраивать сценарии,
которые могут быть подвергнуты исправлениям.
• Если вы используете один и тот же сценарий на нескольких страницах -
укажите присоединенный файл.
• Если вы сомневаетесь — используйте тег <script> в заголовке.
Однако для того чтобы создать даже простой эффект на JavaScript, нам понадо-
билось написать программу-сценарий. Совсем по-другому дело обстоит при ис-
пользовании Flash. Там программировать нам не понадобится вовсе, ну или
только самую малость.
ПРИМЕЧАНИЕ
Flash — это прежде всего программа, предназначенная для работы с графическими объек-
тами. Пример, который последует далее, выполнен в виде анимированного текста в основ-
ном ради учебных целей и для сопоставления баннеру, созданному с помощью JavaScript.
Если вы сравните объемы получающихся файлов, то разница будет весьма ощутима: файл
с текстом вместо графики занимает почти в два раза больше места! (Ведь Flash рассчитан
на использование векторной графики и сохраняет символы не столь эффективно, как ли-
нии.) Иногда, используя псевдографику, можно добиться оригинальных эффектов, однако
в большинстве случаев лучше использовать простые графические рисунки.
1. Первым делом открываем Flash и выбираем команду File > New (Файл > Соз-
дать) или нажимаем Ctrl+N.
2. Щелкаем на столе правой кнопкой мыши и в контекстном меню выбираем
строку Movie Properties (Свойства фильма, рис. 5.2). В открывшемся одноимен-
ном диалоговом окне задаем новые размеры экрана фильма (как для поло-
винного баннера): в поле Width (Ширина) — 234, в поле Height (Высота) — 60.
Это будет размер нашего баннера в пикселах.
3. Закрываем окно, нажав кнопку ОК, и сохраняем файл под именем BannerFI,
|Movie Properti'
.^Cancel
jDefaut j
1
•.iiiVtfo&frifol ;-;!
Ц ЦЦ
Symbol Properties
Шаровоз
:
Behavior: •'••.ft Movie Clip;?
:
,: л';;••• |
4. Выбираем в меню Insert (Вставка) команду New Symbol (Создать новый сим-
вол) или нажимаем Ctrl+FS.
5. В поле Name (Имя) вводим какое-нибудь звучное название для клипа, напри-
мер Паровоз (рис. 5.3). Закрыв диалоговое окно, мы оказываемся на рабочем
столе редактирования клипа.
6. Выбираем инструмент Text (Текст) и щелкаем мышью где-нибудь поближе к
центру листа. Здесь мы набираем, к примеру, следующий «текст» из псевдо-
графики1:
!****, г~|
I С] I
I \ I |
7. Далее нам надо заменить шрифт, заданный по умолчанию. Для этого необхо-
димо перейти на панель Character (Шрифт), используя меню Text (Текст) или
нажав Ctrl+C (рис. 5.4). В поле Font height (Размер шрифта), помеченном бук-
вой А с вертикальной двойной стрелкой, следует задать 8, а в палитре выбрать
цвет. Цвет можно выбрать любой, даже собственный (подробнее об этом см.
занятие 4). Также лучше заменить и сам шрифт, выбрав в верхнем списке лю-
бой моноширинный шрифт, например Courier. Теперь осталось приделать па-
ровозу колеса.
Теперь необходимо заставить колесо вращаться. Сделать это можно двумя спо-
собами; какой из них выбрать, зависит от обстоятельств.
Первый путь заключается в покадровом задании положений колеса.
1. Проверяем, что выделение с объекта не снято, щелкаем на втором кадре на
киноленте и нажимаем F6 (или выбираем команду меню Insert > Keyframe
(Вставка > Ключевой кадр)).
2. Теперь переходим на панель Transform (Преобразование) и в поле Rotate (По-
ворот) задаем угол поворота в 45° (рис. 5.6).
B!
1. Выделив первый кадр на киноленте, даем команду Insert > Create Motion Tween
(Вставка > Выполнить раскадровку).
2. Далее щелкаем на девятом кадре киноленты и нажимаем F6. На киноленте
протягивается стрелка от кадра 1 до кадра 9 на сиреневом фоне, которая и
обозначает раскадровку движения.
3. Теперь нам понадобится панель Frame (Кадр). На ней необходимо задать
один поворот по часовой стрелке. Для этого в списке Rotate (Поворот) выбе-
рем CW (По часовой стрелке), а в соседнем поле напечатаем 1.
Вот колесо и закрутилось. Как видно из рис. 5.7, мы могли задать раскадровку,
выделив кадры и выбрав Motion (Раскадровка движения) в списке Tweening (Рас-
кадровка).
«lotion
СОВЕТ
Для того чтобы разместить символ в другом символе или на столе сцены, необходимо вы-
брать его в окне библиотеки одиночным щелчком, а затем вытянуть на нужное место либо
за значок слева от названия в списке (осторожно, не щелкните повторно!), либо за изобра-
жение символа в верхнем окне.
2. Затем необходимо выделить оба колеса и выполнить команду Modify > Group
(Изменить > Группировать) или нажать Ctrl+G. Теперь колеса составляют
одно целое.
3. Теперь мы можем дать команды копирования и вставки, нажав стандартную
комбинацию клавиш — Ctrl+C и затем Ctrl+V. На столе появилась еще одна
пара колес. Расположим обе пары должным образом внизу паровоза.
128 Занятие 5. Реклама — двигатель торговли
СОВЕТ
Если вам не удается расположить объекты нужным образом с помощью мыши, причина мо-
жет быть в установленных флажках Snap to Object (Привязка к объекту) или Snap to Guides
(Привязка к направляющим). Они оба расположены в меню View (Вид). Отключите их и
попробуйте еще раз. В любом случае вы можете расположить объект нужным образом с
точностью до пиксела через панель Info (Информация).
5. Теперь выделим один вагон и одну букву и с помощью панели Align (Выравни-
вание) выровняем их по центру, а затем нажмем Ctrl+G, объединив в группу.
6. Затем таким же образом поступим с остальными четырьмя вагонами и буква-
ми. В результате мы получим 5 групп, каждая из которых представляет собой
вагон с рекламной буквой.
7. Хочется, чтобы паровоз вывозил вагоны на всеобщее обозрение и оставлял
так, по крайней мере, на некоторое время. Вставим во второй слой ключевой
кадр вместо кадра 60. Аккуратно поместим вагоны так, чтобы они все были
видны на баннере и выровняем их.
8. Затем выделим все вместе и скопируем в первый кадр второго слоя, перемес-
тив их за паровозом. В шестидесятом и первом кадре подгоним положение
паровоза под положение вагонов.
9. Зададим раскадровку движения во втором слое с кадра 1 по кадр 60. Для это-
го выделим первый и последний кадры второго слоя и дадим команду
Insert > Create Motion Tween (Вставка > Выполнить раскадровку).
10. Если теперь нажать Ctrl+Enter, рекламный поезд будет бодро ездить по экрану.
А если вы посмотрите на размер SWF-файла (того, что встраивается в
HTML-документ), то он составляет всего 12 Кбайт!
11. Когда на просторах баннера расположились вагоны, места на нем не осталось.
Перед тем как следующий паровоз вытолкает их, они могут, например, не-
много помигать. Для этого вставим ключевые кадры 70 и 80. При выделении
кадра 70 второго слоя у нас выделяются все вагоны.
12. На панели Effect (Эффект) зададим эффект Alpha (Прозрачность) и установим
значение прозрачности, равное нулю. В кадре 80 вернем ему значение 100 %.
13. Наконец, чтобы закончить историю с вагонами, вставим ключевой кадр 140
и переместим все вагоны далеко за правый край баннера.
ПРИМЕЧАНИЕ
Заметьте, что, когда мы вставляли ключевые кадры, стрелки раскадровки послушно появ-
лялись на киноленте!
14. Теперь зададим движение второго паровоза. Вставим в кадр 61 пустой клю-
чевой кадр (F7), а в кадр 80 — простой ключевой кадр. Перенесем из окна
библиотеки экземпляр паровоза (или скопируем его из первого кадра) и рас-
положим его в кадре 80 слева от вагона с буквой F.
15. Чтобы паровозы не были похожи друг на друга как две капли воды, покрасим
второй паровоз, например, в синий цвет. Для этого выделим экземпляр паро-
воза и на панели Effect (Эффект) зададим эффект Tint (Оттенок), определив
его цвет в палитре. Паровоз стал синим.
16. Затем вставим ключевой кадр 140 и расположим в нем паровоз за правым
краем баннера. Выровняем в кадре 140 положение вагонов и паровоза — на
этот раз паровоз следует позади состава! Раскадровка движения также появи-
лась автоматически.
5 Зак. 96
130 Занятие 5. Реклама — двигатель торговли
СОВЕТ
Стоит заметить, что если в кадре 140 задать другой оттенок, то паровоз будет постепенно
менять цвет по мере продвижения по баннеру. Этот эффект можно удачно обыграть, задав
в качестве фона прямоугольник с градиентной заливкой тех же двух цветов. Соответствен-
но при продвижении объект и фон будут обладать инверсным цветом относительно друг
друга.
17. Проверим ролик. Сначала черный паровоз везет вагоны, потом они подмиги-
вают зрителю, затем синий локомотив выталкивает их со сцены, и все повто-
ряется снова.
Вот и все, баннер готов! Обратите внимание, что добавление процесса вытал-
кивания удвоило размер файла: Проводник показывает 25 Кбайт.
18. Теперь вставим баннер в страничку (лучше всего внутрь тега <td>):
<А href="Baui URL"><OBJECT class1d="clsid:D27CDB6E-AE60-llcf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swf1ash.cabfversi on
=5.0,0.0"
width=200 height=50>
<PARAM name=movie value="BannerFl.swf"> <PARAM name=quality value=high> <PARAM
name=bgcolor value=#FFFFFF> <EMBED src="BannerFl .swf" quality=high bgco"ior=#FFFFFF
width=200 height=50 type="application/x-shockwave-flash"
pi uginspage="http://www.macromedia.com/shockwave/download/index.cgi?Pl_Prod_Version=S
hockwaveFlash"></EMBED>
</OBJECT></A>
19. На место текста Ваш URL необходимо вставить адрес той странички, на которую
вы. хотите сделать ссылку.
Конечно, эффекты, которые можно создать с помощью анимации текста, не огра-
ничиваются данным примером. Текст, помещенный в символ, можно сжимать, ис-
кривлять, раскрашивать всеми цветами радуги, как и любой другой символ.
Особое поле деятельности можно создать, используя необычные шрифты, со-
держащие сложные небуквенные символы, такие как Windings (о преобразова-
нии текста в графику см. занятие 10).
СОВЕТ
Раз уж речь зашла об экономии, еще раз обсудим возможности Flash в этой области. Flash
рассматривает текстовый блок как объект и позволяет делать с ним те же действия на па-
нелях Effect (Эффект) и Transform (Преобразование), что и с клипом, а также прекрасно
выполняет для него раскадровку (если вы не изменяете содержимое). В нашем последнем
примере можно было обойтись только одним клипом колеса, а остальные объекты задать в
виде текстовых блоков. Но есть одно «но». Основная сила Flash при создании анимации
заключена в выполнении раскадровки и возможности задания символов. Именно за счет
использования символов можно создавать сложные ролики, занимающие мало места на
жестком диске. В частности, для нашего баннера это обойдется в 12 Кбайт. Если создавать
паровозы и вагоны просто с помощью текста, то объем файла составит 36 Кбайт! Поэтому
при малейшей возможности сэкономить объем за счет создания символа — смело экономь-
те! К тому же, символы имеют еще одно преимущество: их затем можно запросто исполь-
зовать в других роликах, просто взяв их из окна библиотеки.
Таким образом, без больших затрат (как с точки зрения размера создаваемого
файла, так и с точки зрения объема работ — не всем же быть художниками!)
можно создавать интересные ролики. Единственное ограничение на использова-
Что нового мы узнали 131
ние необычных шрифтов состоит в том, что они могут отсутствовать на компью-
тере зрителя, и если вы не встроите символ в фильм, вместо ракет, цветов и че-
ловечков перед глазами наблюдателя заскачут знакомые или неизвестные ему
символы. Поэтому в таких случаях никогда не устанавливайте флажок Use
Device Fonts (Использовать шрифты пользователя). К слову сказать, для нашего
баннера разница между файлами с внедренными символами и использованием
типизации составляет всего 322 байта и экономия за счет дизайна явно лишена
смысла.
-Я
•'/;
Рис. 5.8. Так может выглядеть баннер на HTML-страничке
На этом занятии
С утра вы посмотрели на календарь и вам не дает покоя мысль: «Чем же так
примечателен сегодняшний день?». Вроде бы не выходной, раз приходится идти
на работу. Дети родились летом, жена тоже... Родители, теща, тесть (листаем за-
писную книжку) — тоже нет. А-а-а-а! Вспомнил! День рождения лучшего това-
рища студенческих лет. Может, вернуться домой за адресом (он перебрался не-
давно в какую-то Тьмутаракань)? Придется опоздать на работу, да и почты по
дороге все равно нет... Да, обидно, что вспомнил так поздно... Но, видно, не
судьба. Да и он тоже в последний раз меня не поздравил...
Вот так и рвутся ниточки, соединяющие некогда близких людей... Но не все по-
теряно! Странно в наш век доверять человеческие отношения неповоротливым
работникам почтовых отделений, когда есть электронная почта. Она за несколь-
ко минут доставит ваше поздравление получателю. И не только скупые строки
текста (хотя и здесь скрыты неограниченные возможности, в чем вы скоро смо-
жете убедиться), но и нарисованные цветы, музыку и даже фильм, причем не
только позаимствованный в Интернете, но и сделанный лично вами именно для
вашего адресата.
Итак, на этом занятии нам предстоит узнать много нового.
• Мы попробуем украсить обычное электронное сообщение, воспользовавшись
встроенными средствами почтовой программы.
• Во Flash мы научимся:
Q задавать слой маски;
Q создавать согласованную анимацию;
1
В переводе В. Маркоиой.
Электронные открытки 133
Электронные открытки
Сервис электронных открыток — один из самых распространенных в Сети. До-
статочно набрать в поисковой системе фразу «электронные открытки», и вы по-
лучите порядка 150 ссылок на русскоязычные серверы, которые готовы совер-
шенно бесплатно поздравить кого-нибудь. Некоторые посылают саму открытку,
некоторые — только ссылку на нее, но в любом случае это подписанная открыт-
ка от вас лично вашему получателю.
Однако вполне возможно, что вам придется посетить не один десяток серверов
и просмотреть не одну сотню страниц, прежде чем вы найдете подходящий эк-
земпляр. И с большой вероятностью может оказаться, что вы будете не единст-
венны в своем выборе: многим может прийти в голову точно такая же идея.
Существует весьма действенная альтернатива — использование средств почто-
вой программы или создание анимированной открытки на Flash. Здесь вы смо-
жете проявить вашу индивидуальность в полной мере — вероятность того, что
ваш получатель получит такую же открытку, будет равна нулю. А начнем мы с
самого простого — использования шаблонов в Outlook Express.
Outlook Express
Outlook Express является почтовой программой, входящей в состав Internet
Explorer, и позволяет довольно просто сделать праздничный бланк, который по-
том можно использовать для поздравлений. Представьте, что вы пришли в мага-
зин и там для вас лично изготовят бумагу для писем. Вы готовы ответить на все
вопросы дизайнера? Тогда творите!
Создание бланка
Если вы мысленно представляете себе, как должна выглядеть ваша будущая от-
крытка, и у вас есть все ее составляющие, тогда можно начинать.
1. Щелкните на стрелке рядом с кнопкой Создать сообщение (New Mail) на пане-
ли инструментов и выберите пункт Выбор бланка (Select Stationery). Другой
вариант: воспользуйтесь одноименной командой меню Сообщение (Message)
из подменю Создать сообщение с помощью (New Massage Using) и в окне Выбор
бланка (Select Stationery) щелкните на кнопке Создать (Create New).
2. В окне Мастер создания бланков сообщений (Stationery Setup Wizard) щелкните на
кнопке Далее (Next).
3. В следующем окне определите расположение элементов бланка. Можно ука-
зать следующие параметры.
134 Занятие б. К сожаленью, день рожденья...
-щ
& New Message
b.lli Vic.w insert
(St
^"4.
ii
!'Чоздразпяю с Новым
Рис. 6.1. Так может выглядеть поздравление, созданное на бланке Outlook Express
в окне Выбор бланка (Select Stationery) (рис. 6.2) нажать на кнопку Редактировать
(Edit), то выбранный бланк откроется как HTML-страница в упомянутой про-
грамме от Microsoft (рис. 6.3).
Select Stationery
Почта Netscape
Netscape Communicator 4 предоставляет меньшие возможности по автоматизации
выбора внешнего вида письма. Формально для письма можно задать шаблон, но
он будет одинаковым для всех писем. Если вы случайно пошлете начальнику
розочку в деловом послании, вряд ли он будет от этого в восторге. Поэтому про-
ще всего сделать заготовку поздравительной открытки, сохранив ее как черно-
вик, а потом для каждого получателя вносить необходимые изменения. Другой
вариант — переслать однажды посланную открытку другому лицу (не забыв
предварительно изменить текст).
Все возможности по изменению внешнего вида электронного послания собраны
в меню Формат (Format) и Вставка (Insert) в окне письма. С помощью меню Встав-
ка (Insert) вы можете добавить в письмо ссылку, рисунок, таблицу, горизонталь-
ную линию и тег HTML. С помощью меню Формат (Format) можно управлять
шрифтами, расположением и выравниванием текста. В этом же меню находится
команда Цвета и свойства страницы.
В окне Параметры страницы (рис. 6.4) вы можете задать цвет текста, ссылок и
фона или стандартную цветовую схему, а также фоновый рисунок, который ав-
томатически замостит всю страницу письма. Чтобы рисунок проявился, не за-
будьте поставить рядом с ним флажок. Кнопка Выбор файла (Browse) служит для
поиска файла на диске. Для предварительного просмотра результатов щелкните на
кнопке Применить (Apply). Чтобы принять все изменения, щелкните на кнопке ОК.
СОВЕТ
Единственное неочевидное значение в окне Параметры станицы имеет флажок Связь с
файлом рисунка. Дело в том, что web-мастер от Netscape обычно создает копию изображе-
ния и помещает его в ту же папку, где находится страница. Этот флажок надо устанавли-
вать, если лишняя копия вам не нужна.
I / : - шетастрг
;
Т ;Г;Испол
'•'":""""~™";":"
Обычный текст
Текст ссылки
Активная ссылка
Просмотренная ссылка
фон (фоновый рисуник закроет этот цвет.)
- Фоновый рисунок"
jiile:///C|/Flash/Ch5/npo6Ka.JPG
:
...... " :'::: : ..... "::-: '
: Г Связь с фай лом рисунка
ОК Отмена
Рисуем паровоз
1. Запустим Flash и создадим новый фильм. Зададим размер стола 550x400 и
сохраним файл под именем Postcardl. Пока единственный слой назовем Поезд.
2. Вставим новый символ-клип (Ctrl+F8) и назовем его Паровоз. Но теперь, в отли-
чие от предыдущего раза, мы будем его рисовать без помощи псевдографики.
138 Занятие 6. К сожаленью, день рожденья...
СОВЕТ
Если вы при использовании различных инструментов рисования нажмете клавишу Shift, то
фигуры, которые вы будете создавать, приобретут правильные очертания. Прямоугольник
станет квадратом, овал — кругом, а линия будет идти только под углами, кратными 45°.
Карандаш и кисть будут рисовать только горизонтальные или вертикальные линии. Даже
перо изменит своим привычкам и не будет выдавать на экран закорючки произвольной
формы.
колесо в виде двух вложенных кругов. Для разнообразия можно задать цвета
заливки и контура разными, а толщину контура увеличить (параметрами
контура заведует панель Stroke (Контур)).
8. Вернемся к клипу Колеса. Расположим два колеса нужным образом, согласно
размерам паровоза. Создадим новый слой и на нем нарисуем толстую линию
(например, кистью или прямоугольником со сглаженными углами) так, что-
бы она соединяла правые края колес. Толщина линии должна быть примерно
равна разнице между радиусами вложенных окружностей, из которых состо-
ит колесо.
9. Зададим раскадровку движения и вставим ключевой кадр 17. Затем вставим
ключевой кадр 5 и переместим линию на нижний край. Далее добавим сле-
дующие положения линии: в ключевом кадре 9 — на левый край, в кадре 14 -
на верхний, и в кадре 17 она снова примет исходное положение.
10. Если теперь запустить клип, будет заметно, что края линии описывают не
круг, а скорее вложенный квадрат. Исправим это, вставив ключевые кадры 3,
7, 11 и 15 и задав в них нужные положения. Теперь линия движется относи-
тельно гладко, описывая своими концами окружности. Последний дефект,
который осталось исправить, это то, что соединяющая колеса линия замирает
в первоначальном положении, поскольку кадр с крайним правым положени-
ем повторен дважды. Проще всего это исправить, вставив ключевой кадр 16,
чуть-чуть подкорректировав положение соединяющей линии, и удалить кадр 17
в обоих слоях. Колеса готовы, можно ехать!
11. Чтобы паровозу не было скучно, создадим ему в компанию один или парочку
вагонов (рис. 6.5). Основная часть вагона — опять же два прямоугольника,
два окна, прицепные устройства спереди и сзади и уже готовый клип для ко-
лес. Можно даже кого-нибудь «посадить» в вагоны, вырезав лица из элек-
тронной фотографии или рисунка и разместив их в окнах вагона.
1. Сначала создадим пейзаж. Заведем для него отдельный слой, назовем его Пей-
заж и перетащим его в самый низ списка слоев, сделав его тем самым подлож-
кой для остального фильма. Вместо неба нарисуем голубой прямоугольник,
занимающий верхнюю часть стола. Дальше надо дорисовать холмы в виде
овалов с черным контуром (без заливки или с зеленой заливкой), нижнюю
часть которых обрезать, а остальное просто залить зеленой краской. Можно
нарисовать линию горизонта с помощью любого рисующего инструмента, а
затем вылить зелени из банки с краской. После того как слой закончен, забло-
кируем его.
СОВЕТ
Чтобы случайно не испортить готовый слой, лучше всего сразу же заблокировать его. Де-
лается это просто: вы должны щелкнуть в строке слоя в столбце под замочком. Тут же
появится такой же значок в блокируемом слое. Повторный щелчок убирает блокировку,
снимая запрет на редактирование слоя. Чтобы заблокировать все слои, надо щелкнуть на
изображении замочка в строке над списком слоев.
2. Создадим еще один, средний слой и назовем его Облака. Облака нарисуем в
виде пересекающихся белых кругов и овалов с черным контуром. Ненужные
остатки контуров удалим кистью с белой краской.
3. Вставим новый клип и назовем его Дым. Нарисуем в нем серое облачко из
двух овалов. Серый цвет следует выбрать достаточно светлый, например за-
дав значения R=CC, G=CC, B=CC.
4. Зададим раскадровку движения для кадров 1-10. Пусть в первом кадре обла-
ко дыма будет в длину равно ширине трубы, а в последнем растянется на
треть или четверть паровоза, поднявшись примерно до облака на слое Пейзаж.
Проще всего это сделать, подобрав параметры на панели Transform (Преобра-
зование). Дополнительно зададим эффект растворения облака. Для этого не-
обходимо в первом кадре клипа Дым задать эффект Brightness (Яркость),
например, -50 %, а в последнем Alpha (Прозрачность) — 30 %. В результате
раскадровки облако дыма будет увеличиваться в размере, светлеть и стано-
виться менее плотным по мере подъема вверх.
5. Теперь перейдем на слой Паровоз через окно библиотеки или через кнопку
Edit Symbols (Редактирование символов) на правом краю под строкой меню.
Зададим новый слой, разместим его внизу списка слоев, вставим ключевой
кадр, а в него — клип дыма. Паровоз задымил!
6. В слое Поезд зададим раскадровку и вставим ключевой кадр 170 в этот и все
остальные слои. Нажмем Ctrl+Enter и посмотрим, что получилось.
Поздравления
Остался последний штрих — написать поздравление. В этом разделе мы позна-
комимся еще с одним интересным анимационным эффектом во Flash — слоями
маски. Но вначале необходимо заняться рутинной работой и найти шрифт, соот-
ветствующий торжественному моменту. На рис. 6.6 использован шрифт InformTT.
1. После того как шрифт найден, необходимо создать слой под поздравление и
разместить его на самом верху. Заблокируем все остальные слои.
Открытка и согласованная анимация 141
2. Создадим еще один слой и поместим его над слоем поздравления (то есть на
самый верх). Теперь щелкнем на нем в списке слоев правой кнопкой мыши и
в контекстном меню выберем Mask (Маска).
3. На облаках разместим буквы поздравительной надписи. Напоминаю, что мы
хотим создать такой эффект, чтобы очередная буква появлялась в тот момент
и в том месте, где будет растворяться облачко дыма. Как же определить это
место? Очень просто. Клип дыма занимает 10 кадров, то есть каждый деся-
тый кадр очередное облачко будет исчезать. Если перевести считывающую
головку на соответствующий кадр, то будет видно место, где находится труба
паровоза и, соответственно, дым — ведь он едет вместе с ним!
«Но ведь дым не едет вместе с паровозом! Дым просто поднимается вверх,
а паровоз уезжает вперед!» — скажете вы и будете абсолютно правы. Реше-
ние этой несложной задачи я оставляю вам. Подскажу: вам придется размес-
тить нужное количество клипов дыма по пути движения паровоза, не забы-
вая удалять их после того, как каждый клип 10 кадров просуществует на
главной киноленте. Так как в данном примере мы преследуем цель научить-
ся согласовать анимацию, будем считать, что дым подгоняет попутный ветер,
дующий со скоростью, равной скорости локомотива.
BasiqActiors
Go То
Ray
Stop
Toggle High Quality
Рис. 6.8. Вот так будет выглядеть открытка в отдельном окне Flash
144 Занятие 6. К сожаленью, день рожденья...
Открытка-сюрприз
Может быть, анимация вас не занимает? Ну что ж, давайте сделаем открытку
с сюрпризом. В качестве прототипа можно взять любую реальную открытку -
благо, их теперь много, на любой вкус найдется. Если вы хотите непременно
создавать продукты высокого художественного уровня, тогда отсканируйте по-
нравившийся вам прототип, но мы пока поучимся рисовать...
Г
".' | Cahnei 1
• (Normal 31
I
:
< Threshold: | Normal : Help
:• Ц | . ' . '
Рисуем яблоко
Наш фильм-открытка будет почти классическим: с интригующим началом, дра-
матической серединой и с почти счастливым концом. Идея сюрприза проста:
получатель видит картинку с изображением вкусного яблока, нажимает кнопоч-
ку с призывным названием «Жми сюда», и из яблока выползает сытый и до-
вольный червяк, который машет ручкой и говорит: « Привет!». Но об этом даль-
ше, а пока нарисуем яблоко.
1. Создадим новый файл и зададим размер стола 550x400. Сохраним файл под
именем Postcard2.
2. Зададим три слоя: Яблоко, Лист и Черешок. Дальше мы попытаемся прибли-
зиться к пониманию векторной графики и работы с кривыми Безье.
ПРИМЕЧАНИЕ
Помните, есть такая детская игра, в которой надо соединить точки и получить рисунок?
То есть, говоря языком компьютерной графики, надо восстановить все точки (пикселы)
контура рисунка, имея только информацию о некоторых, ключевых точках. Однако если
попытаться задать круг в виде такого рисунка, мы или получим сильное искажение, или нам
придется указывать все точки круга как ключевые. Создатели векторной графики нашли
выход: любая кривая представляется в виде набора кривых Безье — линий с заданной кри-
визной, каждая из которых соединяет по две ключевые точки. Во Flash ключевые точки
(anchor points) бывают двух видов: точки изгиба (curve points) и угловые точки (corner points).
Выделенные точки изгиба выглядят как маленькие пустые кружки, угловые точки — как
пустые квадратики. Кроме маркеров точек Flash отображает маркеры касательных — за-
крашенные квадратики, лежащие на касательной к кривой.
3. Перейдем на слой Яблоко и нарисуем круг или овал, похожий на яблоко, кон-
туром без заливки. Для этого надо нажать кнопку-переключатель No Color (Без
заливки) в разделе Color (Цвета) на панели инструментов. Получившаяся
кривая — идеальный объект для экспериментов с кривыми во Flash.
СОВЕТ
Нажатие клавиши Alt во время перетаскивания инструментом Subselect (Подвыделение)
преобразует угловую точку в точку изгиба и наоборот. Для преобразования любой точки
кривой в точку изгиба щелкните на ней пером. Чтобы удалить ключевую точку, надо выде-
лить ее и нажать клавишу Delete или дважды щелкнуть пером.
L . ,
Кнопка
На третьем занятии вы уже немного познакомились с кнопками во Flash. Те-
перь настал черед более близкого знакомства. Из чисто учебных целей мы соз-
дадим кнопку и определим для нее все функциональные кадры.
1. Нажмем F8 и выберем в качестве поведения символа тип Button (Кнопка).
В кнопке, как уже говорилось ранее, есть только 4 кадра: Up (Приподнята),
Открытка-сюрприз 147
ПРИМЕЧАНИЕ
Безусловно, вы можете задать и более очевидную кнопку, поместив на ней надпись.
У меня же она получила свою форму от реального прототипа.
Object Action;
Basic Actions
S) Go To
Play
Stop
Toggle High Quality
p| j : current scene>
6. Вставим ключевой кадр 2 в слой Кнопка. Кнопку удалим, а вместо нее, на том
же месте, оставим текст «Получилось!».
Рисуем дальше
Второй кадр у нас уже появился, но остальных пока нет... Что же в них будет
происходить? Сначала должна появиться дырка на сочном боку яблока, затем
из нее появится червяк, который помашет рукой и скажет «Привет!».
1. Для начала дырка будет маленькая. Заведем для нее отдельный слой, кото-
рый так и назовем — Дырка, и расположим его на самом верху. В первый кадр
вставим пустой ключевой кадр, нажав F7, а во второй — обычный ключевой
кадр, нажав F6. В остальные слои вставном по обычному кадру на позицию 140,
нажимая F5. Заблокируем их, чтобы случайно не испортить. В тот слой, где
задана команда stop, вставим ключевой кадр 2, чтобы отменить ее действие.
2. Выберем в правой верхней части яблока место для дырки. Нарисуем доста-
точно большой темно-коричневый или черный круг (если вы будете исполь-
зовать контур, лучше сразу покрасить дыру в цвет червяка).
3. Зададим раскадровку движения во втором кадре и вставим ключевой кадр 60.
Во втором кадре на панели Transform (Преобразование) в полях Width (Шири-
на) и Height (Высота) укажем какое-нибудь малое число (1-5 %) при установ-
ленном флажке Constrain (Согласованно).
ПРИМЕЧАНИЕ
Из личного опыта рекомендую сначала заполнить оба поля, а потом нажать Enter. Если по-
пытаться заполнять поля по очереди, Flash может вести себя непредсказуемо.
Открытка-сюрприз 149
4. Примерно в кадре 20 вставим ключевой кадр и уже при снятом флажке Con-
strain (Согласованно) установим проценты так, чтобы круг принял вытяну-
тую по горизонтали форму. В этом кадре у нас в дырке появиться первая
часть червяка — глаза.
5. Для глаз придется создать отдельный слой Червяк (выше слоя Дырка, естест-
венно), на который мы поместим два новых клипа в ключевой кадр 20. Клип
назовем Глаз.
6. Нарисуем белый круг с красным контуром — глаз. Перед тем как рисовать,
установите на панели Stroke (Контур) толщину контура, равную 3.
7. В круге нарисуем маленький круглый черный зрачок, но поместим его не в
центр глаза, а ближе к краю.
8. Зададим раскадровку, вставим ключевой кадр 10. На панели Frame (Кадр)
укажем вращение по часовой стрелке на один оборот.
9. Вставим глаза в соответствующий слой, одновременно подкорректировав его
размер под ширину дырки. Установим ключевой кадр 61 и удалим клипы, а
затем заблокируем слой.
10. Перейдем в клип Глаз и в первом кадре выделим весь рисунок. Нажмем F8 -
клавиатурный эквивалент команды Convert to Symbol (Преобразовать в сим-
вол). Выберем в качестве его поведения положение Graphic (Графический ри-
сунок) и назовем его Око. Вернемся к основной сцене.
11. Настала пора создавать червяка. Он, естественно, будет клипом под названи-
ем Червяк. Сначала нарисуем голову — коричневый овал на слое Голова. На
ней расположим два глаза (графический символ Око) на том же расстоянии и
того же размера, что и глаза на основной сцене, но на отдельном слое. Оста-
лось карандашом в режиме Smooth (Сглаживание) пририсовать рот и нос.
12. Зададим раскадровку для слоя головы на первые 10 кадров. В первом кадре
сожмем голову так, чтобы она была равна по величине дырке в кадре 60 глав-
ной киноленты. Переключаясь между панелями Transform (Преобразование) и
Info (Информация) вы быстро достигните нужного результата.
13. Однако необходимо еще согласовать расположение глаз. Проще всего для
этого на основной сцене задать раскадровку для их передвижения и передви-
нуть их в кадре 60 на нужное место (так, как они расположены на лице в кли-
пе).
14. Каким образом разместить глаза относительно дырки так же, как они распо-
ложены относительно головы? Очень просто. Мы задали такие параметры,
что в первом кадре клипа голова имеет такую же форму и размер, что и дыр-
ка. Выделим голову и посмотрим на панель Info (Информация). Переключим
систему координат так, чтобы черным был центр. Расположим голову по цен-
тру клипа. Ее координаты теперь — два нуля. Расположим глаза нужным об-
разом и сгруппируем их (Ctrl+G). Пусть их координаты будут Х=0, Y=-16
(будем считать, что они симметричны относительно центральной плоскости
симметрии). В действительности — это координаты группы относительно
центра дырки. Перейдем теперь к главной сцене. Заметим расположение дыр-
ки (пусть оно будет Х=356, Y=219, черный квадратик по-прежнему в центре)-
Далее выделим глаза и установим им координаты в Х=356, Y=203 (мы доба-
150 Занятие 6. К сожаленью, день рожденья...
**
:Slii|pi|li|Sj; Я глаз
%] Кнопка
is око
ШИТ Кольцо"
тш .
:;
e-^;A!a..av».^
Рис. 6.12. Кинолента в клипе червяка
Руки и морфинг
Осталось только сделать руки. На их примере мы познакомимся с другим ви-
дом раскадровки — морфингом.
ПРИМЕЧАНИЕ
В отличие от раскадровки движения, морфинг — это раскадровка формы, то есть возло-
женная на Flash процедура прорисовки превращения рисунка одного кадра в рисунок дру-
гого. Обратите внимание, что морфинг выполняется для всего слоя целиком и может при-
меняться только для рисунков. Обработать таким образом символ или не преобразованный
в графику текст не удастся.
1. Для начала заблокируем все слои и вставим два слоя для рук над слоями ко-
лец. Назовем их Левая и Правая. Пусть правая рука — это рука в правой части
экрана: мы, как создатели, можем позволить себе исходить из своего взгляда
на жизнь, а не с точки зрения червяка. Соответственно, именно эта рука и бу-
дет подвергаться морфингу.
2. В кадре 30 вставим в слое Правая ключевой кадр и нарисуем руку, держащую-
ся за край яблока (рис. 6.13, а). Такой рука предстанет в первых кадрах. Боль-
шой палец будет отведен влево, а остальные будут представлены парой
черточек. Затем вставим ключевой кадр 60, а потом — кадры 39 и 40.
3. Выделим кадры 30 и 39 и зададим раскадровку движения. Затем выделим
кадры 40 и 60 и также зададим раскадровку.
4. Перейдем на панель Frame (Кадр) и заменим значение в списке Tweening (Рас-
кадровка) на Shape (Морфинг). Кадры с 40 по 60 должны окраситься в зеле-
ный цвет, а стрелочка — должна сохраниться.
ПРИМЕЧАНИЕ
При задании морфинга Flash бывает очень капризным. Если действие не получилось сразу,
попробуйте сделать его повторно, удалив кадры и расположив в них нарисованную фигуру
заново.
а б
Рис. 6.13. Начальная (а) и конечная (б) формы руки
152 Занятие 6. К сожаленью, день рожденья...
13. В любом слое вставим ключевой кадр 80. В него необходимо добавить коман-
ду stop, чтобы червяк не стал вылезать повторно.
14. Продлим все остальные слои, кроме слоев-масок до кадра 80. Продлевать
слой можно несколькими способами: можно вставить ключевые или простые
кадры, можно просто протащить последний кадр по киноленте (только будьте
осторожны, не продлите так какую-нибудь раскадровку, например в слое Ру-
ка). Если вам по душе порядок, уберите все ненужные раскадровки, которые
Flash продлевает автоматически. Клип червяка готов!
15. Вернемся к главной сцене. Чтобы после завершения фильма открытка не воз-
вращалась к своему исходному состоянию, вставьте в последний кадр любого
слоя ключевой кадр, а в него — команду stop.
Проверим, как выглядит фильм. После щелчка на правой половине открытки
должна появляться дырка, а затем червяк. Открытка должна завершаться «бес-
конечным» маханием рукой. Возглас «Получилось!» можно заменить на что-ни-
будь более подходящее, например на надпись «С днем рождения!».
Как уже говорилось, в открытку можно вмонтировать звуковое послание. Это
может быть песня, мелодия или просто любая фраза. Если вы можете оцифро-
вать свой голос, то остальное дело вашей фантазии. Только учтите, что звуковое
сопровождение может существенно увеличить размер открытки. Пока же SWF-
файл занимает всего 12 Кбайт.
Если же по тем или иным причинам вам не под силу превратить свой голос в
совокупность битов на диске, то вы можете поискать необходимое на просторах
всемирной свалки. Так или иначе, вам нужен звуковой файл, например, в фор-
мате WAV или МРЗ (рис. 6.14).
Итак, открытка-сюрприз готова (рис. 6.15). Но на этом возможности порадовать
ближнего своего (если вы предпочитаете общаться с ним через Интернет) не
ограничиваются. Например, можно сделать для него небольшую игру, особенно
если он или она любит «квесты».
Library- Movie 1
if : Options
Мелю
Logoff.wav О
1
я
et
Рис. 6.14. Вот так выглядит звуковой файл в окне библиотеки
154 Занятие 6. К сожаленью, день рожденья...
File View
С дтм рождения!!!
Рис. 6.15. Вид открытки в конце проигрывания
Сценарий
Очень редко случается, что сначала снимают фильм, а потом пишут сценарий.
В художественном кино, наверное, никогда. Важность подготовительной работы
мы обсудим подробнее немного позже (на следующем занятии), а пока просто
обсудим планы относительно первого большого проекта.
1
В переводе В. Марковой.
156 Занятие 7. Славный праздник Новый год
ПРИМЕЧАНИЕ
В данном случае разбивка фильма на сцены (отдельные файлы) носит исключительно учеб-
ный характер — объединение всех сцен на единой киноленте поможет уменьшить размер
SWF-файла и количество потраченного рабочего времени. Реальным поводом для начала
новой сцены может быть или слишком большой размер текущей сцены (такой, что с ней
становится невозможно работать), или резкая смена содержимого практически всех слоев
фильма (как, например, в этом фильме при переходе к последней сцене).
СОВЕТ
Если вы для перехода к следующей сцене используете действие NextSceneQ, обратите вни-
мание на то, что при выполнении данного действия фильм переходит на первый кадр сле-
дующей сцены и останавливается. Если вам не подходит такой эффект, вставьте команду
playQ в первый кадр.
3. Сцена третья — Электросеть. После того как розетка найдена, вилка сама под-
ползает и включается в розетку. По елочке бегают огоньки. Все просто заме-
чательно. Но Дед Мороз у всех на глазах не приходит -- мы должны
выключить свет. Для этого еще в первой сцене нарисуем выключатель, кото-
рый заработает только сейчас.
4. Сцена четвертая. Темно, на елке по-прежнему бегают огоньки. Они высвечи-
вают под елкой какие-то новые предметы — их принес Дед Мороз. Теперь
надо снова зажечь свет. Сцену назовем Темнота.
5. Сцена пятая. Зажегся свет. Под елкой стоит несколько пакетов. Открывая по
очереди каждый, видим их содержимое — бутылку шампанского и два бокала.
Осталось последнее задание — открыть бутылку, поэтому название будет -
Распаковка.
6. Сцена шестая — Последняя. Вылетает пробка, льется шампанское (камера на-
езжает, в кадре только бокалы). Бокалы наполняются, хрустальный звон, за-
ключительная надпись: «С Новым годом!». Конец.
Начало фильма 157
Ну, что ж. Как сценаристы мы состоялись (рис. 7.1). Осталось дело за режиссе-
ром и оператором...
Украшение
Электросеть
Темнота
Распаковка
Последняя.
Начало фильма
В первой сцене нам надо нарисовать елку и ящик с елочными игрушками, а так-
же смоделировать открывающуюся крышку ящика.
1. Как всегда, создаем новый файл. Размер оставим стандартным: 550x400. На-
зываем его PostCardB. В первой сцене создаем четыре слоя (снизу вверх): Фон,
Выключатель, Елка, Ящик и Крышка.
2. Заблокируем все слои, кроме самого нижнего — фона. На нем нарисуем два
прямоугольника, закрывающих всю площадь стола, — коричневый пол и го-
лубая стена.
ПРИМЕЧАНИЕ
В дальнейшем я не буду акцентировать внимание на блокировке слоев, если это не пред-
ставляет особой важности. Общее правило таково: если вы работаете с одним слоем — за-
блокируйте все остальные.
СОВЕТ
Выбрать близкий цвет для эффекта Tint (Оттенок) очень просто. Выберите в палитре цвет,
которым вы рисовали ветку ели. В правой части панели Effect (Эффект) появятся поля со
значениями цвета в схеме RGB. Если вы поменяете значение в поле G (Green, зеленый) на
большее, цвет станет более светлым, если в меньшую сторону — темным. Добавление си-
него (поле В, blue) приблизит дерево к породе голубых елей, а красного (поле R, red) —
сделает коричневым. Верхнее поле с процентами можно использовать для поиска компро-
мисса между цветом оттенка и цветом объекта.
СОВЕТ
Если вам необходимо согласованно разместить объекты, расположенные на разных кадрах
одной киноленты, воспользуйтесь режимом кальки. Включается этот режим кнопкой Onion
skin (Калька), расположенной под кинолентой (рис. 7.2). Три следующие кнопки управля-
ют параметрами режима: Onion skin Outlines (Калька контуров) — отображает объекты на
кадрах, кроме текущего в виде контуров; Edit Multiply Frames (Редактирование нескольких
кадров) — позволяет изменять все отображаемые кадры; Modify Onion Markers (Изменить
маркеры кальки) — позволяет управлять количеством отображаемых кадров. Маркеры каль-
ки — два кадра, Start Onion Skin (Начать снимать кальку) и End Onion Skin (Закончить сни-
мать кальку), выделенные кружками на киноленте. Если не установлен флажок Anchor Onion
(Закрепить маркеры), маркеры можно взять и перетащить по киноленте. В меню кнопки
Modify Onion Markers (Изменить маркеры кальки) имеются следующие команды: флажок
Always Show Markers (Всегда показывать маркеры кальки), флажок Anchor Onion (Закре-
пить маркеры) и переключатель Onion (Калька кадров) с положениями 2, 5 и АИ (Все).
\. Дальше нам необходимо, чтобы крышка слетела с ящика. В слое Крышка вста-
вим второй ключевой кадр и заменим кнопку на рисунок. Вставим раскадровку
в него и установим ключевые кадры 10, 20 и 30. В кадре 10 повернем крышку
на 90°.
2. Включим режим кальки, либо установим флажок Onion A l l (Калька всех кад-
ров), либо перетащим левый маркер кальки до кадра 2. Оставаясь в кадре 10,
передвинем вертикально стоящую крышку так, чтобы получить поворот от-
носительно правого нижнего угла (рис. 7.3).
3. Перейдем на кадр 20 и повернем крышку на 180°. Flash должна автоматиче-
ски продолжить вращение по часовой стрелке. Передвинем крышку в продол-
жение поворота.
4. В кадре 30 снова зададим поворот на 180° на панели Transform (Преобразова-
ние). Крышка у нас должна упасть на пол — просто сместим ее на высоту
ящика вниз. Падение должно происходить без вращения. Теперь можно по-
пробовать понажимать кнопки и подвигать маркеры режима кальки, чтобы
посмотреть их действие. Продлим все остальные слои до 30, вставив простые
кадры.
5. Создадим новую кнопку. Пусть это будет яркий елочный шар. Для разнооб-
разия попрактикуемся в создании градиентных заливок (подробнее см. заня-
тие 4). Нарисуем круг с красным контуром. Выделим область заливки и
перейдем на панель Swatches (Цветовые модификаторы). Выделим внизу па-
нели черно-красную радиальную заливку. В меню панели, открывающемся
при нажатии кнопки со стрелкой вправо, выберем команду Duplicate Swatch
(Дублировать цветовой модификатор). Перейдем на панель Fill (Заливка).
Щелкнем на черном квадратике под шкалой градиента. В появившейся па-
литре выберем белый цвет. Переместим белый маркер-квадратик влево, а крас-
ный поставим ближе к середине. Наш круг должен приобрести градиентную
окраску — в центре он стал белым, а по краям — красным.
160 Занятие 7. Славный праздник Новый год
Flash 5 - [PostCard31la]
Рис. 7.3, Так будет выглядеть движение крышки ящика в режиме кальки (слой фона отключен)
СОВЕТ
Если вы хотите, чтобы срабатывал только щелчок по торчащей из ящика части шарика, то
вам придется обрезать шарик внутри символа, хотя бы в кадре Hit (Срабатывание), так как
Flash определяет зону срабатывания кнопки независимо от того, видна она или нет.
Сцена Украшение
В начале работы над второй сценой потренируемся в удалении лишних кадров.
Ведь нам нужен только первый кадр. На мой взгляд, самый простой способ уда-
ления в данном случае таков.
6 Зак. 96
162 Занятие 7. Славный праздник Новый год
1. Если слой имеет только один ключевой кадр, тогда надо протащить послед-
ний кадр и совместить его с первым. Останется только один кадр. Если же
ключевых кадров несколько, тогда, нажимая клавишу Shift, необходимо выде-
лить группу удаляемых кадров и в контекстном меню выбрать Remove Frame
(Удалить кадр). В слоях Выключатель и Крышка лучше оставить последний
кадр. В конце такой деструктивной деятельности мы должны получить пять
слоев, содержащих по одному кадру — ключевому.
2. Для реализации созидательного начала создадим заготовку еще для одной сце-
ны — Электросеть. Выделим сцену Украшение, нажмем кнопку Duplicate Scene
(Сделать дубликат сцены) внизу панели Scene (Сцена).
3. Переименуем новую сцену и закроем панель.
4. В сцену Украшение добавим в середину списка как минимум 5 слоев. Назовем
их: Серпантин, Шар, Шарики, Звезда и Свечи. Продлим все слои до 30 кадров,
выделим весь столбец под числом 30 на киноленте и нажмем F5. Теперь нам
предстоит заполнить слои.
Елочные шарики
С развешиванием шаров можно поступить просто: отвести для каждого по слою,
и с помощью раскадровки вытаскивать шарик из ящика и вешать на нужное ме-
сто. Дешево и сердито. С первым шариком так и следует поступить, предвари-
тельно заменив кнопку на обычный графический рисунок. Однако интересней
представляется вариант, если сделать развешивающиеся шарики клипом и вста-
вить несколько таких клипов в слой Шарики. На лицо явная экономия. Так мы
и поступим.
1. Вначале создадим символ — графический рисунок, куда скопируем изображе-
ние из кнопки-шара. В слое Шар один такой шарик из положения, которое он
занимал в первой сцене, переместится на елку. Рисунок назовем ШарикКрас-
ный. В окне библиотеки щелкнем правой кнопкой на его названии. В контек-
стном меню выберем Duplicate (Дубликат). Назовем новый символ ШарикЖел-
тый. Сделаем таким же образом ШарикСиний.
2. Перейдем в символ ШарикЖелтый и выделим изображение. Скопируем гради-
ент, в который у нас покрашен красный шар командой Duplicate Swatch (Дуб-
лировать цветовой модификатор). На панели Fill (Заливка) заменим красный
на ярко желтый. На панели инструментов поменяем еще и цвет контура. По-
лучился яркий желтый шар.
3. Повторим то же для синего шарика.
4. Затем создадим новый клип под названием Шарики. В нем создадим три слоя,
и в каждый поместим по разноцветному шарику. Подберем размер шариков
так, чтобы хорошо смотрелись и уменьшенный, и увеличенный варианты.
Что же будет происходить в клипе? Шарики по очереди будут взлетать вверх
и занимать место на воображаемой елке. При размещении на елке учтите,
что мы хотим поместить несколько одинаковых клипов, а начальное положе-
ние мы можем варьировать только в пределах ящика. Например, если мы по-
местим клип в левый край ящика, то шарики повиснут на левом краю елки,
Сцена Украшение 163
СОВЕТ -
Вместо команды stop можно установить для каждого экземпляра клипа на панели Instance
(Экземпляр) в списке Behavior (Поведение) пункт Graphic (Графический рисунок), а в ниж-
нем списке — Play Once (Проиграть один раз). Тогда клип не будет проигрываться беско-
нечно. Это свойство символов может вам пригодиться при расстановке свечей, но тогда
надо будет указать в нижнем списке — Single Frame (Один кадр), а в поле Frame (Кадр) по-
следний кадр клипа — 30.
6. Итак, клип готов. В слое Шарики должен быть только первый ключевой кадр.
В него поместим три клипа с шариками: в левый нижний, правый верхний
угол и в центр ящика. На два клипа можно наложить эффект Tint (Оттенок).
Например, фиолетовый и зеленый. При этом лучше всего установить процент
наложения эффекта равным 50. Тогда все девять шариков станут разноцвет-
ными.
7. Еще нам надо изменить размер клипов: один сделать равным 120, а другой -
80. Самый большой клип должен располагаться правее всех, а самый малень-
кий — левее, чтобы не получилось перекрывания шариков (рис. 7.7).
СОВЕТ
При размещении клипов шаров было бы кстати отображать ящик, чтобы не вылезти за его
границу, но при этом он заслонит сами клипы (рис. 7.7). Для таких случаев удобен режим
контуров. Щелкните на цветном квадрате справа от названия слоя. Квадрат станет конту-
ром, как и изображение на слое. Цвет квадрата соответствует цвету контура рисунка. Та-
ким образом, вы будете видеть границы ящика, но он не будет загораживать видимость.
164 Занятие 7. Славный праздник Новый год
Рис. 7.7. Шарики в ящике. На рисунке видны центры клипов и контур ящика
Серпантин
Теперь развесим разноцветный серпантин.
1. Для начала создадим несколько линейных градиентных заливок. В отличие
от радиального, линейный градиент предоставляет существенно больше воз-
можностей цветового оформления. Сдублируйте цветовой модификатор лю-
бого линейного градиента. Перейдите на панель Fill (Заливка), пощелкайте под
цветовой шкалой в разных местах. Должно появиться 8 цветовых маркеров.
Задайте каждому подходящий цвет (рис. 7.8).
| Linear Gradient
• ' " • ' ' • ' • • •....
СОВЕТ
Старайтесь сначала задавать раскадровку и морфинг, а потом уже вносить изменения
в ключевые кадры. В первую очередь это касается работы с простыми рисунками, не яв-
ляющимися символами. Например, если вы сначала измените размер фигуры, а затем за-
дадите раскадровку, Flash заменит рисунок в одном из ключевых кадров, и вам придется
вносить изменения заново.
ВНИМАНИЕ
Несмотря на свою векторную сущность, рисунок серпантина в итоге можег «весить» до-
вольно много из-за большого количества неправильных кривых. При первом исполнении
он «потянул» почти на 100 Кбайт, и это при том, что законченная сцена без этого слоя за-
нимает в 5 раз меньше. Поэтому будьте умеренны и иногда проверяйте объем SWF-файла.
Вдруг из-за пары лишних линий ваша открытка не пролезет в почтовый ящик получателя?
Рисунок можно облегчить, если рисовать его контурными инструментами. Правда, для
окраски контура не доступна градиентная заливка.
СОВЕТ
Обратите внимание, что для создания серпантина мы использовали не клип, а графиче-
ский рисунок, хотя и задали на собственной киноленте символа морфинг. В чем же разни-
ца? Очевидное преимущество рисунка в том, что он встраивается в основную сцену и при
перемещении считывающей головки по основной киноленте вы видите происходящие в
нем изменения. Клип же всегда остается «закрытой» сущностью. У него своя кинолента,
и на главной киноленте во время работы он отображается как первый кадр, если не зада-
но иное на панели Frarr... (Кадр). Правда, у такого поведения есть и обратная сторона.
Если на основной киноленте вы дадите команду stop, клип будет продолжать двигаться,
а рисунок нет. Еще у клипа есть другие, пока еще нами не использованные, полезные
свойства. Они связаны с тем, что поведением клипа можно управлять программно, с помо-
щью сценария на ActionScript. В любом случае поведением символа можно управлять как с
помощью библиотеки, так и с помощью панели Instance (Экземпляр).
Звезда
Настал черед украсить верхушку елки. Пусть это будет звезда — на ее примере
мы будем реализовывать эффект свечения.
1. Вначале создадим новый клип Звезда.
2. Теперь нам надо нарисовать звезду. Проще всего это сделать в каком-нибудь
векторном редакторе, а потом экспортировать во Flash. Но и сам Flash пре-
доставляет достаточно простых средств для создания правильной пятиконеч-
ной звезды. Алгоритм рисования примерно следующий. Заведем два допол-
нительных слоя. На первом нарисуем две вложенных окружности. Для этого
выделите и удалите заливку у круга, скопируйте окружность и вставьте так,
чтобы копия не пересекалась с оригиналом.
3. С помощью панели Align (Выравнивание) расположите обе окружности по
центру стола. На панели Info (Информация) задайте отношение радиусов 1:2.
На другом вспомогательном слое нарисуйте вертикальную линию по центру
(держите нажатой клавишу Shift при использовании Pencil (Карандаш) или Line
(Линия)). Линия должна пересечь обе окружности два раза. Скопируйте ли-
нию и поверните на 36°. Расположите новую линию так, чтобы отрезки пере-
секались в центре клипа. Еще три раза скопируйте и поверните линию.
В итоге окружности должны быть разделены на 10 равных секторов.
4. Далее в основном слое нарисуем контур звезды красным цветом (рис. 7.10),
используя инструмент Line (Линия). Флажок Snap to Object (Привязка к объ-
екту) при этом лучше снять. Можно нарисовать половину звезды, а затем
скопировать и отразить относительно вертикальной оси. Для этого на панели
Transform (Преобразование) необходимо установить переключатель Skew (На-
клон) и в поле с вертикальной стрелкой написать 180°.
Сцена Украшение 167
ПРИМЕЧАНИЕ
Вы можете усложнить эффект «горения» звезды, поступив так же, как в случае со свечка-
ми, который мы рассмотрим в следующем разделе.
11. В слое Звезда главной сцены поместим немигающий вариант — Звезда!. Как
сделать так, чтобы она вылетела из ящика, я надеюсь, вы уже знаете.
Свечи
1. Осталось только сделать гирлянду из свечек. Так же как и в случае со звез-
дой, нам понадобится два варианта свечек — зажженные и не зажженные.
С незажженными все просто — надо создать простенький рисунок-символ,
состоящий из белого прямоугольника и вытянутого овала пламени. Контур
свечи можно сделать черным. Символ назовем Свеча.
2. Рисование пламени представляет собой прекрасную тренировку в работе с век-
торными кривыми. Нарисуйте круг или овал, щелкните на его верхней точке
инструментом Subselect (Подвыделение), превращая ее в угловую. Теперь
осталось немного подвинуть точки и маркеры касательных для получения
удовлетворительного результата.
3. Теперь сделаем свечки-лампочки разного цвета. Для эффекта разноцветно-
сти скопируем рисунок пламени, и поместим его в новый символ-клип Пламя!,
а в символе Свеча оставим только прямоугольник. На сцене Украшение раз-
местим полтора десятка свечек, а на символ Пламя! наложим разные оттенки
(цвета свечек не должны быть слишком яркими, лучше выбирать темные
тона). Получится разноцветная гирлянда.
4. Далее необходимо задать раскадровку процесса извлечения гирлянды из ящи-
ка. Хотя для простоты можно и просто «проявить» свечки из пустоты, задав
им раскадровку по параметру Alpha (Прозрачность) от 0 до 100%. Надеюсь,
с таким вариантом вы сможете справиться самостоятельно.
5. Извлечь гирлянду из постоянного места хранения, как правило, не просто.
Она запутывается, проводки цепляются за лампочки и т. д. При анимации
этого процесса у нас тоже возникнут трудности. Они будут связаны прежде
всего с тем, что Flash умеет выполнять раскадровку для одного объекта или
для группы целиком. Поэтому если мы хотим положить свечки в ящик, нам
придется их уменьшить вместе с расстояниями между ними. И если мы не бо-
имся трудностей, придется потрудиться. Нас ждут великие дела! Что же нам
Сцена Украшение 169
СОВЕТ
Вы задали раскадровку для нескольких объектов, а потом вам понадобилось удалить один
из них или просто перенести его на другое место? Как только раскадровка назначена, она
становиться объектом, который появляется в окне библиотеки и носит название TweenN,
где N — номер раскадровки. Таким образом, раскадровку, как и группы, полученные ко-
мандой Group (Группировать), можно редактировать аналогично обычным символам. В том
числе, можно скопировать все объекты внутри раскадровки и поместить их в пустой клю-
чевой кадр. Так вы получите доступ к отдельным элементам группы и сможете, например,
«разобрать» ее по частям.
! * ^
t• I t t a
t 1 * g
t If f .
юо^ 23 . HI . . i . •::;;. as А Ш , * Ж Ш |
Рис. 7.11. Разматывание гирлянды происходит в двух слоях и нам понадобится в 2 раза меньше
ключевых кадров
65 |1|шш§1111 ШИШ
1
; :
vi 1Й|"' '''t«iiiiiM»|Mv'iS>i^S;:i
l Sfat J yK i '"Sill
i Ш • •~ ® ?*: ^'*** *
Рис. 7.12. Так должна выглядеть кинолента, если каждую раскадровку растянуть на 5 кадров
и использовать по два вспомогательных слоя
Сцена Электросеть
Начать работать над новой сценой придется с достаточно рутинных операций.
Если вы еще не забыли, мы уже сделали для этой сцены заготовку. Однако еще
необходимо перенести большинство рисунков предыдущей сцены в их оконча-
тельном варианте. Ящик и крышку от него мы решили удалить, так что эти слои
нам не понадобятся (удалить ящик можно и в прошлой сцене, растворив его в
воздухе или оттащив в сторону).
Также можно избавиться от слоев Шар (поместив одинокий шарик к остальным),
Шнур! (Шнур2), Свеча! (Свеча2). А дополнительно создать слой Вилка, располо-
жив на ней вилку со шнуром, слой шнура для нее и маскировочный слой (все
три выше слоя Елка). А также нам понадобится слой Свет, который будет реали-
зовывать выключение света.
1. Вначале решим проблему с шарами. Большинство из них у нас появилось в
результате проигрывания клипа (если вы не воспользовались советом по из-
менению их поведения). И если мы не хотим, чтобы сцена начиналась с раз-
вешивания шаров, надо что-то сделать. Проще всего поступить следующим
образом: выделите клипы шариков, откройте панель Instance (Экземпляр), на
ней выберите в списке Behavior (Поведение) пункт Graphic (Графический ри-
сунок), а в нижнем списке — Single Frame (Один кадр). В поле Frame (Кадр)
укажите последний кадр клипа — 30. Шарики замрут на елке.
2. Аналогичным образом мы поступим с серпантином и с веткой-кнопкой. Сер-
пантин должен замереть на кадре 40, а ветка — на кадре 3 или 2. Сразу же
надо решить еще одну возможную проблему. Она связана с тем, что свечи
окажутся объединены внутри символа-раскадровки. Этот символ в слое необ-
ходимо удалить, а вместо него разместить необъединенную группу свечек, ко-
торую можно скопировать из раскадровки или в предыдущей сцене.
3. Теперь вилка должна поползти к розетке. На этом примере мы познакомимся
со служебными слоями — слоями, на которых рисуют пути. Вначале займем-
ся движением вилки. Вставим в слой с вилкой ключевой кадр 10 и продлим
слои Елка и Вилка до этого кадра. Выделим слой и нажмем фиолетовую кноп-
ку Add Guide Layer (Добавить служебный слой) внизу списка слоев.
ПРИМЕЧАНИЕ
Служебный слой, или спой, направляющей служит для рисования на нем пути движения для
объекта, который находится на связанном с ним слое. Чтобы объект двигался по направ-
ляющей в процессе раскадровки, необходимо расположить в ключевых кадрах раскадровки
объект на пути. Путь обычно рисуют карандашом, хотя можно воспользоваться и кистью.
Сцена Электросеть 173
« PostCard3 - Library
|а Электросеть
Рис. 7.13. Более жирная линия — путь вилки, менее жирная — шнур;
также показано начало изменения изображения в слое-маске
Сцена Темнота
Начать работу над новой сценой предлагаю с очередной практики в удалении
кадров. Сделайте дубликат предыдущей сцены, назовите его Темнота и оставьте
в каждом слое по последнему кадру. Раскадровки лучше отменить, слои Шнур1,
слой-маску для него, слой Вилка и служебный слой надо отправить в «корзину
для бумаг» (выделите слой и нажмите кнопку в виде корзины внизу списка сло-
ев). Слой Свет временно можно отключить от показа на столе, чтобы он не за-
слонял все остальное.
Что же предстоит нам в новой сцене?
Первым делом мы нарисуем коробки с подарками (хотя в данной сцене они бу-
дут практически не видны). Коробки будут выглядеть почти прозаично: прямо-
угольник с ярким бантиком. Однако на их примере мы потренируемся создавать
растровые заливки. Как бы вы ни старались рисовать во Flash, вряд ли у вас по-
лучится рисунок, сравнимый по броскости с современными оберточными мате-
риалами. Однако Flash позволяет легко экспортировать понравившуюся вам
картинку и превратить ее в заливку.
1. Вначале создадим символ — графический рисунок. В нем пока будет два слоя:
один — для прямоугольника, второй — для бантика. Бантик можно нарисо-
вать кистью. Можно создать для каждого из трех предметов (двух бокалов и
бутылки) свою коробку, можно использовать один и тот же символ, слегка
изменив параметры для каждого экземпляра.
2. Теперь создадим заливку. Заблокируйте слой с бантом и перейдите на дру-
гой. Потом надо дать команду File > Import (Файл > Импорт) и в появившем-
сястандартном окне найти тот графический файл, который вы хотите исполь-
зовать в качестве заливки. Это может быть любой графический рисунок,
созданный вами или заимствованный на бескрайних просторах Интернета.
Вы можете заранее подготовить файл перед его импортированием, а можете
исправить его, выбрав в контекстном меню в окне библиотеки команду Edit
with (Редактировать с помощью). Как вы догадались, после того как в окне
импорта вы нажмете Открыть (Open), содержимое файла окажется на столе и
в библиотеке вместе с другими символами и звуками. Оттащите рисунок в сто-
рону, чтобы случайно не испортить остальное.
3. Дайте команду Modify > Break Apart (Изменить > Преобразовать в графику). Те-
перь рисунок окажется разделенным на заливку и контур, что найдет свое от-
ражение и на панели инструментов. Выберите инструмент Paint Bucket (Банка
176 Занятие 7. Славный праздник Новый год
краски) и залейте коробку новой заливкой. Если размер рисунка будет мень-
ше, чем размер коробки, Flash продлит его, повторив необходимое количество
раз, поэтому имеет смысл выбирать небольшие рисунки, аналогичные тем,
которые Windows использует для своих мозаичных обоев.
4. Поместим коробки под елку на отдельном слое (сразу под слоем Свет) в пер-
вом кадре сцены и пока оставим ее в покое (рис. 7.14). Дальше мы должны
дать понять, что что-то изменилось, и показать появившиеся коробки. Можно
предложить два способа. Первый путь немного проще, но похож на тонкое
издевательство. Можно сделать несколько коротких раскадровок, в которых
черный слой становится более прозрачным (процентов до 90), как бы изо-
бражая отблески взлетающих ракет на улице (если будете наполнять открытку
звуком, то можно вставить далекие разряды). А потом остановиться по ко-
манде stop и ждать, пока зритель догадается нажать выключатель снова.
Второй путь делает, по сути, то же самое, но изменение прозрачности (и рас-
каты взрывов) надо внести внутрь клипа. Таким образом, течение сцены бу-
дет остановлено, а экран будет по-прежнему вспыхивать от непрекращаю-
щегося фейерверка. В любом случае, изменение не должно иметь резких
переходов, то есть последний кадр раскадровки должен быть таким же или
очень близким к первому.
5. После появления коробок (не обязательно сразу же) необходимо вставить
ключевой кадр в слое с выключателем, вставить команду stop и задать сцена-
рий перехода при нажатии кнопки. Переходить надо уже к следующей сцене.
(Впрочем, эти две сцены вполне можно и объединить в одну.)
Сцена Распаковка
Как и предыдущая, эта сцена будет короткой. Основным действием в ней будет
превращение прямоугольника с бантом в гору измятой бумаги и лент. Так как в
предыдущей сцене почти ничего не произошло, мы смело можем продублиро-
вать ее и превратить в новую сцену.
1. Вначале необходимо включить свет. Не важно, что у вас на слое клип или ри-
сунок, — просто задайте раскадровку уменьшения параметра Alpha (Прозрач-
Сцена Распаковка 177
Сцена Последняя
Последняя сцена будет выглядеть достаточно просто. Выстрелит пробка из бу-
тылки, польется пена, бутылка поклонится сначала одному бокалу, потом дру-
гому, наполнив их шипящим содержимым. Бокалы чокнутся, движимые неви-
димыми руками, и настанет время поздравлениям — вместо обычного «Конец»
на экране появится «С Новым годом!». Никаких ожиданий и нажиманий кно-
пок, так сказать, финальный ролик. Ну что, приступим?
1. В этой сцене нам понадобятся 9 слоев: Фон, Пробка, Бутылка, Фольга, Пена,
Шампанское!, Шампанское2, Бокал!, Бокал2. В течение первой раскадровки
фольга будет снята с бутылки. Для этого необходимо создать новую бутыл-
ку без фольги и отдельно — клип разматываемой фольги. В самом простом
случае фольгу можно покрасить в обычный серый цвет. Если же вы хотите
более реального изображения, попробуйте создать или найти заливку для та-
кого материала.
2. Сложность отображения разматывания состоит в том, что в клипе должен быть
слой, в котором нарисовано горлышко от бутылки, а фольга будет преобра-
жаться в двух слоях: до и после него (естественно, с помощью раскадровки
и морфинга). Сначала вы срезаете полоску, закрывающую пробку, и превра-
щаете ее в треугольный флаг, воспользовавшись командой Skew (Наклон) на
панели Transform (Преобразование). Потом флаг разматываемой фольги пере-
ходит на другую сторону бутылки и удлиняется, затем он сматывает еще одну
полосу (слегка по диагонали), которая снова увеличивает его длину. Еще
один моток — и фольга улетает с экрана.
Слой горлышка перед последними кадрами клипа лучше очистить. В клипе
также желательно не использовать контуры, особенно если вы воспользуе-
тесь морфингом. Появляющиеся контрастные линии будут резать глаз, в то
время как нарисованные только кистью (заливкой) переходы будут сглажи-
вать небольшие погрешности в анимации. После окончания клипа слой Фоль-
га надо очистить.
3. Когда фольга снята, становится видна пробка. Лучше всего сделать стекло
бутылки слегка прозрачным, тогда пробку можно будет просто поместить на
слое, расположенном под ним. После того как пробка улетит, ее место на слое
может занять вырвавшаяся на свободу пена.
4. Раскадровка, демонстрирующая чудеса баллистики, не представляет труда,
благо, можно считать, что вначале пробка летит по прямой. Пробку сделаем
белой, слегка прозрачной.
Дальнейшие действия примерно следующие: выливается немного пены из бу-
тылки, затем пена спадает, и бутылка направляется к первому бокалу. Льется
шампанское, бокал наполняется пеной до краев, затем пена спадает и бокал
остается почти полным. В это время бутылка уже переходит к наполнению
второго бокала. После того как пена спала и там, бутылка уходит со сцены,
бокалы чокаются (увеличиваясь в размерах), и появляется заключительная
надпись. У меня сцена заняла 160 кадров, и это, по-видимому, нижняя грани-
ца времени.
180 Занятие 7. Славный праздник Новый год
8. После того как пена в бокалах осела, можно начинать прорисовывать движе-
ние бокалов. Они приближаются друг к другу, слегка наклоняясь и увеличи-
ваясь в размерах (примерно в 2 раза). Не забудьте согласованно трансформи-
ровать бокалы и вино.
9. Если вы внимательно посмотрите на завершающую сцену, то легко заметите
противоречие физическим законам, которое у нас невольно получилось (если
Звук 181
вы, конечно, наклоняли бокалы). Ведь верхняя граница вина должна оста-
ваться горизонтальной. Чтобы это не бросалось в глаза, в кадре, где бокалы
уже остановились в нежном поцелуе, замените содержимое слоев с шампан-
ским: просто скопируйте рисунок вина из раскадровки и сотрите верх, сделав
его горизонтальным (воспользуйтесь ластиком при нажатой клавише Shift).
10. После хрустального звона (конечно, если вы его добавите) появляется над-
пись «С Новым Годом!» (рис. 7.17). Для ее создания лучше воспользоваться
шрифтом, имитирующим надпись от руки. Цвет для надписи надо выбрать
контрастный фону (например, красный).
Звук
Я намеренно вынес работу со звуком в отдельный раздел, подозревая, что не
у всех стоит на столе аппаратура для работы с ним. Но дело не только в этом.
Практически все необходимое для работы можно найти в Интернете, но звук
может стать очень «тяжелым» дополнением к фильму. Прежде чем приступать
к работе со звуком, подумайте, на сколько килобайтов увеличится фильм после
182 Занятие 7. Славный праздник Новый год
На этом занятии
Занятия 8, 9 и 10 — лекционные. На них речь пойдет в основном о теории web-
строительства. Но поскольку практика — мать теории, о многом мы уже успели
поговорить в ходе первых практических занятий. Однако если раньше мы гово-
рили, как надо действовать для достижения некоторого результата, то теперь
мы обсудим, почему это надо делать именно так. Поэтому не спешите слепо ко-
пировать понравившийся вам сайт, а для начала ответьте на вопрос: «Почему
сделано так, а не иначе?» И если вы найдете ответ, то наверняка сможете найти
свои, наиболее подходящие для вашего сайта решения. Таким образом, теория
web-строительства — не абстрактное мудрствование, а тренировка видеть в пе-
строте Интернета общие черты, единые для всего виртуального мира.
На одном из следующих занятий мы создадим заглавную страницу — страницу,
которая предваряет сайт и дает посетителю представление о том, что его ожида-
ет дальше. Однако сайт может быть настолько мал, что заводить для него от-
дельную заглавную страницу — роскошь, все равно что использовать грузовик
для того, чтобы перевезти телевизор или чемодан. Вы уже придумали, каким бу-
дет ваш сайт? Какая у него будет структура? Какую информацию вы разместите
на нем? Сколько страниц он будет занимать? Какие фотографии вы покажете
посетителям? Какой будет цвет страниц и текста на них? Вы уже готовы отве-
тить на все вопросы относительно вашего сайта? Если нет, тогда это занятие по-
дошло как раз вовремя. На нем мы узнаем:
• с чего начать создание сайта, чем продолжить и чем закончить;
• на что обращать внимание при разработке сайта;
• чем стоит наполнять сайт, а чем нет;
1
В переводе В. Марковой.
184 Занятие 8. Семь раз отмерь
Этапы работы
Прежде всего остановимся на этапах работы над сайтом. Данный раздел — по-
пытка внести хотя бы какой-то порядок в нестройные ряды советов, столпив-
шихся в этом занятии.
• Этап 1. Выбор содержания. Для начала надо определиться, что будет содер-
жать сайт, о чем вы расскажете случайному web-серфингисту. Попытайтесь
представить себе, что вы смотрите чужой фотоальбом и не видите ни одного
знакомого лица. Будет ли вам интересно? Надеюсь, вы не думаете, что кто-то
придет к вам на сайт, чтобы прочитать скупые строки Curriculum Vitae, од-
ним своим видом нагоняющие тоску? Ведь у каждого в жизни происходило
что-то интересное, надо только суметь это донести до читателя, чтобы не по-
терять всю остроту переживания где-то на полпути между ярким воспомина-
нием и буквами на экране. Самое время попробовать!
• Этап 2. Разработка структуры. Любой документ должен иметь структуру.
Тем более, если это гипертекстовый документ. Для начала необходимо ре-
шить, будет ли это просто одна страница или целый сайт. Если сайт, какую
структуру он будет иметь — линейную или иерархическую? Как будет устро-
ена навигация по сайту? Кроме логической стоит продумать и физическую
структуру: надо ли вам для каждой web-страницы заводить отдельную папку
или файлов так мало, что будет достаточно и одной.
• Этап 3. Подготовка текстовых материалов. Лично я советую использовать
программу Word. Другого такого богатого по функциям текстового процес-
сора еще не создали. Почитайте документы в Рунете. Чуть ли не на каждой
странице найдется пара опечаток. А почему? Потому что web-дизайнеры
предпочитают использовать обычные текстовые редакторы, которым все рав-
но, как вы напишете — «поле» или «поел». Однако не спешите сохранять
созданный документ как HTML-файл. Возникшие при этом проблемы пере-
весят все «отловленные» ошибки. Лучше сохранить его в формате Word
(с расширением .doc), а потом воспользоваться «заклинанием» Ctrl+A, Ctrl+C
и — Ctrl+V — поместить его в простой текстовый редактор, например Блокнот,
откуда текст уже можно копировать в FrontPage, Dreamweaver или Netscape.
• Этап 4. Подготовка графических материалов. Вы собираетесь создать свой
виртуальный фотоальбом или галерею? Тогда вам понадобится цифровая
версия фотографий и рисунков. Сканер плюс Photoshop — и вы сможете по-
казать виртуальному сообществу любые шедевры.
• Этап 5. Разработка дизайна. Все страницы сайта должны иметь одинаковый
дизайн (стиль оформления). Окиньте мысленным взглядом все подготовлен-
Разработка общей концепции сайта 185
СОВЕТ
Старайтесь сделать и содержание, и оформление своего сайта (как, впрочем, и всю свою
жизнь) единственным и неповторимым. Избегайте того, что делают все. Смотреть и учить-
ся у других — это хорошо и правильно, но слепо копировать чужие достижения вряд ли
стоит. Ваш сайт — это ваш доверенный представитель в виртуальном мире, не надо вво-
дить его «в общество» в одежде с чужого плеча.
Расскажите историю
Чего не хватает Всемирной паутине, так это мух, которые могли бы интересно
рассказать о себе. Если где-то появился свежий анекдот, то он вмиг облетает
полмира. Значительно проще отыскать и скопировать себе чужое, чем создавать
свое. Так дело обстоит с большими сайтами, но для персонального сайта все
с точностью до наоборот. Ведь если вы хотите пообщаться с коллегой или това-
рищем, вы же не обмениваетесь с ним газетными вырезками! Гораздо интерес-
нее рассказать что-то самому, чем скопировать готовый текст. Вы создаете сайт,
чтобы рассказать о себе, ну так и расскажите!
Человек, умеющий хорошо рассказать истории, преподнести материал, прочи-
тать лекцию, ценится на вес золота. Таких людей не так много, но каждый мо-
жет научиться этому несложному искусству. И я предлагаю вам попробовать.
Пусть ваш сайт станет не только упражнением в HTML-кодировании, но и пси-
хологическим практикумом. Многие психологи в процессе обучения ораторско-
1
Я не врач и не буду советовать этот рецепт всем, но Елисею помогло.
Разработка общей концепции сайта 187
Частная собственность
При создании собственного web-ресурса часто возникает ситуация, когда автор
может скопировать себе на сайт чужую информацию: программу, книгу, песню,
графику. Здесь начинаются взаимоотношения, которые регулируются междуна-
родными законами об авторских правах. Нельзя, например, сделать копию рас-
Дизайн 189
Идеология сайта
Не создавайте и ни в коем случае не публикуйте сайты ни о чем. Не интересно
заходить на сайт, в котором, как на «Поле чудес», есть только: «Привет всем!
Меня зовут Вася!». Большинство web-серфингистов преследуют одну из двух
целей: развлечься или найти нужную информацию. Иначе зачем их занесет к
вам на огонек? Поэтому ваш сайт должен отвечать на запросы хотя бы одной из
этих групп. Разместите на сайте какой-то оригинальный развлекающий матери-
ал или, наоборот, дающий возможность хотя бы на минуту задуматься о вечном.
Или поместите выдержки из личного опыта, которые могут кому-то пригодить-
ся. Это может называться «Как я покупал квартиру», «Советы по ремонту» или
«Что стоит посмотреть в Баварии». Таким образом вы поможете кому-то избе-
жать ошибки, а себе найдете единомышленников, которые придут к вам на сайт,
набрав в строке поиска, например, «советы + ремонт».
Может быть, когда-нибудь благодаря таким сайтам Интернет превратится из
виртуального болота в реального информационного интеллектуального помощ-
ника в любой жизненной ситуации.
Дизайн
Конечно, главное на сайте — это содержание. Однако плохой дизайн может ис-
портить все, даже идеальное содержание. Например, слишком мелкий шрифт
или «ядовитые» цвета очень быстро отпугнут любого, даже самого заинтересо-
ванного посетителя. Но не всем же быть художниками. Некоторым вкуса не
хватает даже на то, чтобы подобрать галстук к костюму (или наоборот, это кому
как повезет). Как и в любом другом деле, можно сформулировать правила web-
дизайна, следуя которым, вы сможете создать сайт, претендующий на твердое
«три», а то и на «четыре».
Идея
Идея — прежде всего! Этот лозунг должен проходить красной нитью через все
ваши размышления об устройстве любого продукта творчества, будь то сайт,
книга или простой рисунок в тетради. Пусть даже на первый взгляд идея пока-
жется банальной или вовсе глупой — у вас всегда будет возможность придать ей
190 Занятие 8. Семь раз отмерь
ШИШ
Рис. 8.1. Заглавная страница альтернативного мира
Дизайн 191
Макет
Макет многие дизайнеры выделяют в отдельный этап работ. Однако я так не
поступаю намеренно — для создания Flash-сайта макет не играет такой принци-
пиальной роли.
Макетирование — создание таблицы, отвечающей ряду требований. Во-первых,
она должна содержать пространство для каждого возможного элемента на стра-
нице. Иными словами, создавая таблицу, вы должны предусмотреть место для
каждого элемента, который вы захотите на данной странице поместить, вне за-
висимости от того, будет ли он реально присутствовать на каждой странице,
сверстанной по этому макету, или только на некоторых. Во-вторых, в создавае-
мой таблице должно быть минимальное количество ячеек, которое будет удов-
летворять предыдущему требованию. Это позволит вам легче управлять табли-
цей (то есть упростит процесс верстки), и, кроме того, вы несколько сократите
объем кода, уменьшая тем самым нагрузку на сервер и время, необходимое для
загрузки страницы. Вы можете жестко задавать ширину столбцов и объединять
любые рядом стоящие ячейки. В-третьих, таблица должна быть достаточно гиб-
кой, чтобы в нее можно было поместить широкий диапазон непредусмотренных
вначале элементов.
Особенности WWW и языка HTML приводят к тому, что вид вашей страницы
зависит от настроек конкретного компьютера пользователя. В связи с этим ваше
творчество ограничено рядом неписанных стандартов. Что же касается макета,
то здесь вы ограничены экранным разрешением (то есть количеством точек,
1
Рекомендую посмотреть сайт Alterworld (www.avestadesign.ru). Это прекрасная реализация мира
для истинно увлеченных, созданная на Flash.
192 Занятие 8. Семь раз отмерь
которое способен отображать монитор). Вернее будет сказать так: если вы не хо-
тите доставить пользователям неудобство (а горизонтальная прокрутка экрана -
это реальное неудобство), то ограничивайтесь экранным разрешением. Домини-
рующее сейчас разрешение — 800x600 точек, хотя с постепенным переходом на
17-дюймовые мониторы оно возрастает до 1024x768.
Создание макета — это весьма творческий процесс. Поэтому предложить здесь
какую-либо жесткую схему работы очень сложно. Но все же попробуем.
1. Вначале надо составить список, в который должны попасть рекламные банне-
ры, кнопки и элементы навигации — всё, до самых последних мелочей, что
должно присутствовать на страницах нового сайта. Если элемент имеет фик-
сированные размеры, это надо пометить.
2. После этого надо решить, сколько потоков информации будет размещено на
каждой странице. Обычно их два: основной текст справа и навигационное
меню слева.
3. Далее следует нарисовать примерное расположение элементов на странице,
обязательно включая элементы, которые имеют фиксированные размеры.
Важно определить ширину каждой из колонок для комфортного размещения
в них необходимых материалов. Например, если вы должны разместить боль-
шой массив текста, вряд ли стоит это делать в узкой колонке шириной
100-150 пикселов, лучше выделить более широкое поле — 350 и более пиксе-
лов.
4. Затем необходимо расписать на макете размеры элементов (пока только фик-
сированные). В реальности таблица ограничивается фиксированными разме-
рами баннеров и кнопок: вам приходится либо отказываться от их использо-
вания, либо строить свой макет на их основе. Следует иметь в виду и другие
заимствованные элементы сайта: опросы, счетчики, поисковые окна и т. д.
Таким образом, задача создания макета напоминает решение головоломки: как
разместить все эти элементы на ограниченном поле страницы так, чтобы полу-
ченный результат выглядел гармонично и аккуратно.
Закончив с принципиальной схемой, надо нарисовать макет на бумаге уже с по-
мощью линейки и карандаша, приводя все к реальному масштабу и размечая
размеры элементов (на тетрадный лист в клетку таблица разместится в масшта-
бе 20 точек на клетку). Расчертив колонки, отображаем на макете материал в
каждом информационном потоке: стандартные элементы, элементы навигации,
колонтитульные элементы и пр.
Наконец, по полученному макету вы должны определить сетку таблицы, кото-
рая будет составлять основу HTML-страницы. Основная задача на этом этапе -
создать такую таблицу, в которой можно разместить все указанные в макете
элементы. Помните, что можно объединять соседние ячейки и разбивать ячейку
новой таблицей.
Цветовая гамма
Такая простая на первый взгляд проблема, как выбор цветов, может стать нераз-
решимой, особенно если с удачной идеей не сложилось. Почему? Потому что
Дизайн 193
СОВЕТ
Не изменяйте «системные» цвета частично, так как пользователь может изменять настрой-
ки браузера по своему усмотрению. В результате текст или ссылки могут быть просто не
видны на заданном фоне страницы. Не говоря уж о том, что всякие попытки воплотить ка-
кой-либо дизайн потерпят полное фиаско.
Выбор шрифтов
Шрифт является одним из основных элементов web-дизайна. Ни в коем случае
не стоит доверять выбор шрифта воле случая. Особых правил на счет хорошей
сочетаемости шрифтов нет (речь идет о шрифтах текста, заголовков, подписей),
но можно привести несколько общих советов.
• Не стоит использовать много типов шрифтов на одной странице, хватит
двух-трех.
• Обычно используются контрастные сочетания шрифтов: один — с засечками,
другой — без; один жирный — другой тонкий и т. д. Пример — оформление
данной книги: заголовки выполнены полужирным шрифтом без засечек, а ос-
новной текст — простым с засечками.
• Для выделения элементов основного текста лучше использовать полужирное
или курсивное начертание того же шрифта, но не переусердствуйте, ведь на
странице будут еще выделены ссылки. В целом старайтесь избегать исполь-
зования для основного текста каких бы то ни было эффектов.
7 Зак. 96
194 Занятие 8. Семь раз отмерь
Если основной текст — русский, то для него лучше использовать шрифт с за-
сечками (для проверки откройте практически любую книгу). Однако если
основной текст набран латиницей, то будет смотреться и шрифт типа Arial.
СОВЕТ
Использование различных шрифтов и их размеров — один из основных приемов оформле-
ния текста. Уже одним этим можно сделать страничку красивой.
Стиль
Главную страницу, как любимое детище, всячески стараются приукрасить, на-
прочь забывая о существовании страниц второго уровня. Так не доллсно быть.
На всех страницах сайта должен чувствоваться единый стиль. Совершенно не
обязательно, чтобы страницы походили друг на друга, как близнецы-братья, но
какие-то правила из перечисленных далее лучше соблюдать.
• Используйте общие для всех страничек цвета.
• Используйте одинаковые шрифты и размеры шрифтов.
• Используйте одинаковые или похожие элементы оформления.
• Хорошо, если картинки (фотографии, рисунки) будут выглядеть естествен-
ной частью всего остального. Этого можно достичь, введя рамку, повторяю-
щую какой-либо элемент оформления.
СОВЕТ
Использование одинаковых элементов оформления имеет и еще один плюс. Первый раз
наталкиваясь на рисунок, браузер загружает его и сохраняет в кэше на локальном диске.
Когда браузер снова встречает этот же рисунок на другой странице, он уже не скачивает
его из Интернета, а находит в кэше. В результате время загрузки значительно уменьшается.
ПРИМЕЧАНИЕ
Безусловно, важную роль в современном web-дизайне играют каскадные таблицы стилей
(Cascading Style Sheets, CSS). Они вам будут просто необходимы для создания и поддержки
больших сайтов. Однако для персонального сайта усилия, затраченные на их изучение, не
окупят себя. Если же вы все-таки заинтересовались применением таблиц стилей, обрати-
тесь, например, к книге «Основы веб-мастерства» (см. список литературы).
Фреймы
Бродя по Интернету, вы наверняка не раз видели странички, разбитые на не-
сколько частей. Эти части и называются фреймами. Программно разбиение окна
браузера на фреймы реализуется так.
Дизайн 195
Об использовании фреймов
Большинство писательской братии Сети, высказывая свое мнение о web-дизай-
не, выражают свое более или менее отрицательное отношение к фреймам. Одна-
ко все больше и больше страниц Всемирной паутины содержат фреймы, часто -
в единственном варианте: слева — фрейм с навигационной панелью, справа -
с содержанием выбранной ссылки. Когда говорят об удобстве таких фреймов,
имеют в виду, что не требуется перезагрузка навигационного фрейма, что, по
идее, должно увеличивать скорость загрузки страницы. Однако такую же нави-
гационную панель можно создать и без использования фреймов. Изображения,
содержащиеся на ней, при первой загрузке попадут в кэш браузера и потом бу-
дут быстро подгружаться с локального диска. Единственное, в чем фрейм будет
иметь преимущество, — это создание системы полноценных раскрывающихся
меню. Однако реализация таких меню пока оставляет желать лучшего из-за раз-
личий в работе браузеров.
За что же профессионалы не любят фреймы? Наиболее явная и основная при-
чина — из-за сложности добиться их корректного показа в различных браузерах
и при различных разрешениях экрана. Как бы вы ни старались, у кого-нибудь
из посетителей посреди окна при просмотре вашей страницы появятся полосы
прокрутки, которые испортят практически любой дизайн. Если же запретить
выведение полос прокрутки, тогда придется сделать размер фрейма очень неболь-
шим. Он будет ограничен минимальным возможным окном браузера у пользо-
вателя, так как если фрейм будет содержать что-то еще, то добраться до этого
уже будет нельзя. Если задать размер фрейма в процентах, то при разных разре-
шениях будут получаться совершенно различные картины, причем не всегда
приемлемого качества. Задавать размер жестко в пикселах — тоже не выход, по-
скольку Netscape Communicator и Internet Explorer часто понимают эти значе-
ния несколько по-разному.
Другая проблема связана с поисковыми системами. Хотя сейчас большинство
роботов умеют анализировать фреймы и индексировать соответствующие стра-
ницы, при выдаче результатов поиска откроется не вся система фреймов, а един-
ственная страница, обычно лишенная какой-либо навигации.
Если на вашем сайте фреймы действительно необходимы и вы можете добиться,
чтобы они правильно показывались без полос прокрутки, — создавайте фреймы,
никаких таинственных метафизических запретов на их использование нет.
Браузеры, вовсе не подозревающие о фреймах, встречаются крайне редко, хотя
и о них полезно подумать.
На этом занятии
Итак, вас посетила муза web-дизайна. (Интересно, у нее уже есть имя?) Вам
пришла потрясающая идея, вокруг которой вы собираетесь развернуть действие
на сайте: его дизайн и содержание. Дело осталось за малым: воплотить в жизнь
графические и текстовые элементы, сверстать все страницы и связать их в еди-
ную структуру, протестировать сайт и скопировать его на сервер, на всеобщий
доступ. На сегодняшнем занятии речь в основном пойдет о технических момен-
тах создания сайта. Но сколько бы скучны они ни были, в итоге именно от них
зависит, выглядит ли сайт, как хочется, правильно ли работают задуманные
ссылки, действуют ли сценарии, как положено и т. д. Как и в любом другом
деле, конечный результат прежде всего зависит от исполнения. В занятии 9 мы
рассмотрим следующие темы:
• верстка и публикация сайта в Сети;
• планирование структуры сайта и навигации по его страницам;
• негласный интерфейс HTML-страниц;
• основные кодировки русских букв;
• тестирование сценариев JavaScript в различных браузерах.
Мы также узнаем, какие параметры посетителя для вас важны и как их опреде-
лить или предсказать.
Структура сайта
Даже если вы не сильны в искусственном интеллекте и архитектуре знаний,
а структурирование информации для вас — темный лес, структуру собственного
1
В переподе В. Марковой.
Структура сайта 199
сайта вам придется строить самому. Я считаю, что в большинстве случаев при
написании достаточно сложных литературных и гипертекстовых трудов лучше
двигаться в «прямом» направлении: сначала проектировать основную структу-
ру, на которую по мере готовности впоследствии нанизывать содержание. Чем
лучше вначале вы продумаете структуру, тем меньше вам придется вносить ис-
правлений в уже почти готовый сайт.
Подозреваю, что распространение программных продуктов, в которых удобно
рисовать логические структуры, дальше все того же искусственного интеллекта
не пошло. Поэтому я предлагаю вам взять чистый лист бумаги и на нем сделать
набросок основных разделов вашего сайта (пункты меню верхнего уровня).
Если это персональный сайт, то у вас получится примерно следующее.
1. О себе, любимом.
2. Друзья.
3. Семья.
4. Работа.
5. Хобби.
6. Фотоальбом.
Очевидно, что порядок может варьироваться, а некоторые разделы — сливаться:
в конце концов, это личное дело каждого, иметь друзей или нет. Возможно, что
кроме пункта «Хобби» на листке ничего не появится, тогда имеет смысл выне-
сти в меню верхнего уровня ваши различные увлечения или построить структу-
ру на временной шкале. После верхнего уровня попытайтесь наметить второй,
а может быть, и третий уровень. При работе над структурой сайта стоит учесть
несколько правил.
• Используйте иерархическое построение меню. В качестве примера можно ис-
пользовать файловую систему. Линейная структура (когда каждая страница
ссылается на предыдущую и следующую) допустима лишь в очень редких
случаях, например при публикации литературного творчества, которое луч-
ше читать подряд. Хотя даже в этом случае лучше предоставить альтерна-
тиву — вдруг кто-то захочет вернуться к уже прочитанному или заглянуть
страниц этак на 10 или 30 вперед.
• Количество пунктов в меню и подменю не должно превышать семи. Большее
число человек подсознательно отторгает. Если все-таки их получается больше,
попробуйте перестроить структуру: объедините пункты или разбейте раздел
на верхнем уровне. И, конечно, не стоит делать меню из одного пункта.
• Число уровней не должно превышать трех. Иначе бедному посетителю при-
3
дется очень глубоко копать! По-моему, 343 страницы (7 ) — вполне доста-
точный объем для личного сайта, а на самом деле хватит и 20-50.
• Разделы одного уровня должны нести примерно равный объем информации.
Это правило можно использовать как проверку на правильность составления
структуры.
• Учитесь мыслить объемно. В отличие от оглавления книги, структура гипер-
текста может быть достаточно сложной и пересекающейся. Например, логич-
но среди текста давать ссылки на фотографии, расположенные в фотоальбо-
ме. Помните, что структура сайта не ограничена панелью с меню.
200 Занятие 9. Один раз отрежь
Навигация
Скорее всего, вы намерены преодолеть рубеж в одну страничку и сделать пол-
ноценный сайт. Тут скрывается один из сложных вопросов web-дизайна — на-
вигация. Человек, оказавшийся на вашем сайте, не должен чувствовать себя, как
перед входом в лабиринт. Навигация должна быть сделана так, чтобы человек
все время представлял, где он находится сейчас и куда и как он может попасть.
В идеале он вообще не должен задумываться над этими вопросами. Но для это-
го много думать придется вам. Опять же, неплохо набросать схему навигации по
сайту на бумаге. Много внимания следует уделить тому, как будут выглядеть
сами ссылки, где их лучше сделать текстовыми, а где — графическими. Посмот-
рите, как это сделано у других: стандартными решениями являются верхняя
(горизонтальная) или боковая (левая) панели управления (меню).
Структура сайта 201
Основной принцип навигации — пользователь должен найти то, что хочет, и как
можно быстрее и проще. Помните, что посетитель — тоже человек. И ему проще
уйти с сайта, чем пытаться понять, как он устроен. Структура и интерфейс сайта
должны быть достаточно понятными, а навигация — простой и удобной. Можно
попросить кого-нибудь протестировать ваш сайт именно на удобство путешест-
вий. Вы как автор никогда не сможете сами хорошо оценить то, что американцы
называют «usability» — удобство в использовании.
Представим себе маленький сайт из восьми страниц. На каждую из них ведут
ссылки с главной страницы, а внутри этих страниц стоят только ссылки обратно
на центральную. Чтобы попасть с одной страницы на другую, посетитель дол-
жен вначале вернуться на основную страницу, то есть при просмотре всех стра-
ниц он окажется на главной как минимум семь раз. Согласитесь, смотреть семь
раз одно и то же не слишком интересно. Выхода два: первый — сделать из каж-
дой страницы ссылки на все остальные в виде отдельной навигационной пане-
ли; второй — сделать дополнительно на странице ссылки на предыдущий и по-
следующий разделы. Первый способ подходит, если сайт небольшой, второй -
если его структура уже не умещается на панели (конечно, если вы не используе-
те фреймы с полосой прокрутки).
Трехпанельный макет
Зайдите на случайно выбранную страницу Web. Где на ней находится панель
навигации? А логотип, реклама, основное содержание? Даже если вы оказывае-
тесь на сайте в первый раз, вы без труда найдете большинство навигационных
элементов. Почему? Потому что все страницы Сети подчиняются одним и тем
же законам, которые достаточно жестко определяют структуру страницы.
Логотип сайта
ПРИМЕЧАНИЕ
Одним из главных, но часто упускаемых из виду навигационных элементов, являются URL-
адреса ваших страниц. Если вы создадите простую и понятную физическую структуру
HTML-файлов, то уже только по информации в строке адреса пользователь сможет понять,
где он находится и куда он сможет пойти, убрав, например, последний элемент адреса.
В частности, в соответствии с этим правилом необходимо давать файлам «говорящие»
имена, а папки называть так же, как соответствующую иерархическую страницу. Напри-
мер, если адрес соответствует конкретной странице фотоальбома www.my_site.ru/photo-
album/rny_photo/photol.html, то адрес www.my_site.ru/photoalbum/my_photo.html должен
соответствовать странице со ссылками на фотографии автора, a www.my_site.ru/
photoalbum.html — главной странице фотоальбома. Очевидно, что адрес www.my_site.ru/
9843986348951.html ничем не сможет помочь ни вам, ни посетителю сайта.
Структура сайта 203
Поиск
Некоторые хостеры (например, Яндекс) предоставляют в качестве дополнительной
бесплатной услуги размещение на сайте формы для поиска. Это может оказать-
ся очень важным дополнением к системе навигации, особенно если у вас иерар-
хически сложный сайт. В качестве примера можно привести следующую ситуа-
цию. Вы обожаете собак (или кошек) и создали сайт, всецело посвященный
вашим любимцам. На страницах сайта вы подробно описываете все известные
вам породы, клички, масти и пр., что и указано на главной странице сайта. По-
сетитель радостно потирает руки — наконец-то он все узнает о породе своего
домашнего питомца. Но... Как разобраться во множестве информации на сайте?
В какой раздел необходимо пойти, чтоб найти нужную породу? Посетитель мо-
жет не знать, сторож его собака или пастух. А отдельную страницу с алфавитным
списком пород вы решили не делать, а если и сделали, то совсем не обязательно
назвали породу так, как сохранила своенравная память посетителя. В таких слу-
чаях незаменимым помощником станет поисковая форма. Даже если у породы
два или три ходовых названия, ее можно будет найти без труда.
Кодировка
Если вы будете создавать ваш сайт на русском языке, перед вами может встать
проблема выбора кодировки русских букв. Обычно за вас ее решает хостер, ука-
зав вам свои условия, но все равно как пользователю Сети вам будет полезно
знать, что существуют следующие стандарты:
• СР1251 (используется в Windows);
• KOI (Unix);
• MAC (Macintosh);
• ALT (DOS, альтернативная);
• ISO;
• LAT или TRANSLIT (замена русских букв сходными по звучанию англий-
скими).
Наиболее распространенной является СР1251, поэтому правильно будет сде-
лать так, чтобы по умолчанию страничка показывалась именно в этой коди-
ровке. Однако, в отличие от пользователей-клиентов, на большинстве серверов
204 Занятие 9. Один раз отрежь
Идеология документа
При создании HTML-документов прежде всего обращайте внимание на струк-
туру текста. Если вы делаете заголовок, то оформите его тегом <Нх>, а не просто
выделите его жирным шрифтом. Правильное стилевое и структурное оформле-
ние — основа подготовки любых документов.
Почему это так важно? Во-первых, это удобно. Когда вы освоите механизм CSS
(таблиц стилей), вы без труда сможете изменить вид всех заголовков, заменив
только одну строку текста в описании данного стиля.
Во-вторых, если внимательно прочтете приложение 2, то наверняка заметите, что
разработчики HTML очень много уделяют внимания нестандартным устройст-
вам вывода. К сожалению, при речевом вводе текста нельзя сказать слово кур-
сивом или полужирным. Оформление практически исчезает, а вот структура
остается. Перед началом нового раздела или параграфа можно сделать паузу,
а цитату прочитать другим голосом. Поэтому старайтесь делать структуриро-
ванные тексты, и не только в HTML, но и, например, в Word.
Верстка
Не имеет значения, в каком редакторе вы начнете верстать свой сайт. Выбе-
рите любой, который у вас есть под рукой, и попробуйте сверстать несколько
страниц. Посмотрите на результат в браузере и на его код в Блокноте. Навер-
няка вы обнаружите там много лишнего и непонятного. Удалите и еще раз
посмотрите на результат. Скоро вы поймете основные «проблемы» исполь-
зуемого для верстки редактора и научитесь их преодолевать. А пока — не-
сколько советов.
Верстка 205
Советы по верстке
Для того чтобы ваш сайт выглядел предсказуемо, лучше всего использовать гиб-
кие страницы, содержащие табличные структуры, с указанием процентов от раз-
мера окна. Такой сайт мы обсуждали на занятии 5 (www.dimvovich.narod.ru). С по-
мощью подобной техники можно сделать раздвижными и текст, и графические
элементы.
Вместо единой таблицы можно использовать несколько таблиц, выровненных
по левому краю. В таком случае они будут загружаться по очереди, и посети-
тель вначале увидит логотип в верхней части, потом — панель слева, а потом
догрузится и основное содержание. Сравните листинги 9.1 и 9.2, в которых при-
ведены два варианта оформления макета с помощью таблиц.
Листинг 9.1. Трехпанельный макет, заданный с помощью одной таблицы
<TABLE>
<TR>
<TD colspan=2>
Логотип и реклама
</TD>
</TR>
<TR>
<TD>
Панель навигации
</TD>
<TD>
Основное содержимое страницы
</TD>
</TR>
</TABLE>
Тестирование
Тестирование — неотъемлемая часть создания сайта, занимающая обычно очень
много рабочего времени. Основная проблема заключается в том, что ни один
браузер пока не поддерживает стандарта HTML в полной мере и вам придется
Тестирование 207
СОВЕТ
Для отладки фильма может пригодиться действие Trace. Оно поможет вам следить за из-
менением параметров во время исполнения фильма. Его синтаксис: trace (expression);.
Браузеры
Существует довольно много браузеров, выпускаемых разными фирмами, напри-
мер: Netscape Communicator (он же — Netscape Navigator или просто Netscape),
Microsoft Internet Explorer, Opera, Arachne, Lynx, Web Explorer и другие. Если
вы желаете ознакомиться с полным списком браузеров, обратитесь на сайт
Yahoo!. В разделе Home > Computers and Internet > Software > Internet > World Wide
Web > Browsers вы найдете список из 148 элементов. Далее учтите, что у каждого
браузера есть несколько версий и подверсий, и вам станет ясно, что тестирова-
ние сайта для всех вряд ли реально осуществимо.
Однако не все потеряно. В основном посетители Интернета едины в своих пред-
почтениях. Проведав другую интересную страницу, на этот раз на сервере The
Counter, вы увидите, что большинство пользователей предпочитают Microsoft
Internet Explorer 6, 5 и 4 версий и 5 % приходится на Netscape Communicator 6 и 4
и более ранние версии (рис. 9.2).
Кроме всего прочего, использование того или иного браузера может иметь на-
циональные особенности. Для примера сравним статистику за ноябрь 2002 года,
собранную TheCounter.com и Hotlog.ru (табл. 9.1). Видно, что американцы (они со-
ставляют большинство посетителей TheCounter.com) предпочитают обновленную
версию Internet Explorer, а русские существенно более активно пользуются
браузерами Opera и не любят браузеры от Netscape.
Таблица 9.1. Сравнение статистических данных по используемым браузерам
Г;*! The Counter com: The Full-Featured Web Counter with Graphic Reports and Detailed Information * Netscape
1 T
Ltt-."" '«M W
:
'•••.Щ:- <г
1
Обновить Поиск C-rSn .
. mttp://www.thecounter.com/stats/2G02/April/browser.php
Browser Stats
Mon Apr 1 00:05:02 2002 - Tue Apr 30 23:55:04 2002 30.0 Days
СОВЕТ
Лучше не использовать на сайте указания типа Best When Viewed With («лучше всего про-
сматривать с») для указания типа браузера и разрешения экрана. Вряд ли кто-то будет
лично для вас скачивать новую программу и менять настройки монитора. Если вы исполь-
зуете новаторские идеи (в том числе и Flash) — создайте альтернативную версию сайта
для тех, кто не желает сию же секунду грузить plug-in.
СОВЕТ
Если вы панически боитесь JavaScript, вы можете использовать готовые сценарии
Macromedia Dreamveawer или аналогичных редакторов HTML (например, Adobe GoLive).
210 Занятие 9. Один раз отрежь
Check Browser
1111111 Go to URL
) to URL
•
I
Go to Alt URL
Go to Alt URL
Количество цветов
Помимо разных браузеров существует и другая проблема показа в Web — раз-
личные графические режимы, в которых работают потенциальные зрители ва-
шей страницы.
Число одновременно отображаемых цветов обычно варьируется от 16 до 16 млн.
Кроме того, черно-белые мониторы водятся и в наше время.
Считается, что цвета для оформления web-сайта следует выбирать из так назы-
ваемой «безопасной палитры» (256 цветов). Это гарантирует адекватное вос-
произведение в режимах 256, 32 тыс., 64 тыс. цветов, однако ограничивает сво-
боду творчества и усложняет процесс. Но с другой стороны, сейчас число 256-
цветных видеокарт настолько мало (табл. 9.2), что можно пренебречь этим пра-
вилом и использовать любые цвета.
Тестирование 211
Разрешение экрана
Разрешение — это число точек (пикселов) на экране по горизонтали и вертика-
ли. Стандартными (наиболее распространенными) разрешениями являются сле-
дующие:
• 640x480 (VGA);
• 800x600;
• 1024x768;
• 1280x1024.
Общепринятым считается подход, при котором страница рисуется в расчете на
самое распространенное разрешение (сейчас это разрешение 800x600, табл. 9.3).
Также предполагается, что окно браузера развернуто во весь экран (в состоянии
maximize). Однако рекомендуется, чтобы все основные элементы навигации
были видны на экране и при разрешении 640x480. Обязательно надо учитывать,
что реальный экран меньше, так как часть его занимает интерфейс самого брау-
зера (меню, кнопки, полосы прокрутки и т. п.).
кой картинки. Ясно, что при просмотре такой страницы на мониторе с высо-
ким разрешением (1024x768 или 1280x1024) экран будет использоваться не
.слишком рационально, ведь вся информация по-прежнему будет занимать
лишь 600 точек в ширину. Но у такого подхода есть преимущество — при
любом разрешении относительное расположение картинок будет таким, как
вы его задали.
Второй подход заключается в создании масштабируемых страниц. При этом
ширина будет определяться шириной окна браузера (разрешением монито-
ра). Это получится автоматически, если не использовать таблицы или задать
ее ширину в процентах. Масштабируемую страницу сложно сделать выгля-
дящей одинаково в различных ситуациях. Однако рациональное размещение
информации и минимум пустых участков являются хорошей платой за по-
траченное время на тестирование и переделку.
СОВЕТ
Тестируйте свои страницы при разном разрешении экрана и при разном количестве цве-
тов. Для этого незаменимым помощником является программа QuickRes из Microsoft Power-
Toys, которая позволяет менять разрешение «на лету».
Тестирование фильма
Вы создали фильм. Как представить, как будет воспроизводиться ваш фильм на
компьютере пользователя, который использует модем для подключения к Ин-
тернету? Не торопитесь покупать плохонький модем для тестовых целей. Flash
располагает для этого специальными инструментами.
Во время обычного тестового просмотра, который реализуется с помощью ко-
манды Control > Test Movie (Управление > Тестовый просмотр фильма), откройте
меню Debug (Отладка) и установите скорость загрузки, например, 14,4 (1,2 Кб/с),
а дальше выберите команду View > Show Streaming (Вид > Показать в потоке) или
нажмите Ctrl+Enter. Flash начнет заново воспроизводить фильм и будет эмулиро-
вать загрузку с выбранной скоростью. Множество полезной информации о про-
цессе загрузки можно получить в окне, которое появляется на месте киноленты
Тестирование 213
(рис. 9.4). Оно открывается командой View > Bandwidth Profiler (Вид > Профиль
загрузки). На панели слева указаны общие параметры фильма: размеры (Dim),
скорость проигрывания (FrRate), продолжительность в кадрах и секундах
(Duration), количество загружаемых кадров до начала проигрывания (Preload),
ограничения на скорость загрузки (Bandwidth), а также текущий кадр (Frame) и
количество загруженных кадров с их размерами в байтах (Loaded). В правой час-
ти окна отображется собственно профиль загрузки.
Ти
ц Р'
Dim: 550X400 pixels
8KB-
Fr Rale: 12.0 Ir/sec
Size: 11 KB (11310В) 4KB
ао
Preload: 50 Ir (4.2s)
i не
Ban**»: 1200 B/s (100 ВЛ) i 100B
йнштшнпм
ц <$ Flame: 1
3KB (3960 B]
Loaded: 100.0 X (140 frames]
11 KB (11312 B)
Дизайнерские хитрости
Если вы не хотите тратить бьющую ключом юность на рутину и проверять свои
HTML-страницы, вы можете воспользоваться услугами различных программ, про-
веряющих правильность HTML-кода. Нет смысла приводить названия конкрет-
ных программ — зайдите в любой каталог бесплатных продуктов Интернета и
выберите на свой вкус и цвет.
Однако никакая самая умная программа не сможет сказать, нужен ли пробел в
этом месте или нет, а неизвестно откуда взявшееся пустое пространство между
картинками, которые должны идти подряд, иногда способно свести на нет весь
дизайн. Чтобы избежать этого нежелательного явления, надо сразу после тега
<IMG> ставить тег <BR>. А чтобы наверняка выловить всех непрошеных гостей, на-
жмите Ctrl+A. Браузер выделит содержимое страницы, и выделенные пробелы
будут видны как на ладони.
1
•
Рис. 9.6. Internet Explorer обнаружил ошибку в сценарии
Ц Internet Explorer
,:,.,.,,,„. i;
Jf .' .is message йегга pat;
Ш
Рис. 9.8. Internet Explorer выводит описание ошибки
Если установить флажок в этом окне, тогда оно будет выводиться всегда при
обнаружении ошибок в сценарии.
Netscape Communicator вообще не определит наличие ошибки — страница будет
выглядеть так же, как и без нее (рис. 9.9).
И Nets cape
Iff: / |(ile:///D|/Books/My/Flash2/Fl'ash/CHe/Errorhtml ~
Однако если ввести в строке адреса слово javascript:, браузер выведет сообще-
ние об ошибке (рис. 9.10).
СОВЕТ
Отлаживать сценарии JavaScript можно с помощью программы Microsoft Script Debugger. Она
распространяется бесплатно, и ее можно загрузить с сервера vww.microsoft.com/scripting.
<SCRIPT language="javascript">
<!--
var yourname=prompt("Введите ваше имя. например.". "Вася");
// -->
if (confirmC'Bauie имя "+yourname+"?")) {alert ("Вы - "+yourname)}
else {alert ("Вы не "+yourname)};
</SCRIPT>
Вася
•••••ШрТЧ
'
Microsoft Internet E
,'.'-":.;г';';ок; i |
Рис. 9.12. Окно метода confirm
Вы не Вася
ОК
ПРИМЕЧАНИЕ
Все сказанное про загрузку не относится к серверам, предоставляющим HTTP-доступ, на-
пример — narod.ru.
Если у вас установлен полный пакет Internet Explorer, то проще всего помес-
тить файлы в Сеть, используя программу Издатель Web. Запустите программу из
меню запуска и ответьте на вопросы Издателя: какие файлы и откуда надо взять,
куда и как их следует разместить (рис. 9.14). При подключении вас попросят
ввести пароль.
Издатель Web
i Web-ст репицам (напр им ер, littp //v/ww, i n icro s ott, со гп/гпу) . Этот
.адрес можно уэнеть у сисгеиного: администратор.» или
поствещика услуг Интернете: ..;: :
:
Ijwww. dirnvivich.narod.ru
|§ШЩ1"е i 1иганэев1
•ЙЩе ЩЦватъ зток
Док альм ый к а т an or
JD \Books\My\Fte3h2\Flash\Ch3\
—.—, :_
Рис. 9.14. Одно из окон Издателя Web
Вот и весь процесс. Ваш сайт оказался на сервере и его можно там просмотреть.
И столяр, и плотник
Скатился с ветки каштан.
Тому, кто в дальних горах не бывал,
В подарок его отнесу.
Мацуо Басе1
На этом занятии
Планирование — дело тонкое. Сколько ни планируй, часто все идет не так, как
хотелось бы. Как пел Андрей Миронов, «крокодил не ловится, не растет кокос».
Здесь картинку не подобрать, там текст не состыковать... И главное, каким бы
гениальным плановиком вы ни были, чтобы сайт увидел свет, вам еще придется
состояться и как писателю, и как художнику. А у каждой профессии есть свои
тонкости. О некоторых из них мы сейчас и поговорим. На сегодняшнем занятии
мы узнаем:
• как подготовить текст быстро и без ошибок;
• какие инструменты Word могут пригодиться при создании web-страниц;
• зачем нужен графический текст;
• как на HTML-странице вывести длинное тире или знак торговой марки;
• что такое anti-aliasing и когда его надо применять.
Что касается этапов работы, сформулированных на занятии 8, то на сегодня-
шнем занятии мы обсудим 3 из них: подготовку текстовых материалов, подго-
товку графических материалов и создание элементов оформления.
Подготовка текста
Как уже говорилось, тексты, помещенные в Интернете для ознакомления с ними
при подключении к Сети, должны иметь иерархическую структуру. Из этого не
следует, что, если вы хотите представить на всеобщее обозрение свой литера-
турный опус, вам придется сделать из него «сетевую» версию. Ни в коем слу-
В переноде В. Марковой.
Подготовка текста 221
чае! Если вы писали для печати на бумаге, то пусть так и будет. Разрежьте рас-
сказ на кусочки, вставьте в начале и в конце ссылки и публикуйте. Однако если
вы собираетесь поместить в Интернете сборник стихов, то тут уже стоит поду-
мать над его структурой. Скорее всего, лучшим вариантом будет следующий.
Сделайте оглавление, в котором будут ссылки на все произведения, а сами сти-
хи можно объединить так, чтобы группа умещалась на одной странице. В начале
и конце каждой страницы дать ссылки на соседние.
Особенным является случай, если вы специально пишете для Web. Например,
вы решили описать свои приключения во время командировки или похода. То-
гда стоит подумать над созданием именно гипертекстового шедевра. С первого
взгляда это может оказаться не так просто — мы привыкли к книгам и фильмам
с их последовательным изложением событий. Хотя на самом деле наше созна-
ние меньше всего напоминает хронологию. Здесь — ассоциация с другим инте-
ресным случаем, там — уместный анекдот... Почему бы из этого не попытаться
сделать настоящий гипертекст? Вначале вы пишете одну, главную историю. По
мере ее создания, в тех местах, где вам хочется сказать: «К слову говоря...» или
«...это вообще интересный парень — в прошлый раз он такое натворил...», — там
вы вставляете ссылки. А потом пишете для них собственные истории. Только,
опять-таки, не забудьте придумать какую-нибудь разумную навигацию по этому
тексту, чтобы читатель не заблудился.
Если написание хорошего текста — это дело вкуса и умения, то создание гра-
мотного текста в настоящее время — дело техники. Текст я предлагаю писать
в Microsoft Word. Как уже упоминалось, вряд ли вы найдете текстовый процес-
сор, сравнимый с ним по богатству возможностей и функций.
Работа в Word
Так как результатом работы в Microsoft Word должен стать простой текстовый
файл, в этом разделе будут рассмотрены только функции, которые могут приго-
диться при наборе текста.
ВНИМАНИЕ
Напоминаем: будьте внимательны при копировании текста из Word в программу HTML-вер-
стки. Никогда не копируйте текст напрямую (естественно, если вы не используете для вер-
стки Блокнот). Всегда сохраняйте текст сначала в простом текстовом редакторе, иначе
весь выигрыш от проверки правописания уйдет на борьбу с последствиями.
Проверка правописания
Основная функция, которая вам пригодится, — это проверка правописания.
Обычно Word по умолчанию проверяет грамматику и орфографию. Слова, в ко-
торых, по его мнению, есть ошибка, он подчеркивает красным, а предложения
с грамматическими ошибками и неточностями — зеленым. Если вы щелкнете
правой кнопкой на подчеркнутом слове или части слова, то Word напишет, что
сделано неправильно. Обычно к его мнению стоит прислушаться. Однако если
ошибок слишком много, текстовый процессор откажется автоматически прове-
рять орфографию. В таком случае необходимо воспользоваться командой Сервис >
Правописание или нажать F7. В верхнем поле Word выделит красным слово с
222 Занятие 10. И столяр, и плотник
СОВЕТ
Если «языковые проблемы» становятся частыми — создайте макрос, который бы менял
язык на русский, и задайте горячую клавишу для него. О том, как это сделать, читайте
ниже в разделе «Макросы».
Подготовка текста 223
СОВЕТ
Чтобы увидеть пробелы и символы абзаца в виде условных символов, нажмите кнопку Не-
печатаемые символы (она находится на панели Стандартная). Какие непечатаемые симво-
лы будут отображаться, а какие — нет, определяется на вкладке Вид окна Параметры в со-
ответствующем разделе.
СОВЕТ
Чтобы открыть нужную панель инструментов, выберите ее в подменю команды Вид > Пане-
ли инструментов или в контекстном меню командной области Word. В этом же меню при-
сутствует команда Настройка (она есть и в меню Сервис), которая позволяет создать но-
вую панель инструментов или перенести пару нужных кнопок на уже существующие
панели.
Запись исправлений
Еще одна полезная функция текстового процессора - запись исправлений.
Обычно она используется при коллективной работе над документом. Но иногда,
особенно при обработке старых творений, она бывает незаменимой и для одного
человека. Чтобы активировать запись исправлений, нажмите кнопку Исправ-
ления на панели Рецензирование или установите флажок Записывать исправления
в окне Исправления (оно открывается кнопкой Выделить исправления на панели
Рецензирование или одноименной командой меню Сервис). В том же окне надо
установить флажок Отображать исправления на экране, если вы хотите сразу кон-
тролировать свои действия при записи исправлений. Две следующие кнопки па-
нели Рецензирование служат для перехода от одного исправления к другому,
а две следующие — для принятия или отказа от исправления. Работать с ис-
правлениями можно также с помощью окна Просмотр исправлений, которое от-
крывается командой Сервис > Исправления > Принять/отклонить исправления.
ВНИМАНИЕ
Будьте внимательны при работе с исправлениями — при записи окончательного варианта
документа в формате ТХТ все исправления должны быть приняты. При копировании через
буфер обмена (Ctrl+C/Ctrl+V) достаточно, чтобы исправления не отображались на экране.
СОВЕТ
Если подвести указатель мыши к исправлению, появляется подсказка, кто является его ав-
тором. Если вы хотите, чтобы там появилось ваше имя, заполните поля вкладки Пользова-
тель в окне Параметры. Введенные там инициалы появятся при именовании примечаний.
Макросы
Еще одной полезной функцией, которая существенно облегчает работу в Word
п которую, к сожалению, многие считают для себя недоступной, является ис-
пользование макросов. Хотя для создания макросов используется специальный
язык программирования — Visual Basic for Applications (VBA), вы можете даже
TTf
' подозревать о его существовании и при этом все равно использовать макросы.
Word позволяет записать последовательность команд в виде макроса, не прибе-
гая к услугам редактора языка Visual Basic.
Подготовка текста 225
Для примера запишем макрос для смены текущего языка выделенного текста на
русский.
1. Сначала выделим нужный текст.
2. Затем дадим команду Начать запись из меню Макрос или нажмем кнопку За-
пись (синий кружок) на панели Visual Basic.
3. В появившемся окне дадим ему название, например Русский.
4. Дальше можно идти тремя путями: просто начать запись или начать запись,
предварительно сопоставив создаваемому макросу сочетание клавиш или
кнопку панели инструментов. Для простоты просто нажмем ОК и перейдем к
записи макроса.
5. Рядом с указателем мыши появилось уменьшенное изображение кассетой,
а на экране появилась плавающая панель с двумя кнопками Остановить запись
и Пауза. Кнопкой Пауза можно воспользоваться, если вы забыли выделить
текст или случайно сняли выделение, или если вам надо перейти к другому
участку текста (в режиме записи макроса Word не позволит вам воспользо-
ваться мышью для путешествий по тексту).
ПРИМЕЧАНИЕ
При записи макроса доступны только команды, к которым так или иначе можно установить
доступ с клавиатуры.
13. Закроем окно Настройка и разместим созданную панель в нужном месте. Что-
бы исправить язык текста на русский, теперь достаточно выделить фрагмент
текста и нажать Alt+R или кнопку Русский на панели Моя.
ВНИМАНИЕ
Будьте внимательны при настройке клавиатурных сочетаний: некоторые из них уже исполь-
зуются Word. Впрочем, об этом вы узнаете из подсказки, которая выводится после ввода
клавиатурной комбинации. Не стоит перекрывать уже существующие назначения, если вы
не чувствуете себя асом в Word. Возможных свободных комбинаций и так достаточно — го-
дятся любые сочетания практически всех основных клавиш клавиатуры с клавишами Alt,
Ctrl и Shift.
§ Параграф §
© Copyright ©
® Registered
° Знак градуса
« Левая кавычка (левая елочка)
» Правая кавычка (правая елочка)
… Многоточие
‘ Одиночная открывающая кавычка
б; Одиночная закрывающая кавычка (апостроф)
„ Открывающая лапка
“ Закрывающая лапка
“ Открывающая английская лапка
” Закрывающая английская лапка
• Жирная точка
– Короткое тире (минус)
— Длинное тире
™ Торговая марка
№ Знак номера №
± Плюс-минус ±
1
Некоторые из правил навеяны Артемием Лебедевым.
Графика в Сети 227
Графика в Сети
Кроме текста практически любой сайт использует в своем оформлении графические
файлы, будь то меню, логотип или просто украшенный заголовок. В Интернете
в основном используются растровые форматы: GIF, JPEG и PNG. Исключение
составляет Flash. Основным поставщиком рисунков служит программа Adobe
Photoshop. В ней вы можете сами нарисовать что-либо (обычно это текстовые
надписи) или использовать отсканированные изображения. Основные принци-
пы сканирования и работы в Photoshop описаны в занятии 3, а сейчас мы позна-
комимся с советами бывалых людей.
228 Занятие 10. И столяр, и плотник
Несколько советов
• Подкорректируйте в Photoshop цвета (Image > Adjust > Hue > Saturation) и яр-
кость/контраст (Image > Adjust > Levels). Фотографии не должны выбиваться
из общего оформления страницы или сильно отличаться друг от друга по яр-
кости и контрастности. Возможное решение — сделать все фотографии чер-
но-белыми (Image > Adjust > Desaturate).
• Практичным решением для фотоальбома будет размещение на его главной
странице уменьшенных копий-значков, каждая из которых ссылается на
большую фотографию. Чтобы просмотреть полное изображение, достаточно
щелкнуть мышью на его эскизе. Таким же образом имеет смысл поступать со
всеми большими иллюстрациями сайта.
• Помните, что при масштабировании качество картинки объективно падает.
Поэтому совершенно недопустимо несколько раз последовательно перемас-
штабировать фотографию или рисунок. Если вас не устраивает полученный
размер, вам следует вернуться к оригиналу и масштабировать заново именно
оригинал. Это же правило относится и ко многим другим операциям (кор-
ректировка цветов, изменение контрастности или яркости).
• Яркость картинки во время ее обработки и рисования должна соответство-
вать яркости, которую она будет иметь во время показа в браузере, поэтому
важно правильно настроить гамму в вашем графическом редакторе (в Photo-
shop это делается командой File > Color Settings > Monitor Setup > Gamma).
Золотое сечение
Золотым сечением называется определенное соотношение длин двух отрезков.
Этот термин ввел в употребление Леонардо да Винчи. Отрезки, прямоуголь-
ники или любые фигуры, построенные с учетом соотношения золотого сечения,
воспринимаются как пропорциональные, красивые, гармоничные и эстетичные.
Золотое сечение имеет вполне строгую математическую формулировку: если за-
дан отрезок АВ и на нем точка С, то отрезок будет иметь золотое сечение, если
отношение длины отрезка к длине его большей части будет равна отношению
длины большей части к меньшей. В частности, если АОСВ, то отношение мож-
но записать как: АВ/АС=АС/СВ.
Решив несложное квадратное уравнение, можно (вслед за пифагорейцами) по-
лучить значение золотого сечения. Оно приблизительно равно 3/5 или 2/3.
Золотое сечение и связанные с ним математические понятия, например числа
Фибоначчи, появляются в самых разнообразных явлениях природы: в пропор-
циях человеческого тела и растений, в эволюции биоценозов и даже в поведении
некоторых образований глубокого космоса. Общепринятые форматы фотографий
также соответствуют значению золотого сечения. Это же значение проявляется
и в размерах стандартных листов бумаги А4, A3 и т. д.
Поэтому, обрезая фотографию в Photoshop, постарайтесь соблюдать принцип
золотого сечения, подобрав соотношение длины и высоты картинки 3/5 или 2/3.
Размеры экрана монитора другие: 800x600 или 1024x768, то есть их отношение
равно 3/4. Оно близко к другой величине — квадратному корню из значения зо-
лотого сечения. Субъективно такие фигуры тоже пропорциональны.
Графика в Сети 229
СОВЕТ
Будьте аккуратны, обрезая фотографии. Нет ничего проще, чем испортить хорошую фото-
графию, обрезав ботинки или флюгер на крыше.
Внутри кадра золотое сечение тоже применимо. Значимые точки и линии кадра
лучше располагать на расстоянии 1/3 от края. Привязывайте к этим линиям
композиционный центр вашей фотографии. Например, в пейзажах горизонт
лучше расположить не посередине изображения, а на высоте одной или двух
третей.
СОВЕТ
Применяйте принцип золотого сечения не только при обработке фотографий. Для филь-
мов Flash он тоже вполне применим.
СОВЕТ
Из-за потерь качества рисунка для сохранения промежуточных версий используйте родной
формат графического редактора. Для Photoshop им является TIFF и PSD.
СОВЕТ
Для того чтобы создать анимированный GIF-файл, совсем не обязательно покупать и уста-
навливать дополнительные программы. Если у вас нет серьезных претензий к графике, то
гораздо проще использовать для этих целей Flash. Создайте нужную последовательность
кадров, дайте команду File > Publish Settings (Файл > Параметры публикации). На вкладке
Formats (Форматы) установите флажок GIF Image. На появившейся вкладке GIF настройте
необходимые параметры (в частности, установите переключатель Animated (Анимирован-
ный)) и нажмите кнопку Publish (Опубликовать).
JPG
JPG — основной формат электронных фотографий. Однако поскольку он сохра-
няет изображение с потерей качества, вам придется выбирать соотношение меж-
ду наименьшим размером файла и допустимыми (на ваш взгляд) искажениями
рисунка. Свойства этого формата таковы, что дефекты сильнее всего проявля-
ются на мелких контрастных деталях (вокруг них появляется ореол). Картинки
в этом формате имеют цветовую модель TrueColor (16 млн цветов).
Полное название этого формата — JPEG (Joint Photographic Experts Group). Он
разработан группой экспертов по фотографии (что становится ясно из названия)
под эгидой ISO (Международная организация по стандартам). Этот формат
уникален тем, что использует алгоритм сжатия, отличающийся от применяемых
во всех остальных графических форматах, — сжатие с потерями. Этот алгоритм
ранее использовался на телевидении в схеме телевизионной трансляции США.
Основан он все на той же ограниченности человеческого зрения — неспособно-
сти глаза замечать некоторые искажения в восстановленном изображении. На
сегодня этот алгоритм является одним из самых эффективных (коэффициент
сжатия достигает 1:100), однако он не очень хорошо обрабатывает изображения
с малым количеством цветов и резкими границами. JPEG можно назвать проти-
воположностью GIF. Он позволяет отображать 24-битную палитру, что дает
возможность отображать градиенты с фотографической точностью, но при этом
не может иметь прозрачных областей.
Однако этот формат таит в себе одну неприятную особенность, о которой нель-
зя забывать. При каждом сохранении изображения в формате JPEG повторно
запускается алгоритм сжатия, что приводит к еще большему ухудшению качест-
Графика в Сети 233
ва. Поэтому сохранять изображение в этом формате следует только после окон-
чательной обработки.
Рисунки в форматах GIF и JPEG могут появляться на странице постепенно,
становясь более четкими по мере загрузки. Для того чтобы задать такое поведе-
ние изображения, надо указать при сохранении в Photoshop для GIF — Interla-
ced, а для JPG — Progressive. Однако использовать эту возможность лично я не
советую: если Интернет «быстрый» — то все равно сразу будет появляться ко-
нечный вариант, а если «медленный», то впечатление от картинки может испор-
титься, так как посетитель сайта сначала увидит рисунок плохого качества.
Атрибут alt
У многих смертных Интернет — крайне медленное и неповоротливое создание
(совсем как крокодил — может очень долго практически не двигаться). Для них,
а также для тех, у кого браузер не показывает графику (текстовый Lynx или
Netscape и Internet Explorer с выключенной графикой), настоятельно рекомен-
дуется прописывать для всех графических изображений атрибут alt:
<IMG src="test.gif" аН="Тестовая картинка">
При загрузке страницы с рисунками, надписанными таким образом, текст в ка-
вычках после alt будет показан вместо картинки, если она не будет загружена.
Эта же надпись будет всплывать в качестве подсказки, если навести на рисунок
указатель мыши.
Здесь важно отметить, что атрибут alt можно указывать лишь для отдельных
картинок. Если вы работаете с image map (то есть единой картинкой, разные
части которой могут ссылаться на разные странички), то единственная альтер-
натива — дублирование всех ссылок обычными текстовыми ссылками в самом
низу страницы. Однако чаще всего бывает проще разрезать картинку (см. заня-
тие 11) на несколько частей и прописать для каждой свой атрибут alt. Визуаль-
но это будет выглядеть точно так же, как и карта, однако пропадает необходи-
мость в текстовых ссылках и загрузка картинки будет происходить более
равномерно (так как части качаются параллельно).
Размеры файлов
Графические изображения, которые вы публикуете на страницах сайта, долж-
ны представлять разумный компромисс между качеством и размерами в кило-
байтах. Не этично заставлять людей загружать заставку в 200-300 Кбайт толь-
ко потому, что вы поленились обработать отсканированную фотографию. Дать
универсальный совет здесь довольно сложно, можно привести лишь некоторые
«статистические» рекомендации. Главное, что следует уяснить, — основной за-
гружаемый объем страницы в среднем составляет графика, и если вы можете на
чем-нибудь сэкономить, так это на ней. Для заглавной страницы общий объем
картинок и текста должен колебаться в пределах от 25 до 100 Кбайт. На страни-
цу второго уровня должно приходиться уже раза в 2 меньше. Если речь идет
о фотоальбоме, можно говорить об общем объеме не более 400-600 Кбайт на
страницу. В любом случае учтите, что на большинстве серверов, дающих бес-
платный хостинг, выделяемый для вас объем места на диске ограничен.
234 Занятие 10. И столяр, и плотник
СОВЕТ
Иногда может оказаться полезным применение атрибута LOWSRC. Если прописать его для
картинки, например, <IMG src="testgif LOWSRC="before.gif">, то вначале будет загру-
жено изображение из файла before.gif, и следом поверх него — из test.gif. Файл before.gif
обычно делают очень низкого качества, черно-белый (в Photoshop команда Image > Adjust >
Threshold).
Важно указывать для каждой картинки ее размеры на экране: height, width. Если
эти размеры не установлены, браузер не будет знать, сколько под данную кар-
тинку необходимо отвести места, пока ее не загрузит полностью. Поэтому, когда
задана таблица с множеством графических изображений внутри, общее изобра-
жение появится только тогда, когда загрузится последняя картинка и весь текст.
Если же размер указан, текст проявится сразу, а картинки будут временно заме-
нены браузером прямоугольниками указанных размеров.
Неплохим приемом, позволяющим сочетать небольшой объем памяти на диске
и высокое качество, является нарезка картинки на части и сохранение каждой
части в наиболее подходящем для нее формате. Например, довольно часто по-
верх фотографии наносится текст. Для такой иллюстрации не годится как фор-
мат JPG (надпись будет выглядеть размазанной, с ореолом вокруг букв), так и
формат GIF (число цветов на фотографии будет небольшим, плавные переходы
типа неба заменятся на неровные резкие границы). В таких случаях картинка
нарезается на несколько фрагментов так, чтобы надпись оказалась на отдельном
фрагменте как можно меньшего размера. Каждую часть сохраняют в подходя-
щем формате и помещают в ячейки большой таблицы. О технологии нарезки
будет рассказано на следующем занятии.
Существует проблема, связанная с размерами картинки для фона страницы
(или фона ячеек таблицы). Иногда дизайнеры используют картинку больших
размеров (тысячи точек по горизонтали и вертикали), чтобы избежать автома-
тического повторения рисунка в пределах экрана. В таких случаях необходимо
учитывать, что малый размер графического файла у вас на диске — еще недоста-
точное условие разумного использования графики. Для того чтобы показать
изображение, браузер должен выделить кусок памяти, в котором он поместится
в несжатом виде. То есть вполне возможна ситуация, когда фон, занимающий на
диске (в формате JPE G) 1-2 Кбайтов, потребует в момент показа несколько
мегабайтов памяти. Это может привести как к некоторому замедлению работы
браузера, так и к тривиальным проблемам с нехваткой памяти.
Графический текст
Итак, вы выбрали из богатой коллекции шрифтов на вашем компьютере пару
подходящих для основного текста и один поэкзотичнее — для заголовка, напри-
мер найденный в Интернете ManhattanCyr. Первый порыв — взять и просто на-
писать:
<FONT face="ManhattanCyr" 5тге="+2">Заголовок</РОМТ>
Пишем, проверяем — все прекрасно работает. Но что увидит при просмотре
этой странички человек, который не -является счастливым обладателем шрифта
Графический текст 235
СОВЕТ
Картинки, содержащие текст, рекомендуется сохранять в формате GIF.
СОВЕТ
Если у вас есть выбор, пользуйтесь PostScript-шрифтами (AdobeTypel). По качеству они пре-
восходят обычные TrueType. Правда, для этого вам понадобится установить Adobe Type
Manager.
Anti-aliasing
При создании текстовых надписей в графическом редакторе есть свойство, ко-
торое оказывает огромное влияние на результат. Это свойство называется сгла-
живанием (anti-aliasing). Если сглаживание включено, то на границе буквы и
фона появляются переходные цвета. Результат — границы букв выглядят плав-
но и аккуратно (рис. 10.1, а). Если же сглаживание выключено, то буквы имеют
резкие, рваные края (рис. 10.1, б).
Если же надо создать небольшую надпись, то поступать надо прямо противопо-
ложным образом — сглаживание в данном случае ухудшает читаемость текста.
Общий метод в данном случае примерно следующий: создаете картинку доста-
точно большого размера (скажем, 800x600 пикселов), затем печатаете требуе-
мую надпись большими буквами. Сглаживание (Anti-aliasing) при этом должно
Что нового мы узнали 237
• Сглаживание
. без него
Рис. 10.1. Так будет выглядеть надпись со сглаживанием (а) и без него (б)
до
Рис. 10.2. Маленькая надпись, полученная с помощью уменьшения изображения (а)
и обычным способом (б); верхняя строка — с включенным сглаживанием,
нижняя — без него
•
-
Занятие 11
Встречают по одежке
В чарку с вином,
Ласточки, не уроните
Глины комок.
1
Мацуо Басе
На этом занятии
На прошлых занятиях мы научились проектировать сайт — создавать упрощен-
ную модель в бумажном и частично электронном виде. И теперь мы можем при-
ступить к созданию сайта.
Большинство сайтов начинается с главной страницы, но некоторые имеют бо-
лее сложную структуру. Придя на такой сайт, вы сначала познакомитесь с за-
главной страницей. Обычно это красивая страница с парой ссылок. Зачем? Все
очень просто. Например, вы решили сделать свой сайт на Flash, но если посети-
тель не имеет соответствующего plug-in, то он ничего не увидит. Обидно, ведь
если бы plug-in был, сайт бы ему наверняка понравился. Выход состоит в том,
чтобы создать заглавную страницу и поместить на ней ссылку на сервер Macro-
media, откуда можно загрузить необходимый модуль к браузеру. Если вы решите
создать и Flash-, и HTML-версию сайта, ссылки на них также можно поместить
на заглавную страницу. Таким образом, заглавная страница — это парадный вход
сайта, его виртуальный мажордом.
Так как парадный вход — это всегда красиво и празднично, в это занятие попало
много всего необходимого, и не только для создания заглавной страницы. Вот его
основные темы:
• зачем и для чего нарезают изображения;
• как создать imagemap;
• зачем нужна заглавная страница на Flash;
• почему необходимо делать ролик на время загрузки сайта;
• что такое cookies и как их использовать на своих страницах.
Нож в правую руку, вилку в левую — приступаем!
1
В переводе В. Марковой.
Графические ссылки 239
Графические ссылки
Часто заглавную страницу заполняют графикой. Она может завлечь посетителя
даже на совершенно не интересный ему сайт. Естественно, некоторые части
этой картинки служат ссылками. Для задания графических ссылок обычно при-
меняют две технологии: нарезка изображения на части и изображения-карты
(image map).
Нарезка изображений
Предположим, вы создали большой и сложный рисунок для заглавной страни-
цы. В большинстве случаев имеет смысл разрезать его на части, которые затем
поместить в таблицу с невидимыми разделителями (атрибут border=0). Зачем так
сложно? Во-первых, скорость загрузки такой страницы возрастет, так как от-
дельные части будут загружаться параллельно. Во-вторых, если вы правильно
разрежете рисунок, то можно будет избежать некоторых искажений и оптими-
зировать суммарный объем дискового пространства, необходимый для его хра-
нения. В-третьих, можно легко смоделировать изображение-карту, избежав ис-
пользования сценариев и сделав более верной навигацию.
Что означает «правильно разрежете»? Например, ваш рисунок — это обработан-
ная фотография, на которую помещен текст и простые геометрические формы.
Если вы сохраните его в формате JPG (о форматах было рассказано на преды-
дущем занятии), то вокруг букв и фигур появится грязный ореол. Если вы со-
храните его в GIF, часть цветов может быть потеряна, так как рисунок в форма-
те GIF может содержать лишь до 256 цветов. Таким образом, ни один из этих
форматов не годится для данного рисунка. Однако его можно разрезать на части
так, что каждую из частей можно будет сохранить в оптимальном формате. Даже
если вы решите, что вам хватит 256 цветов и формат GIF подойдет, то, может
быть, у вас на рисунке есть место, где цветов всего 64? Или еще меньше и на
этом можно сэкономить? Или, может быть, цветов больше, чем 256, но они раз-
делены пространственно? Тогда нарезка поможет обойти и это ограничение.
Перейдем вплотную к самой нарезке. Открываем файл в Photoshop, устанавли-
ваем режим показа направляющих (guides) — View > Show guides (Ctrl+;) — и ли-
неек View > Show Rulers (Ctrl+R). Теперь, если потащить мышь с нажатой кнопкой
с любой линейки на изображение, появится тоненькая синяя линия — направ-
ляющая. Добавьте нужное количество направляющих (горизонтальных и верти-
кальных) и расставьте так, как вы собираетесь нарезать картинку. Теперь необ-
ходимо включить режим «прилипания» инструментов к направляющим — View >
Snap to Guides. Осталось взять «в руки» какой-нибудь инструмент выделения и
скопировать все области в отдельные файлы. Сохранять файл лучше не в Photo-
shop, а в специально предназначенной для оптимизации графических файлов
программе, например Adobe Image Ready или Smart Saver фирмы Ulead. Хотя
можно воспользоваться и возможностями самого Photoshop, если сохранять
файл командой Save for Web (Сохранить для Web).
Можно частично автоматизировать процесс, если воспользоваться специальны-
ми программами, уже упоминавшейся Adobe Image Ready, Macromedia Fireworks
или Image Cutter. Технология работы будет примерно той же: вы расставляете
240 Занятие 11. Встречают по одежке
для загрузки данного документа. Параметр map_name указывает имя карты для
изображения, а предшествующий ему url определяет адрес карты. Если URL от-
сутствует, то поиск карты с указанным именем осуществляется в текущем доку-
менте.
Рассмотрим синтаксис определения карты изображения:
<МАР name="map_name">
<AREA [SHAPE=" shape "] COORDS="x.y,..." [href=" reference "] [NOHREF]>
</MAP>
''lnr
Перечислим теги и их атрибуты.
TT ^
СОВЕТ
Если вам сложно самим создать карту, вы можете найти в Сети много бесплатных про-
грамм, готовых сделать за вас всю рутинную работу.
Метки на странице
С помощью карты изображений и обычной ссылки можно перенаправить посе-
тителя не только на определенную страницу, но и на конкретное место на ней.
Для этого служит тег <А>:
<А пате="Метка"></А>
242 Занятие 11. Встречают по одежке
Сослаться на такую метку очень просто. Для ссылки внутри страницы служит
такой вид тега <А>:
<А п^="#Метка">Перейти к метке</А>
А для внешней ссылки — такой:
<А hгef="URL#Meткa">Пepeйти к метке</А>
Создание ролика-заставки
Если главная страница нужна в основном для красоты (чтобы показать себя), то
ролик-заставка, который мы собираемся создать, будет играть важную функцио-
нальную роль. Он будет указывать, как проходит процесс загрузки фильма. При-
чем использовать его можно многократно, для загрузки не только основного
фильма, но и его частей, если вы решили разбить фильм на части.
Сделанный ролик, я надеюсь, потом будет использован для комплектации сайта,
который посвящен оркестру баянистов и аккордеонистов им. П. И. Смирнова
Дворца культуры молодежи Комитета по образованию Санкт-Петербурга. Ссыл-
ку на этот сайт вы сможете найти на сайте dimvovich.narod.ru. В качестве индика-
тора загрузки мы используем нотную строку и ноты, которые будут появляться
на ней по мере загрузки.
if (_root._framesl_oaded == _root._totalFrames) {
gotoAndPlay ("Scene 2". 1);
} else {
gotoAndPlay (1);
СОВЕТ
Иногда при загрузке необходимо дождаться не ее окончания, а лишь загрузки определен-
ного кадра. Это можно сделать с помощью действия ifFrameLoaded, которое проверяет, за-
гружен ли определенный кадр, и, если он уже загружен, переходит к выполнению указан-
ных далее действий.
Ноты
Для начала создадим символ ноты.
1. Откроем Flash и создадим новый фильм. В окне Movie Propericies (Свойства филь-
ма) укажем размер фильма — 790x200 — и приступим к созданию клипа-ноты.
2. Создадим новый символ-клип и назовем его Нота.
3. Нарисуем овал или круг, на панели Fill (Заливка) выбереш градиентную ради-
альную заливку. Выделим заливку круга и настроим гр.адиент так, чтобы он
создавал эффект объема — выпуклостей и вогнутостей, так же, как мы посту-
пали при создании градиентов на занятии 4. Если изначально вы нарисовали
круг, сделайте из него овал с помощью панели Transform (Преобразование).
4. Выберем инструмент Transform Fill (Преобразовать заливку) из набора моди-
фикаторов инструмента Paint Bucket (Банка краски). Передвинув квадратный
маркер в сторону, добейтесь, чтобы фигура выглядела приплюснутой сферой,
а затем, сдвинув центральный маркер, — чтобы блик с местился в левый верх-
ний угол. Контур лучше удалить или сделать его не контрастным заливке.
5. Аналогично создадим вертикальную трубку — прямоугольник, заполненный
линейным градиентом серых тонов. С помощью Transform Fill (Преобразовать
заливку) можно добиться, чтобы блик был смещен в правую часть. Трубку
рисовать лучше на отдельном слое, как и все части символа.
6. Самая сложная часть — нарисовать «хвост» ноты (рис. 11.1). Для этого надо
нарисовать прямоугольник, выбрать инструмент Arrow (Стрелка), а затем,
244 Занятие 11. Встречают по одежке
ПРИМЕЧАНИЕ
Перекрасить градиент » другой цвет можно и с помощью обычного оттенка. Надо устано-
вить ему не 100%-ную непрозрачность — градиент будет проглядывать сквозь нее. А с по-
мощью параметра Advanced (Дополнительно) можно настроить оттенок, как хочется, -
ведь там вы можете не только прибавлять, но и вычитать цвет.
Создание ролика-заставки 245
Нотная строка
Нотная строка будет выглядеть как пять полосок-трубок, протянувшихся от од-
ного края до другого (рис. 11.2). Можно создать новый символ и скопировать в
него стержень из ноты. Растянуть символ по экрану можно с помощью панелей
Info (Информация) или Transform (Преобразование).
[:J.-|,,
5 ' т- аЩш
jilulo ~^1 ]
Каждую полоску надо поместить на своем слое для раскадровки. Пусть это бу-
дут слои: Линия!, Линия2, ЛинияЗ, Линия4 и Линия5. Расположить их можно ровно
или лесенкой, главное, чтобы расстояния между символами были одинаковыми.
В этом поможет кнопка Space evenly vertically (Равное расстояние друг от друга
по вертикали) панели Align (Выравнивание).
Теперь зададим анимацию. В каждый из пяти слоев установим ключевой
кадр 25 (напомню, что проще всего вставить ключевой кадр, нажав F6). В пер-
вом ключевом кадре на панели Transform (Преобразование) сожмем линию до О
и поместим ее в левое положение (от символа останется только перекрестие
центра), чтобы она вырастала из точки на левом краю. Для того чтобы видеть
конечное расположение линии, включите режим кальки, нажав кнопку под ки-
нолентой Onion Skin Outline (Контуры на кальке), и выберите режим Onion All (По-
казать все кадры).
Осталось только задать раскадровку. Выделите кадры с первого по следующий
ключевой и на панели Frame (Кадр) установите в списке Tweening (Кадрирова-
ние) пункт Motion (Раскадровка). В поле Easing (Ускорение) для первой линии
задайте 100, для второй — 50, для четвертой - -50, для пятой - -100; для
третьей оставьте 0. Так можно задать, чтобы линии росли не одинаково, а с раз-
ной скоростью (рис. 11.2).
246 Занятие И. Встречают по одежке
СОВЕТ
Сохраните созданные градиенты в файле палитры, как описано в занятии 4. Тогда вы лег-
ко сможете ими воспользоваться в следующий раз.
Индикация
Последний слой — слой, управляющий индикацией загрузки. Назовем его Инди-
кация. Необходимо создать невидимый символ и встроить в него следующий
сценарий:
nowLoad =(_root._framesLoaded/_root.J;otalFrames)*70.•
nowLoad=Math.round(nowLoad):
If (_root,_fnamesLoaded == _root._totalFrames) {
_root.gotoAndPlay ("Scene 2". 1);
} else {
_root.gotoAndPlay (nowLoad);
}
Процесс отслеживания степени загрузки можно начинать примерно с кадра 30,
чтобы показать, как вырастают линии. Тогда надо умножать не на 70, а на 40
и добавлять 30 к значению кадра перехода:
Создание ролика-заставки 247
не стоит использовать этот формат для коротких звуковых эффектов, так как
во время распаковки звука, происходит некоторая задержка.
Raw — еще один формат, позволяющий изменить частоту дискретизации; об-
ладает худшими параметрами по уменьшению объема по сравнению с ADCPM.
jpjChord.wav
; ; C:\WINDOVVS\MEOtM
:
,."|5мая1аЭВг. ;20:Й1 0
f|
Рис. 11.3. Окно Sound Properties позволяет не только узнать много интересного
о звуковом файле, но и заменить его
СОВЕТ
Если вы хотите привязать изменение изображения к звуку (например, танец под музыку
или слайд-шоу с речевым сопровождением), используйте потоковый звук, выбрав значе-
ние Stream (Потоковый) в списке Sync (Синхронизация) на панели звука. Если вы исполь-
зуете достаточно сложную анимацию и проигрыватель Flash не будет успевать отрисовы-
вать изображение, измените скорость воспроизведения фильма в окне свойств.
СОВЕТ
Старайтесь использовать звуки в режиме моно: они занимают в 2 раза меньше места. В иг-
рах можно реализовать интересные стереоэффекты, используя перетекание звука из одно-
го канала в другой.
ПРИМЕЧАНИЕ
Ссылку на готовый сайт оркестра вы сможете найти на моем сайте: www.dimvovich.
narod.ru. Возможно, что заставка и остальные части сайта окажутся не в том виде, как они
описаны в книге. Но исходные тексты вы всегда сможете найти в материалах, посвящен-
ных поддержке книги.
Символы капель
Создайте новый файл и откройте фильм ролика, созданного в предыдущем раз-
деле, как библиотеку — это делается командой File > Open As Library (Файл > От-
крыть как библиотеку). Все созданные символы появятся в окне библиотеки,
и вы сможете их использовать. Задайте размеры во весь экран, цвет фона и со-
храните фильм под именем Intro.fla.
СОВЕТ
Используйте команду File > Open As Library (Файл > Открыть как бибоиотеку) для того, что-
бы включить созданные ранее клипы и символы в новых проектах.
4f Flash 5 - [Movie!]
Fie Edit View..Insert Modify Text Contra! ,• •^••;.:;i,.:
ПРИМЕЧАНИЕ
Использовать раскадровку движения не обязательно, можно задать и морфинг, но это мо-
жет утяжелить и замедлить фильм.
6. Выделяем кадр 15 и нажимаем F6. Теперь ключевым стал кадр 16. Выделим
кадр 15 и на панели Frame (Кадр) отменим морфинг.
7. Снова выделим кадры с 1-го по 15-й. Если теперь настойчиво задать для них
раскадровку (или на панели кадров, или командой Create Motion Tween (Вы-
полнить раскадровку)), то стрелка на фиолетовом фоне обязательно появится.
Для экономии места на диске можно вместо фигуры в кадрах 1-15 переме-
щать клип.
8. Осталось дополнить клип несколькими штрихами. В нескольких оставшихся
слоях в кадре 15 вставьте ключевой кадр. В этом кадре необходимо располо-
жить символы капель, только более мелких, которые полетят в разные сто-
роны (рис. 11.5). В ключевом кадре 15 они должны располагаться около
материнской капли, а к кадру 30 их надо вывести за пределы экрана. Все пе-
ремещения между кадрами выполнит Flash раскадровкой. В последнем кадре
дайте команду stopO;.
Рис. 11.5. В режиме кальки можно видеть всю последовательность изображений при морфинге
ПРИМЕЧАНИЕ
Если вы будете действовать неаккуратно, капли начнут падать в каждом ключевом кадре
заново, ведь Flash может посчитать, что у него в ключевом кадре встретился новый сим-
вол. Чтобы было проще, разместите каждую линию в своем слое.
Капли и ноты
Нам понадобится еще один символ, содержащий морфинг. Это будет капля,
превращающаяся в ноту. Схема работы будет такой же: сначала будет падающая
капля, а затем она превратится в нотную фигуру (рис. 11.6). Единственное су-
щественное различие — в клипе ноты разные части расположены на разных сло-
ях, а вам придется собрать их вместе, используя команду Paste in Place (Вставить
на место).
Остальные символы
Дождь из ниоткуда — слишком бедный сюжет для фильма. Поэтому мы допол-
ним его появлением радуги. Капли, которые будут проходить через радужные
полосы, окрасят нам ноты.
Фон и полоса радуги
Раскинуть радугу на темно-синем фоне будет не очень эффектно — все-таки она
обычно бывает на голубом небе. Поэтому сначала создадим фон — прямоуголь-
ник с линейным градиентом прозрачности. Покрасив его в голубой цвет и раз-
вернув сверху, мы получим верхнюю половину голубую, а нижнюю — темно-си-
нюю. Разворачивание фона надо задать раскадровкой — из узкой полосы до
полного экрана.
Радуга представляет собой градиент, на этот раз — радиальный и прозрачный.
Символом можно сделать не всю радугу, а только одну полосу. К центру полосы
прозрачность должна быть меньше (то есть коэффициент Alpha (Прозрачность) -
больше). Таким образом, перекрывая раскрашенные в разные цвета полосы,
можно достичь эффекта переливания цветов, не используя цветового градиента.
Но можно взять за основу и градиент восьми цветов (все цвета радуги и белый)
и задать небольшую прозрачность у экземпляра, помещенного на стол. Радуга
тоже будет появляться на небе не сразу, а постепенно — раскадровкой прозрач-
ности.
Для создания радуги используйте прием, описанный ранее: нарисуйте кольцо,
а потом выделите и отрежьте нижнюю половину. У вас получится идеальное по-
лукольцо. Придать нужную форму вы сможете на столе главной сцены.
Появление голубого неба и радуги надо начать примерно с кадра 70 — после по-
явления последней линии.
Дождь
Конечно, дождь можно нарисовать по капельке — но с множеством слоев на
главной сцене не очень удобно работать. Лучше создать клип Дождь, в который
будет вложено движение нескольких капель. Разместив несколько таких клипов
254 Занятие 11. Встречают по одежке
б о
ОЛ
оо ох
-о о
Q о
о
б
о
о
\чГ
о
о
Рис. 11.7. Дождь в режиме кальки
Кнопка
Кнопка — последний штрих. Сделайте символ-кнопку с надписью «Пропустить
заставку». Для кнопки задайте сценарий:
on (release) {
nextScene ():
}
В отдельный слой можно вставить звуковой файл, проигрывание которого бу-
дет сопровождать происходящее на экране.
Фильм-заставка готов. Обратите внимание, что при показе в браузере объекты
могут выходить за границы стола (рис. 11.8).
Теперь можно приступать к разработке основного сайта.
ПРИМЕЧАНИЕ
SWF-файл у меня получился очень «легкий» — около 11 Кбайт (без звука). Однако не лю-
бой компьютер такой фильм покажет кадр за кадром: если кадры не успевают появляться
на экране (не хватает вычислительной мощности), то Flash начнет «проглатывать» кадры.
В случае синхронизации звука и анимации фильм может превратиться в набор разнород-
ных кадров под музыку.
Эффекты: интерактивные и не очень 255
Интерактивные эффекты
В первую очередь мы остановимся на интерактивных элементах страницы -
сценариях, которые могут преобразовать ее для удобства пользователя.
Сценарий, меняющий изображение
Данный сценарий будет изменять изображение, когда на него наводят указатель
мыши, причем изменять случайным образом:
<SCRIPT language»"JavaScript">
var maxlmage=4;
function mOn(i) {
var j=Math.round ( Math.random()*maxlmage);
// Получаем случайное число
if(document.images) document.images["im"+i].src="image"+j+".gif";
// Присваиваем значение
256 Занятие И. Встречают по одежке
</SCRIPT>
numLine = 2:
// Задаем количество строк
StatusBar = new Array(numLine):
StatusBarQ] = "Сценарии на JavaScript - опасная, но полезная вещь!"
StatusBar[2] = "Осторожно, бегущая строка может завесить ваш компьютер!"
doLoop - true;
// Переменная, отвечающая за зацикливание
Speed = 100:
// Скорость печати: символ в миллисекунду
Pause - 1000:
// Величина паузы между посланиями
CurrentMessage = 1:
// Текущее сообщение
CurrentLetter - 0;
// Текущая буква
function ShowMessO {
if (CurrentMessage > numLine) {
// Если посланий стало больше, чем строк
if (doLoop) { CurrentMessage = 1; CurrentLetter = 0;
// и если указано зацикливание - начинаем сначала
} else { window. status « ""; return:}:
// Иначе возвращаемся к пустой строке состояния
}:
currentText = StatusBar[CurrentMessage]:
// Копируем в переменную currentText из строки состояния
if (CurrentLetter > currentText. length) { CurrentLetter = 0: CurrentMessage++:
// Если прошли все буквы - начинаем послание
setTimeout ("ShowMessO". Pause): }
else { Msg = currentText. substring(0. CurrentLetter + 1):
// Иначе добавляем букву
window. status - Msg: CurrentLetter++;
// Присваиваем строке состояния
setTimeout ( "ShowMess ( ) " . Speed) ;
</SCRIPT>
Эффекты: интерактивные и не очень 257
Полезные сценарии
В этот раздел вошли сценарии, использующие различные возможности Java-
Script, которые могут пригодиться вам при оформлении сайта.
Часы
Данный сценарий поможет вам научиться работать со временем с помощью
JavaScript (дата будет выглядеть по-разному в разных браузерах).
Исходный текст всей страницы:
<HTML>
<НЕАО>
<SCRIPT language="JavaScript">
<! --
function fulltimeO
{
var t1me=new OateO;
document . cl ock . f ul 1 . va 1 ue=t i me . toLoca 1 eStri ng( ) ;
setTimeout С ' f ul 1 tirae( ) ' . 500 )
</SCRIPT>
</HEAD>
<BODY>
<FORM name=clock>
<INPUT type=text size=40 name="full">
</FORM>
<SCRIPT language="JavaScript">
<!--
fulltimeO:
//-->
</SCRIPT>
</HTML>
Откуда посетитель
Этот сценарий может определить откуда (с какой страницы) пришел на ваш сайт
посетитель и какой у него браузер:
<SCRIPT language="JavaScript">
<!--
var where = document. referer;
var name = navigator. appName:
var vers = navigator. appVersion;
document. writeC'Bbi пришли с "+where+" <BR>A браузер у Вас: "+name+" "+vers+" "):
// -->
</SCRIPT>
Такой сценарий можно использовать для сбора собственной статистики.
Правая кнопка мыши
Как обработать нажатие левой кнопки мыши, мы знаем. А можно ли перехва-
тить нажатие правой? Можно. Это делается так:
9 Зак. 96
258 Занятие 11. Встречают по одежке
<SCRIPT language="JavaScript">
<!--
var те$5аде="3ачен ты нажал правую кнопку?":
function click(but) {if (document.all)
{if Сevent.button == 2)
jalert(message);return false:}}
if (document.layers) {if (but.which == 3)
{alert(message);return false:}}}
if (document.layers)
{document.captureEvents(Event.MouseDown):}
document.onmousedown=click:
// -->
</SCRIPT>
Cookie
Мгла истории скрывает, откуда пришел термин «cookie». Обычно говорят, что во
времена зарождения UNIX где-то использовалось словосочетание Magic Cookies.
С распространением Всемирной сети cookie превратилось в межплатформенное
явление, знакомое многим пользователям.
Для большинства работающих в Интернете взаимодействие с cookie заключается
во включении или отключении соответствующих параметров в браузере. Обыч-
но приходится обращать на них внимание в тех случаях, когда хочется остаться
неопознанным для сервера, на который требуется попасть, или, наоборот, когда
необходимо, чтобы сервер «узнавал» вас.
Cookie довольно редкий гость на персональных страницах. В основном потому,
что трудно самостоятельно взяться за это дело. Между тем, с их помощью мож-
но сделать свою страницу более интерактивной, интересной и, следовательно,
посещаемой.
Cookie — это небольшой текстовый файл, который хранит браузер. Браузер пе-
редает его серверу с каждым запросом как часть HTTP-заголовка. Некоторые
значения cookie хранятся только в течение одной сессии работы и удаляются
после закрытия браузера. Другие, установленные на некоторый период времени,
записываются в файл. В Netscape Communicator он называется cookies.txt и нахо-
дится в рабочей директории браузера. Internet Explorer хранит каждое значение
cookie в отдельном файле в отведенном для этого каталоге.
Так выглядит начало файла cookies.txt на компьютере автора:
# Netscape HTTP Cookie File# http://www.netscape.com/newsref/std/cookie_spec.html# This
is a generated file! Do not edit.
function fixDate(date) {
var base = new Date(O)
var skew - base.getTimeO
if (skew > 0) date.setTimetdate.getTimeO - skew)
}:
var now = new Date О
fixDate(now);
now.setTime(now.getTimeO + 365 * 24 * 60 * 60 * 1000):
var visits = getCookie("counter");
if (Ivisits) visits = 1:
else visits - parselnt(visits) + 1;
setCookie("counter", visits, now);
document.write("Вы посетили ною страничку данным браузером " + visits + " раз.");
// -->
</SCRIPT>
</НЕАО>
260 Занятие 11. Встречают по одежке
ПРИМЕЧАНИЕ
Казалось бы, что может сделать плохого небольшой стандартизованный файл, такой как
cookie? Сам по себе — ничего, а вот «дыры», оставленные разработчиками браузеров при
его реализации, могут принести немало проблем. Если вы решили использовать механизм
cookie на вашем сайте, будьте готовы, что их в один прекрасный момент могут запретить.
А также будьте готовы бороться с «червями» и «вирусами», которые решат вместо cookie
попасть на ваш компьютер.
Создание часов
Раз уж зашел разговор о полезных сценариях, необходимо хоть одним словом
обмолвиться о полезных фильмах. В данном небольшом проекте мы создадим
часы. Для начала — электронные.
Для их создания нам потребуется два динамических текстовых поля, связанных
с переменными myTlme и myDay, и два кадра. (Мы будем использовать лишь один
кадр; второй нужен только для того, чтобы фильм можно было запустить в ре-
жиме бесконечного проигрывания.)
Сценарий для определения времени будет следующим:
time = new DateO; // Создаем новый объект типа Date
hours = time.getHoursO: // Присваиваем переменным значения часов
min = time.getMinutesO: // минут
sec = time.getSecondsO: // и секунд
myTime = hours + ":" + min + ":" + sec;
WeekDay = time.getDayO: // Присваиваем переменным значения дня недели
year = tirae.getFullYearO: // года
month - time.getMonthO: // месяца
day = time.getOateO: // даты
myDay = day + " " + month + " " + year + " " + WeekDay:
Можно поступить проще: создать одно динамическое текстовое поле myTime и в
первом кадре ввести сценарий:
time = new DateO:// Создаем новый объект типа Date
myTime - time.toStringO:
В результате вы увидите строку подобного содержания:
Fri Sep 6 10:57:01 GMT+0400 2002
Теперь создадим классические часы со стрелками. Для этого нам понадобятся
круг и три клипа стрелок (разные или одинаковые — главное, чтобы у экземп-
ляров клипов были разные имена: НА, MA, SA). Изначально разместим стрелки
вертикально, а центры клипов — в центре циферблата. Для этого можно вос-
пользоваться, например, панелью Info (Информация) или Align (Выравнивание).
Осталось только в первом кадре разместить сценарий:
time = new DateO;
hours = time.getHoursO:
min = time.getMinutesO;
sec = time.getSecondsO:
Что нового мы узнали 261
HA._rotation=720*hours/24:
MA._rotation=360*min/60:
SA,_rotati on=360*sec/60;
Делу —время...
Во тьме безлунной ночи
Лисица стелется по земле,
Крадется к спелой дыне.
Мацуо Басе'1
На этом занятии
Чему — время, а чему — час, делу или потехе, зависит от того, что вам покажет-
ся сложнее: это занятие или следующее. Не всегда жизнь тиха и безоблачна, не
всегда можно заниматься только своим любимым делом, иногда приходится за-
ниматься разными формальностями — бегать, оформляя бумажки, писать офи-
циальные письма, заполнять анкеты, писать проекты и отчеты... Тоска, одним
словом. И, как правило, в любой работе набирается процентов 70 такой «тоски».
Но это только присказка, сказка — впереди.
На этом занятии мы с вами поближе познакомимся с формами — деловым ли-
цом HTML. Будь то анкета или гостевая книга, форма для отправки письма или
чат — все эти части сайта служат для обратной связи с вами, автором. Не то
чтобы это было обязательно. Сейчас не в каждом магазине найдешь «Книгу жа-
лоб и предложений», но каждый приличный магазин ее имеет — вдруг что-ни-
будь полезное напишут?
На сегодняшнем занятии мы узнаем:
• как задавать формы в HTML;
• как вставить ссылку на адрес электронной почты;
• как разместить гостевую книгу, опросник или чат на страницах сайта;
• как использовать Flash не только для развлечений;
• как использовать внешние данные, чтобы не переиздавать фильм заново.
Вы уже решили, какой вопрос вы зададите своим посетителям? Тогда вперед!
Слегка перефразирую Александра Сергеевича: «Как много нам открытий чуд-
ных готовит формализма век!»
1
В переводе В. Марковой.
Формы 263
Формы
Задать форму в HTML очень просто: пишешь тег <form> с атрибутами и вложен-
ными тегами, и форма готова. Однако данные, которые введет пользователь,
придется каким-то образом обрабатывать. Обычно это происходит так: пользо-
ватель нажимает кнопку Submit (Передать), и данные формы отправляются на
сервер, который с помощью заранее созданного сценария их обрабатывает.
А как быть, если у нас нет прав писать сценарии CGI? Выход есть, и он доволь-
но прост: можно написать функцию на JavaScript, которая при щелчке на кноп-
ке или изображении обработает введенные данные и осуществит какие-то дей-
ствия, например пошлет электронное письмо или изменит что-то в документе.
Но прежде всего мы просто познакомимся с формами.
Тег <FORM>
Для задания формы на web-странице служит тег <form>. Так как мы не рассмат-
риваем обработку данных формы на стороне сервера, для нас представляют ин-
терес только три атрибута: name, onreset и onsubmit. Оба последних параметра
ссылаются на функцию-обработчик: в первом случае — нажатия кнопки Reset,
во втором — Submit (речь идет о типах элементов формы, описываемых в теге
<input>). Атрибут name необходим для того, чтобы различать формы на странице.
HTML-код формы выглядит следующим образом:
<FORM пате="Имя_формы" опге5е!="Функция-обработчик_ге5е1" оп5иЬт11="Функция-
обработч и K_submi t">
ПРИМЕЧАНИЕ
Форма — совокупность элементов ввода, расположенная на одной странице и предназна-
ченная для получения информации от пользователя.
ПРИМЕЧАНИЕ
Практически все сценарии с элементами форм работают только на стороне клиента. Если
пользователь вместо щелчка мышью нажмет Enter, форма будет отправлена на сервер и
страница обновлена, а элементы страницы и формы получат первоначальные установки.
Кнопки
Согласно описанию стандарта HTML 4 на форме можно разместить кнопки трех
типов: button, submit и reset.
Тип submit соответствует стандартной кнопке диалоговых окон OK, a reset — Cancel.
Тип button — нейтральный тип, он не обновляет форму и не посылает данных на
сервер. Кнопки всех типов имеют одинаковые атрибуты: onclick — функция-
обработчик события onclick, value — значение кнопки (оно будет написано на
кнопке), name — имя кнопки. Если у вас в форме всего по одной кнопке каждого
типа, то событие нажатия кнопки лучше всего обрабатывать с помощью указа-
ния функции в атрибуте onsubmit формы. Итак, тег, задающий кнопку, будет вы-
глядеть следующим образом:
264 Занятие 12. Делу — время.,
</SCRIPT>
<FORM name="forma" onreset="change_color('cyan')" onsubmit="change_color('green')">
<INPUT type="submit" value="3Ta кнопка меняет цвет страницы на зеленый" name="Green">
<INPUT type="reset" va1ue="A эта - на голубой" name="Cyan">
</FORM>
</BODY>
</HTML>
Однако праздновать победу интерактивного дизайна еще рано. Если вы уста-
новите в методе onsubmit не зеленый, а красный цвет, то ожидаемой окраски
страницы в цвет революционного полотнища не произойдет — браузер обновит
страницу и установит прежний фон. Это можно обойти, использовав две кнопки
reset (или button) и их события onclick:
<HTML>
<BODY bgcolor="green">
<SCRIPT language="JavaScript">
var butt="green":
function change_color(butt) {
document.bgColor=butt;
</SCRIPT>
<FORM name="forma">
<INPUT type="reset" value=" Эта кнопка меняет цвет страницы на красный" name="red"
onclick="change_co1or(this.name)">
<INPUT type="reset" value="A эта - на голубой" name="cyan"
onclick="change_color(this.name)">
</FORM>
</BODY>
</HTML>
Кнопок может быть и не две, а гораздо больше. Таким образом, достаточно про-
стыми средствами можно приблизить далекую мечту об интерактивном сайте к
исполнению.
Картинка
С помощью типа image можно разместить на форме изображение. В отличие от
простого тега <img>, элемент формы, по сути, является кнопкой submit, с той лишь
Формы 265
разницей, что браузер может передать координаты щелчка мышью. Вид тега этого
типа следующий:
<INPUT type="image" name="Image" src="image.gif">
Когда вы научитесь писать сценарии обработки запросов па стороне сервера,
тип image будет вам полезен для создания графических кнопок, особенно если
надо разместить несколько кнопок на одной форме. В нашем же случае при ис-
пользовании обычной картинки или картинки-ссылки вы получите богатые воз-
можности для работы на стороне клиента.
Текст-
тег <INPUT> по умолчанию создает элемент типа text, однако при задании атри-
бутов лучше указать тип явно:
<INPUT type="text" name="Text" maxlength="5" size="6" value="Value">
Атрибут maxl ength указывает, сколько символов позволено ввести пользователю,
si ze — это размер поля в символах. В случае, если количество символов не огра-
ничено, при вводе за пределами поля они не будут видны. Параметр val ue содер-
жит начальное значение поля.
Первым примером формы с текстовым полем будет форма для получения кода
символов стандарта ISO (листинг 12.1). В частности, вы можете в HTML-доку-
менте писать вместо нестандартного символа его код в формате &$ХХХ, где XXX -
трехзначное число, код символа.
Листинг 12.1. Код HTML-страницы с формой для замены символа на его код и обратно
<HTML>
<BODY>
<SCRIPT language="JavaScript">
<!--
function code(cod) {
document . forma . Textl . va 1 ue=cod . charCodeAt ( 0 ) ;
}
function decode(cod) {
var i=String:
var j=parselnt(cod.!0):
// Распознаем целое число
if (isNaN(j)) а1ег1("Введите число правильно")
// Сравниваем с NaN (не числом) и выдаем предупреждение
else
if (j<256 && j>=33)
document . forma .Textl . val ue=i . f romCharCode( j )
// Иначе присваиваем, а если число выпадает из диапазона.
// снова выводим алерт
else alert ("Неправильный диапазон числа"):
</SCRIPT>
Кнопка "Код символа" при щелчке мышью заменяет введенный символ на его код. а кнопка
"Символ" заменяет код на символ.
<FORM name="forma">
<INPUT type="text" name="textl" maxlength="3" size="6" value="">
266 Занятие 12. Делу — время...
ПРИМЕЧАНИЕ
В аргументе функции alert() можно указывать следующие выражения для форматирования
текста: \Ь — разделитель слов, \f — смещение формы, \п — перевод строки, \г — возврат
каретки, \t —табуляция, \ — апостроф, \v — вертикальная табуляция \" — двойная кавыч-
ка, \ххх — символ, заданный тремя восьмеричными числами.
При нажатии кнопки Код символа сценарий будет менять содержимое текстового
поля на код первого символа, а при нажатии кнопки Символ менять код симво-
ла, содержащийся в текстовом поле, на сам символ. Таким образом, буква «а»
будет заменена на «97» после щелчка на кнопке Код символа и вернется обратно
после щелчка на кнопке Символ.
Если вы обратили внимание, в сценарии стоит проверка на попадание числа в
диапазон 33-255. Символы до 33 непечатаемые — пользователь не увидит их на
экране, а на символе с номером 256 заканчивается кодировка символов Latin-1.
Вы можете снять верхнее ограничение и увеличить атрибут maxlength текстового
поля; тогда в новых браузерах вы сможете получить все символы Unicode.
Функции charCodeAt и fromCharCode работают с кодами Unicode, поэтому в ста-
рых браузерах (Internet Explorer 3.0 и самых ранних Netscape 4.ОХ) сценарий
будет работать неправильно. Если вы хотите написать полноценный сценарий,
работающий и на старых браузерах, вам придется написать проверочное уело-
Формы 267
ПРИМЕЧАНИЕ
Unicode — универсальная кодировка символов, в которой символ записывается с помощью
2 байт. Первые 256 символов Unicode совпадают с Latin-1 (ISO 8859-1). В настоящее время
16
распределено около 29 000 позиций из 65 536 (2 ) возможных.
ПРИМЕЧАНИЕ
Функция parselnt (Numb,base) читает последовательно символы, пока не встречает нечисло-
вой символ. Например, parselnt (Fs,16) выдаст в качестве значения «F», a parselnt (lu,10) —
«1». В обоих случаях сценарий не выдаст предупреждения об ошибке.
Текстовое поле
Текстовое поле дает возможность пользователю ввести несколько строк текста.
Тег <textarea> имеет довольно много атрибутов, которые в основном касаются
обработки различных событий функциями JavaScript. Тег имеет следующий вид:
<TEXTAREA name="Text" cols="50" rows="10" wrap="hard"> Этот текст будет выведен
в текстовом поле</ТЕХТАРЕА>
Атрибуты cols и rows указывают количество столбцов (символов в ширину) и
строк в текстовом поле, то есть задают его размер. Параметр wrap определяет,
разрешен ли перенос слов (в данном случае он разрешен). Значение off отклю-
чит его, a soft — разрешит, но при этом не будет реакции на перевод строки.
Текст, расположенный внутри тега <textarea>, будет выведен внутри текстовой
области.
В качестве примера мы создадим поле-переводчик с русского на транслит -
запись русских букв с помощью созвучных латинских (листинг 12.3). В сцена-
рии будет использован оператор switch-case, который появился только в версии
JavaScript 1.2. Данный оператор сравнивает на равенство выражение, записан-
ное после слова switch, со значениями, указанными после слов case. Если не
найдено ни одного равенства, выполняются инструкции, идущие после слова
default.
Листинг 12.3. Конвертер с русского в транслит
<HTML>
<BODY>
<SCRIPT language-"JavaScr1ptl.2">
Формы 269
function translateO {
var newString="";
var NoTranslString=-"";
var oldString=document.forma.Text value;
var len-oldString.length:
var Char="";
for (var i=0; i<len; i++){
Char=oldString.substring(i.1+1);
// Считываем символы по одному
switch(Char){
// И распознаем
case "a" newString=newString ' (1 " break
case "6" newStri ng=newStri ng 'b" break
case "в" newSt r i ng=newSt r i ng V" break
case "r" newStri ng=newStri ng 'g" break
case "Д" newSt r i ng=newSt ring 41" break
case "e" newStri ng=newStri ng+"e 'e" break
case "e" newStri ng=newStri ng 'ус ; break
case "ж" newSt r i ng=newSt r i ng+"'Ztl
zh : break
case "з" newString=newString '/_-7 " break
case "и" newSt ri ng=newSt ring ' i " break
case "и" newSt r i ng=newSt ring ' "I1 " break
case "к" newSt ri ng=newSt r i ng+"k'k ' break
' 1 " break
case "л" newSt r i ng=newSt r i ng+"1"
case "м" newString=newString 'in" break
case "н" newStri ng=newStri ng 'n" break
case "о" newStri ng=newStri ng '0" break
case "п" newStri ng=newStri ng •p" break
case "р" newStri ng=newStri ng 1 r " break
case "с" newString=newString s break
case "т" newStri ng=newStri ng t." break
case "у" newSt r i ng=newSt r i ng+"u"
u" break
case "ф" newStri ng=newStri ng+"f" f" break
case "х" newString=newString+"h" 'h" break
case "ц" newStri ng=newStri ng 'c" break
case "ч" newString=newString+"ch 'ch : break
case "ш" newString=newString+"sh 'sh : break
case "и" newStri ng=newStri ng+"sh 'sh ": break
case "ь" newString-newString break
case "ы" newString=newString+"y" 'y"
,,и
break
case "ь" newString=newString+"' break
case "Э" newString=newString+"e 'e' break
case "ю" newString=newString+"yu" 'yu break
case "я" newString=newString+"ya" 'ya break
default: newStri ng=newString+Char:
// Если это не русская буква, оставляем как есть
•
}
document.forma.Text.value=newStri ng;
</SCRIPT>
<FORM name="forma">3TOT сценарий не будет работать в браузерах,
не поддерживающих версии JavaScriptl.2
<TEXTAREA name="Text" cols="50" rows-="10" wrap="hard"></TEXTAREA>
<BR>
<INPUT type="button" уа!ие="Перевести в транслит" name="transl" onclick="translate()">
270 Занятие 12. Делу — время...
</FORM>
</BODY>
</HTML>
Сценарий обработает только строчные буквы. Если вы хотите включить пропис-
ные, добавьте еще строки с оператором case.
ПРИМЕЧАНИЕ
Правила транслита взяты мной со страницы http://www.wowwi.orc.ru/cgi-bin/tt.cgi. Естест-
венно, вы можете задать другое соответствие символов — на это пока нет стандарта.
СОВЕТ
Если вы не хотите, чтобы пользователь прямо на странице видел ваш сценарий (а он
может просмотреть его, выведя код страницы), укажите в теге <SCRIPT> атрибут src —
ссылку на файл JavaScript. Это обычные текстовые файлы с расширением js. Например,
<SCRIPT src="MyCde.js"> </SCRIPT>. В любом случае пользователь все равно сможет
просмотреть сценарий, сохранив страницу (сценарий тоже будет сохранен в отдельном
файле) или просто введя нужную ссылку в строку адреса.
" ь " . " э " . "Ю". "я". "А". "Б". "В". "Г". "Д". "Е". "Г . " Ж " . "3". "И". "И",
"К". "Л". "М". "Н". "О". "П". "Р". "С", "Т", "У". "Ф", " X " , "Ц". "Ч". "Ill". "Щ", "Ъ". "Ы".
var Translit= new Array ("a", "b". " v " . " g " . " d " . " e " , " y o " . " z h " . " z " . " i " . "j".
"k"."1"."m"."n"."o"."p"."r"."s", "t". "u"."f"."h","c"."ch"."sh", "sh"', "y".
"'"."e'"."yu","ya"."A". "B". " \ / " , " 6 " . " D " , " E " . " Y O " . " Z H " . " Z " . " I " . "J".
" K " . " L " . " M " . " N " . " 0 " . " P " . " R " . " S " , "T". "U". " F " . " H " . " C " . " C H " . " S H " . " S H " " . "Y".
document.forma.Text.value=newStri
.
ng:
</SCRIPT> 1
Флажок
Флажок представляет собой обычный элемент формы для указания логических
параметров: «быть» или «не быть». Тег <input> этого типа выглядит следующим
образом:
<INPUT name="Checkbox" type="checkbox" checked value="3To флажок"
ondick="MyJavaScript">
В качестве примера создадим следующую страницу: разместим несколько рисун-
ков, а под ними — флажки (листинг 12.5). Если флажок установлен, видна ори-
гинальная картинка, если нет — стандартная (например, под цвет фона). Пусть
iml.gif — стандартная картинка, а im2.gif, im3.gif, im4.gif, im5.gif — оригинальные
картинки.
Листинг 12.5. Форма с флажками
<НТМ1_>
<BODY bgcolor="green">
<SCRIPT language="JavaScript">
</SCRIPT>
<FORM name="forma">
<IMG name="im2" src="im2.gif" height="20" width="120" border="0">
<IMG name="im3" src="im3.gif" height="20" width="120" border="0">
272 Занятие 12. Делу —время...
Переключатель
Переключатель является еще одним распространенным элементом форм. В нем
вы можете указать одно из нескольких значений на выбор. Выглядит тег <input>
типа переключатель следующим образом:
<INPUT type="radio" name="radiobutton" onclick="MyJavaScript" value="Value" checked>
В качестве примера мы вернемся к перекрашиванию экрана в цвета радуги — по
цвету на каждое положение переключателя (листинг 12.6). Идея аналогична ис-
пользованию кнопок.
Листинг 12.6. Форма с переключателем
<HTML>
<BODY bgcolor="red">
<SCRIPT language="JavaScript">
<!-•-
van butt="red":
function change_color(butt) {
document.bgColor=butt;
}
//-->
</SCRIPT>
<FORM name="forma">
<INPUT type="radio" name="radiobutton" onclick="change_color(this.value)" value="red"
checked>
Красный
<INPUT type="radio" name="radiobutton" ondick="change_color(this.value)"
value="orange">
Оранжевый
<INPUT type="radio" name="radiobutton" onclick="change_color(this.value)"
value="yellow">
Желтый
<INPUT type="radio" name="radiobutton" onclick="change_color(this.value)" value="green">
Зеленый
<INPUT type="radio" name="radiobutton" onclick="change_color(this.value)" value="cyan">
Голубой
<INPUT type="radio" name="radiobutton" onclick="change_color(this.value)" value="blue">
Синий
Формы 273
Раскрывающийся список
Если у вас на одной странице скопилось слишком много ссылок, можно дубли-
ровать их сверху всего одним раскрывающимся списком. Тогда вместо прокрутки
экрана пользователю будет достаточно выбрать элемент списка (листинг 12.7).
Листинг 12.7. Форма со списком
<HTML>
<BODY>
<SCRIPT 1anguage="javascript">
<!--
function ReffW(URL){
window.open(URL.'_top'):
}:
function Reff(URL){
top. wi ndow. 1 ocat i on=URL -.
}
//-->
</SCRIPT>
<FORM name="forwal">
<SELECT name="list" onchange="ReffW(this.options[this.selectedIndex].value)">
OPTION selected>BbopbiH переход к страницам:
<!--Этот список демонстрирует применение полного URL и метода window.open -->
OPTION value="http://.. ./pagel.html">Страница1
OPTION value-"http://.. ./pagel.html">Страница2
OPTION value="http://.. ./раде1.№ч1">СтраницаЗ
</SELECT>
</FORM>
<FORM name="forma2">
<SELECT name="list" onchange="Reff(this.options[this.selectedIndex].value)">
OPTION sel еЛе<3>Быстрый переход к разделам:
<!--Этот список демонстрирует применение относительного URL и объекта window.location -->
OPTION val ue="pagel.html">Страница1
OPTION value="page2.html ">Страница2
OPTION value="page3.html ">СтраницаЗ
</SELECT>
</FORM>
</BODY>
</HTML>
274 Занятие 12. Делу —время...
HTML-код довольно прозрачен. Тег <Select> — это тег списка. В качестве его ат-
рибута указано его имя list (каждый список в форме должен иметь свое уни-
кальное имя). Тег <option> — это тег для описания элементов списка; атрибут
value — значение элемента. Заметьте, что в списке отображается не значение,
а текст, идущий после тега option. Ключевое слово selected определяет положе-
ние списка по умолчанию.
Первый список демонстрирует применение абсолютного адреса и использует ме-
тод window.open для открытия нового документа в текущем окне. Второй список
использует объект window.location и относительный адрес. В качестве парамет-
ров функциям Reff и ReffW передаются значения выделенного элемента списка,
которые равны адресам нужных страниц. В зависимости от устройства ваших
ссылок вы можете использовать как полный адрес, так и относительный. Ис-
пользование метода window.open является предпочтительным, так как его синтак-
сис более устойчив, нежели location.
Единственный минус, который обнаруживает такой простой подход, — при воз-
вращении обратно на страницу со списком можно перейти только на другой ад-
рес (элемент списка), так как иначе не сработает событие onChange. Поэтому стра-
ница, где вы побывали, будет не доступна в данный момент для выбора (правда,
можно сначала выбрать пустой нулевой элемент, а потом снова нужный). Мож-
но исправить этот недостаток, добавив в функции по строке, возвращающей на-
чальный выбор (элемент с индексом 0):
<SCRIPT language="javascript">
<!--
function ReffW(URL){
document.forma1.11st.selectedIndex - 0;
window.open(URL.'_top');
}:
function Reff(URL){
document.fl.list.selectedlndex = 0:
top.window.location=URL: •
}
//-->
</SCRIPT>
ПРИМЕЧАНИЕ
Пользователь, отключивший у себя выполнение сценариев JavaScript, не сможет восполь-
зоваться таким списком. В этом случае полезно рядом со списком расположить кнопку submit,
заключенную в тег <NOSCRIPT>, тогда виртуальный путешественник сможет ее нажать.
Код будет примерно следующим: <NOSCRIPT><INPUT type=submit value=gox/NOSCRIPT>.
Кроме этого необходимо добавить к тегу <FORM> атрибуты action=URL и method="POST".
В параметре action надо указать URL файла сценария, который обработает посланное зна-
чение.
name=My Name
phone=943764
emai1=my e-mail
subject=tema
message=0snovnoe soderzhanie
Вместо строки Полный URL документа. html необходимо указать полный адрес доку-
мента. Однако если пользователь введет свое имя по-русски, на следующей
странице оно будет отображено неправильно, так как содержание формы будет
передано как часть URL в наборе символов UTF-8, который не содержит рус-
ских букв. Для того чтобы обойти эту проблему, можно по событию onsubmit
перекодировать русские буквы в латинские (см. раздел, посвященный тегу
<textarea>), а на странице-получателе произвести обратную процедуру. Однако
можно обойти проблему по-другому1. Надо вставить перед отправкой команду
1
Горячее спасибо за совет Сергею Круглову и Владиславу Пустынскому.
Готовые формы и услуги 277
Ссылка на e-mail
На любом сайте принято размещать ссылку на электронную почту web-мастера.
При щелчке на такой ссылке запускается почтовая программа, готовая к отправ-
ке письма. Для этого необходимо вместо обычного файла гиперссылки указать
e-mail после слова mail to:
diailto:Baui@email .ru
HTML-код ссылки будет, соответственно, выглядеть так:
<А href="mailto: ваш@етаЛ.ru">E-mail Web-мастера </А>
Можно в строке адреса указать и имя с фамилией или «ник»:
mallto: Имя Фамилия <ваш@етаП ,ги>
Также можно задать тему сообщения — subject. Это может быть удобно для
фильтрации сообщений в вашем почтовом ящике.
та1Но:Имя Фамилия <ваш@егааП .ru>?subject=nncbMo с сайта
Можно указать несколько электронных адресов подряд — они все окажутся в
строке письма Кому и станут его получателями.
бому сообщению или комментарию, тем самым создавая дискуссию. Таким об-
разом, гостевая книга может стать полноценной обратной связью с аудиторией
сайта.
.
Чаты
Если вам не по душе отложенное общение через гостевую книгу или форум и
вы хотите просто поболтать со знакомыми, находясь на работе, — создайте свой
чат. Серверов, предоставляющих готовые чаты в ваше распоряжение, также не-
мало, например www.chatcity.ru. Здесь вы можете получить в свое пользование
«комнату для разговоров» и настроить ее по своему вкусу: наклеить обои, за-
дать эмблему, определить цвета и многое другое. Правда, если никто не будет
посещать ваш чат в течение 15 дней, его могут закрыть и удалить — ведь если в
комнате никто не живет, ее сдают другому.
После того как вы пройдете регистрацию и создадите чат, поместите ссылку на
него на своих страницах. Таким образом, чат-камната станет неотъемлемой
частью вашего виртуального дома. Вот бы так в реальной жизни: вышел в дверь
городского офиса, а попал в дом на опушке леса...
Опросы
На занятии 2 вы познакомились с такой услугой сервера narod.ru, как опросы.
Не каждый посетитель станет тратить время на написание своего послания в
гостевой книге, зато два раза щелкнуть мышью на форме с опросом ни для кого
не составит труда. А вы сможете получить бесценный материал: от политиче-
ских и музыкальных пристрастий вашей аудитории до цвета обоев у вас на сай-
те и клички для принесенного сыном котенка.
Опрос — это небольшая форма с переключателем, раскрывающимся списком или
несколькими флажками. Пользователь устанавливает положение переключателя
или флажки и нажимает кнопку Голосовать. Сервер — обработчик опросов реги-
стрирует голос, в большинстве случаев следя при этом за его уникальностью
(по IP-адресу отправителя). На некоторых страницах с опросами результаты
видны на этой же форме, на других до них можно добраться через ссылку Ре-
зультаты голосования.
Интересные варианты опросов можно найти на www.voter.ru. Результат выводит-
ся в виде круговой или обычной диаграммы. Можно настроить цвет формы, па-
раметры шрифтов и задать обои. В качестве вопроса и вариантов ответа можно
использовать не только текст, но и изображения, что значительно расширяет
сферу применения опросов, причем в одном опросе может быть до ста ответов.
Можно блокировать повторное голосование с того же IP-адреса или компьюте-
ра. В настройке опроса вам поможет мастер, «живущий» на сервере.
Как говорится, «голосуй или проиграешь»!
Рассылка
Если ваш сайт перерастет в полномасштабный проект и вы будете его регуляр-
но обновлять, вы наверняка захотите сообщать об обновлениях своим постоян-
280 Занятие 12. Делу — время...
Формы во Flash
Так как Flash вполне пригодна для создания полноценного сайта, значит, и фор-
мы там можно создать и работать с ними. По сути дела, формы во Flash явля-
ются лишь одним из лиц многоликого бога Web — текста. Для ввода текста
пользователем используется тип текста Input text (Текстовое поле). Вы можете
выделить любое поле: для одного символа или для целой страницы текста.
И так как мы не затрагиваем работу на сервере, а интересуемся только клиент-
ской частью, то и использовать введенные данные мы можем только внутри
данной сессии.
ПРИМЕЧАНИЕ
Как вы увидите из раздела, посвященного использованию FSCommand, Flash без особого
труда может обратиться к помощи JavaScript и прочитать или записать cookies.
Текст и переменные
В качестве примера создадим простой фильм, который вначале будет просить
ввести данные. Следующий кадр определяется в зависимости от введенного
пользователем. Чтобы не касаться слишком серьезных тем, поможем выбрать
своему посетителю подарок, который он должен преподнести другу на день ро-
ждения (рис. 12.1).
282 Занятие 12. Делу — время...
ft Flash S-{present]
ф
Добрый день!
Меня зовут Зеленый Листогрыз!
А Вас? Пожалуйста, введите свое имя:
Создание формы
1. Для начала создадим новый фильм и выберем инструмент Text (Текст). От-
кроем панель Text Option (Параметры текста) и установим на ней в первом
списке — Input text (Текстовое поле), во втором — Single line (Однострочный),
а в Variable (Переменная) введем имя переменной, связанной с данным по-
лем — Name. В это поле пользователь введет свое имя, и дальше по ходу филь-
ма мы будем обращаться к нему по имени.
2. Чтобы пользователь имел возможность писать по-русски, установим на пане-
ли Character (Шрифт) какой-нибудь шрифт с пометкой Суг. И на панели Text
Option (Параметры текста) нажмем левую нижнюю кнопку Include entire font
outline (Встроить все символы шрифта) или две следующие — Include outlines
for uppercase (Встроить прописные буквы) и Include outlines for lowercase
(Встроить строчные буквы). Необходимо установить длину вводимой строки
равной 0, чтобы не накладывать никаких ограничений на длину имени.
3. Дальше создадим такое же поле для ввода возраста получателя подарка (на-
зовем его Age). Для возраста параметр Max Char (Максимальное количество
символов) можно установить равным 2 или 3, в зависимости от того, как вы
серьезно подходите к этому вопросу. Чтобы у пользователя не было возмож-
ности ввести буквы, необходимо нажать кнопку Include outlines for numbers
(Встроить элементы чисел). Для обоих текстовых полей необходимо устано-
вить флажок Border/Bg (Граница/Фон), чтобы пользователь правильно ассо-
циировал рамку с полем ввода, иначе как он будет его искать. Нам останется
только смоделировать переключатель (для указания пола получателя подар-
ка), и форма будет готова.
4. Так как во Flash 5 не предусмотрено стандартного переключателя, его при-
дется сделать самим. Можно сделать заготовку и затем использовать ее для
создания любых флажков. Как смоделировать переключатель? Надо создать
символ, в нем расположить кнопки. При событии release (то есть при нажа-
тии кнопки) переводить выключенную кнопку во включенное положение,
а включенную кнопку — выключать. Если завести символы для каждого со-
стояния, то такой шаблон будет легко использовать и в дальнейшем.
Формы во Flash 283
button
Eatingpiller
Foot
FootD
Footl
head
Щ Part
Переключатель
Элемент
ЭлементНажа
10. В слое туловища надо нарисовать зеленый эллипс с контуром, затем с по-
мощью инструмента Arrow (Стрелка) превратить его в более бесформенную
фигуру и удалить контур, для красоты дорисовать пяток разноцветных воло-
синок сверху.
Основная часть гусеницы закончена. Осталось нарисовать голову и собрать
все вместе.
11. Голова будет нарисована в отдельном графическом символе Head, в несколь-
ких слоях: приплюснутый сверху зеленый овал, на нем сильно вытянутый
в стороны более темный эллипс носа, вертикально вытянутые глаза, состоя-
щие из белого и синего эллипсов, и красный рот. Для того чтобы нарисовать
улыбку, создайте красный круг с контуром и инструментом Arrow (Стрелка)
превратите его в кривое лезвие. Если вы нарисовали волосы на деталях гусе-
ницы, нарисуйте их и на голове.
12. Создайте последний клип — Eatingpiller. В нем мы соберем гусеницу и заста-
вим ее двигаться по экрану (рис. 12.3).
13. Сначала разместите на столе с десяток клипов Part друг за другом. Затем раз-
местите спереди голову. Последние элементы постепенно уменьшите до 80 %,
286 Занятие 12. Делу — время...
14. Потом задайте раскадровку движения и вставьте ключевой кадр 120 (F6).
В первом кадре передвиньте группу до упора вправо, а в кадре 120 — влево.
Если теперь прокрутить считывающую головку по киноленте, гусеница по-
ползет справа налево.
15. Вернемся к главной сцене, выбрав Scenel в списке, раскрывающемся при
щелчке на кнопке в правом верхнем углу. Поместим новоиспеченный клип
вниз стола, под формой. Теперь, пока пользователь будет решать, сколько же
лет его девушке, гусеница будет маршировать внизу.
Подарки
Будем считать, что посетитель серьезно отнесся к нашему предложению и за-
полнил форму. Нам осталось только ее обработать.
1. Сначала проверим, что в первом кадре сцены стоит команда stop. Форма нам
больше не понадобится — вставим второй пустой ключевой кадр (F7). В нем
на столе поместим еще один экземпляр гусеницы. Затем вставим ключевой
кадр 59 (вы можете выбрать любой другой) и в нем на панели Instance (Эк-
земпляр) изменим поведение клипа — выберем в списке Behavior (Поведение)
пункт Graphic (Графический символ), в следующем списке — Single Frame (Один
кадр) и установим кадр 58. Таким образом, гусеница проползет почти до сере-
дины пути и замрет на кадре 58, маршируя на месте.
2. В этом же кадре нам надо вставить основной текст «решения». Инструментом
Text (Текст) напишем приветствие и результат, оставив место под переменные:
Уважаемый (ая) После продолжительных размышлений я пришел к выводу, что лучший
подарок.который вы можете сделать,это -
3. Заведем еще два слоя: один для текстовых переменных (Текст), другой — для
изображений подарков (Презент). В слое Текст обозначим два блока динами-
Формы во Flash 287
ческого текста: после слов «Уважаемый (ая)» и после слов «это - ». Для пер-
вого в поле Variable (Переменная) укажем Namel, а для второго — Present. Не-
обходимо выровнять эти поля так, чтобы они попадали в одну строку с
основным текстом. Учтите, что размер имени может быть достаточно боль-
шим, так как мы его не ограничивали.
4. Теперь необходимо выполнить еще одну подготовительную операцию. Дело в
том, что в моей версии Flash нельзя печатать русскими буквами внутри пане-
ли Actions (Действия) и нельзя просто так добавить к строке символ «!». Зато
можно завести динамические текстовые поля, сопоставить им переменные,
ввести нужный текст и использовать переменные вместо символов. Тогда,
если понадобится изменить название подарка, можно будет просто перепеча-
тать текст в нужное поле. Весь вспомогательный текст, естественно, должен
располагаться за пределами стола.
Нам понадобятся переменные со следующими значениями (текст, набранный
в поле):
.
Q Comforter — соска;
Q Doll — кукла;
Q Flower — букет цветов;
Q Beer — пиво;
Q Auto — игрушечная машинка;
Q S- !
5. Раз уж мы вспомнили о служебных делах, вернемся к первому кадру и созда-
дим два поля динамического текста — Warning и WarningText. Поле WarningText
следует расположить за пределами стола: в нем будет храниться текст преду-
преждения — Введите возраст правильно. Текст в поле Warning лучше сделать не
очень крупным и яркого, например красного, цвета. Если пользователь введет
буквы вместо цифр в поле возраста, это предупреждение появится на экране.
6. Теперь настал черед заняться программированием. В кадре 59 необходимо
ввести следующий сценарий:
Namel=Name + S:
if (Age<2 or Age>90)
{Present=Comforter}
else
{ if ( Gender<l)
{if ( Age>=2 and Age<16 )
(Present-Doll}
else
{Present=Flower}
}
else
{ if (Age>=2 and Age<16 )
{Present=Auto}
else {Present=Beer}
!:
gotoAndPlay(Present):
7. Основное содержание сценария — конструкция if...else. В результате вы-
полнения сценария в зависимости от указанного возраста и пола переменная
288 Занятие 12. Делу —время...
Present получит одно из следующих значений: соска, кукла, букет цветов, пиво,
игрушечная машинка. Последняя инструкция сценария отправит фильм на кадр
с именем-меткой, равным значению этой переменной.
8. Теперь осталось немного рутинной работы. В слой Презент необходимо вста-
вить ключевые кадры 60, 70, 80, 90 и 100. Каждому из этих кадров необходимо
дать имя на панели Frame (Кадр) в поле Label (Метка). Имена, как вы, навер-
ное, догадались, берутся из того же списка значений переменной Present (мет-
ки будут выделены на киноленте флажком и названием). Дальше необходимо
заготовить символы-рисунки для всех подарков (будет проще, если символы
получат те же имена). Можете нарисовать их или экспортировать готовый
растровый или векторный рисунок.
9. Когда символы будут готовы, надо вставить каждый из них в свой именной
кадр в слое Презент где-нибудь слева от гусеницы (рис. 12.4).
«Ц Flash 5 - [present]
1
Т!•
Рис. 12.4. Гусеница и подарок
:
• '
СОВЕТ
Если сценарий не жесткий и вы точно не уверены, сохранит ли кадр перехода свой номер
или вам придется его передвинуть, лучше дайте кадру имя и в команде goto укажите имя,
а не номер.
Generator Objects
:|Common
[HI Basic Charts |gg| Insert GIF File Ц Insert JPEG File Щ Insert Symbol |g Insert Flash Movie
$Jy Insert MP3 File Щ| Insert PNG File |j» Insert Sound Щ List y|j Multipage List
^ Pie Chart FQ Plot Ц Radio Button [S3 Scrolling List И Stock Chait
|Ш Table Й Ticker
•:...,,.•..-:; •••,. i
ВНИМАНИЕ
Будьте внимательны при публикации фильма в Сети, ведь кроме HTML-файлов вам надс
разместить на сервере и файлы фильмов (SWF-файлы), а при использовании шаблоное
генератора — и файлы типа SWT (они окажутся автоматически в папке вместе с файлов
фильма при публикации). Также надо не забыть про текстовый файл с данными.
Круговая диаграмма
Сначала создадим новый фильм и перенесем на стол с панели Generator Objects
(Объекты генератора) круговую диаграмму (Pie Chart). Двойной щелчок на диа-
грамме откроет панель Generator (Генератор) с параметрами выбранного объек-
та. Верхний список этой панели позволяет менять тип объекта. Если вас не уст-
роит круговая диаграмма, можете выбрать простую (Basic Charts) или график (Plot).
Круговая диаграмма имеет 11 параметров (рис. 12.7). Установим их по оче-
реди.
• Data Source (Источник данных) — это имя файла, который мы будем исполь-
зовать в качестве источника данных для диаграммы. В качестве его значения
укажите файл data.txt; впоследствии вы можете указать его полный URL. Если
файл расположен в другой папке, необходимо указать полный путь.
• Depth (Высота) — высота (толщина) цилиндра диаграммы. Каждая единица
данного свойства равна 1/20 пиксела. Напечатайте 800, чтобы задать высоту
40 пикселов.
• Value Display (Отображение значений) — свойство может принимать значения
Always (Всегда), Never (Никогда) и Rollover (При прохождении указателя).
Я установлю Always (Всегда), чтобы выводить на диаграмме считанные значе-
ния.
• Value Format (Формат значений) — можно указать тип шрифта: Arial, Times и
Courier. Если вам, как и мне, нравятся шрифты с засечками, установите значе-
ние Times.
Формы во Flash 291
Generator
I
Pie Chart
3ate Source data.txt
Depth 800
Color
32
f4
ft Flash 5-[chart]
.,; I .. Ш \ I ''..Л:-, Г,-',.,-, W,,,,,.l,.- Щ
¥ Netscape 4.x
Netscape сотр.
Остальные обозреватели
Текстовые данные
Flash позволяет использовать текстовые внешние данные и без привлечения
объектов генератора. Для этого служат команды ActionScript:
• loadVariablesNuraQ — функция загружает переменные, уровень переменных
указывается числом;
• loadVariablesO — функция загружает переменные в клип, в аргументах функ-
ции указывается имя экземпляра клипа.
Первая функция loadVariablesNumO служит для загрузки значений переменных в
сам фильм. Например, чтобы загрузить переменные из файла, можно написать
следующую строку сценария:
1oadVariablesNum("MyData.txt". О ) ;
294 Занятие 12. Делу — время...
ПРИМЕЧАНИЕ
Вы можете встроить один фильм Flash в другой, используя различные уровни (levels). Кор-
невой уровень — levelO, он устанавливает фоновый цвет и скорость прокрутки кадров
фильма. Вы можете задать до 16 000 уровней в одном фильме, если захотите. Текущий
проект имеет уровень с номером 0 — levelO. По умолчанию редактор ActionScript устанав-
ливает именно нулевой уровень, и если вы правильно укажете URL текстового файла, то
все остальное произойдет автоматически, включая установку правильного уровня.
ПРИМЕЧАНИЕ
Если вы работаете в нормальном режиме (Normal), вы не найдете этой функции в списке
действий. Перейдите в режим эксперта, выбрав вторую строку в раскрывающемся меню
панели Actions (Действия). Строка LoadVariablesNum теперь будет в списке Actions (Дейст-
вия).
СОВЕТ
Если вы хотите использовать возможности HTML для форматирования текста, установите
флажок HTML. В этом случае вам придется соблюсти все правила синтаксиса этого языка.
Anekdot - Блокнот
flnekdot 1=Однажды Ньютону гости пожаловались, что калитка в его сад туго
открывается, и попросили сделать другую, получше.
- Я не знаю, куда лучше, - ответил Физик. - И так каждый входящий наливает в
бак для дона не меньше галлона воды.8Anekdot2=Некий банкир спросил однажды
М.Твена:
- Чен объяснить, что у вас так нного мозгов и так мало денег?)
- Видите ли, - ответил знаменитый писатель, - природа любит равновесие,- В
среднем у нас с вами поровну.8
Рис. 12.10. Так выглядит текстовый файл Anekdot.txt в Блокноте с включенным переносом
по словам
Flash S- [Anekdott
Параметры клипа
Создадим еще один простой фильм, в котором из файла будут считываться зна-
чения свойств клипа. Таким образом можно создать фильм, который можно бу-
дет легко изменять, заменяя только текстовый файл.
Для создания фильма нам понадобится символ-клип. Каким он будет — не так
важно: можно, например, воспользоваться стандартным клипом, находящимся в
библиотеке Flash.
1. Создайте новый фильм, затем выберите команду Window > Common libraries >
Movie Clips (Окно > Общие библиотеки > Клипы).
2. В открывшемся окне библиотеки найдите клип самолета Biplane. Разместите
клип на столе в левом верхнем углу.
3. Нажмите Ctrl+I, чтобы открыть панель Instance (Экземпляр). На ней задайте
имя клипа — Plane.
4. Сохраняя выделение клипа, откройте панель Actions (Действия). В редакторе
ActionScript введите следующий сценарий:
onClipEvent (mouseUp) {
loadVariables ("plane.txt". Plane):
this._x = x;
this._y = y;
this._alpha = alpha;
this._xscale = width:
this._yscale = height;
this._rotation = spin;
}
5. Если у вас установлен нормальный режим, дважды щелкните на команде
loadVariables в папке Actions (Действия). В нижней части панели Object Actions
(Действия с объектом) задайте в списке Location (Расположение) вариант
Target (Объект), как показано на рис. 12.12. Введите имя экземпляра Plane
в поле, расположенном правее данного списка.
6. Теперь осталось создать текстовый файл plane.txt. В него надо поместить при-
мерно такой текст:
x=200&y=200&a1pha=50&width=150&height=150&spin=-90&
ВНИМАНИЕ
В случае использования команды loadVariablesQ текст необходимо заканчивать символом
амперсанда.
Рис. 12.13. Так будет выглядеть самолет после двойного щелчка (для сравнения на столе
расположен еще один символ самолета)
298 Занятие 12. Делу — время...
Меню
Меню и раскрывающийся список не являются обязательными атрибутами форм,
однако они могут пригодиться вам для оформления навигации по фильму или
оформления коллекций и фотоальбома.
Мы сейчас с вами создадим маленькое меню, которое будет отображать в поле
выбранный символ.
1. В новом фильме на столе нарисуем прямоугольник 150x40 пикселов (контро-
лировать размеры можно с помощью панели Info (Информация)).
2. Выделим прямоугольник и нажмем F8, преобразуя его в графический символ
Прямоугольник.
3. Далее нажмем Ctrl+F8 для создания еще одного символа, на этот раз кнопки
Компонент меню. В кнопке по центру стола необходимо расположить экземп-
ляр символа Прямоугольник. Затем сделать ключевыми кадры Up (Приподнята),
Over (Под указателем) и Down (Нажата). В каждом из кадров на прямоуголь-
ник необходимо наложить свой оттенок (Tint) с помощью панели Effect (Эф-
фект).
4. Снова нажмем Ctrl+F8 и создадим клип под именем Меню. В нем по центру эк-
рана надлежит разместить кнопку Компонент меню.
5. Теперь надо вставить ключевой кадр 2 и в нем справа от кнопки разместить
еще 4 ее экземпляра. Чтобы получилось ровно, можно воспользоваться услу-
гами панели Info (Информация). Если установить черный квадратик в левый
верхний угол, то координаты четырех экземпляров должны быть следующи-
ми: X для всех будет равен 75, a Y — 20, 20, 60 и 100.
6. Теперь необходимо добавить еще два слоя и задать имена: основной (сред-
ний) слой должен получить название Меню, нижний слой — За меню, а верх-
ний — Текст. В слое Меню должны располагаться элементы меню (те, которые
мы разместили в предыдущем пункте), в слое Текст — подписи пунктов, а слой
За меню будет служить хранилищем вспомогательного символа Невидимая кноп-
ка. Чтобы создать этот символ, нажмите Ctrl+F8, выберите тип Button (Кнопка)
и нарисуйте прямоугольник в кадре Hit (Срабатывание), заведомо больший,
чем раскрытое меню. В кнопке должен быть только один ключевой кадр.
7. Создадим клип Экран, который будет отражать сделанный выбор. В нем
должно быть 5 кадров (все ключевые). В первом кадре надо установить ко-
манду stopO. Каждому кадру необходимо дать имя в поле Label (Метка) на
панели Frame (Кадр). Имена будут простые: 1, 2, 3, 4 и 5.
Формы во Flash 299
13. Если у вас установлен нормальный режим работы, то после выбора команды
on из папки Actions (Действия) вам надо будет лишь указать нужный фла-
жок — Roll Over (При прохождении мыши), а затем щелкнуть на команде
gotoAndStopO и ввести up. Теперь, когда мышь окажется над основным пунк-
том меню, клип перейдет к выполнению кадра up.
14. Для остальных пунктов меню сценарий будет другой:
on (release) {tellTarget (". ./Field"){gotoAndStop (2);}
300 Занятие 12. Делу — время...
Он означает, что при нажатии на элемент меню экземпляр клипа под именем
Field перейдет к выполнению кадра с именем 2. Естественно, что у второго
пункта будет стоять 3, у третьего — 4, и т. д.
Кроме этого, на панели Instance (Экземпляр) необходимо указать в списке
Options (Параметры) пункт Tracas Menu Item (Отслеживать как пункт меню).
15. Осталось только сопоставить сценарий клипу Невидимая кнопка. Сначала
вставим его во второй кадр нижнего слоя так, чтобы он покрыл все меню. За-
тем выделим его, откроем окно редактора ActionScript и введем следующий
сценарий:
on (rollOver) { gotoAndStop ("noup"):}
Теперь, как только мышь пройдет над не закрытой другими кнопками по-
верхностью экземпляра, сработает сценарий, и клип перейдет к первому кад-
ру — noup.
16. Осталось навести красоту. В слое Текст напишем над основным меню любое
подходящее слово. Над пунктами (но только во втором кадре) разместим
уменьшенные экземпляры символов 2, 3, 4 и 5.
Меню готово (рис. 12.15). Нажимаем Ctrl+Enter и проверяем результат (рис. 12.16).
on (release)
telTrarget ("../Field") {
gotMndstop
.-;-.. - . - :
Рис. 12.15. Так будет выглядеть клип меню
| Flash 5 - [Menu]
ВНИМАНИЕ
В параметрах команды GetURL можно указывать как относительный, так и абсолютный
адрес. В случае абсолютного адреса название протокола перед ним обязательно, то есть
ссылка должна начинаться с http://.
302 Занятие 12. Делу— время...
Object Actions
iaf jit Object Aetior?L
|l||f|||http://dimvovich.narod.ru/index. html
'..'. ;•- . ' ' '•-• '• .''."• .'!. ". J
[Don't send
Object Actions
"iiiindoi
on't send
Frame Actions
Г
Г
</SCRIPT>
<SCRIPT language=VBScript>
Sub JSandFlash_FSCommand(ByVal corns, ByVal arg)
call JSandFlash_DoFSCommand(coms, arg)
end sub
</SCRIPT>
<BOOY bgcolor="#FFFFFF">
OBJECT id=JSandFlash classid="clsid:D27CDB6E-AE6D-llcf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cabfversion
=5.0.0.0" width=550 height=400>
<PARAM name=movie value="FlashandJS.swf"> <PARAM name=quality value=high> <PARAM
name=bgcolor value=#FFFFFF> <EMBED name="JSandFlash" swLiveConnect="true"
src="FlashandJS.swf" quality=high bgco1or=#FFFFFF width=550 height=400
. type="app1ication/x-shockwave-flash"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?Pl_Prod_Version=S
hockwaveFlash"></EMBED>
</OBJECT>
</BODY>
</HTML>
Вот и все. Теперь вы сможете не только передавать данные из фильма в фильм,
но и сохранять данные из Flash-фильма на компьютере пользователя, восполь-
зовавшись механизмом cookie. Без сомнения, это добавит интерактивности на
ваши страницы.
Необходимо заметить, что существует более простой способ работы с FSCom-
mand: возложить все на плечи Flash. Для этого в параметрах публикации необ-
ходимо на вкладке HTML установить в верхнем списке пункт Flash with FSCommand.
Теперь при публикации проекта Flash сам добавит необходимый код в HTML-
страницу (листинг 12.10). Такая страница будет выглядеть так:
Листинг 12.10. HTML-страница с FSCommand, созданная Flash
<HTML>
<HEAD>
<TITLE>F1ashandJS</TITLE>
</HEAD>
<BODY bgcolor="#FFFFFF">
<SCRIPT language=JavaScript>
•
var InternetExplorer = navigator.appName.indexOfC'Microsoft") != -1;
// Handle all the the FSCommand messages in a Flash movie
function FlashandJS_DoFSCommand(command, args) {
var FlashandJSObj = InternetExplorer ? FlashandJS : document.FlashandJS:
//
// Place your code here...
//
}
// Hook for Internet Explorer
if (navigator.appName && navigator.appName.indexOfC'Microsoft") != -1 &&
navigator.userAgent.indexOfC'Windows") != -1 && navigator.userAgent.indexOft"Windows
3.1") == -1) {
document.write('<SCRIPT language=VBScript\> \n'):
document.write('on error resume next \n'):
document.write('Sub FlashandJS_FSCommand(ByVal command. ByVal args)\n');
document.write('call FlashandJS_DoFSCommand(command. args)\n');
document.write('end sub\n');
306 Занятие 12. Делу — время...
document.write('</SCRIPT\> \ n ' ) :
}
//-->
</SCRIPT>
<!-- URL's used in the movie-->
<!-- text used in the movie-->
OBJECT classid="c1sid:D27CDB6E-AE6D-llcf-96B8-444553540000"
codebase-°"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cabiversi on
=5.0.0.0"
id=FlashandJS width=550 height=400>
<PARAM name=movie value="FlashandJS.swf"> <PARAM name=quality value=high> <PARAM
name=bgcolor value=#FFFFFF> <EMBEO src="FlashandJS.swf" quality=high bgco1or=#FFFFFF
width=550 height=400 swl_iveConnect=true name=FlashandJS type="app1ication/x-
shockwave-flash"
PLUGINSPAGE="http://www.macromedia,com/shockwave/download/index.cgi?Pl_Prod_Version=S
hockwaveFlash"></EMBED>
</OBJECT>
</BODY>
</HTML>
Теперь вместо красноречивой надписи // PI асе your code here... необходимо
вставить свой код:
mess="Privet Flash!"
if (command=="dateToF1ash") document.FlashandJS.SetVariableC'text". mess)
if (command=="dateToJS") alert(args)
Обратите внимание, что в своей реализации я использовал разные имена для
названия проекта (FlashandJS) и id и name в коде (JSandFlash).
И наконец, еще один пример. Предположим, что вы решили реализовать Flash-
проект не в виде встроенного объекта web-страницы, а в виде самостоятельной
программы. Для этого, во-первых, вам необходимо настроить параметры публи-
кации, выбрав команду File > Publish Settings (Файл > Настройка публикации). На
вкладке Formats (Форматы) установите флажок Windows Projector (Исполняемый
файл в Windows). Если снять флажок Use Default Names (Использовать имена по
умолчанию), вы сможете задать любое другое название программы. Теперь, если
опубликовать проект командой Publish (Опубликовать), появится ехе-файл, ко-
торый сможет работать даже без Flash Player, на компьютере, который даже не
подозревает о существовании Flash.
Однако окно созданной программы (а любой исполняемый файл — это про-
грамма) имеет неприятные особенности: там присутствуют стандартное и кон-
текстное меню Flash, в заголовке написано Flash и т. д. От большинства этих не-
нужных деталей можно избавиться, введя в первый кадр фильма следующий
сценарий:
fscommand ("fullscreen", "true");
fscommand ("allowscale". "true"):
fscommand ("showmenu", "false"):
fscommand ("trapallkeys". "true"):
Кроме того, необходимо предусмотреть выход из программы, назначив какой-
либо кнопке команду:
fscommand ("quit"):
Что нового мы узнали 307
На этом занятии
У меня за окном вдруг наступило лето — после долгой холодной весны все рас-
цвело, выпустило листья. Там, где еще недавно лежал снег, отцветают одуван-
чики, распустились ландыши и сирень... Настроение — абсолютно не рабочее,
тянет на какие-то подвиги: прокатиться куда-нибудь далеко на велосипеде,
сплавать на байдарке. Так что и на нашем занятии мы перед заключительным
рывком немного отдохнем или, точнее сказать, дадим отдохнуть другим — посе-
тителям вашего будущего сайта. Сегодня речь пойдет об играх — простеньких
компьютерных играх, дающих возможность расслабиться в течение трудового
дня. Это занятие будет скорее закреплением пройденного материала. На нем мы
повторим:
• как сделать бегущую строку на JavaScript и организовать передачу данных
между страницами;
• как программно передвинуть и дублировать клип во Flash;
• как обрабатывать событие нажатия определенной клавиши на клавиатуре.
Вспомнив все это, мы достаточно простыми средствами сможем сконструиро-
вать игру, которая поможет немного отвлечься посетителям вашего сайта, а вам
добавит опыта в создании web-страниц.
1
Там же.
2
Вопросы дизайна мы здесь обсудим лишь на общем уровне, так как они отнимают непропорцио-
нально много времени и места в книге.
310 Занятие 13. Что наша жизнь? — Игра
1?гШмВДшш1ВшД11т1ниМ
2. В новом файле выберите команду Таблица > Вставить таблицу. Задайте пара-
метры таблицы: 6 строк и 1 столбец.
Верхняя ячейка будет служить своеобразным логотипом страниц с задачами.
Мы поместим на нее в качестве фона рисунок зубцов на стене. Если вы ре-
шили, что фоном будет кирпичная кладка, то надо указать в качестве фона
таблицы файл с изображением. Можно не указывать файл фона, а сделать
фон всей страницы, например, черным. Для того чтобы изменить свойства
страницы или таблицы, нажмите правую кнопку и выберите соответствую-
щую команду.
СОВЕТ
Основная проблема дизайна, связанная с выбором рисунка или фона, заключается в том,
что если задать размер таблицы жестко, то при большом разрешении сбоку будет виден
фон страницы, а если ширину ячеек указывать в процентном отношении, то сложно будет
управлять размещением текста.
пока нет, можете выбрать для примера любой GIF-файл, по ширине кратный
760 пикселам.
ПРИМЕЧАНИЕ
Мы будем ориентироваться на разрешение экрана 800x600. Реальная ширина окна при та-
ком разрешении составляет примерно 760 пикселов.
5. Следующая ячейка будет пустой: она будет служить для отделения картинки
от текста. Ее ширина тоже составляет 100 % от ширины окна. Для этой ячей-
ки необходимо задать и высоту. Для этого надо нажать кнопку Дополнительно,
а затем — Добавить, и в поля открывшегося диалогового окна внести атрибут
и его значение: height и 5.
6. Третья ячейка будет содержать основной текст. В нее просто надо вставить
текст задачи.
7. Четвертую ячейку необходимо сначала разбить на два столбца, задав каждо-
му ширину в 50 % (Таблица > Разбить ячейки). Эти хитрости с разбиением
нужны для вычисления, на какой двери был сделан щелчок мышью.
8. Теперь в каждую половинную ячейку надо вставить таблицу, также состоя-
щую из двух столбцов. В центральные ячейки строки необходимо вставить
рисунок двери командой Вставка > Изображение. Потом мы вставим тег фор-
мы, чтобы браузер автоматически обработал координаты щелчка.
9. В крайние ячейки необходимо вставить текст табличек-подписей, указав этим
ячейкам отдельный фон или фоновое изображение. Цвет можете выбрать лю-
бой — исправите потом при редактировании кода. Для задания произвольно-
го цвета выберите из списка пункт Специальный.
10. Следующая ячейка также будет служить разделителем текста и рисунков и
будет выполнена так же, как и вторая, только фон у нее будет уже другой -
зеленая трава или по-другому развернутые камни мостовой.
11. Последняя ячейка, также с зеленой травкой в качестве фона, будет содержать
заключительный текст. Страница готова. Сохраним ее, дав команду Сохранить
как > Как файл.
Теперь откроем файл в обычном текстовом редакторе (например, в Блокноте) и
посмотрим, какой же код написал FrontPage Express.
СОВЕТ
Можно редактировать HTML-код и не выходя из FrontPage Express. Достаточно выбрать ко-
манду Вид > HTML.
<TD><IMG
src="Baui_URL/door.gif"
width="250" height="235"></TD>
<TD bgcolor="#COCOCO" align="center">B одной из этих
комнат находится
принцесса; кроме того, в
одной из этих комнат сидит
тигр</ТО>
</TR>
</TABLE>
</CENTER></DIV></TD>
</TR>
<TR>
<TD colspan="2" height="5" background="image/bottom.g1f"> </TD>
</TR>
<TR>
<TD colspan="2">- А это правда, что
здесь написано? - спросил
узник.<Р>- На одной - правда. -
отвечал король. - на другой
- нет.</Р>
<P> :</P>
</TD>
</TR>
</TABLE>
</CENTER></DIV>
</BODY>
</HTML>
Получившийся код, по крайней мере, не запутанный. Все просто и ясно, хотя и
много лишнего.
1. Сначала изменим заголовок — исправим теги <МЕТА>:
<МЕТА name="DESCRIPTION" соп1е1и="Головоломка Принцесса или тигр?">
<МЕТА name="KEYWORDS" content-''логическая головомка">
2. Первый тег <МЕТА> из оригинала можно просто убрать — он будет мешать ра-
боте большинства серверов. И тег <tit!e> тоже должен стать более содержа-
тельным:
<ТШЕ>"Головоломка Принцесса или тигр?"</ТШЕ>
3. В теге <body> можно изменить цвет текста, выбрав из более богатого диапазо-
на цветов.
4. Естественно, что все ссылки на картинки лучше заменить относительными:
background="image/brick.gif"
Заметьте, что использование разбиения на две строки приводит к появлению
в тегах <td> встроенной таблицы атрибута colspan="2". Это означает, что
ячейка занимает два столбца.
5. Совершенно безопасно можно убрать все неразрывные пробелы, составляю-
щие лишний код, — . Как уже было сказано ранее, хорошим стилем бу-
дет заменить дефисы в тексте на символ тире — —, а в начале строк — на
последовательность — .
6. Теперь осталось вставить формы, прописать атрибут alt для рисунков дверей
и убрать рамки вокруг изображений. В форму мы добавим скрытый элемент,
который будет передавать символьный номер страницы с задачей и нажатую
314 Занятие 13. Что наша жизнь? — Игра
<FORM name="forma"action="test.html">
<INPUT type="hidden" name="test" va1ue="s">
<TD>
<INPUT type="image" src="image/door.gif"
width="250" height="235" alt="Door I" border="0">
</TD>
</FORM>
</TR></TABLE></CENTER></DIV></TD>
<TD width="50r><DIV align="center"><CENTER><TABLE border="0" cellpadding="0"
cellspacing="0"><TR>
<FORM name="forma"action="test.htinl">
<INPUT type="hidden" name="test" value="f">
<TD>
<INPUT type="image" src="image/door.gif"
width="200" height="250" a1t="Door II" border="0">
</TD>
</FORM>
<HEAD>
<МЕТА name="DESCRIPTION" соп1еп!="Головоломка Принцесса или тигр?">
<МЕТА name="KEYWORDS" согЛеп1""логическая головомка">
<Т1Т1Е>Головоломка "Принцесса или тигр?"</Т1Т1Е>
</HEAD>
Страница-получатель
Страница test, htm будет выглядеть достаточно незамысловато. Формально на ней
следует написать извинение перед теми, у кого не работают сценарии JavaScript,
и вставить ссылку на файл с ответами. В сценарии, как и на прошлом занятии,
мы обработаем строку ссылки и узнаем, куда отправлять посетителя — к тиграм
или к принцессе. Правда, я предлагаю реализовать более мрачный вариант: в слу-
чае неправильного ответа отправлять к тигру, а в случае правильного — к сле-
дующим дверям, а принцессу оставить на самый конец. В конце концов, это не
противоречит условию задачи: за дверью действительно находится принцесса,
но никто не говорил,,что по пути нет других дверей. При этом мы используем
полученные координаты, отправляя на разные страницы с тиграми. Естествен-
но, что это не очень практично, но зато вы научитесь обрабатывать координаты
и сможете заменить двери одной картинкой или использовать этот прием в бо-
лее сложной задаче.
СОВЕТ
Вы можете завести в форме невидимый элемент, который также будет отправляться на сле-
дующую страницу. Если предварительно заполнить его (например, по событиям onsubmit
или onclick) количеством непрерывно данных правильных ответов, тогда вы можете отсы-
лать к принцессе только тех, кто прошел все двери за один раз. Идея очень проста: на
первой странице вы присваиваете 1, на следующей, если пришла единица, пишете 2 и т. д.
В оригинале 12 задачек — если придет 12, значит можно отсылать к принцессе. В случае
неправильного ответа — обнулять счетчик.
ПРИМЕЧАНИЕ
В отличие от Flash, в HTML спрятать ничего не удастся — ведь браузер всегда работает
с исходным текстом. Можно лишь скрыть код так, чтобы время, потраченное на его пони-
мание, было сравнимо со временем на решение задачки. Тогда подсмотреть ответ будет не
так интересно.
<НЕАО>
<МЕТА name="DESCRIPT!ON" соп1еп1="Головоломка Принцесса или тигр? З а д а ч а 1">
<МЕТА name="KEYWORDS" соп1еп1="логическая головомка">
<Т1Т1Е>"Головоломка Принцесса или тигр? Задача 1"</TITLE>
<SCRIPT src='test.js'>
</SCRIPT></HEAD>
<BOOY>
<SCRIPT>
Ref(document.1ocati on.href):
Создание игры на JavaScript 317
</SCRIPT>
Если у вас не работают сценарии JavaScript, тогда вы можете познакомиться с ответами на
странице <А href="answers.htm">OTBeTbi</A>.
</BODY>
</HTML>
Ловля в паутине
Эта игра навеяна старой электронной игрушкой — предшественником тетрисов,
где волк из «Ну, погоди!» ловит скатывающиеся с лотков яйца. Наша игра бу-
дет похожа: паук будет протягивать лапы к ползущим насекомым. Насекомыми
будут какие-нибудь закорючки (@ или #), которые будут ползти по текстовым
полям, поедая «растительность» на них.
Что нам понадобится? Основная страница с формой и сценарием JavaScript.
Также нам понадобится изображение паука и паутины (для фона, при отладке
вы можете использовать любые картинки, хоть с крокодилом вместо паука и
речным пейзажем вместо паутины). Паук будет передвигаться по нескольким
местам — около каждого текстового поля будет свое «паучье» место. По щелчку
на поле паук будет перебегать на новое место, а насекомое в поле — исчезать,
растворяясь в паучьей утробе. Для простоты описания в книге заведем только
4 поля с каждой стороны — по одному на паучью лапу. Вам потом не составит
труда увеличить их количество.
.
Страница
Большинство тегов, необходимых на этой странице, придется переделывать, если
их писать с помощью HTML-редактора. Поэтому я предлагаю ввести ее код
вручную. Код будет примерно таким (листинг 13.4).
Листинг 13.4. Страница с игрой в паутину
<HTML>
<HEAD>
<МЕТА name="DESCRIPTION" content="Mrpa в паутину">
<МЕТА name="KEYWORDS" content="nayK паутина игра">
<Т1Т1_Е>Игра в паутину</Т1Т1_Е>
<SCRIPT src="spider.js"></SCRIPT>
</НЕАО>
<BODY bgcolor="#FFFFFF">
<DIV align="center"><CENTER>
<FORM name="forma">
<INPUT type="hidden" name="hidden" value="0">
<TABLE border="5" bordercolor="#CCCCCCC" width="500" background="image/net.g1f">
<TR>
<TD>
<TABLE cellpadding="0" cellspacing="0" width="500" border="0">
<TR>
<TD><INPUT type="text" size="17" style="font-family: Courier; border: Opx"
name="tl" onFocus="Place=Click(this.name, Place);">
</TD>
<TD><IMG name="il" src="image/spweb.gif"
width="75" he1ght-"66"></TD>
<TD><IMG name="i2" src="image/lpixel.gif"
width="75" he1ght-"66"></TD>
<TD><INPUT type="text" size="17" style-"font-family: Courier; border: Opx"
name="t2" onFocus="Place=Click(this.name. Place):">
</TD>
</TR>
<TR>
Создание игры на JavaScript 319
<TR>
<TD><INPUT type="text" size="17" name="t5" style="font-family: Courier: border:
Opx" onFocus="Place=Click(this.name. Place):"> </TD>
<TD><IMG name="i5" src="image/lpixel.gif"
width="75" height="66"></TD>
<TD><iMG name="i6" src="image/lpixel.gif"
width="75" height-"66"x/TD>
<TD><INPUT type="text" size="17" name="t6" style="font-family: Courier: border:
Opx" onFocus="Place=Click(this.name. Place):"> </TD>
</TR>
<TR>
<TDxiNPUT type="text" size="17" name="t7" style="font-family: Courier: border:
Opx" onFocus="Place=C1ick(this.name. Place);"> </TD>
<TDxiMG name="i7" src="image/lpixel.gif"
width="75" height="66"x/TD>
<TDxiMG name="i8" src="image/lpixel .gif"
width="75" height="66"x/TD>
<TDxiNPUT type="text" size="17" name="t8" style="font-family: Courier: border:
Opx" onFocus="Place=Click(this.name. Place):"> </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</FORM>
<SCRIPT>
var Place="l":
// Начальное положение паука
var Default-"!!!!!!!!!!!!!!!!!!!!"
// Начальный текст в полях
var RATE = 580:
// Скорость продвижения и рождения
var iString=String;
// Служебная переменная
for (i-1: i<9; i++){
iString="t"+i:
document.forma[iString].value - Default:
}:
ChangeO;
</SCRIPT>
</CENTERx/DIV>
</BOOY>
</HTML>
320 Занятие 13. Что наша жизнь? — Игра
ПРИМЕЧАНИЕ
Netscape Communicator не поймет значения атрибута style="font-family: border: Opx"".
В нем при отображении страницы рамка вокруг текстового поля будет присутствовать.
В форме определены 8 текстовых полей и одно скрытое поле для хранения ре-
зультата (для результата можно использовать и обычную переменную). Кроме
того, на форму попали 8 изображений: одно с пауком и семь пустых. Фоном
служит рисунок паутины — net.gif. Для красоты таблица с формой помещена
Создание игры на JavaScript 321
// Изменяем картинку
Place=name.substring(l);
11 Зак. 96
322 Занятие 13. Что наша жизнь? — Игра
ВНИМАНИЕ
Используйте функцию setTimeoutQ осторожно, так как она образует отдельный поток и вы-
полняется независимо от всей остальной программы. Из-за этого она может оперировать с
уже устаревшими значениями полей и переменных.
Отмена
Паутина
После того как страница готова или до этого (все зависит от стиля и подхода),
можно приступить к созданию паука и паутины. Паутину мы нарисуем сами,
а паука позаимствуем в Интернете и обработаем в Photoshop.
Рисунки, состоящие из прямых линий, лучше всего создавать в программах век-
торной графики. Однако и такой «оплот» растровой графики, как Photoshop,
в последних версиях имеет достаточно векторных инструментов.
1. Создадим новый файл и зададим его размеры 500x300 пикселов.
2. На панели Слои создадим новый слой, на котором и будем рисовать.
3. Для начала необходимо нарисовать основные линии, на которых будет ле-
жать спираль паутины. Это будут прямые, идущие из точки почти в центре
окна к краям рисунка.
СОВЕТ
Паутины бывают разные. Если вы читаете книгу, когда на дворе лето, можете посмотреть
на творения восьминогих мастеров-ткачей в лесу или на улице. А может, у вас на окне жи-
вет домашний любимец, отлавливающий назойливых мух, оставшихся с жаркой поры?
СОВЕТ
Обычным атрибутом аркадных игр является ограничение времени. Используйте методы
и свойства объекта Date для контроля времени в игре.
Создание простой аркадной игры на Flash 325
ф Flash
:
File View Control Help
Лабиринт
Пусть лабиринт у нас будет небольшой: 20x20 клеток. Для простоты его стенки
будут занимать одну клетку, то есть каждая клетка — это либо стенка, либо про-
ход. Все крайние клетки, расположенные по периметру, будут стенками. Впо-
следствии вы сможете кроме пустого пространства ввести другие функциональ-
ные клетки, но пока их будет 5 типов: стенка, проход, вход, выход и логово
минотавра. Игрок начинает игру со входа и заканчивает на выходе. Минотавр
начинает свое движение с логова и стремится к игроку или просто случайно
блуждает.
326 Занятие 13. Что наша жизнь? — Игра
Итак, начинаем.
1. Сначала необходимо задать размер стола фильма: 20 клеток по 30 пикселов
будет 600. Итого размер нашего фильма будет 600x600.
2. В первом кадре мы должны задать переменные, управляющие чтением тек-
стового файла Maze.txt, который определяет количество уровней. Проще всего
сделать кнопку, при нажатии которой начинается генерация лабиринта. До-
бавляем первый ключевой кадр и вставляем в него сценарий, состоящий из
команд объявления переменных:
loadVariablesNum ("Maze.txt". 0):
var labirint = "Labirintl.txt":
var Coord; // условная координата человека
var Bui =0:// номер последней выпущенной пули
var numer =1;// номер лабиринта
loadVariablesNum (labirint. 0);
Предложения по-русски — это поясняющий текст, то есть комментарии, не-
обходимые для пояснения сценария. Естественно, что их можно не вводить.
Условной координатой мы назовем число, соответствующее номеру ячейки,
если все ячейки расположить в один ряд.
ПРИМЕЧАНИЕ
Чтобы вставить комментарий в текст программы, надо либо выбрать действие Comment
в папке Actions (Действия), либо просто ввести текст после двойной наклонной черты «//».
Однако при наборе текста на русском языке может возникнуть ошибка при обработке сце-
нария, поэтому писать его лучше латиницей. Я же для простоты чтения все комментарии
в книге буду писать по-русски.
while (k<Length) {
// Запись из строки в массив L
L[k] = Sl.substr(k, 1):
name = "L"+String(k) :
// Содержание ячейки должно совпадать с именем дублируемого клипа (Clip)
// name - имя нового клипа
Clip - L[k]:
if (Clip ne "P") {
duplicateMovieClip (Clip. name, k):
setProperty (name. _x. HiW*(k-Wi*Math.floor(k/Wi))+Hiw/2);
setProperty (name. _y. Hi/2+Hi*Math.floor(k/Wi));
// Задание координат клипа с изображением ячейки
if (Clip eq "M") {
// Порождение минотавра
k;
name = "M_"+String(j):
duplicateMovieClip (Minotavr. name. Length+j);
setProperty (name. _x, HiW*(k-Wi*Math.floor(k/Wi))+HiW/2):
setProperty (name. j. Hi/2+Hi*Math.floor(k/Wi));
with (name.valueOf) {
Num = _root.j;
if (Clip eq "E") {
// Порождение человека
_root.Coord - k;
// Coord - условные координаты человека
Men._x = HiW*(k-Wi*Math.floor(k/Wi))+HiW/2:
Men.j/ = Hi*Math.floor(k/Wi)+Hi/2;
Dep = parseInt(_root.Length)+M.length;
// Изменение глубины клипа
Men.swapDepths(Dep);
k = k+1;
328 Занятие 13. Что наша жизнь? — Игра
СОВЕТ
Чтобы разнообразить картинку, можно вводить и другие типы ячеек (в ТХТ-файле), не за-
бывая называть такой же буквой размещенный экземпляр символа. Функция ini автомати-
чески разместит нужный символ.
ПРИМЕЧАНИЕ
Дублирование символов занимает много времени. Можно предложить другой путь задания
начального лабиринта. В исходном файле задаются только условные координаты человека
и минотавров, а также параметры лабиринта. Сам же лабиринт рисуется в виде графиче-
ского файла (GIF или JPG) и загружается в фильм в виде объекта генератора (то есть вы
сможете редактировать только графический файл, не меняя фильм для обновления лаби-
ринтов). Единственное неудобство такого подхода — ограничение количества лабиринтов,
так как для каждого лабиринта необходимо расположить объект генератора еще при соз-
дании фильма.
11. Далее необходимо продлить слои, вставив в слой Сценарий, ключевой кадр.
В слой Текст можно вставить простой кадр (F5).
12. В качестве сценария для этого кадра будет выступать строчка с вызовом функ-
ции i n i ( ) ; . Это необходимо для того, чтобы обойти нажатие клавиши Enter
игроком. Поскольку при проигрывании SWF-файла эта клавиша автоматиче-
ски переносит фильм на следующий кадр, мы продублируем в этом кадре об-
работчик события.
13. Настал черед кадра 4. В него во всех слоях лучше вставить пустой ключевой
кадр (F7). Кадр следует назвать Maze. Единственное содержание этого кадра —
символ Трава, расположенный на слое Экран, который будет служить фоном
лабиринту. На слое Сценарий будет сценарий, состоящий из команды stopO;.
Слои надо продлить на кадр 5, в котором (в ключевом кадре) будет стоять ко-
манда gotoAndStopC'Maze");. Она убережет фильм от перехода к следующим,
заключительным кадрам при нажатии клавиши Enter. Использование меток
к кадрам дает вам возможность впоследствии растянуть именные участки
фильма на любое количество кадров.
14. Следующий кадр, под номером 6, будет носить имя Minotavr. Содержание слоя
Текст будет следующим: Вас настиг минотавр. Желаете повторить? Вы можете
ввести любую подобающую ситуации фразу. Слой Сценарий содержит сле-
дующую последовательность инструкций:
k = 0;
while Ck<Length) {
name = "L"+String(k);
Clip = L[k]:
if (Clip ne "P") {
. removeMovieClip (name); // Уничтожаем клипы ячеек
with (Men)
330 Занятие 13. Что наша жизнь? — Игра
stop С ) :
ПРИМЕЧАНИЕ
Точка с запятой, стоящая на отдельной строке, — не авторское ухищрение сделать книгу
толще. Именно такой вид примет сценарий, если редактор ActionScript перевести в обыч-
ный режим. Можно пользоваться этой удобной функцией для структурирования введенно-
го сценария. Flash проверит сценарий на ошибки и правильно расставит отступы у скобок.
if (_root.L[jl+l]. ne "W") {
this._x += (_root.HiW);
jl +• 1;
if (Key.isDown(37)) {
// Демонстрация различной обработки нажатия клавиш
// Нажата клавиша влево
this.gotoAndStopC'le");
if (_root.L[jl-l] ne "W") {
this._x += -(_root.HiW):
jl += -1:
if (Kk == 38) {
// Нажата клавиша вверх
thi s .gotoAndStop( "up" ) ;
if (_root.L[jl-20] ne "W") {
this._y += -(_root.Hi):
jl += -_root.Wi ;
f (Kk == 40) {
// Нажата клавиша вниз
thi s . gotoAndStop( "do" ) :
if (_root.L[jl+20] ne "W") {
this._y +- (_root.Hi);
jl += _root.Wi ;
f (Kk == 36) {
// Нажата клавиша Home
NumB = "U"+_root.Bul :
// Имя пули определяется направлением и номером
_root.B[_root.Bul] = _root. Coord;
// Заводим следующий элемент массива
k = _root. Coord:
Dep = j"oot.length+_root.M.length+l+_root.Bul :
duplicateMovieClip ("_root.Bullet". NumB. Dep);
// Дублируем очередную пулю
_root.BX[_root.Bul] = _root.HiW*(k-_root.Wi*Math.f1oor(k/_root.Wi))+_root.HiW/2:
_root . BY[_root . Bui ] = _root . Hi /2+__root . Hi*Math . f 1 oor (k/_root .Wi ) ;
// Заводим элементы массива ее координат
// Можно обойтись и- без них. но с ними удобней
_root.Bul += 1:
// Добавляем счетчик пуль
if (Kk == 45) {
// Нажата клавиша Ins
NumB = "I"+ root. Bui ;
332 Занятие 13. Что наша жизнь? — Игра
_root.B[_root.Bul] = _root.Coord:
k = _root.Coord:
Dep = _root.Length+_root.M.length+l+_root.Bul:
duplicateMovieClip ("_root.Bullet". NumB, Dep):
_root.BX[_root.Bul] - _root.HiW*(k-_root.Wi*Math.floor(k/_root.Wi))+_root.HiW/2:
_root.BY[_root.Bul] = _root.Hi/2+_root.Hi*Math.floor(k/_root.Wi):
root.Bui += 1:
if CKk == 33) {
// Нажата клавиша Page UP
NumB = "R"+_root.Bul:
_root.B[_root.Bul] = _root.Coord:
k = _root.Coord:
Dep - _root.Length+_root.M.length+l+_root.Bul:
duplicateMovieClip ("_root.Bullet". NumB. Dep):
_root.BX[_root,Bul] = _root.HiW*(k-_root.Wi*Math.floor(k/_root.Wi))+_root.HiW/2:
_root.BY[_root. Bui ] - _root.Hi/2+_root.Hi*Math.f1oor(k/_root.Wi);
root.Bui += 1:
if (Kk - 35) {
// Нажата клавиша End
NumB - "D"+_root.Bul:
_root.B[_root.Bul] = _root.Coord:
k = _root.Coord;
Dep = _root.l_ength+_root.M.length+l+_root.Bul:
duplicateMovieClip ("_root.Bullet". NumB. Dep):
_root.BX[_root.Bul] = _root.HiW*(k-_root.Wi*Math.floor(k/_root.Wi))+_root.HiW/2:
_root.BY[_root.Bui] = _root.Hi/2+_root.Hi *Math.f 1 oor(k/_root.Wi);
root.Bui +- 1:
with (_root) {
for (i-0; i<M. length; i++) {
// Смотрим, не наступили ли на минотавра!
if (Men.jl == M[i]) {
gotoAndPl ay ( "Mi notavr" ) :
if (LCMen.jl] eq "X") {
numer++;
// Если пришли к выходу
if (numer>parse!nt(MazeAm)) {
// Если все лабиринты пройдены, идем на первый
пшпег = 1;
gotoAndPlayC'Finish") :
} else {
gotoAndPlayC'End"):
_root.Coord - Men.jl;
// Возвращаем глобальную переменную
Создание простой аркадной игры на Flash 333
19. В кадре Maze следует разместить еще один клип для дублирования его во
множестве — клип Пуля. Пусть это будет просто маленький эллипс, экзем-
пляр которого должен носить имя Bullet.
На этом работа с основной кинолентой будет закончена. Перейдем теперь к про-
граммированию клипов.
Клипы
Начнем мы с самого основного клипа — с человека. Можно использовать про-
стую картинку человечка, а можно сделать анимированный клип с руками и но-
гами. Мы рассмотрим второй вариант.
Человек
1. Проще всего реализовать «вид сверху»: от человека остается немного головы
с носом, прическа, ноги и руки, ну и развевающееся платье — в нашем случае
туника (рис. 13.5). Откроем клип Человек. Удалим все, что там было, и созда-
дим 8 слоев (сверху вниз): Глаза, Голова (голова и прическа), Нос, Туника, Пра-
вая рука, Левая рука, Правая нога, Левая нога.
2. На слое Глаза будут располагаться глаза — два символа-клипа Глаз. Глаз будет
представлять собой голубой кружок с черным зрачком. Сделаем его вращаю-
щимся — вставим ключевой кадр 10, а в кадре 5 повернем глаз целиком при-
мерно на 40 единиц (можно переместить только зрачок, если нарисовать его в
отдельном слое).
3. Зададим раскадровку движения, вставим ключевой кадр 9 и удалим кадр 10,
чтобы крайний кадр не повторялся два раза. Глаз вращается, а на слое Глаза
их должно вращаться сразу два.
334 Занятие 13. Что наша жизнь? — Игра
СОВЕТ
Чтобы посмотреть, как клип будет передвигаться внутри другого, щелкните правой кноп-
кой на клипе и выберите Edit in Place (Правка на месте) или дважды щелкните на клипе.
Остальные части фильма будут затенены, и вы сможете погонять считывающую головку по
киноленте клипа.
h>>. File Edit View insert Modify Text Cdnttol Window Hel|
I
e Щ Человечек
Library - Lab.fla
1
s4 :мо' • ' 1; gs.'te" !' ; .L Opfe^.
о
i
ll
Ц^
Р Голова
3 Нос
:
Q Туника.' : :;
Э.'Правая рука
Левая рука
Ц? Правая нога •4>V;Q
:: : :
О..Левая ноге , : « ' * Ш
H1
Ф.ЁР Q
Кнопка
1Ш Левая нога
IS Логово
Ш Минотавр
Ш Нос
Ш Обрамление
Ш Правая нога
% Продолжение |
[Щ Проход
Ц Пуля
НИ Стена
Щ Трава
Ш Человек
Человечек
800Х е Q'Aio:^
Рис. 13.6. Окно библиотеки с клипом Человечек
Минотавр
Клип минотавра, как и в жизни, будет устроен по образу и подобию человека,
только кроме прически там будут рога и нос его будет пошире (рис. 13.7). Ну,
пожалуй, еще не будет пистолета, и вместо розовых ног будут копыта, а так кли-
пы будут похожи, как близнецы-братья. Можно просто продублировать клип
и изменить соответствующие слои.
336 Занятие 13. Что наша жизнь? — Игра
ПРИМЕЧАНИЕ
Как вы можете заметить из текста сценария, разворот минотавра происходит другим обра-
зом, нежели человека. Сейчас мы использовали просто вращение вложенного клипа (свой-
ство _rotation).
Пуля
Пуля будет обычным овалом, меняющим цвет в двух кадрах. Кроме того, в пер-
вый кадр необходимо поместить сценарий, управляющий полетом (листинг 13.9).
Листинг 13.9. Сценарий движения пули
var Mum = _name:
var DeltX = 0:
var DeltY = 0;
if (_root._currentframe>5) {
// Пуля будет летать только до окончания игры
this.removeMovieClipO:
}
if (Num ne "Bullet") {
// Изначальный клип не двигается
i = parselnt(Num.substringd));
if (Num.substrtO. 1) eq "R") {
// По первой букве имени клипа определяем, куда летит пуля
f = _root.B[i ]•*•!:
_root.BX[i] +- root.HiW;
}
if (Num.substr(0. 1) eq "I") {
// Используется буква "I". так как "L" занята
f - _root.B[i]-l:
_root.BX[i] -= _root.HiW:
}
if (Num.substr(0. 1) eq "U") {
f = _root.B[i]-_root.Wi;
_root.BY[i] -• _root.Hi:
}
if (Num.substr(0. 1) eq "D") {
f = _root.B[i]+_root.Wi;
_root.BY[i] += _root.Hi;
}
if (_root.L[f] eq " W " ) {
this.removeMovi eCli p():
}
for (j=0; j<_root.M.length; j++) {
// Если встречаем минотавра, ликвидируется сама пуля и минотавр
if (_root.M[j] -= f) {
NumM = "_root.M_"+String(j+D;
removeMovieClip (NumM):
_POOt.M[j] = -1;
this. removeMovieClipO:
_root.B[i] = f;
this._x = _root.BX[i] :
this._y = _root.BY[i] :
Проверьте, что экземпляр пули Bullet помещен за пределами стола в кадре Maze.
Создание простой аркадной игры на Flash 339
Тестирование
Ну вот и все — фильм собран. Вполне возможно, что при нажатии Ctrl+Enter
появятся сообщения об ошибках или при проигрывании все пойдет не так, как
надо. Не отчаивайтесь! Конечно, Flash не имеет хорошего отладчика, но даже
его минимальных средств хватает, чтобы разобраться в проблемах.
331:"М"
335:"И"
336:"И"
337:"U"
338:"U"
399:"Ы" i
]
Uariable _leuelG.M = [object S3] [
0:363,
1:257
]
Variable _1еиеЮ.В = [object ВЧ] []
Uariable _l»vel8.BX = [object US] []
Uariable "leuelO.BV = [object H6] []
Uariable IleuelO.SI = "UUUUUUUUIilUUUUUUUUUUUUEPPPPPPPPPPPPPPPPUUUPIilPUIilPUUPUP:
Variable [leuelO.j = 2
Uariable .leuelO.i = 438
Uariable .levels.k = 400
Uariable 'leueie.nane = "L399"
Uariable Ileueie.Clip = "U"
Uariable IleuelO.Dep = 400
Uariable Ileueie.AI = 600
Uariable _1еиеЮ.Й2 = 600
Uariable IleuelO.diag = 1638
Uariable IlevelO.Nu» = 2
Mouie Clip: Target:".leuelO.Bullet"
Uariable leuelO.Bullet.Nun = "Bullet"
Uariable leuelO.Bullet.OeltX = 0
Uariable _leu»10.Bullet.DeltV = 9
Hoyie Clip: Target="_levelO.Men" §
СОВЕТ
Для того чтобы создать перетаскиваемый клип, вам надо разместить на нем кнопку. В об-
работчик события Press кнопки необходимо включить действие startDrag, а в обработчик
события release — stopDrag.
ПРИМЕЧАНИЕ
Находясь в области срабатывания кнопки, указатель мыши будет принимать свой «обыч-
ный» вид руки с поднятым указательным пальцем.
Итого
Снежный заяц — как живой!
Но одно осталось, дети:
Смастерить ему усы.
Мацуо Басе1
На этом занятии
Жизнь — странная штука: она иногда никак не хочет следовать тем планам,
в рамки которых ты пытаешься ее втиснуть.
Изначально в содержании книги в заголовке данного занятия числилось: «Соз-
дание HTML-версии сайта». Потом тема укрупнилась — описание создания
и Flash, и HTML-версии достаточно большого сайта должно было уместиться
здесь. А потом... А потом оказалось, что писать-то не о чем. Основные приемы
работы с Flash уже описаны, про HTML особо тоже нечего писать — открыва-
ешь приложение 2, там приведен список всех тегов, а дальше была бы фанта-
зия — спроектировать сайт не сложно. Проблемы JavaScript можно обсуждать
долго, но безрезультатно — тут важен личный опыт: если вы поймете суть язы-
ка, навык «сценариста» придет сам собой.
Все это пишется к тому, что настала пора не глобального проекта, а заключения.
Итак, какие мы вопросы обсудим на последнем занятии.
• Зачем нужен персональный сайт?
• Зачем нужна интерактивность на web-страницах?
• Какая технология лучше: HTML или Flash? Чему стоит учиться, что стоит
применять?
Правда, у меня получилось скорее не занятие, а художественное эссе на тему
«Ваш вклад в Интернет». И новых вопросов в нем больше, чем ответов. А сти-
хов почти столько же, сколько прозы. (Оказывается, иногда стихи писать лег-
че...) Приношу свои извинения, если кто-то ожидал в качестве заключения уви-
деть полновесный труд с выкладками что да как. Можно научить вставлять
В переводе В. Марковой.
344 Занятие 14. Итого
HTML-теги, но нельзя научить делать сайты. В них, как и в стихи, надо вло-
жить кусочек себя...
Пришла пора собирать камни. Мешок за плечи — и тронемся в путь...
Виртуальный мир
Стереть, переписать — как просто и легко,
Бумага, та не жизнь, все стерпит и едва ли
сюрприз преподнесет —
В седеющей вуали
усталые глаза и искривленный рот.
Белый лист .
Прекрасная картина — белый лист,
На ней рисует всяк свои виденья,
И пусть тебе поможет провиденье
Нарисовать картину — белый лист.
HTML и JavaScript
На едва зримом полотне стекла
Дерев искрящихся листва
Рождает сказочный узор
Сочтением простейших форм
В невиданный еще никем
Шедевр элементарных схем.
И зная все, не воссоздать
Зимы холодной благодать.
Flash
Геометрию углов,
Естество штрихов и линий
Гранит цвета апельсина из пластмассы существо.
Солнцем брошенным на снег
По законам тяготенья совершается движенье —
По ладони ровный бег.
Созерцая дерзкий цвет
Мы находим отраженья
Непригодных для рожденья,
Но уже прожитых лет.
HTML
• Хотите, не хотите, но HTML — основной язык Web. Без него ни один сайт не
увидит свет. Поэтому хоть пара тегов на сайте должна быть.
Сайт или фильм? 347
JavaScript
• JavaScript — логическое дополнение HTML. С его помощью можно оживить
страницу, подключить интерактивные элементы.
• Каждый браузер по-своему понимает JavaScript. Однако чем больше будет
DOM набирать силу, тем больший порядок будет в рядах команд JavaScript.
Пока же для каждого браузера в большинстве случаев приходится писать
свою ветвь сценария.
• Пользователь может отключить выполнение сценариев JavaScript. He стоит
делать всю навигацию по сайту с помощью команд JavaScript — предусмот-
рите и простые текстовые ссылки.
• Некоторые из команд JavaScript могут вызывать «зависание» компьютера поль-
зователя. Будьте осторожны в употреблении бегущих строк и прочих эффектов.
• С помощью cookies вы сможете сохранить предпочтения посетителя и в сле-
дующий раз обойтись без вопросов, а сразу загрузить страницу в том виде,
как его настроил пользователь ранее. Однако и здесь не все гладко — браузеры
несовершенны и имеют «дырки, щели и зияющие пропасти» в своей структу-
ре. И через них вместо безобидных cookies на ваш компьютер полезут непро-
шеные гости.
Flash
• Flash — новая технология, и еще не у всех пользователей Интернета стоит
дополнительный модуль для просмотра Flash-фильмов, и тем более не стоит
348 Занятие 14. Итого
Ресурсы Интернета
В зарослях сорной травы,
Смотрите, какие прекрасные
Бабочки родились.
Кобаяси Исса'
Бесплатный хостинг
В данном разделе приведены русскоязычные серверы (табл. П1.1), предостав-
ляющие бесплатный хостинг, с краткой информацией об услугах. Подобный
список вы можете получить, пройдя по следующим ссылкам в Yandex: Компью-
теры и связь/Интернет/Хостинги/Хостинг web-страниц.
Естественно, в книгу попало не все — серверы, где хостинг только платный,
мною были удалены. Иностранные серверы (где все не по-русски) я не привел
по простой причине: если вы хорошо знаете английский и хотите писать только
на нем, вы без труда найдете себе подходящий сервер, но большинству читате-
лей это будет неинтересно. Также не осталось в списке и серверов типа «личные
странички иркутян». Если ваш провайдер предоставляет такую услугу — лучше
поинтересоваться прямо у него.
Одним из главных параметров серверов, предоставляющих хостинг, является
качество канала связи данного сервера с внешним миром. Чем выше пропускная
способность данного канала, там больше посетителей смогут просмотреть ваш
сайт. Сравнить скорость обмена данными с разными серверами можно следую-
щим образом: в небольшой промежуток времени (примерно полчаса) необходи-
мо загрузить несколько сайтов с интересующих серверов и сравнить скорость
загрузки.
Чтобы получить точное числовое выражение, воспользуйтесь командой ping:
в FAR или в Windows Commander в командной строке надо набрать ping URL,
где URL — адрес нужного сайта в Интернете, например: ping narod.yandex.ru или
ping 213.180.193.32. В параметре time будет написано время в миллисекундах,
потраченное на отклик. Чем больше время — тем хуже связь с данным сервером.
1
В переводе В. Марковой и Т. Соколовой-Делюсиной.
Бесплатный хостинг 351
Если у вас есть возможность посмотреть время связи через разных провайде-
ров — воспользуйтесь ею: результаты помогут вам выбрать не только хостера,
но и провайдера. Лучше проводить эксперимент несколько раз в разное время
суток, например в начале рабочего дня и в конце (с 16 до 18 часов), когда начи-
нается рабочий день в США.
ПРИМЕЧАНИЕ
Некоторые серверы указывают свой канал связи. Например, ТЗ существенно лучше Т1, по-
скольку первый имеет скорость 45 Мбит/с, а второй — 1,544 Мбит/с.
Продолжение
352 Приложение 1. Ресурсы Интернета
www.hut.ru От 30 Мбайт, e-mail; FTP; CGI, Perl, MySql, SSH, SSI; баннер
www.fanat.ru Только фан-клуб; 10 Мбайт; WWW и FTP; конструктор сайта; гостевая
книга, голосования, счетчик; баннер; помощь при раскрутке
www.klax.tula.ru Сайт + e-mail — 10 Мбайт, FTP; PHP3; список сайтов; контроль
www.hobby.ru 20 Мбайт; FTP и WWW; стандартные CGI, SSI; контроль; регистрируют-
ся только существующие интресные сайты
www.my.elvisti.com 2 Мбайт; FTP; SSI; контроль; каталог всех страниц сервера
www.ussr.to 200 Мбайт. Шаблоны, WWW и FTP. Форумы, чаты, голосования, аукци-
он, гостевые книги, счетчики. Баннер. Контроль
www.az.ru 200 Мбайт; шаблоны, WWW и FTP; форумы, чаты, голосования, аукци-
он, гостевые книги, счетчики; баннер; контроль
www.chat.ru 10 Мбайт, e-mail; WWW и FTP; счетчик; контроль
www.fatal.ru 50 Мбайт, e-mail. FTP и WWW. CGI, PHP, Perl SSI
www.webservis.ru Неограниченное пространство, e-mail; FTP; гостевые книги, форумы,
чаты, голосования, CGI, PHP, SSI; баннер
www.wallst.ru Неограниченное пространство, e-mail; FTP; гостевые книги, форумы,
чаты, голосования, CGI, PHP, SSI; баннер
www.tractir.ru 15 Мбайт, e-mail; FTP; SSI, РНРЗ, РНР4, CGI; контроль
www.tam.ru 200 Мбайт; шаблоны, WWW и FTP; форумы, чаты, голосования, аукци-
он, гостевые книги, счетчики; баннер; контроль
www.lgg.ru 15 Мбайт, e-mail; WWW и FTP; SSL, SSI, PHP4, CGI, MySQL; чат, форумы,
гостевые книги, счетчики, голосование; баннерная сеть
Услуги URL
Услуги URL
Опросы www.voter.ru
Рассылки www.subscribe.ru
yamschik.pp.ru
e-mail.com.ua
Flash
Flash — достаточно новая технология, поэтому серверы, осуществляющие ее
поддержку, содержат много полемики и активных дискуссий. Англо-говорящих
«флэшеров» (так называют себя поклонники Flash) существенно больше, чем
ведущих обсуждение достоинств своей любимой программы на русском языке.
Однако Рунет развивается, а с ним растет и его Flash-зона. В табл. П1.3 при-
ведено несколько ссылок, которые могут оказаться полезными при освоении
Flash.
Ресурс URL
Сайт создателя Flash — фирмы Macromedia www.macromedia.com
Клубы «флэшеров» www.reflash.ru
www.flasher.ru
www.flashkit.com
www.flashpro.ru
Учебники flashzone.by.ru
flasht.lgg.ru
www.flashlite.net
www.flashcentral.com
http//:freedoc.vov.ru/doc/?doc=flash/index.htm
Исходные «тексты» фильмов www.movies.dtn.ru
zona5.al.ru
www.hippo.ru
12 Зак. 96
354 Приложение 1. Ресурсы Интернета
HTML
Этого добра в Сети пруд пруди, и в раздел попали первые попавшиеся ссылки
(табл. П1.4). Это не плод многолетних поисков — признаюсь, ничего особенно
хорошего я не видел. Фактически — это несколько ссылок из списка, выданного
поисковым сервером — не оставлять же раздел пустым!
Ресурс URL
Учебники bonik.infor.ru/indexdot/html/index.html
uchebnik.boom.ru/
www.design.pip.ru/html/wedenie.html
www.beseder.net/htmllessons/l.html
weblist.narod.ru/site/index.htm
help, my money. ru/tutor/adv 1_01 .shtml
www.kruglov.ru/articles/crossbrowserdhtml.shtml
www.arcus.lv/dimas
my.km.ru/html/default.htm
infoschool.narod.ru/html/index.htm
kadet.net.ru/uchebnik/mainhtml.shtml
JavaScript
Ситуация с JavaScript аналогична обучению HTML — много плохого и мало хо-
рошего (табл. П1.5). Рекомендую первый учебник из списка, он мне очень по-
нравился. Вторая ссылка — один из наиболее полных справочников по JavaScript
на русском языке.
Ресурс URL
Учебники www.jsp.newmail.ru
anktrue.spb.ru/js.html
www.citforum.ru/win/internet/koch/tutorial.htm
webb.bip.ru/java.shtml
webmasterilka.com/scripts/javascript/article/course/contents.shtml
cdesign.boom.ru/bookjavascripts.htm
Коллекции сценариев www.kormushka.net/resources/java.html
dhtml.narod.ru/java_script.html
Приложение 2
HTML 4
Тихо, тихо ползи,
Улитка, по склону Фудзи
Вверх, до самых высот!
Кобаяси Исса>
Объявления в документе
В данном разделе собраны теги, общие для всего документа: описание версии
HTML, определение заголовка и тела документа, фреймов и сценариев.
ПРИМЕЧАНИЕ
Некоторые часто используемые стандартные атрибуты описаны в конце приложения.
SDOCTYPE
Каждый HTML-документ, использующий возможности определенной версии
HTML, обязан начинаться со строки:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4 Final//RU">
ИЛИ
СОВЕТ
При задании ширины полей для обеспечения совместимости со всеми видами браузеров
используйте одновременно параметры marginwidth/marginheight и topmargin/leftmargin.
Всегда указывайте параметры bgcolor, text, link, alink и vlink одновременно. Если один из
этих параметров не указан, браузер по умолчанию будет использовать цвет, установлен-
ный пользователем, и получится «черная кошка в черной комнате».
HTML
Тег <HTML> указывает начало и конец HTML-документа. Все теги, расположен-
ные вне этих тегов, игнорируются браузером.
Стандартные атрибуты: 1 ang, di г.
Заголовок документа
В этом разделе собраны теги, относящиеся к заголовку документа и заключен-
ные между тегами <HEAD> (листинга П2.3).
'
Листинг П2.3. Заголовок документа
<НТМ1_>
<!-- Начало заголовка -->
<HEAD>
<Т1Т1_Е>Создание интерактивного персонального сайта</Т1Т1Е>
<BASE href="http://www.dimvovich.narod.ru/index.html">
<LINK rel="HOME" title-''Моя домашняя страница" href="Index.html">
<LINK rel="stylesheet" TYPE="text/css" href="myStyles.css">
<LINK rev="mailto:dimvovich@narod.ru">
<META http-equiv="REFRESH" content="5" URL="http://www.dimvovich.narod.ru/index.htmT'>
<META name="GENERATOR" content-''Дмитрий Лещев">
<META name="PUBLISHER" content="Piter"> •
<META name="PUBLISHER-URL" content="http://www.piter.com/">
<META name="KEYWORDS" content="co3flaHne сайта. Flash. интерактивность">
<META name="DESCRIPTION" content="Co3flaHne интерактивного персонального сайта">
<STYLE type="text/css" title="Cool TABLE">
<!--
A {text-decoration : none; color: purple}
P {color : blue: font-size : 12pt: font-family : Arial:}
HI {color : red: font-size : 18pt:}
-->
</STYLE>
</HEAD>
<!-- Конец заголовка -->
<BODY>
Текст документа
</BODY>
</HTML>
358 Приложение 2. HTML 4
HEAD
Тег определяет начало и конец заголовка документа. Заключает в себе элемен-
ты, содержащие вспомогательную информацию о документе.
TITLE
Определяет название документа. Название отображается в заголовке окна брау-
зера и становится названием закладки по умолчанию. Данный элемент обязате-
лен для любого HTML-документа и может быть указан не более одного раза.
Стандартные атрибуты: lang, dir.
ВНИМАНИЕ
Некоторые браузеры не отображают заголовки длиннее 64 символов, их также не воспри-
нимают и некоторые поисковые системы.
BASE
Тег указывает адрес страницы, который будет подставлен браузером вместо не-
корректных URL, указанных в атрибутах href. Удобно указывать этот тег в на-
чале страницы, например в заголовке.
Атрибуты
• href — определяет базовый адрес для подстановки вместо неверных ссылок.
• target — определяет имя окна или его тип для отображения объекта, указан-
ного в href. Возможные значения: имя окна, _Ы ank, _parent, _sel f, _top.
LINK
Тег <LINK> описывает взаимосвязь документа с другими документами на сайте,
указывая его место в иерархической структуре сайта (листинг П2.4). Не имеет
закрывающего тега. В заголовке может содержаться несколько элементов <LINK>.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick,
onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup, href, href lang, type, rel, rev, target, media, charset.
Листинг П2.4. Пример взаимных ссылок
<!-- Документ А содержит -->
<LINK href="docB" rel="foo">
<!-- Документ В содержит -->
<LINK href="docA" rev="foo">
STYLE
Тег используется для вставки в документ таблицы стилей. Указанная таблица
стилей заменяет присоединенные таблицы и установки браузера.
Атрибуты
• media — описание устройства вывода, значение по умолчанию — "screen".
• type — обязательный атрибут. Определяет информацию о таблице стилей:
MIME-тип или язык. Как правило, значением этого атрибута является
"text/ess".
Стандартные атрибуты: lang, dir, title.
Объявления в документе 359
МЕТА
Тег <МЕТА> используется для описания документа, которое представляет собой
метаданные в виде пары «имя—значение». С помощью этого тега в заголовок
документа встраивается дополнительная информация, невидимая для пользова-
теля, но необходимая для правильной индексации страницы поисковыми робо-
тами. Не имеет закрывающего тега.
Атрибуты
• content — содержит значение параметра, определенного в параметре name или
http-equiv.
СОВЕТ
Многие поисковые системы воспринимают в атрибуте content не более 50 символов. Неко-
торые системы игнорируют этот атрибут, если он содержит повторяющиеся ключевые слова.
Фреймы
Фреймы служат для разделения окна браузера на несколько областей, каждая
из которых содержит отдельный HTML-документ (листинги П2.5, П2.6). Как
правило, они используются для облегчения навигации по сайту и создания на-
вигационного меню. Тем не менее большинство разработчиков избегают ис-
пользование фреймов, так как они наносят непоправимый вред дизайну. Ста-
райтесь использовать фреймы только тогда, когда это действительно необходимо.
ПРИМЕЧАНИЕ
Внимательно следите, чтобы определение фреймов находилось вне элемента BODY. Каж-
дый фрейм содержит отдельный документ!
FRAMESET
Указывает область и структуру окна документа, содержащего фреймы.
Атрибуты
• rows — определяет количество и высоту горизонтальных фреймов в окне
браузера. Значения перечисляются через запятую. Способы задания разме-
ров:
D в процентах от доступной высоты окна браузера, например: rows="30#,
301. 40Г;
О в пикселах, например: rows="75, 525";
Q с помощью символа «*» (звездочка), обозначающего оставшийся доступ-
ный размер; добавление цифры перед знаком звездочки говорит браузеру
о том, что подобранное расстояние необходимо увеличить в данное число
раз.
Все три способа можно совмещать. Например, тег <FRAMESET rows="25£, 100,
*"> разделит окно на три горизонтальных фрейма, первый из которых будет
высотой в четверть окна браузера, второй — 100 пикселов, а третий займет
оставшееся место. Тег <FRAMESET rows="30#, 400, •*. 2*"> разобьет окно высотой
в 1000 пикселов на фреймы высотой 300, 400, 100 и 200 пикселов.
• cols — определяет количество и размеры вертикальных фреймов (фреймов-
столбцов) в окне браузера. Значения перечисляются через запятую. Способы
задания размеров:
О в процентах от доступной ширины окна браузера, например: col s= "401,
40*, 20Г;
Q в пикселах, например: cols="100, 500";
О с помощью символа «*» (звездочка), обозначающего оставшийся доступ-
ный размер; добавление цифры перед знаком звездочки говорит браузеру
о том, что подобранное расстояние необходимо увеличить в данное число
раз.
Все три способа можно совмещать. Например, cols="50#, 100, *" разделит
окно на три вертикальных фрейма, первый из которых будет шириной в по-
ловину окна браузера, второй — шириной 100 пикселов, а третий займет
оставшееся пространство. Тег <FRAMESET co1s="l*, 250, 3*"> разобьет окно ши-
риной 1250 пикселов на фреймы шириной 250, 250 и 750 пикселов.
• border — определяет толщину рамок всех фреймов в блоке <FRAMESET> в пик-
селах. Данный параметр действует только в браузерах Netscape. Атрибут не
описан в спецификации HTML 4.
• bordercolor — определяет цвет рамки. Значение — стандартное название или
шестнадцатеричный код цвета (см. раздел «Стандартные цвета» в конце при-
Объявления в документе 361
Сценарии
Сценарии — это встроенные в HTML-страницу наборы команд языка сценария
(листинг 2.8). Большинство сценариев пишется на языке JavaScript.
Листинг П2.8. Пример сценариев
<SCRIPT language="JavaScript">
<NOSCRIPT> Пора менять браузер... </NOSCRIPT>
<!--
// Кол JavaScript:
- ->
</SCRIPT>
SCRIPT
Определяет сценарий в теле документа. Сам текст сценария располагается меж-
ду открывающим и закрывающим тегами либо содержится в файле, указанном
в атрибуте src.
В целях совместимости со старыми браузерами сценарии следует заключать ме-
жду тегами < ! - - и ••>, то есть оформлять их как обычный комментарий. Распо-
лагать сценарии принято между закрывающим тегом </HEAD> и открывающим
тегом <BODY>.
Атрибуты
• language - • определяет язык, на котором написан сценарий, например
"JavaScript". Данный атрибут не является стандартом HTML 4. Язык сцена-
рия рекомендуется определять с помощью атрибута TYPE.
• src — определяет адрес файла сценария.
• type — атрибут определяет язык сценария, например "text/javascript". Дан-
ный атрибут переопределяет указания атрибута 1 anguage.
• defer — атрибут указывает браузеру, что сценарий не порождает содержания
страницы (например, не содержит команды JavaScript document.write).
Стандартный атрибут: charset.
NOSCRIPT
Тег определяет текст, который будет отображен, если в браузере отключено дей-
ствие сценариев.
Изображения-карты
Изображения-карты, обрабатываемые клиентом, представляют собой множество
гиперссылок, оформленное в виде активных областей на одном изображении
(листинги П2.9, П2.10). Применить созданную карту к изображению можно, на-
значив значение атрибута usemap тега <IMG>.
Листинг П2.9. Пример создания изображения-карты
<МАР name="ImageMap">
<AREA href ="left.html" shape="rect" coords="0.0,100.200" аН="Левая половина">
<AREA href-"right.html" shape="rect" coords="101,0,100,200" аК="Правая половина">
</MAP>
364 Приложение 2. HTML 4
<BODY>
<IMG src="img/block.gif" usemap="#ImageMap" height="200" width="200" border="0">
</BODY>
Листинг П2.10. Создание более сложного изображения-карты
<МАР name="circle">
<AREA href="app1e.html" target="_TOP" name="APPLE" а!1="Прямо в яблочко!" shape="circle"
coords="100.80.50" onmouseout="Scriptl" onmouseover="Script2" class="fruit">
<AREA nohref shape="rect" coords="0.0.200.200" id="logo">
</MAP>
<BODY>
<IMG src="img/apple.gif" width="200" height="200" border="0" alt-''Прямо в яблочко!"
usemap="#circle">
</BODY>
MAP
Тег создает изображение-карту. Между тегами <МАР> содержится один или не-
сколько тегов <AREA>, определяющих активные области карты. Тег имеет только
один обязательный атрибут name, который определяет имя карты, уникальное для
данного документа. Используется для присваивания атрибуту usemap тега <IMG>.
AREA
Создает активную область карты, заданной тегами <МАР>. Тег должен распола-
гаться между тегами <МАР>. Не имеет закрывающего тега.
Атрибуты
• alt — определяет текст-подсказку для данной области.
СОВЕТ
Старайтесь всегда указывать этот параметр, чтобы пользователю было легче ориентиро-
ваться на странице. Помните, что многие пользователи отключают отображение рисунков
на страницах, экономя время и деньги.
ПРИМЕЧАНИЕ
При указании последовательности из нескольких элементов AREA наибольший приоритет
имеют те, которые были определены первыми.
Тело документа
Тело документа обычно определяет основное содержание HTML-документа и
располагается между тегами <BODY>.
ПРИМЕЧАНИЕ
Контейнер — элемент, имеющий содержание. В HTML контейнеры имеют открывающий
и закрывающий теги.
Листинг П2.11. Примеры тегов, используемых для оформления абзацев и текстовых блоков
<Н1 align="center">CaMbin большой заголовок идет по центру</Н1>
<Н2>Заголовок поменьше может начинаться в начале</Н2>
<Н6>Самый маленький уровень заголовка</Н6>
<Р а!1дп="сеп1ег">Параграф с выравниванием по центру<ЕШ>
Текст расположен по центру строки</Р>
<Р align="right">A этот параграф выровнен по правому краю.</Р>
<DIV а11дп="сегг1ег">0тдельный параграф текста</01У>
<!--Примеры ссылок -->
<А name="Content">CoflepiaHne журнала</А>
<А пате="Аг1:1с1е1.">Первая статья сегодняшнего номера посвящена кошкам</А>
<!--Текст статьи -->
Вернуться к <А пгет"="#Соп1епт.">содержанию</А>
Пишите нам по адресу:<BR>
<ADDRESS>197198. Санкт-Петербург, а/я 619<BR>B компьютерную peflakniw</ADDRESS>
Тег Вк<ВР,>вставляет перенос строки
366 Приложение 2. HTML 4
Текст, заключенный в этом теге будет отображен "как есть" с сохранением пробелов
и переносов строки.
Обычно выводится моноширинным шрифтом
Рис. П2.1. Так будет выглядеть страница использования тегов (см. листинг П2.11)
А
Без этого тега не было бы ни HTML, ни Интернета. Он используется для созда-
ния гипертекстовых ссылок и якорей на странице.
Атрибуты
• href — определяет документ, на который задается ссылка. Возможные значе-
ния:
О http://... — создает ссылку на www-документ;
Q ftp://... — создает ссылку на ftp-сайт или расположенный на нем файл;
Тело документа 367
ПРИМЕЧАНИЕ
Элемент <А> не может быть вложенным в себе подобные, то есть недопустимы конструк-
ции: <А пгег="1тМ.Мтп1">Первая ссылка<А пгеГ="1тк2.пг.тГ>Вторая ссылка</А>Продол-
жение первой ссылки </А>.
ADDRESS
Тег для указания контактной информации, например почтового адреса. Обычно
располагается в начале или в конце документа.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick,
onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup.
DIV
Используется для отделения блока HTML-документа от остальной части доку-
мента и назначения ему специального форматирования с помощью таблиц сти-
лей. Находящиеся между начальным и конечным тегами текст или HTML-эле-
менты оформляются как отдельный параграф.
Стандартные атрибуты: id, class, lang, dir, title, style, align, onclick, ondblclick,
onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup.
368 Приложение 2. HTML 4
P
Тег используется для разбивки текста на параграфы. Может игнорироваться
браузером.
Стандартные атрибуты: id, class, lang, dir, title, style, align, onclick, ondblclick,
onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup.
ПРИМЕЧАНИЕ
Теги, обозначающие блоки текста (за исключением тега <А>), не могут содержать другие
и себе подобные вложенные теги-контейнеры блоков текста.
PRE
Используется для включения в документ уже отформатированного текста.
Браузеры воспроизводят содержимое этого элемента с помощью моноширинно-
го шрифта с сохранением пробелов и символов конца строки.
Атрибуты
• width — определяет ширину блока текста в символах.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
II
Сегодня мелкие, но £3.
ABBR
Тег используется для обозначения аббревиатур. В атрибуте t i t l e можно размес-
тить полное название, которое будет использовано при озвучивании текста, про-
верке правописания, индексировании поисковыми роботами.
Стандартные атрибуты: id, class, lang, dir, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
370 Приложение 2. HTML 4
ACRONIM
Тег используется для обозначения акронимов. В атрибуте title можно размес-
тить полное название, которое будет использовано при озвучивании текста, про-
верке правописания, индексировании поисковыми роботами.
Стандартные атрибуты: id, class, lang, dir, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
BLOCKQUOTE
Тег используется для оформления длинных цитат. Для коротких фраз лучше
использовать тег <С1ТЕ>. Цитируемый текст отображается отдельным абзацем
с увеличенными отступами.
Атрибуты
• cite — позволяет сослаться на источник цитаты.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondbl click, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
BDO
Тег <BDO> служит для закрепления направления текста в случае использования
алгоритма бинаправленного текста.
Стандартные атрибуты: lang, dir.
CITE
Тег указывает, что находящийся между начальным и конечным тегами текст -
цитата, и определяет ссылку на источник. Обычно используется для коротких
цитат (в отличие от тега <BLOCKQUOTE>). Цитируемый текст отображается курси-
вом.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
CODE
Тег предназначен для выделения исходного кода программ. Текст при этом, как
правило, отображается моноширинным шрифтом.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
DEL
Тег вместе с тегом <INS> используется для обозначения внесенных исправле-
ний, определяя удаленный текст.
Атрибуты
• cite — указывает источник сообщения или документа.
• datetime — задает дату, когда были выполнены изменения.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
DFN
Используется для выделения термина, которому дается определение.
Тело документа 371
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
EM
Указание логического ударения. Используется для смыслового выделения тек-
ста, стоящего между начальным и конечным тегами.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
INS
Тег вместе с тегом <DEL> используется для обозначения внесенных исправлений,
определяя удаленный текст.
Атрибуты
• cite — атрибут для указания источника сообщения или документа.
• datetime — атрибут задает дату, когда изменения были выполнены.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
KBD
Тег предназначен для отображения текста, который пользователь должен на-
брать на клавиатуре.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Q
Тег используется для заключения фразы в кавычки.
Атрибуты
• cite — позволяет сослаться на первоисточник.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
SAMP
Тег служит для оформления текста вывода программ.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
SPAN
Используется для назначения части текста специального форматирования с по-
мощью таблицы стилей.
Стандартные атрибуты: id, class, lang, dir, title, style, align, onclick, ondblclick,
onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup.
STRONG
Тег для еще более сильного выделения, чем тегом <ЕМ>.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
372 Приложение 2. HTML 4
VAR
Тег <VAR> предназначен для обозначения в тексте переменных.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Управление шрифтами
Стилевым оформлением блоков текста можно управлять не только с помощью
каскадных таблиц стилей, но и напрямую, с помощью тегов, собранных в дан-
ном разделе (листинг П2.13).
IS
В
Текст, заключенный между открывающим и закрывающим тегами <В>, будет вы-
делен полужирным шрифтом.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
BASEFONT
Определяет шрифт, которым должен отображаться основной текст документа.
Не имеет закрывающего тега. Вы можете легко изменить шрифт любой части
документа, используя тег <FONT>. Действие тега <BASEFONT> не распространяется
на заголовки.
Атрибуты
• size — обязательный параметр. Определяет размер шрифта. Возможные зна-
чения: целые числа от 1 до 7 включительно.
• face — определяет тип шрифта (гарнитуру).
• color — определяет цвет шрифта. Значение — стандартное название или ше-
стнадцатеричный код цвета (см. раздел «Стандартные цвета» в конце прило-
жения).
Стандартные атрибуты: id, class, lang, dir, title, style.
ПРИМЕЧАНИЕ
Вместо данного тега рекомендуется использовать таблицы стилей.
BIG
Текст, выделенный этим тегом, выводится увеличенным размером.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
FONT
Определяет параметры шрифта, заключенного между открывающим и закры-
вающим тегами текста.
Атрибуты
• size — размер шрифта. Возможные значения:
Q целое число от 1 до 7;
Q относительный размер с указанием знака; итоговый размер вычисляется
путем сложения с размером, указанным в теге <BASEFONT>.
• color — цвет текста. Значение — стандартное название или шестнадцатерич-
ный код цвета (см. раздел «Стандартные цвета» в конце приложения).
• face — гарнитура шрифта.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
I
t
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
TT
Текст, заключенный между открывающим и закрывающим тегами <ТТ>, будет вы-
делен моноширинным шрифтом.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondbl click, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
S, STRIKE
Текст, заключенный между открывающим и закрывающим тегами <STRIKE> или
<S>, будет перечеркнут. В стандарте HTML 4 не рекомендуется к использованию.
SMALL
Текст, заключенный между открывающим и закрывающим тегами <SMALL>, будет
выделен меньшим шрифтом.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondbl click, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
SUB
Тег используется для обозначения подстрочного индекса.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
SUP
Тег используется для обозначения надстрочного индекса.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
U
Текст, заключенный между открывающим и закрывающим тегами <U>, будет вы-
делен подчеркиванием.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
ПРИМЕЧАНИЕ
Всегда ставьте <BR> после тега <IMG>. В противном случае картинка будет иметь ненуж-
ный отступ.
HR
Вставляет в текст горизонтальную разделительную линию.
Атрибуты
Я width — определяет длину линии в пикселах или процентах от ширины окна
браузера.
• size — определяет толщину линии в пикселах.
• noshade — определяет способ закраски линии как сплошной. Параметр явля-
ется флагом и не требует указания значения. Без данного параметра линия
отображается объемной.
• col or — определяет цвет линии. Значение — стандартное название или шест-
надцатеричный код цвета (см. раздел «Стандартные цвета» в конце приложе-
ния).
Стандартные атрибуты: id, class, lang, dir, title, style, align, onclick, ondblclick,
onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown,
onkeyup.
Списки
Как и везде, списки в HTML бывают двух видов: маркированные и нумерован-
ные. Перед элементом маркированного списка ставится символ-маркер, а пе-
ред нумерованным — число или буква. Списки могут быть вложенными (лис-
тинг П2.14).
Листинг П2.14. Пример оформления списка
<UL>
<LI> Первый пункт списка
<UL>
<LI> Первый пункт вложенного списка
<LI> Второй пункт вложенного списка
<LI> Третий пункт вложенного списка
</UL>
<LI> Второй пункт списка
<LI> Третий пункт списка
</UL>
<OL TYPE="I" START="2">
<LI> Пункт два
<LI> Пункт три
<LI> Пункт четыре
</OL>
<DL>
<ОТ>НТМ<00>язык разметки гипертекста
376 Приложение 2. HTML 4
П. Пункт два
Ш. Пункт три
IV. Пункт четыре
HTML
язык разметки гипертекста
bookmark (закладка)
сохраненный браузером адрес web-документа.
UL
Создает маркированный список. Между открывающим и закрывающим тегами
должны присутствовать один или несколько элементов <LI>, обозначающих от-
дельные пункты списка.
Атрибуты
• type — задает вид маркера. Возможные значения: disc (круг), square (квадрат-
ный) и circle (окружность).
• compact — атрибут-флажок для создания компактных списков.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
OL
Создает нумерованный список. Между открывающим и закрывающим тегами
должны присутствовать один или несколько элементов <LI>, обозначающих от-
дельные пункты списка.
Атрибуты
• start — определяет число, с которого начинается нумерация пунктов.
• type — определяет стиль нумерации пунктов. Может иметь значения:
Тело документа 377
LI
Создает элемент списка. Располагается внутри тегов <OL> или <UL>.
Атрибуты
• val ue — изменяет порядок нумерации элементов нумерованного списка. В ка-
честве значения указывается порядковый номер элемента.
• type — задает вид маркера. Возможные значения: A, a, i, I, I, disc, square и
circle (см. теги <UL> и <OL>).
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
MENU, DIR
Теги предназначены для создания маркированных списков. Эти элементы во-
шли в спецификацию HTML 4 только в целях обратной совместимости. Вместо
них рекомендуется использовать тег <UL>.
DL
Открывает и закрывает список определений (например, глоссарий).
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
DT
Обозначает название термина в глоссарии.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
DD
Обозначает определение термина.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
Встроенные объекты
Объекты — это графические и мультимедийные вставки в HTML-документ, на-
пример картинки, Java-апплеты, звуки, музыка (листинг П2.15).
Листинг П2.15. Примеры тегов, используемых для встраивания объектов
<А href="Elefant.htm1"><IMG src="img/elefant.gif" width="100" height="100" alt="Elefant"
hspace="10" а"Мдп="пдМ;"><ВК></А>Данный текст обтекает картинку со слоном слева
378 Приложение 2. HTML 4
IMG
Тег используется для вставки изображений в HTML-документ. Поддерживает
форматы JPEG, GIF и PNG. He имеет закрывающего тега.
Атрибуты
• src — обязательный параметр. Указывает адрес файла изображения.
• height — высота изображения (в пикселах).
• width — ширина изображения (в пикселах).
СОВЕТ
Необходимо всегда явно указывать размеры рисунка с помощью атрибутов height и width,
чтобы браузер имел возможность вывести содержательный текст до загрузки изображения.
СОВЕТ
Указывайте явно значения параметров HSPACE и VSPACE. Некоторые браузеры могут
иметь ненулевые значения этих параметров по умолчанию.
Тело документа 379
СОВЕТ
Старайтесь всегда указывать атрибут alt, чтобы пользователю было легче ориентировать-
ся на странице.
ВНИМАНИЕ
Обратите внимание, что браузер различает регистр букв в имени карты.
СОВЕТ
Всегда сразу после тега <IMG> ставьте тег <BR>, это поможет избежать ненужных отсту-
пов после рисунка.
Стандартные атрибуты: id, class, Tang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
OBJECT
Ter <OBJECT> применяется для встраивания на страницу объектов: документов,
апплетов, изображений или элементов управления.
Атрибуты
• usemap — применяет к объекту-изображению навигационную карту (image map),
заданную тегом <МАР>. В качестве значения задается имя изображения-карты
с предшествующим знаком решетки. Например, если имя карты — mymap, то
ссылка на нее будет выглядеть так: $mymap.
ВНИМАНИЕ
Обратите внимание, что браузер различает регистр букв в имени карты.
Таблицы
Таблицы в HTML формируются построчно. Сначала с помощью тега <TR> необ-
ходимо создать ряд таблицы, в который затем с помощью тегов <TD> определя-
ются ячейки (листинги П2.16-П2.20).
...rows...
</TABLE>
3 D:\EL. ШШШ
TABLE
Тег, определяющий начало и конец таблицы.
Атрибуты
• border — определяет ширину внешней рамки таблицы (в пикселах).
• cell padding -- определяет расстояние (в пикселах) между рамкой каждой
ячейки таблицы и содержащимся в ней материалом.
• cellspacing — определяет расстояние (в пикселах) между границами сосед-
них ячеек.
• width — определяет ширину таблицы. Ширина задается либо в пикселах,
либо в процентном отношении к ширине окна браузера. По умолчанию этот
параметр определяется автоматически в зависимости от содержащегося в таб-
лице материала.
• height — определяет высоту таблицы. Высота задается либо в пикселах, либо
в процентном отношении к высоте окна браузера. По умолчанию этот пара-
метр определяется автоматически в зависимости от содержащегося в таблице
материала.
9 bgcolor — определяет цвет фона ячеек таблицы. Значение — стандартное на-
звание или шестнадцатеричный код цвета (см. раздел «Стандартные цвета»
в конце приложения).
\
Тело документа 385
CAPTION
Тег определяет заголовок таблицы. Содержание заголовка должно состоять
только из текста.
Атрибуты
• align — определяет способ вертикального выравнивания заголовка таблицы.
Возможные значения:
О Тор — заголовок над таблицей (значение по умолчанию);
Q Bottom — заголовок под таблицей;
Q Left — заголовок слева от таблицы;
О Right — заголовок справа от таблицы.
Стандартные атрибуты: id, class, lang, dir, title, style, onclick, ondblclick, onmousedown,
onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup.
THEAD
Определяет верхний колонтитул таблицы. Не требует закрывающего тега.
Стандартные атрибуты: id, class, lang, dir, title, style, align, valign, onclick,
ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup, char, charoff.
13 Зак. 96
386 Приложение 2. HTML 4
TFOOT
Определяет нижний колонтитул части таблицы. Не требует закрывающего тега.
Стандартные атрибуты: id, class, lang, dir, title, style, align, valign, onclick,
ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup, char, charoff.
TBODY
Определяет неразрывный блок рядов таблицы. Не требует закрывающего тега.
Несколько рядов могут быть объединены с помощью данного тега.
Стандартные атрибуты: id, class, lang, dir, title, style, align, valign, onclick,
ondbl click, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup, char, charoff.
COLGROUP
Определяет группу столбцов таблицы. Несколько столбцов могут быть объеди-
нены с помощью данного тега. Не требует закрывающего тега.
Атрибуты
• span — число столбцов в группе. Значение — натуральное число. При отсут-
ствии атрибута считается, что в каждой группе только по одному столбцу.
• Width — ширина столбцов. Значения ширины могут быть указаны в пикселах,
в процентах, с помощью звездочки или числа и звездочки (аналогично атри-
бутам cols и raws тега <FRAMESET>). Значение "О*" обозначает наименьшую под-
ходящую ширину. Значение ширины может быть переопределено в теге <COL>.
Стандартные атрибуты: id, class, lang, dir, title, style, align, valign, onclick,
ondbl click, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup, char, charoff.
COL
Определяет столбец таблицы. Недопустим закрывающий тег.
Атрибуты
• span — число столбцов в группе. Значение — натуральное число. При отсут-
ствии атрибута считается, что в каждой группе только по одному столбцу.
• Width — ширина столбцов. Значения ширины могут быть указаны в пикселах,
в процентах, с помощью звездочки или числа и звездочки (аналогично атри-
бутам cols и rows тега <FRAMESET>).
Стандартные атрибуты: id, class, lang, dir, title, style, align, valign, onclick,
ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup, char, charoff.
TR
Определяет строку таблицы. Закрывающий тег можно опускать.
Атрибуты
• span — число столбцов в группе. Значение — натуральное число. При отсут-
ствии атрибута считается, что в каждой группе только по одному столбцу.
Тело документа 387
TH
Тег создает ячейку-заголовок.
Атрибуты
• scope — определяет ячейки с данными, которые относятся к заголовку. Мо-
жет принимать следующие значения:
Q Row — строка;
LI Col — столбец;
Q Rowgroup — группа строк;
Q Col group — группа столбцов.
• abbr — аббревиатура содержимого ячейки.
• axi s — помогает разместить ячейку в концептуальной категории для ее вклю-
чения в n-мерную таблицу.
• width — определяет ширину ячейки. Ширина задается в пикселах или в про-
центном отношении к ширине таблицы.
• height — определяет высоту ячейки. Высота задается в пикселах или в про-
центном отношении к высоте таблицы.
• col span — определяет количество столбцов, на которые простирается данная
ячейка. По умолчанию имеет значение 1.
• rowspan — определяет количество рядов, на которые простирается данная
ячейка. По умолчанию имеет значение 1.
• nowrap — блокирует автоматический перенос слов в пределах текущей ячейки.
• bgcolor — определяет цвет фона ячейки. Значение — стандартное название
или шестнадцатеричный код цвета (см. раздел «Стандартные цвета» в конце
приложения).
• background — выводит фоновый рисунок на пространстве ячейки.
388 Приложение 2. HTML 4
Стандартные атрибуты: id, class, lang, dir, title, style, align, valign, onclick,
ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup, char, charoff.
TD
Элемент создает ячейку с данными.
Атрибуты
• headers — список заголовков данной ячейки таблицы. Необходим браузерам с
речевым интерфейсом.
• abbr — аббревиатура содержимого ячейки.
• axi s — помогает разместить ячейку в концептуальной категории для ее вклю-
чения в n-мерную таблицу.
• width — определяет ширину ячейки. Ширина задается в пикселах или в про-
центном отношении к ширине таблицы.
• height — определяет высоту ячейки. Высота задается в пикселах или в про-
центном отношении к высоте таблицы.
• col span — определяет количество столбцов, на которые простирается данная
ячейка. По умолчанию имеет значение 1.
• rowspan — определяет количество рядов, на которые простирается данная
ячейка. По умолчанию имеет значение 1.
• nowrap — блокирует автоматический перенос слов в пределах текущей ячейки.
• bgcolor — определяет цвет фона ячейки. Значение — стандартное название
или шестнадцатеричный код цвета (см. раздел «Стандартные цвета» в конце
приложения).
• background — выводит фоновый рисунок на пространстве ячейки.
Стандартные атрибуты: id, class, lang, dir, title, style, align, valign, onclick,
ondbl click, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup, char, charoff.
Формы
Форма представляет собой часть web-страницы, содержащую элементы управ-
ления: флажки, переключатели, текстовые поля, поля ввода и кнопки (лис-
тинг П2.21). Обычно пользователь заполняет форму, и она передается на обра-
ботку серверу и клиенту. Основное отличие формы от других элементов
страницы состоит в том, что даже в старых браузерах вы можете получить до-
ступ к обработке введенных пользователем значений.
Листинг П2.21. Пример создания формы
<!-- Создаем форму -->
<FORM action="www.narod.ru/cgi-bin/ths.pl" name="TestForm">
<!-- Внутри формы создаем поле ввода -->
<INPUT type="text" size="20" уа!ие="Имя">
<INPUT type-"submit" уа1ие="0тправить">
</FORM>
Тело документа 389
j;.' J lj:\Eook;\M>\Hesh?\Flash\App2\t
[NOM 1
First name: |
Last name: I
email:)
С Male
<~ Female
<INPUT name="history_illness"
type="checkbox"
value="Sneezing" tabindex="23"> Sneezing
</FIELDSET>
<FIELDSET>
<LEGEND>Current Medication</LEGEND>
Are you currently taking any medication?
<INPUT name="medication_now"
type="radio"
value="Yes" tabindex="35">Yes
<TNPUT name="medication_now"
type="radio"
value="No" tabindex="35">No
If you are currently taking medication, please indicate
it in the space below:
<TEXTAREA name="current_medication"
rows="5" cols="50"
tabindex="40">
</TEXTAREA>
</FIELDSET>
</FORM>
3 D:\Books\My\Flosh2\Flash\App2Vo
;
: | E|te : &i{ '. ty&t \ FSyOme&
r Person^ Informaticn ••
Last Name: |
First Name: |~
iA<Wress:LZ
Г Medical History
i Г Smallpox Г Mumps Г Dizziness П Sneezing
г Current Medication
Are you currently taking any medication? <* Yes f* No If you are currently taking medication, please indicate it in the space below:
FORM
Тег используется для создания формы. Внутри открывающего и закрывающего
тегов <FORM> разрешается использовать большинство HTML-элементов для соз-
дания надписей и оформления.
Атрибуты
• accept -charset — список кодировок для вводимых данных (с разделителями -
пробелами или запятыми).
• accept — список типов содержания формы для отправки серверу (с раздели-
телями — запятыми).
392 Приложение 2. HTML 4
INPUT
Тег <INPUT> служит для создания элементов управления формы: кнопок, полей
ввода, флажков, текстовых полей. Элемент не имеет конечного тега. Тег <INPUT>
должен располагаться между тегами <FORM>.
Атрибуты
• name — имя, необходимое для доступа к данному элементу управления.
• type — тип элемента управления. Возможные значения:
Q Text — поле ввода (значение по умолчанию);
Q Textarea — текстовое поле;
G Password — поле ввода пароля (вводимый текст автоматически закрывает-
ся знаками «*»);
О Checkbox — флажок;
Q Radio — элемент переключателя;
Q Submit — кнопка отправки формы;
Q Image — графическая кнопка (не поддерживается стандартом HTML 4);
Q Reset — кнопка сброса введенных значений;
О Hidden — скрытое поле;
Q Button — кнопка;
Q File — дает возможность пользователю прикрепить файл к текущей форме.
• accept — MIME-тип прикрепляемого файла. Используется только совместно
с параметром type="file".
• value — значение элемента управления или надпись на кнопке.
• checked — логический атрибут-флаг; для флажка и переключателя указывает,
установлены ли они.
• size — определяет размер текстового поля в символах.
• maxlength — определяет максимальное количество символов, которые можно
ввести в текстовом поле.
• src — задает адрес рисунка, используемого при создании кнопки.
Тело документа 393
ВНИМАНИЕ -
Обратите внимание, что браузер различает регистр букв в имени карты.
SELECT
Тег <SELECT> определяет список. Содержит несколько тегов <OPTION>.
Атрибуты
• multiple — атрибут-флаг; если установлен, дает возможность выделения не-
скольких пунктов списка.
• name — определяет имя списка.
• size — определяет количество видимых пунктов списка для прокручиваемого
списка. Если атрибут опущен или указано значение 1, создается раскрываю-
щийся список.
• di sabl ed — определяет кнопку как недоступную.
• tabindex — индекс в последовательности перехода по клавише Tab.
Стандартные атрибуты: id, class, lang, dir, title, style, onfocus, onblur, onselect,
onchange, onclick, ondbl click, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup.
OPTION
Используется только внутри тегов <SELECT> и описывает отдельный элемент
списка. Не требует завершающего тега.
Атрибуты
• selected — указывает на данный пункт как на выделенный. Если не установ-
лен режим выделения нескольких пунктов, то атрибут можно назначить
только одному элементу списка.
• val ue — значение, передаваемое при отправке формы.
• 1 abel — название пункта.
• disabled — определяет пункт как недоступный.
Стандартные атрибуты: id, class, lang, dir, title, style, onfocus, onblur, onselect,
onchange, onclick, ondbl click, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup.
OPTGROUP
Используется только внутри тегов <SELECT> и описывает группу элементов спи-
ска (меню). Не поддерживается многими браузерами.
Атрибуты
• label — название группы.
• disabled — определяет группу как недоступную.
Тело документа 395
Стандартные атрибуты: id, class, Tang, dir, title, style, onfocus, onblur, onselect,
onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup.
TEXTAREA
_
Создает поле для ввода нескольких строк текста.
Атрибуты
• name — обязательный параметр. Определяет название, которое будет исполь-
зоваться при идентификации сервером заполненного поля.
• rows — определяет количество строк текста, видимых на экране.
• cols — определяет ширину текстового поля (в печатных символах).
• wrap — определяет способ переноса слов в заполняемой форме. Не поддержи-
вается спецификацией HTML 4. Возможные значения:
Q Off — перенос слов не происходит (значение по умолчанию);
О V i r t u a l — перенос слов только отображается, на сервер же поступает неде-
лимая строка;
Q Physical — перенос слов будет происходить во всех точках переноса.
• readonly — определяет элемент как доступный только для чтения.
• di sabl ed — определяет элемент как недоступный.
• tabindex — индекс в последовательности перехода по клавише Tab.
Стандартные атрибуты: id, class, Tang, dir, title, style, onfocus, onblur, onselect,
onchange, onclick, ondbl click, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup.
ISINDEX
Служит для создания поля ввода. Спецификацией HTML 4 рекомендуется ис-
пользовать тег <INPUT>. He имеет закрывающего тега.
Атрибуты
• prompt — содержит значение по умолчанию.
Стандартные атрибуты: id, class, lang, dir, title, style.
LABEL
Тег <LABEL> служит для прикрепления поясняющей информации к элементу
управления. Одна надпись может быть прикреплена к одному элементу.
Атрибуты
• for — служит для указания элемента управления в виде его ID.
• accesskey — обозначает клавишу быстрого доступа.
Стандартные атрибуты: id, class, lang, dir, title, style, onfocus, onblur, onselect,
onchange, onclick, ondbl click, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup.
FIELDSET
Тег позволяет объединить элементы формы в группу.
396 Приложение 2. HTML 4
Атрибуты
• accesskey — служит для задания клавиши быстрого доступа.
Стандартные атрибуты: id, class, lang, dir, title, style, onfocus, onblur, onselect,
onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup.
LEGEND
Тег задает надпись к группе элементов, определенной тегом <FIELDSET>.
Атрибуты
• accesskey — служит для задания клавиши быстрого доступа.
• align — указывает способ выравнивания надписи на рамке. Может прини-
мать следующие значения:
Q Left — текст по левой границе;
Q Ri ght — текст по правой границе;
Q Тор — текст по верхней границе (значение по умолчанию);
О Bottom — текст по нижней границе.
Стандартные атрибуты: id, class, lang, dir, title, style, onfocus, onblur, onselect,
onchange, onclick, ondbl click, onmousedown, onmouseup, onmouseover, onmousemove,
onmouseout, onkeypress, onkeydown, onkeyup.
Нестандартные теги
Браузеры поддерживают ряд тегов, не описанных в стандарте HTML 4.
BGSOUND
Тег <BGSOUND> заставляет браузер проиграть звуковой файл. Поддерживаются
следующие форматы: AU, WAV, MID. He имеет закрывающего тега. Поддержи-
вается только Internet Explorer.
Атрибуты
• src — путь к звуковому файлу.
• loop — количество циклов воспроизведения. Возможные значения: натураль-
ное число или Infinite.
Пример использования:
<BGSOUND src="My__sound.wav" loop-"INFINITE">
BLINK
Ter <BLINK> заставляет мигать текст-содержание. Поддерживается только Netscape
Communicator.
Пример использования:
<ВШК>Этот текст будет мерцать, но только в браузерах от Netscape</BLINK>
ILAYER
Позволяет автору документа позиционировать HTML-блок относительно дру-
гих слоев. Поддерживается только Netscape Communicator.
Тело документа 397
Атрибуты
• above — имя слоя, лежащего над данным.
• background — фоновый рисунок.
• bel ow — имя слоя, лежащего под данным.
• bgcol or — цвет фона. Значение — стандартное название или шестнадцатерич-
ный код цвета (см. раздел «Стандартные цвета» в конце приложения).
• clip — координаты слоя. Возможные форматы:
Q clip="left, top, right, bottom";
Q clip="right, bottom" (левый верхний угол помещается в точку 0,0).
• height — высота слоя.
• 1 eft — координата левого края относительно родительского слоя. Обязатель-
ный атрибут.
• name — имя слоя.
• радех — абсолютная координата X в окне документа.
• pagey — абсолютная координата Y в окне документа.
• src — указывает адрес вложенного документа.
• top — координата верхнего края относительно родительского слоя. Обяза-
тельный атрибут.
• v i s i b i l i t y — видимость слоя. Возможные значения: Show (показать), Hide
(скрыть), Inherit (наследовать).
• WIDTH — ширина слоя.
• z- i ndex — индекс в списке слоев.
Пример использования:
<ILAYER name="11ayer2" top="100" left="100" clip="10. 10. 50. 50" background="image.gif"
bgcolor="BLACK" height="100" width="100"> Содержимое слоя<ИАУЕЯ>
KEYGEN
Тег <KEYGEN> был предложен компанией Netscape и используется для обеспече-
ния безопасности при передаче через Интернет данных формы.
Атрибуты
• challenge — значение атрибута шифруется с помощью ключа, присланного
сервером в процессе формирования персонального ключа. Если атрибут опу-
щен, будет использовано стандартное значение. Возможные значения —
текст или число.
• name — имя ключа.
Пример использования:
<KEYGEN name="MyName" cha!1enge="MyChallenge">
LAYER
Тег <LAYER> позволяет автору документа позиционировать HTML-блок относи-
тельно страницы. Поддерживается только Netscape Communicator.
398 Приложение 2. HTML 4
Атрибуты
• above — имя слоя, лежащего над данным слоем.
• background — фоновый рисунок.
• bel ow — имя слоя, лежащего под данным.
• bgcol or — цвет фона. Значение — стандартное название или шестнадцатерич-
ный код цвета (см. раздел «Стандартные цвета» в конце приложения).
• c l i p — координаты слоя. Возможные форматы:
Q clip="left, top, right, bottom";
G c1ip="right, bottom" (левый верхний угол помещается в точку 0,0).
• Height — высота слоя.
• left — координата левого края относительно родительского слоя. Обязатель-
ный атрибут.
• name — имя слоя.
• радех — абсолютная координата X в окне документа.
• pagey — абсолютная координата Y в окне документа.
• src — указывает адрес вложенного документа.
• top — координата верхнего края относительно родительского слоя. Обяза-
тельный атрибут.
• v i s i b i l i t y -- видимость слоя. Возможные значения: Show (показать), Hide
(скрыть), Inherit (наследовать).
• width — ширина слоя.
• z-index — индекс в списке слоев.
Пример использования:
<LAYER name-"ilayer2" TOP="100" LEFT="100" CLIP-"10. 10. 50. 50" background»"image.gif"
BGCOLOR»"BLACK" height="100" width="100">Coflep>iwMoe слоя<1АУЕР >
MARQUEE
Тег <MARQUEE> прокручивает текст-содержание наподобие бегущей строки. Рабо-
тает только в Internet Explorer.
Атрибуты
• align — способ выравнивания. Возможные значения:
Q Left — по левому краю (значение по умолчанию);
О Ri ght — по правому краю;
О Center — по центру;
Q Тор — по верху;
О Bottom — по низу.
• behavior — указание, что делать с текстом-содержанием. Возможные значения:
О Scrol 1 (значение по умолчанию) — текст исчезает с одной стороны облас-
ти и появляется с другой;
Q SI ide — текст полностью появляется на странице и останавливается;
Q A1 ternate — текст периодически перемещается от одного края к другому.
Тело документа 399
СОВЕТ
Для формирования нескольких колонок текста лучше использовать таблицы.
NOBR
Запрещает браузеру вставлять разрыв строки в тексте.
Пример использования:
<NOBR>http://www.mysite.com</NOBR>
NOLAYER
Позволяет отображать альтернативный текст, если браузер не может отобразить
слой. Позволяет авторам web-страниц делать текстовую замену невидимому слою.
Поддерживается только браузерами от Netscape.
400 Приложение 2. HTML 4
Пример использования:
<NOLAYER>Baui браузер не воспроизводит слоев.<NOLAYER>
RT
Часть элемента <RUBY>. Содержит текст-подсказку. Поддерживается только Inter-
net Explorer, начиная с версии 5. Имеет единственный атрибут — name, который
позволяет сослаться на элемент.
Пример использования:
<RUBY> Основное содержание
<РТ>Содержание подсказки</РТ>
</RUBY>
RUBY
Элемент <RUBY> содержит пару «основной текст—текст подсказки». Его можно
использовать для текстов на восточных языках, в которых несколько слов могут
иметь одинаковое написание, но разное произношение. Транскрипцию в этом
случае можно заключить в текст подсказки. Поддерживается только Internet
Explorer, начиная с версии 5. Имеет один атрибут — name, который позволяет со-
слаться на элемент.
Пример использования:
<RUBY> Основное содержание
^Т>Содержание подсказки</РТ>
</RUBY>
SERVER
Тег <SERVER> был разработан Netscape и позволяет запускать на сервере сцена-
рий на JavaScript.
SPACER
Еще один тег от компании Netscape. Позволяет создать пустое пространство во-
круг текста-содержания.
Атрибуты
• align — режим выравнивания пустого пространства (если атрибут type равен
Block). Возможные значения:
О Left — выравнивание по левому краю;
Q Right — выравнивание по правому краю;
Q Тор — выровнять верхнюю кромку изображения с верхней линией теку-
щей текстовой строки;
Q Texttop — выровнять верхнюю кромку изображения с верхней линией те-
кущей текстовой строки (только для Netscape Communicator);
О Middle — выровнять базовую линию текущей текстовой строки с центром
изображения;
О Absmiddle — выровнять центр текущей текстовой строки с центром изобра-
жения (только для Netscape Communicator);
Q Basel i ne — выровнять нижнюю кромку изображения с базовой линией те-
кущей текстовой строки (только для Netscape Communicator);
Тело документа 401
WBR
Тег <WBR> отменяет действие других тегов и позволяет браузеру переносить слова.
Пример использования:
<М(Ж>Отменить переносы<иВЯ>Снова
разрешить переносы слов</МВР> </NOBR>
XML
Тег <XML> позволяет вставить кусок XML-текста. Поддерживается Internet Ex-
plorer начиная с версии 5.
Атрибуты
• ns — URL пространства имен XML-текста.
• prefix — префикс пространства имен XML-текста.
• src — адрес внешнего источника документа.
Пример использования:
<XML id="xmlidl">
<IDCARD>
<NAME gender="male">John Doe</NAME>
<PHONE>l-800-555-5555</PHONE>
<EMAIL address="jdoe@someaddress.com"/>
</IOCARD>
</XML>
XMP
Тег <ХМР> позволяет отображать содержимое «как есть». Например, может ис-
пользоваться, чтобы другие теги выводились как текст, а не учитывались как
команды разметки. Поддерживается Internet Explorer.
402 Приложение 2. HTML 4
Стандартные атрибуты: id, class, lang, dir, onfocus, onblur, onselect, onchange, onclick,
ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup.
Пример использования:
<XMP>text</XMP>
Стандартные атрибуты
В данном разделе приведены стандартные атрибуты тегов, значения которых не
отражены в описании тегов или отражены лишь кратко.
align
Определяет способ горизонтального выравнивания текста или объекта. Не реко-
мендован к использованию спецификацией HTML 4; рекомендуется использо-
вать таблицы стилей.
Возможные значения:
• Left — по левому краю (по умолчанию);
• Center — по центру;
• Right — по правому краю (для некоторых тегов значение может быть недо-
ступно);
• Justi fy — по ширине.
Для тегов таблиц и ячеек возможно еще одно значение — Char, когда выравнива-
ние происходит по указанному символу (например, по запятой или точке).
bgcolor
Указывает цвет фона страницы или элемента таблицы (теги <BODY>, <TABLE>, <TR>,
<ТН>, <TD>). He рекомендован к использованию спецификацией HTML 4; реко-
мендуется использовать таблицы стилей. В качестве значения может использо-
ваться стандартное название или шестнадцатеричный код цвета (см. раздел
«Стандартные цвета» в конце приложения).
char
Указывает символ, который может быть выбран в качестве элемента выравнива-
ния (см. атрибут align). Например, числа можно выравнивать по символу точки
в английском тексте и по символу запятой в русском или французском.
charoff
Задает смещение от первого встретившегося символа, предназначенного для вы-
равнивания.
charset
Определяет кодировку символов документа, указанного в ссылке.
class
Определяет имя класса или имена классов, к которым относится элемент. Спи-
сок имен должен быть разделен пробелами или другими символами «пустого
пространства».
Стандартные атрибуты 403
dir
Атрибут di г определяет направление текста или таблиц. Возможные значения:
• Itr
_ — слева направо;
I rt 1 — справа налево.
href
Указывает URL ресурса в виде абсолютного или относительного адреса, а также
может содержать указания на якоря, расположенные на странице.
hreflang
Указывает основной язык ресурса, указанного в атрибуте href, и может быть
приведен, если последний имеет определенное значение.
id
Определяет имя элемента. Имя должно быть уникально в документе.
lang
Атрибут указывает язык значения атрибута или содержания тега. Значение ат-
рибута может быть учтено при работе поисковых машин, в браузерах с речевым
интерфейсом, при различных нормах расстановок кавычек и других символов,
при проверке грамматики и орфографии. Некоторые из возможных значений:
• "en" — английский;
• "en-US" — английский, версия США.
Двухбуквенные сочетания зарезервированы в согласии с ISO639:
fr Французский
de Немецкий
it Итальянский
nl Голландский
el Греческий
es Испанский
pt Португальский
ar Арабский
he Еврейский
ru Русский
zh Китайский
ja Японский ,
hi Хинди
-
ur Урду
sa Санскрит
name
Указывает имя элемента для ссылки на него. Имя принадлежит тому же про-
странству имен, что и значение атрибута id.
onblur
Назначает сценарий событию onblur, которое происходит, когда элемент теряет
фокус. Может быть использован для тегов: <А>, <AREA>, <LABEL>, <INPUT>, <SELECT>,
<TEXTAREA> и <BUTTON>. %
onchange
Назначает сценарий событию onchange, которое происходит, когда элемент
управления теряет фокус, причем перед этим его содержимое было изменено.
Доступен для элементов <INPUT>, <SELECT> и <TEXTAREA>.
onclick
Назначает сценарий событию onclick, которое происходит, когда пользователь
щелкает на элементе.
ondblclick
Назначает сценарий событию ondblclick, которое происходит, когда пользова-
тель производит двойной щелчок на элементе.
onfocus
Назначает сценарий событию onfocus, которое происходит, когда элементу пере-
дается фокус. Может быть использован для тегов: <А>, <AREA>, <LABEL>, <INPUT>,
<SELECT>, <TEXTAREA> и <BUTTON>.
onkeydown
Назначает сценарий событию onkeydown, которое происходит, когда нажата кла-
виша.
onkeypress
Назначает сценарий событию onkeypress, которое происходит, когда нажата и от-
пущена клавиша.
onkeyup
Назначает сценарий событию onkeyup, которое происходит, когда отпущена кла-
виша.
onload
Назначает сценарий событию onload, которое происходит, когда браузер загру-
жает содержимое окна или все фреймы. Событие доступно для тегов <BODY>
и <FRAMESET>.
onmousedown
Назначает сценарий событию onmousedown, которое происходит, когда пользова-
тель нажимает кнопку мыши над элементом.
onmousemove
Назначает сценарий событию onmousemove, которое происходит, когда указатель
мыши двигается.
Стандартные атрибуты 405
onmouseout
Назначает сценарий событию onmouseout, которое происходит, когда указатель
мыши уходит из области над элементом.
onmouseover
Назначает сценарий событию onmouseover, которое происходит, когда указатель
мыши проходит над элементом.
on mouseup
Назначает сценарий событию onmouseup, которое происходит, когда пользователь
отпускает кнопку мыши над элементом.
onreset
Назначает сценарий событию onreset, которое происходит, когда данные формы
сбрасываются с помощью кнопки Reset. Атрибут доступен для элемента <FORM>.
onselect
Назначает сценарий событию onselect, которое происходит, когда пользователь
производит выделение текста. Доступен для тегов <INPUT> и <TEXTAREA>.
onsubmit
Назначает сценарий событию onsubmit, которое происходит, когда отправляется
форма. Атрибут доступен для элемента <FORM>.
on unload
Назначает сценарий событию onunload, которое происходит, когда браузер уда-
ляет содержимое окна или все фреймы. Доступен для тегов <BODY> и <FRAMESET>.
rel
Описывает отношение между текущим документом и документом, на который
ссылается атрибут href. Значением этого атрибута может быть список с разде-
лителями-пробелами, содержащий следующие типы возможных отношений:
• Stylesheet — таблица стилей (CSS) для текущего документа; браузер загру-
зит файл с указанного в параметре href адреса и применит его к текущему
документу;
• Ноте — главная страница сайта (index.html);
• Toe, Contents — оглавление данного документа;
• Index — файл, содержащий указатель;
• Glossary — глоссарий терминов, относящихся к данному документу;
• Copyright — страница сайта, на которой есть информация о его создателях,
авторских правах и т. п.;
• Up, Parent — указывает на родительскую страницу;
• C h i l d — указывает на дочернюю страницу;
• Next — указывает на следующую страницу в последовательности документов;
• Previous — указывает на предыдущую страницу в последовательности доку-
ментов;
• Last, End — указывает на последнюю страницу в последовательности документов;
406 Приложение 2. HTML 4
Стандартные цвета
При указании цвета элементов страницы можно использовать как шестнадцате-
ричное RGB-значение, так и названия нескольких стандартных цветов. Новые
браузеры поддерживают значительно больший список названий, однако специ-
Стандартные цвета 407
фикация HTML 4 описывает только 16. Кроме того, в ней рекомендуется зада-
вать цвета через таблицы стилей, а не через цветовые аргументы тегов. Фор-
мально браузеры должны быть чувствительны к регистру символов в написании
названий цветов, но большинство обозревателей Интернета на указание Black,
BLACK и Ы ack выведет черный цвет.
Ниже приведены шестнадцатеричные значения стандартных цветов.
• Black = "#000000"
• Green = "#008000"
• Silver - "#СОСОСО"
• Lime = "#OOFFOO"
• Gray = "#808080"
• Olive = "#808000"
• White - "#FFFFFF"
• Yellow = "#FFFFOO"
• Maroon = "#800000"
• Navy J - "#000080"
Ш Red = "#FFOOOO"
• Blue = "#OOOOFF"
• Purple - "#800080"
• Teal = "#008080"
• Fuchsia = "#FFOOFF"
• Aqua = "#OOFFFF"
'
• ..
Приложение 3
JavaScript
Молись о счастливых днях!
На зимнее дерево сливы
Будь сердцем своим похож.
Мацуо Басе'1
ПРИМЕЧАНИЕ
Все примеры, кроме объектов document, window и body, приведены согласно руководству
Netscape. В каждой версии браузера надо проверять работоспособность отдельных команд
и объектов. Примеры в большинстве своем не являются готовым кодом сценария, а лишь
демонстрируют синтаксис команд.
Полное описание операторов, свойств и методов объектов JavaScript выходит за рамки
данной книги. Для более подробного ознакомления с возможностями языка и управления
документом смотрите ресурсы Интернета.
В переводе В. Марковой.
Объекты JavaScript, их методы и свойства 409
Описание
Объект Array позволяет создавать массивы и работать с ними. Свойства и мето-
ды объекта приведены в табл. П3.1, П3.2.
Свойство Описание
Метод Описание
1
Для встроенных объектов (и объекта Array в частности) функция toSource возвращает строку, кото-
рая означает, что код недоступен:
function Array() {
[native code]
410 Приложение 3. JavaScript
Примеры
• Создается массив msgArray длиной 0, затем присваиваются 0-й и 99-й элемен-
ты, в результате чего длина массива становится равной 100:
msgArray = new ArrayO;
msgArray[0] = "Нулевой";
msgArray[99] = "сотый";
// Следующее выражение истинно.
// так как мы определили 99-й элемент
if (msgArray. length == 100)
ту\/аг="Длина массива равна 100":
• В следующем примере создается двумерный массив, который затем преобра-
зуется в строку для вывода:
myVar="TecT на многомерный массив":
а = new Array(4);
for (i=0; i < 4: i++) {
a[i] = new Array(4);
for (j=0; j < 4; j++) {
</SCRIPT>
Результатом работы сценария будет следующая страница:
ангорская.сибирская.персидская.сиамская
ангорская + сибирская + персидская + сиамская
Длина массива равна 4
popped сиамская
ангорская.сибирская.персидская
ангорская,сибирская.персидская.бенгальская.британская
британская,бенгальская.персидская,сибирская,ангорская
myCats after shift: бенгальская.персидская.сибирская.ангорская
myCats after slice: бенгальская.персидская.сибирская.ангорская
newCat: бенгальская.персидская
Sorted:ангорская,бенгальская.персидская.сибирская
After adding: ангорская.бенгальская.русская голубая.персидская.сибирская
After unshift: 7
Объект Boolean
Создание
new Boolean(value)
Параметры
М value — начальное значение объекта. Значение конвертируется в логическое,
если необходимо. Если значение не указано или равно О, -О, null, false, NaN,
undefined и пустой строке (""), объект будет равен false. В других случаях,
включая любой объект и строку "false", значение созданного объекта будет
true.
Описание
Объект Bool ean используется для хранения логического значения. Свойства и ме-
тоды объекта Boolean приведены в табл. ПЗ.З, П3.4.
Свойство Описание
constructor Определяет функцию-конструктор объекта Boolean
prototype Позволяет добавлять свойства ко всем объектам Boolean
Метод Описание
toSource() Возвращает строку исходного кода для создания объекта
toStringQ Возвращает строковое значение, представляющее элементы
в массиве
ValueOf() Возвращает примитивное значение объекта
412 Приложение 3. JavaScript
Примеры
• Следующие строки создают объекты Boolean со значением false:
bNoParam - new BooleanO:
bZero = new Boolean(O):
bNull = new Boolean(null): 1
bEmptyString = new BooleanC "):
bfalse = new Boolean(false):
• Следующие строки создают объекты Bool ean со значением true:
btrue - new Boolean(true);
btrueString = new Boolean("true");
bfalseString = new BooleanC'false");
bMyBool = new BooleanC'MyBool"):
• He путайте объект Bool ean со значением логических примитивов. Сравните:
х = new Boolean(false);
if(x) // Условие истинно
х = false:
if(x) // Условие ложно
х = true:
• Не используйте объект Boolean для превращения нелогического значения
в логическое. Для этого есть функция Bool ean:
х = Boolean(expression) ; // Предпочтительно
х = new Boolean(expression): // Лучше не использовать
• Использование методов объекта Bool ean:
van flag = new Boolean(true);
van myVar=flag.toString(); // myVar равно true
x = new BooleanO: .
myVar=x.valueOf(); // myVar равно false
Объект Date
Создание
new DateO:
new Date(milllseconds);
new Date(dateString);
new Date(yr_num. mo_num, dayjium [. hr_num. min_num, secjfium, ms_num]);
Параметры
• mi 11 i seconds — целое число, представляющее собой количество миллисекунд,
прошедших с полуночи (00:00:00) 1 января 1970 г.
• dateString — строка, представляющая дату. Необходимый формат возвращает
метод Date.parse.
• yrjium, mo_num, day_num — целые числа, представляющие части даты, в числен-
ном представлении месяцы исчисляются, начиная с 0: 0=January и 1 ^De-
cember.
• hr_num, mi n_num, sec_num, ms_num — целые числа, составляющие даты.
Описание
Объект Date позволяет работать с датой и временем. Свойства и методы объекта
приведены в табл. ГОД П3.6.
Объекты JavaScript, их методы и свойства 413
Свойство Описание
constructor Определяет функцию-конструктор объекта Date
prototype Позволяет добавлять свойства ко всем объектам Date
Метод Описание
getDateQ Возвращает день месяца для указанного объекта
Date
getDay() Возвращает день недели для указанного объекта
Date
getFullYear() Возвращает четырехразрядный год для указанного
объекта Date
getHoursQ Возвращает час для указанного объекта Date
getMillisecondsQ Возвращает миллисекунды для указанного объекта
Date
getMinutesQ Возвращает минуты для указанного объекта Date
getMonthQ Возвращает месяц для указанного объекта Date
getSecondsQ Возвращает секунды для указанного объекта Date
getTimeO Возвращает число миллисекунд, прошедших с полу-
ночи 1 января 1970 года по Гринвичу, для указанного
объекта Date
getTimezoneOffsetQ Возвращает разницу в минутах между временем ком-
пьютера и временем по Гринвичу
getUTCDate() Возвращает день месяца для указанного объекта
Date соответственно времени по Гринвичу
getUTCDay() Возвращает день недели для указанного объекта
Date соответственно времени по Гринвичу
•
getUTCFullYearQ Возвращает четырехразрядный год для указанного
объекта Date соответственно времени по Гринвичу
getUTCHours() Возвращает час для указанного объекта Date соот-
ветственно времени по Гринвичу
getUTCMilliseconds() Возвращает миллисекунды для указанного объекта
Date соответственно времени по Гринвичу
getUTCMinutes() Возвращает минуты для указанного объекта Date со-
ответственно времени по Гринвичу
getUTCMonthQ Возвращает месяц для указанного объекта Date соот-
ветственно времени по Гринвичу
getUTCSeconds() Возвращает секунды для указанного объекта Date со-
ответственно времени по Гринвичу
getYear() Возвращает год для указанного объекта Date
parse(dateString) Возвращает число миллисекунд, прошедших с полу-
ночи (00:00:00) 1 января 1970 г. по местному времени
Продолжение
414 Приложение 3. JavaScript
Метод Описание
setDate(dateValue) Устанавливает день месяца для указанного объекта
Date
setFullYear(yearValue [, monthValue Устанавливает полный год для объекта Date
[, dateValue]])
setHours(hourValue) Устанавливает часы для объекта Date
setMilliseconds(millisecondValue) Устанавливает миллисекунды для объекта Date
setMinutes(minuteValue) Устанавливает минуты для объекта Date
setMonth(monthValue [, dateValue ]) Устанавливает месяц для объекта Date
setSeconds(secondValue) Устанавливает секунды для объекта Date
setTime(millisecondValue) Устанавливает время для указанного объекта Date
в миллисекундах
setUTCDate(dateValue) Устанавливает дату для указанного объекта Date со-
ответственно времени по Гринвичу
setUTCFullYear(yearValue [, Устанавливает год для указанного объекта Date соот-
monthValue [, dateValue]]) ветственно времени по Гринвичу
setUTCHours(hourValue [, Устанавливает час для указанного объекта Date соот-
minuteValue [, secondValue [, ветственно времени по Гринвичу
millisecondValue]]]))
setUTCMilliseconds(millisecondValue) Устанавливает миллисекунды для указанного объекта
Date соответственно времени по Гринвичу
setUTCMinutes(minuteValue [, Устанавливает минуты для указанного объекта Date
secondValue [, millisecondValue]])) соответственно времени по Гринвичу
setUTCMonth(monthValue [, Устанавливает месяц для указанного объекта Date
dateValue]) соответственно времени по Гринвичу
setUTCSeconds(secondValue [, Устанавливает секунды для указанного объекта Date
millisecondValue])) соответственно времени по Гринвичу
setYear(yearValue) Устанавливает год для указанного объекта Date соот-
ветственно показаниям часов компьютера, на кото-
ром выполняется Flash-проект
toGMTStringO Конвертирует объект в строку в согласии с GMT стан-
дартом Интернета
toLocaleString() Конвертирует объект в строку в согласии с местными
стандартами
toSource() Возвращает строку исходного кода для создания объ-
екта
toString() Метод возвращает строковое значение даты
toUTCStringQ Конвертирует объект в строку в согласии с универ-
сальными стандартами
UTC(yearValue, monthValue [, Возвращает число миллисекунд между полуночью
dateValue [, hourValue [, 1 января 1970 года по всемирному времени и момен-
minuteValue [, secondValue [, том, указанным в параметрах
millisecondValue >])
ValueOfQ Возвращает примитивное значение объекта
Объекты JavaScript, их методы и свойства 415
Примеры
• В данном примере создается объект theBigDay, которому сначала присваива-
ются значения методами set, а затем извлекаются методами get:
theBigDay - new DateO;
theBigDay.setFullYear(1999):
theBigDay.setDate(17);
theBigDay.setHours(22);
theBi gDay.setMi11i seconds(100):
theBi gDay.setMi nutes(10):
theBigDay.setMonth(6);
theBigDay. setSecondsOO):
day = theBigDay. getDateO:
weekday - theBigDay.getDayO:
yr = theBigDay.getFullYearO:
hours = theBigDay.getHoursO;
ms - theBigDay.getMillisecondsO:
minutes - theBigDay.getMinutesC);
month = theBi gDay. getMonthO:
sees - theBigDay.getSecondsO:
document.writelntyr. month, day. weekday, hours, minutes, sees, ms):
theBigDay = new DateC'July 1. 1999"):
sameAsBigDay = new DateO:
sameAsBigDay.setTime(theBigDay.getTimeO):
• Пример на определение часового пояса:
х - new Datet):
currentTimeZoneOffsetlnHours - x.getTimezoneOffset()/60;
• В следующем примере создается объект Today, которому сначала присваива-
ются значения методами set, а затем извлекаются методами get. В отличие от
предыдущего примера время учитывается по Гринвичу.
Today = new DateO;
Today.setUTCDateC03):
Today.setUTCFul!Year(2002):
Today.setUTCHourt17):
Today.setUTCMi11i seconds(500):
Today.setUTCMi nutes(03):
Today.setUTCMonth(09):
Today.setUTCSeconds(20):
d = Today. getUTCDateO:
weekday = Today.getUTCDayO;
yr = Today. getUTCFullYearO;
hrs = Today.getUTCHoursO;
ms = Today. getUTCMillisecondsO;
rain = Today.getUTCMinutesO:
raon • Today.getUTCMonthO:
sec = Today. getUTCSecondsO:
GMTString=Today.toGMTString();
LocaleStri ng=Today.toLocaleStri ng():
UTCstring = Today. toUTCStringO:
document.write!n(yr, mon, day. weekday, hrs. min. sec, ms):
document.writelntGMTString. LocaleString. UTCstring):
• Использование функции getYear
Xmas = new DateC"December 25. 1995 23:15:00"
year = Xmas. get Yea rO; // Возвращает 95
Xmas = new Datet"December 25. 2000 23:15:00"):
416 Приложение 3. JavaScript ,
ПРИМЕЧАНИЕ
После того как вы установили свойство с помощью prototype, все последующие объекты,
созданные на основе DateO, будут иметь данное свойство.
Объект Error
Объекты Error создаются браузером (пока только Internet Explorer 5.x) при воз-
никновении ошибок в процессе выполнения сценария и содержат информацию
об ошибке, которая может быть использована операторами обработки исключе-
ний. Свойства и методы объекта приведены в табл. П3.7, П3.8.
Свойство Описание
Метод Описание
Объект Function
Создание
new Function ([argl[, arg2[. ... argN]].] functionBody)
function name([param[. param[, ... param]]]) {
statements
Параметры
• argl, arg2, ..., argN — имена, которые будут использоваться функцией как фор-
мальные имена аргументов.
• functionBody — тело функции (последовательность функций и операторов).
• name — имя функции.
• param — имена аргументов функции (до 255 аргументов).
• statements — тело функции (последовательность функций и операторов).
Описание
Объект Function служит для создания собственной функции пользователя.
Свойства и методы объекта приведены в табл. П3.9, П3.10.
Свойство Описание
arguments Массив, содержащий аргументы функции
arguments.callee Указывает исполняемую в данный момент функцию
arguments.caller Указывает функцию, которая вызвала функцию, испол-
няемую в данный момент
arguments, length Число аргументов функции
arity Число аргументов, полученных функцией
constructor Определяет конструктор функции
length Число аргументов, полученных функцией
prototype Позволяет создавать дополнительные свойства для функции
i
Таблица П3.10. Методы объекта Function
Метод Описание
apply(thisArg[, argArray]) Позволяет применить метод одного объекта к другому
объекту
call(thisArg[, argl[, arg2[, ...]]]) Вызывает метод
toSourceQ Возвращает строку исходного кода для создания объекта
toStringO Метод возвращает строковое значение, представляющее
элементы в массиве
ValueOfQ Возвращает примитивное значение объекта
Примеры
• Создание функции:
var multiply = new FunctionC'x". "y". "return x * y");
14 Зак. 96
418 Приложение 3. JavaScript
Свойство Описание
Е Константа Эйлера и основание натуральных логарифмов
LN10 Натуральный логарифм десяти
LN2 Натуральный логарифм двух
LOG2E Логарифм е по основанию 2
LOG10E Логарифм е по основанию 10
PI Число л — отношение длины окружности к ее диаметру
SQRT1_2 Квадратный корень из 1/2
SQRT2 Квадратный корень из 2
Объекты JavaScript, их методы и свойства 419
Метод Описание
Примеры
• Примеры тригонометрических функций:
with (Math) {
а - PI * r*r:
у = r*sin(theta):
х = r*cos(theta):
function getAcosCx) {
return Math.acos(x)
}
• Получение случайного числа:
// Возвращаем случайное число между 0 и 1
function getRandomO {
return Math.randomO
}
Объект Number
Создание
new Number ( v a l u e )
Параметры
• val ue — численное значение создаваемого объекта.
420 Приложение 3. JavaScript
Описание
Объект Number позволяет работать с числами. Свойства и методы объекта приве-
дены в табл. П3.13, П3.14.
Свойство Описание
Метод Описание
Примеры
• Примеры задания точности и вида числа:
van num=5.123456:
alertC'num.toPrecisionO is " + num.toPrecisionO): // Отображает 5.123456
alert("num.toPrecision(3) is " + num.toPrecision(3)); // Отображает 5.12
alert("num.toPrecision(l) is " + num.toPrecision(D): // Отображает 5
alertC'num.toFixedO is " + num.toFixedO): // Отображает 5.123456
alert("num.toFixed(4) is " + num.toFixed(4)): // Отображает 5.1234
alertC'num.toExponentiaK) is " + num.toExponentialO): // Отображает 5.123456е+0
alert("num.toExponential(3) is " +• num.toExponentialO)): // Отображает 5.123е+0
van bigNumber = Number.MAX_VALUE * 10:
if (bigNumber -= Number.POSITIVEJNFINITY)
fund О
else
func2():
Объекты JavaScript, их методы и свойства 421
Объект Object
Создание
new Object О
Описание
Прародитель всех объектов в JavaScript. Свойства и методы объекта Object при-
ведены в табл. П3.15, П3.16.
Свойство Описание
Метод Описание
Примеры
• Сценарий выводит Pi=3,141592653589793.
<SCRIPT language="JavaScriptl.2">
Ob-new Object О:
Ob.p="Pi";
document.write(Ob.p);
Ob.pi=Math.PI;
document.write("="+0b.pi):
</SCRIPT>
Объект Reg Ex p
Создание
/pattern/flags
new RegExpC"pattern"[, "flags"])
Параметры
• pattern — текст регулярного выражения.
• f 1 ags — один или несколько флагов:
Q g — учитывать все возможные вхождения;
D i — игнорировать регистр символов;
D m — многострочный режим.
422 Приложение 3. JavaScript
Свойство Описание
constructor Определяет функцию-конструктор регулярного выражения
global Учитываются или нет все возможные вхождения
ignoreCase Игнорируется или нет регистр символов
lastlndex Индекс, с которого начинается следующее вхождение
multiline Установлен или нет многострочный режим
prototype Позволяет добавлять свойства ко всем регулярным выражениям
source Текст шаблона
Метод Описание
Специальные символы
Значения специальных символов, используемых при создании регулярных вы-
ражений, приведены в табл. П3.19.
Символ Значение
\ Указывает, что следующий символ надо интерпретировать как специальный.
Например, /Ь/ означает букву b, a /\b/ означает пробел. Если за \ следует спе-
циальный символ, его надо интерпретировать как обычный: /а\*/ означает а*
Указывает, что следующий символ надо искать в начале строки или после пе-
ревода строки в многострочном режиме. Например, / А А/ нет в "an А", но есть
в "An A"
Указывает, что следующий символ надо искать в конце строки или до перевода
строки в многострочном режиме. Например, /t$/ нет в "eater", но есть в "eat"
Вхождение 0 или более раз. Например, выражение /bo*/ означает Ьоооо в "А
ghost booooed" и b в "A bird warbled", но его нет в "A goat grunted"
Вхождение 1 или более раз, эквивалентно записи {!,}. Например, выражение
/а+/ означает а в "candy" и все а в "caaaaaaandy"
Вхождение 0 или 1 раз. Например, /е?1е?/ означает el в "angel" и le в "angle"
Точка означает любой символ, за исключением символа новой строки. Напри-
мер, поиск выражения /.п/ выдаст an и on в "nay, an apple is on the tree", но не
найдет ничего в "nay"
Объекты JavaScript, их методы и свойства 423
Значение
Поиск выражения х и запоминание данного вхождения. Например, выражение
/(foo)/ будет найдено в "foo bar" и запомнено как foo. Запомненные вхождения
можно вызвать из элементов массива [1],..., [п] или свойств $1,..., $9 объекта
RegExp
Поиск вхождения х, при этом вхождение не запоминается
Вхождение х, но только если за ним следует у. Например, результат поиска вы-
ражения /Jack(?=Sprat)/ будет содержать Jack, только если за ним будет следо-
вать Sprat
Вхождение х, но только если за ним не следует у. Например, результат поиска
выражения /\d+(?!\.)/ не будет содержать цифру перед точкой
Означает х или у. Например, поиск выражения /green|red/ приведет к успеху
и в "green apple", и в "red apple"
Означает ровно п вхождений выражения. Например, выражение /а{2}/ не бу-
дет найдено в "candy", но будет найдено "caandy" и "caaandy"
Означает как минимум п вхождений выражения. Например, выражение /а{2}/
не будет найдено в "candy", но будет найдено "caaaaandy"
Означает, что вхождений должно быть не меньше п и не больше т. Например,
поиск выражения /а{1,3}/ в строке "cndy" не приведет к положительному ре-
зультату, а в строке "caaaaaaandy" найдет первые ааа
Означает любой из заключенных в скобки символов. Возможно использование
дефиса для обозначения диапазонов алфавита. Например, выражение [abed]
эквивалентно [а-с]
Означает любой из не заключенных в скобки символов. Возможно использова-
ние дефиса для обозначения диапазонов алфавита. Например, выражение
[Aabcd] эквивалентно [Ла-с]. Поиск выражения в "bra" приведет к нахождению г
Вхождение символа возврата каретки. Не путайте с \Ь
Пустое пространство между словами, например пробел. Не путайте с [\Ь]
Означает границу, но не между словами. Например, поиск /\w\Bn/ приведет
к нахождению оп в "noonday"
X — буква латинского алфавита. Означает управляющий символ в строке.
Например, /\сМ/ найдет Control-M
Цифра. Эквивалентно [0-9]
Не цифра. Эквивалентно [Л0-9]
Символ form-feed
Перевод строки (line feed)
Возврат каретки
Единичный пробел, а также символы tab, form feed, line feed.
Эквивалентно [ \f\n\r\t\uOOAO\u2028\u2029]
Любой символ, но не символ пустого пространства.
Эквивалентно [л \f\n\r\t\uOOAO\u2028\u2029]
Символ табуляции (tab)
Символ вертикальной табуляции
Любая буква или цифра. Эквивалентно [A-Za-zO-9J
Любой символ, но не буква и не цифра. Эквивалентно [AA-Za-zO-9J
Возвращает ссылку на последнее вхождение подстроки в n-х скобках
Означает символ NUL
Продолжение ^>
424 Приложение 3. JavaScript
Символ Значение
\xhh Символ, записанный своим шестнадцатеричным кодом hh (2 шестнадцатерич-
ные цифры)
\uhhhh Символ с кодом hhhh (4 шестнадцатеричные цифры)
Примеры
• Функция testinput выясняет, содержит ли строка str регулярное выражение
re, и выводит результат:
function testinput(re. str){
if (re.test(str))
midstring = " contains ";
else
midstring - " does not contain ";
document.write (str + midstring + re.source);
}
• Определяем вхождения регулярного выражения, содержащего «d», затем не-
которое количество «Ь» и, возможно, одно «d». Результат заносится в массив
туАггау, регистр букв игнорируется:
myRe=/d(b+)(d)/ig;
туАггау = myRe.execC'cdbBdbsbz");
В результате туАггау будет содержать ["dbBd", "ЬВ", "d"]
Объект String
Создание
new String(string)
Описание
Объект String представляет набор символов в строке. Свойства и методы объек-
та приведены в табл. П3.20, П3.21.
Свойство Описание
constructor Определяет функцию-конструктор строки
length Длина строки
prototype Позволяет добавлять свойства ко всем строкам
Метод Описание
anchor(nameAttribute) Создает якорь, на который можно сослаться
big() Создает строку, отображаемую большим шрифтом. Эквивалентно
тегу <BIG>
blink() Создает мигающую строку. Эквивалентно тегу <BLINK>
boMQ Создает строку, отображаемую полужирным шрифтом. Эквива-
лентно тегу <BOLD>
Объекты JavaScript, их методы и свойства 425
Метод Описание
charAt(index) Метод возвращает код символа, стоящего на месте index
charCodeAt(index) Метод возвращает код символа. Возвращаемое значение — 16-
разрядное целое число от 0 до 65 535
concat(valuel,... valueN) Метод объединяет указанные значения и возвращает новую строку
Fixed() Выдает строку моноширинным шрифтом. Эквивалентно тегу <ТТ>
Fontcolor(color) Указывает цвет шрифта. Эквивалентно <FOINT COLOR=color>
fontsize(size) Указывает размер шрифта. Эквивалентно <FONT size=size>
fromCharCode(cl,c2,...cN) Метод возвращает строку, составленную из символов, указанных
в параметрах
indexOf(value) Метод находит строку и возвращает позицию первого указанного
indexOf (value, start) значения. Если значение не найдено, метод возвращает -1
italicsQ Выдает строку курсивом. Эквивалентно тегу <1>
Iastlndex0f(substring) Метод находит строку и возвращает индекс последней позиции
Iastlndex0f(substring, substring, найденной в пределах вызываемой строки. Если под-
start) строка не найдена, метод возвращает -1
Продолжение
426 Приложение 3. JavaScript
Метод Описание
myString .tollpperCaseQ Метод возвращает копию String со всеми символами в верхнем ре-
гистре
ValueOfQ Возвращает примитивное значение объекта
Примеры
• Пример вывода текста с разным оформлением при помощи методов объекта
String:
var myString="TABLE of Contents";
msgWindow=window.open():
msgWindow.document.write!n(myString.anchor("contents_anchor")):
var worldString="Hello, world";
document,write(worldString.smal1()):
document .write("<P>" + worldString.bigO):
document.write("<P>" + worldString.fontsize(7));
document.wri te(worldStri ng.bli nk());
document.write("<P>" + worldString.boldO);
document.write("<P>" + worldString.italicsO):
document.write("<P>" + worldString.strikeO):
var anyString="Brave new world":
document.write("<P>" "The character at index 0 is " + anyString.charAt(O)):
document.write("<P>" "The character at index 1 is " + anyString.charAt(D);
document.write("<P>" "The character at index 2 is " + anyString.charAt(2)):
document.wri teC"<P>" "The character at index 3 is " + anyString.charAt(3)):
document.write("<P>" "The character at index 4 is " + anyString.charAt(4));
Свойство Описание
Функция Описание
boolean (object) Преобразует аргумент в логическое значение
decodeURI(encodedURI) Декодирует адрес (URI), закодированный функцией
encodeURI
decodeURIComponent(encodedURI) Декодирует компонент URI, закодированный функцией
encodeURIComponent(uri)
Объекты JavaScript, их методы и свойства 427
Функция Описание
Примеры
• Преобразование строк в числа:
parseFloat("3.14"):
parseF1oat("314e-2");
parseF1oat("0.0314E+2"):
var x = "3.14";
parseFloat(x):
parseF1oat("FF2"); // Результат - NaN
parselntC'F". 16):
parselnt("15", 10);
parseInt("FXX123", 16);
parselntrilll". 2):
parselntC'Hello". 8): // Результат - NaN
} else {
IsFloatO:
}
d = new Date ("December 17, 1995 03:24:00");
alert (Numbered)):
// Будет выведено "819199440000."
Операторы JavaScript
В этом разделе перечислены операторы языка JavaScript: операторы управления
(табл. П3.24), арифметические операторы (табл. П3.25), операторы сравнения
(табл. П3.26), присваивания (табл. П3.27), логические (табл. П3.28), поразряд-
ные (табл. П3.29), а также некоторые другие операторы и ключевые слова
(табл. ПЗ.ЗО).
Оператор Описание
break [label] Прерывает текущий цикл, оператор switch
или выражение за меткой label и передает
управление выражению за границей цикла
const constname [= value] [..., constname [= Определяет константу только для чтения
value] ]
continue [label] Прерывает текущий цикл или выражение
label и передает управление выражению
за границей цикла
do {statements} Выполняет действия statements пока не бу-
while (condition); дет выполнено условие condition
export namel, name2,..., nameN Позволяет экспортировать сценарий
export *
for ([initial-expression]; [condition]; Выполняет действия statements и increment-
[increment-expression]) expression пока не будет выполнено условие
{statements } condition
for (variable in object) Выполняет действия statements для всех
{ statements } свойств объекта object
function name([param] [, param] [..., param]) Позволяет создать функцию пользователя
{statements}
if (condition) {statements!} [else { Проверяет условие condition: если оно ис-
statements2 }] тинно — выполняется statements!, если
нет — statements2
import objectName.namel, Позволяет импортировать сценарий
objectName.name2,..., objectName.nameN
import objectName.*
label: Метка, позволяющая установить идентифи-
катор для перехода к ней
return expression Определяет выражение expression как ре-
зультат работы функции
Объекты JavaScript, их методы и свойства 429
Оператор Описание
switch (expression) Позволяет создать множественное сравне-
{ case labell: statements!; break; ние expression со значениями, указанными
в label
case Iabel2: statements2; break;
default: statementsN; }
throw expression; Создает определенное пользователем ис-
ключение
try { statements } Определяет блок выражений, которые надо
[catch (exception_var if expression) выполнить, если не произойдет исключения
{statements}]
Примеры
• Использование циклов while и for:
const a = 7;
van num_hits - 0. custjio - 0:
function testBreak(x) {
var i = 0:
while Ci < 6) {
if (i — 3)
break :
return i*x:
}
for (var i = 0; i < 9: i++) {
n += i ;
myfunc(n);
i =0;
n - 0:
while (i < 5) {
if (i == 3)
continue:
n +» i:
Оператор Описание
expression 1 % expression2 Оператор вычисляет остаток от деления параметра
expression! на параметр expression2
expression 1 * expression2 Оператор перемножает два числовых выражения.
expression 1 + expression2 Оператор прибавляет числовые значения или конкатени-
рует (объединяет) символьные. Если один из парамет-
ров — строка, другой параметр конвертируется в символь-
ное значение, и оба значения объединяются
++expression Префиксный или постфиксный оператор инкремента, кото-
expression++ рый прибавляет 1 к параметру expression. Префиксная
форма оператора прибавляет 1 до возвращения результа-
та, постфиксная форма — после
Объекты JavaScript, их методы и свойства 431
Оператор Описание
Оператор Описание
Оператор Описание
Продолжение *?
432 Приложение 3. JavaScript
Оператор Описание
Оператор Описание
Оператор Описание
Оператор Описание
Выражение Значение
expression I ? expression2 : Если expressionl равно true, возвращается значение
expressions expression2, в противном случае — значение expressions
exprl, expr2 (запятая) Разделяет два выражения
II Указывает начало комментария
I* многострочный коммента- Определяет комментарий
рий */
delete objectName Удаляет объект, свойство или элемент
delete objectName.property
delete objectNamepndex]
delete property // legal only
within a with statement
{var | const} variableName = Определяет анонимную функцию
function(parameters)
{functionBody}
propNameOrNumber in Возвращает true, если указанное свойство есть у данного
objectName объекта
objectName instanceof Возвращает true, если объект принадлежит указанному типу
objectType
objectName = new objectType Создает экземпляр объекта, принадлежащего типу, опре-
(paraml [,param2] деленному пользователем
...[,paramN])
This[.propertyName] Ключевое слово, ссылается на текущий объект
typeof( expression) Результат — строка, определяющая тип выражения (стро-
• ка, клип, объект или функция)
void(expression) Оператор возвращает неопределенное значение
434 Приложение 3. JavaScript
Примеры
• Использование ключевого слова this:
function car(make, model, year) {
this.make - make:
this.model = model:
this.year - year:
}
• Использование оператора delete:
mycar - new carC'Eagle". "Talon TSi". 1993):
"make" in mycar; // возвращает true
delete mycar: // возвращает true
Объекты HTML
Как уже не раз говорилось, разные браузеры по-разному поддерживают DOM.
Многие свойства объектов в Netscape Communicator 6 не поддерживают дина-
мического обновления, а в Internet Explorer могут иметь свой формат значе-
ния или вызова. В каждом конкретном случае проверяйте работоспособность
свойств и методов. В книгу не вошли описания свойств и методов, общих для
всех HTML-элементов и необходимых для поддержки DOM.
ПРИМЕЧАНИЕ
Под HTML-элементом или просто элементом в этом разделе будет подразумеваться объект,
представляющий собой содержание HTML-страницы, заключенное между соответствующи-
ми тегами. Например, элемент Body представляет собой тело документа и содержит все,
что расположено между тегами <BODY>.
Объект Document
Объект Document представляет собой файл HTML, загруженный в окно или фрейм.
Все ссылки на элементы документа должны включать ссылку на родительский
объект Document.
Свойства и методы объекта Document приведены в табл. П3.31, П3.32. В табли-
це ПЗ.ЗЗ приведены динамические коллекции, содержащие все элементы доку-
мента.
Объекты HTML 435
Свойство Описание
activeElement Ссылка на объект, который в настоящее время имеет фокус в доку-
менте
alinkColor Цвет активной ссылки. Internet Explorer 4 и DOM имеют параллель-
ное свойство aLink объекта Body
bgColor Цвет фона страницы в шестнадцатеричной нотации
charset Набор символов, используемых для компиляции текущего документа
Internet Exlorer
characterSet Набор символов, используемых для компиляции текущего документа
Netscape Communicator 6
cookie Свойство позволяет обращаться к файлу cookie
defaultCharset Набор символов, используемых для компиляции текущего документа
по умолчанию
designMode Свойство указывает, будут ли компоненты браузера (IE5) использо-
ваться для редактирования HTML-кода
doctype Свойство возвращает объект DocumentType, содержащий описание
формата данных в документе, согласно DTD
documentElement Свойство возвращает ссылку на объект document как на HTML-эле-
мент
domain Имя сервера, который обслуживает документ
expando Логическое свойство, устанавливающее, можно ли создавать новые
свойства объекту document; действует только в текущем документе
fgColor Цвет текста документа
FileCreateDate Даты создания документа
fileModifiedDate Дата изменения файла документа
fileSize Размер файла в байтах
height Высота в пикселах текущего окна или фрейма. В IE высота управля-
ется свойством document.body.scrollHeight
implementation Свойство поддерживает метод hasFeatureQ, который позволяет
определить версию языка разметки (HTML или XML).
Синтаксис: document.implementation.hasFeature()
lastModified Дата последнего изменения документа
linkColor Цвет гипертекстовой ссылки
location URL текущего документа. В отличие от window.location.href измене-
ние свойства не приводит к переходу к новому документу.
Чтобы избежать путаницы, лучше использовать свойство
document.URL
media Свойство позволяет браузерам назначать отдельные стили для каж-
дого типа устройства вывода
mimeType Тип MIME, но записанный не в традиционном формате
namespaces Свойство возвращает массив всех объектов namespace, определен-
ных в текущем документе
parentWindow Возвращает ссылку на родительский объект window
Продолжение
436 Приложение 3. JavaScript
Свойство Описание
protocol Свойство используется только в IE и определяет версию протокола,
с помощью которого осуществился доступ к текущему документу
(например, Hypertext Transfer Protocol)
readyState Возвращает текущее состояние загрузки документа. Возвращаемое
значение (как строки): complete, interactive, loading, uninitialized
referrer Возвращает URL страницы (как строку), с которой посетитель при-
был на текущую
security Свойство указывает информацию о типе защиты, если таковая име-
ется в текущем документе
selection Возвращает выделенный объект
Title Ссылается на элемент TITLE, заголовок документа
URL URL текущего документа. В отличие от window.location.href измене-
ние свойства не приводит к переходу к новому документу
URLUnencoded Значение свойства эквивалентно инструкции
unescape(document.URL)
vlinkColor Цвет посещенной гипертекстовой ссылки
width Ширина окна документа. В IE необходимо использовать свойство
document.body.scrollWidth
Метод Описание
clear() Удаляет текущий документ из окна или фрейма
close() Закрывает поток записи документа, проводимой мето-
дами document.writeQ или document.writeln ()
createAttribute("AttributeName") Создает атрибут и возвращает ссылку на него
createElement("tagName") Создает образец объекта, связанного с тегом tagName
createStyleSheet(["url"[, index]]) Создает и добавляет в документ новую таблицу сти-
лей. URL — адрес файла таблицы стилей. Index — ин-
декс в коллекции stylesheets
createTextNode("TeKcr") Создает текстовый узел, который можно затем встро-
ить в HTML-элемент
elementFromPoint(x, y) Возвращает ссылку на объект, покрывающий пиксел с
координатами х и у параметрами, если элементов не-
сколько — возвращается элемент с самым высоким
значением zlndex (самый верхний)
execCommand("commandName"[, Метод позволяет обратиться к командам ActiveX в IE
UIFIag[, value]])
getElementById("identifier") Метод возвращает ссылку на элемент в документе с
идентификатором identifier. Рекомендуется использо-
вать в NN6, а в IE5+ использовать коллекцию
document.all
getElementsByName("name") Метод возвращает ссылку на элемент в документе с
именем name
open("MIMEType"[, "replace"]) Открывает поток для записи в текущее окно или фрейм
Объекты HTML 437
Метод Описание
write("string") Открывает новый выходной поток и записывает string
в окно или фрейм
writeln("string") Открывает новый выходной поток и записывает string
в окно или фрейм, добавляя в конец перевод строки
Примеры
• Использование различных методов объекта Document:
var currObj = document.activeElement:
document.alinkColor = "green";
document.bgColor = "yellow":
document.body.leftMargin = 15;
438 Приложение 3. JavaScript
Свойство Описание
Свойство Описание
Метод Описание
Продолжение
440 Приложение 3. JavaScript
Метод Описание
Примеры
• Использование различных методов объекта Window:
var theBrowser = navigator.appName;
if (top != self) top.location = location:
opener.document.forms[0].importedData.value = document.forms[0].entry.value;
Объекты HTML 441
parent.frames[2].document.forms[2].message.value = "Ура!";
van userName = showModalDialogC'userNamePrompt.html"):
window.returnValue = window.document.forms[0].userName.value:
if (confirm("Reset the entire form?")) { document.forms[0].reset( ) }
window.execScriptC'var x = 3: alert(x * x)")
Использование метода prompt:
те55аде="Привет! Как'тебя зовут?":
defaultReply="Bacfl?";
newMessage=prompt(message, defaultReply):
alert(newMessage):
Объект Body
Объект Body отражает HTML-элемент <BODY>. Для обращения к элементу можно
использовать свойство document.body, а не только document.alI .elementlD. Особую
роль данный объект играет в Internet Explorer 4, и его свойства в полной мере
поддерживаются только браузером от Microsoft.
Свойства объекта Body приведены в табл. П3.36.
Примеры
• Изменение вида документа с помощью методов объекта Body:
document.body.background = "images/watermark.jpg";
document.body.1ink - "IOOFFOO";
document.body.text - "darkred";
document.body.scroll Top = 40;
document.body.leftMargin = 16;
Flash
Проталина в снегу,
А в ней — светло-лиловый
Спаржи стебелек.
Мацуо Басе''
Меню
Начнем мы с главного меню. На первых порах освоения программы вы будете
часто тянуться мышью к строке меню. Потом, освоившись, вы начнете более ак-
тивно использовать горячие клавиши и панели. Flash позволяет настраивать со-
четания клавиш по своему усмотрению. Далее в скобках после команд указаны
стандартные сочетания горячих клавиш для Flash 5.
File (Файл)
• New (Создать) — открывает новый фильм (Ctrl+N).
• Open... (Открыть) — открывает существующий фильм (Ctrl+0).
• Open as Library... (Открыть как библиотеку) — открывает только компоненты
фильма (Ctrl+Shift+0).
• Open as Shared Library... (Открыть как общую библиотеку) — открывает компо-
ненты фильма для совместного использования несколькими разработчиками.
• Close (Закрыть) — закрывает активный в данный момент фильм (Ctrl+W).
• Save (Сохранить) — сохраняет активный фильм (Ctrl+S).
• Save As... (Сохранить как) — сохраняет активный фильм под другим именем
(Ctrl+Shift+S).
• Revert (Возвратиться) — открывает предыдущую сохраненную версию фильма.
1
В переводе В. Марковой.
444 Приложение 4. Flash
Edit (Правка)
Undo (Отменить) — отменяет предыдущие изменения. Можно отменить 100 по-
следних действий (команд) (Ctrl+Z).
Redo (Повторить) — возвращает изменения, отмененные командой Undo (От-
менить) (Ctrl+Y).
Cut (Вырезать) — удаляет выделенное и помещает его в буфер обмена (Ctrl+X).
Сору (Копировать) — помещает выделенное в буфер обмена (Ctrl+C).
Paste (Вставить) — вставляет содержимое буфера обмена на стол (Ctrl+V).
Меню 445
View (Вид)
• Goto (Перейти) — перейти к определенной сцене. Включает следующие вари-
анты:
Q First (Первая) (Ноте);
Q Previous (Предыдущая) (PageUp);
G Next (Следующая) (PageDown);
О Last (Последняя) (End);
Q Scene № (Сцена №).
• Zoom In (Увеличить) — увеличивает масштаб отображения стола (Ctrl+=).
• Zoom Out (Уменьшить) — уменьшает масштаб отображения стола (Ctrl+-).
446 Приложение 4. Flash
Insert(Вставка)
• Convert to Symbol (Преобразовать в символ) — преобразует выделенный рису-
нок или текст в символ Flash 4(F8).
• New Symbol (Создать новый символ) — переводит стол в режим редактирова-
ния символов для создания нового (Ctrl+F8).
• Layer (Слой) — добавляет слой.
• Motion Guide (Служебный слой) — добавляет служебный слой.
• Frame (Кадр) — вставляет кадр, сдвигая вправо существующий. Если выде-
лен несуществующий кадр, вставляются все кадры до него включительно (F5).
• Remove Frames (Удалить кадры) — удаляет выделенные кадры (Shift+F5).
• Keyframe (Ключевой кадр) — вставляет ключевой кадр вместо выделенного (F6).
• Blank Keyframe (Пустой ключевой кадр) — вставляет пустой ключевой кадр
вместо выделенного (F7).
• Clear Keyframe (Очистить ключевой кадр) — удаляет ключевой кадр, превра-
щая его в простой (Shift+F6).
• Create Motion Tween (Выполнить кадрирование) — задает раскадровку от вы-
деленного ключевого кадра (или ближайшего слева, если выделен не ключе-
вой кадр) до следующего ключевого кадра.
• Scene (Сцена) — добавляет сцену (Ctrl+/).
• Remove Scene (Удалить сцену) — удаляет активную сцену.
Modify (Изменить)
• Instance (Экземпляр) — открывает панель Instance (Экземпляр) (Ctrl+I).
• Frame (Кадр) — открывает панель Frame (Кадр) (Ctrl+F).
• Layer (Слой) — открывает окно, в котором можно изменить параметры слоя:
имя, видимость, блокировку, тип, цвет контуров, режим отображения кон-
туров и высоту на киноленте в процентах.
• Scene (Сцена) — открывает панель Scene (Сцена).
• Movie (Фильм) — открывает окно, в котором можно изменить параметры филь-
ма: скорость прокрутки кадров, размеры при печати, фоновый цвет и едини-
цы измерения на линейках (Ctrl+M).
• Smooth (Скругление) — скругляет углы.
• Straighten (Спрямление) — выпрямляет кривые линии.
448 Приложение 4. Flash
Text (Текст)
• Font (Шрифт) — подменю; содержит доступные в системе шрифты.
• Size (Размер) — подменю; содержит различные размеры шрифта.
• Style (Стиль) — подменю, позволяющее выбрать стиль:
О Plain (Обычный) (Ctrl+Shift+P);
а Bold (Полужирный) (Ctrl+Shift+B);
О Italic (Курсив) (Ctrl+Shift+I);
Q Subscript (Подстрочный);
Q Superscript (Надстрочный).
• Align (Выравнивание) — подменю, позволяющее выбрать тип выравнивания:
Q Align Left (Выравнивание по левому краю) (Ctrl+Shift+L);
fj Align Right (Выравнивание по правому краю) (Ctrl+Shift+C);
Q Align Center (Выравнивание по центру) (Ctrl+Shift+R);
Q Justify (Выравнивание по ширине) (Ctrl+Shift+J).
• Tracking (Разрядка) — увеличивает (Insrease, Ctrl+Alt+), уменьшает (Decrease,
Ctrl+Alt+ ) и восстанавливает разрядку по умолчанию (Reset, Ctrl+Alt+).
15 Зак. 96
450 Приложение 4. Flash
Control (Управление)
• Play (Воспроизвести) — запускает фильм на исполнение в рабочей области
(быстрая клавиша — Enter). При проигрывании фильма команда меняется на
Stop (Остановить).
• Rewind (Перемотать) — переводит считывающую головку на первый кадр
(Ctrl+Alt+R).
• Step Forward (Шаг вперед) — передвигает считывающую головку на один кадр
вперед (вправо) (.).
• Step Backward (Шаг назад) — передвигает считывающую головку на один кадр
назад (влево) (,).
• Test Movie (Тестовый просмотр фильма) — создает SWF-файл и проигрывает
его (Ctrl+Enter).
• Debug Movie (Отладка фильма) — открывает диалоговое окно Output (Вывод)
и панель Debugger (Отладчик) и проигрывает фильм (Ctrl+Shift+Enter).
• Test Scene (Тестовый просмотр сцены) — проигрывает текущую сцену как
SWF-фильм (Ctrl+Alt+Enter).
• Loop Playback (Зациклить фильм) — если флажок установлен, проигрывание
фильма при выполнении команды Play (Воспроизвести) будет повторяться
до команды Stop (Остановить).
• Play All Scenes (Воспроизвести все сцены) — если флажок установлен, при тес-
тировании фильма проигрываются все сцены.
• Enable Simple Frame Actions (Доступ к простым действиям) — флажок, управ-
ляющий работой простых сценариев при проигрывании фильма в рабочей
области.
• Enable Simple Buttons (Доступ к кнопкам) — флажок, управляющий работой
простых сценариев в кнопках (Ctrl+Alt+B).
• Mute Sounds (Отключить звук) — флажок отключает звук при проигрывании
фильма в рабочей области.
Window (Окно)
• New Window (Новое окно) — дублирует текущее окно в новое (Ctrl+Alt+N).
• Toolbars (Панели инструментов) — (только для Windows) подменю, содержа-
щее флажки:
Q Main (Главная) — открывает, панель инструментов над временной диа-
граммой;
Q Status (Строка статуса) — показывает строку состояния;
Q Controller (Управление) — отображает панель Controller (Управление).
Меню 451
Help (Справка)
Состав данного меню зависит от операционной системы и компьютера.
• What's New in Flash 5 (Что нового в Flash 5) — ссылки на web-страницу, содер-
жащую информацию о том, что нового появилось в Flash 5.
• Using Flash (Использование Flash) — сетевая справка по Flash (F1).
• ActionScript Reference (Ссылки ActionScript) — сетевой гид по написанию сце-
нариев на ActionScript.
• ActionScript Dictionary (Словарь ActionScript) — сетевой справочник по коман-
дам ActionScript.
• Register Flash (Регистрация Flash) — сетевая регистрация на web-странице
Macromedia.
• Macromedia Dashboard (Доска объявлений Flash) — сетевые ссылки и помощь
в использовании Flash.
452 Приложение 4. Flash
• Flash Support Center (Центр поддержки Flash) — сервер поддержки Flash: запи-
си пользователей, ошибки в программе и советы в использовании Flash 5.
• Samples (Примеры) — примеры различных фильмов, демонстрирующих, что
может Flash 5.
• Lessons (Уроки) — уроки, знакомящие с Flash 5.
• About Flash (О программе) — отображение информации о версии программы,
серийном номере, вашей организации и имени. Открывающееся окно также
расскажет вам о разработчиках и юридическом статусе программы.
Debug (Отладка)
Во время тестирования фильма становится доступным еще одно меню, содержа-
щее команды отладки.
• List Objects (Список объектов) — открывает окно со списком объектов (Ctrl+L).
• List Variables (Сохранить) — открывает окно со списком перемнных (Ctrl+Alt+V).
• 14.4 (1.2 KB/s) — устанавливает эмулированную скорость загрузки фильма
в 1,2 Кбайт/с.
• 28.8 (2.3 KB/s) — устанавливает эмулированную скорость загрузки фильма
в 2,3 Кбайт/с.
• 56 (4.7 KB/s) — устанавливает эмулированную скорость загрузки фильма в 4,7
Кбайт/с.
• User Setting 4, 5, 6 — устанавливает эмулированную скорость загрузки филь-
ма, определенную пользователем.
• Customize (Настроить) — открывает окно задания эмулированных скоростей.
Панели
Панель Info (Информация)
Панель Info (Информация) (рис. П4.1) содержит информацию о типе выделен-
ного объекта, о его расположении на столе (поля X и Y), а также высоте (Н) и
ширине (W). В нижней части панели расположена информация о текущем поло-
жении курсора: цвет и прозрачность точки, над которой он расположен, и его
позиция. Квадрат, разбитый на 9 маленьких ячеек, показывает точку отсчета
координат для выделенного объекта. Если черным выделен центральный квад-
рат — то в соседних полях выводятся координаты центра объекта, если левый
верхний — то левого верхнего угла.
Acid Gradient
Рис. П4.3. На панели Stroke вы можете выбрать тип линий, их цвет и толщину
Transform
О
•(•
Рис. П4.6. Панель Align выравнивает объекты относительно друг друга или стола
456 Приложение 4. Flash
Рис. П4.7. Панель Mixer управляет настройкой цветовых модификаторов сплошного цвета
В остальных случаях (рис. П4.8) панель содержит еще две палитры для задания
цвета контура и заливки, а также кнопки:
• Black White (Черно-белый) — устанавливает режим только с двумя цветами:
черным и белым;
• Nil (Без цвета) — заливка или контур рисуются без цвета;
• Swap Color (Поменять цвета) — меняет цвета заливки и контура между собой.
fttpltcate:
Acid Colon
Replace Cc
Load Defau
Sfeve'Color
Save as 0>=
Clear Colo:
Web 216
SoiibyCoii:
{Subscript
* :::::::::::: Г:;.:
URUj
111 Щтт
• Поле Font height (Высота шрифта) с ползунком служит для установки разме-
ра шрифта.
• Две кнопки, расположенные справа от списка размера шрифта, задают полу-
жирное (В) и курсивное начертание (Г) символов (стиль).
• Палитра Text (Fill) color (Цвет текста и заливки) служит для задания цвета
текста.
• Поле Tracking (Разрядка) необходимо для настройки расстояния между сим-
волами в слове.
• Флажок Kern (Автокернинг) лучше установить, если вы доверяете дизайнеру,
создавшему шрифт.
• Кроме пункта Normal (Обычный) список Vertical offset (Вертикальное смеще-
ние) содержит два эффекта: Superscript (Верхний индекс) и Subscript (Нижний
индекс).
Вы можете использовать текст как ссылку на URL для задания связи с web-
страницей. Выделите текст, который вы хотите использовать как ссылку на дру-
гой сайт или страницу, и наберите его URL в нижнем поле панели Character
(Шрифт). Выделенный текст на столе будет подчеркнут пунктирной линией.
Панели 459
TextField2
Рис П4.12. Панель Text Options служит для настройки типа текстового блока
460 Приложение 4. Flash
Статический текст
Из трех типов форматов текста статический (Static Text) используется чаще все-
го. Флажок Use Device Fonts (Использовать типы шрифтов) служит для указания
использовать шрифты с компьютера пользователя. Доступно три типа шрифтов:
• _sans — шрифты типа Verdana, Arial и Helvetica (обычно их называют шриф-
тами sans serif);
• _serif — тип шрифтов наподобие Times, Palatine и Baskervill;
• „typewriter — моноширинные шрифты, такие как Courier.
Если вы решили использовать типовой шрифт, установите флажок Use Device
Fonts (Использовать типы шрифтов) на панели Text Options (Параметры текста).
Затем перейдите на панель Character (Шрифт) и выберите нужный тип шрифта
в списке Font (Шрифт).
Флажок Selectable (Возможность выделения) служит для указания, может ли
пользователь выделить фрагмент вашего текста.
Динамический текст
Динамический текст (Dynamic Text) может быть изменен Flash во время работы
SWF-файла.
В зависимости от количества текста и размеров блока, выделенного под текст,
можно установить режим Single Line (Однострочный) или Multiline (Многостроч-
ный). При выборе многострочного режима будет доступен также флажок Word
Wrap (Перенос по словам).
Для динамического текста и поля ввода вы можете установить флажок HTML,
который позволяет сохранять форматирование текста внутри текстового блока
при изменении текста пользователем (табл. П4.1).
instance
l] Advanced
Рис, П4.14. С помощью панели Effect можно применить различные цветовые эффекты
к экземпляру символа
|
|
j||
d //это первый кадр
;р Seate
•- F Snap
Рис. П4.15. Раскадровка, комментарии и названия кадров могут быть заданы на панели Frame
0.5
Рис. П4.17. Окно Edit Envelope позволяет редактировать огибающую звуковой волны
Панели 465
Л Начало Ц|
'А Украшение
ljj Электросеть
f8t Темнота -•'-• I
fjg Распаковка
,...:.1|
Frame Actions
Normal Mode
Капля_Н<гга
Eh i frame 168
Щ Капля_Нота
P Нота5
I Щ frame!
& i frame 150
I • 'Щ Капля_Нста
Й 1 frame 155
• Щ Капля_Нота
В" IP Нота4
Ц frame 1
£>• i frame 141
.( lib-...® (нишОЛЧ.
JSSjW?-- ---ЭДЯМИММ
-•3 ......
utilrm \
Debugger
Jocusfecl
;
'II^m&mL,
ЧР
• Properties (Свойства);
• Delete (Удалить).
Library - PostC
Инструменты и модификаторы
Все инструменты Flash собраны на одной панели инструментов. Некоторые ин-
струменты имеют модификаторы. Они расположены в нижней части панели ин-
струментов в разделе Options (Модификаторы).
Стрелка — •
шш
}
— Подвыделение
Линия — ! ШШ — Лассо
Перо — 1 <^?';А|; — Текст
Овал — 1 &&' — Прямоугольник
:
Карандаш — | ЙЖ-
— Кисть
Бутылка чернил — 1 'ШШ — Банка краски
Пипетка — } — Ластик
Рука— | — Масштаб
Настройки
инструмента
Режим ластика Распылитель
Форма ластика
Arrow (Стрелка)
Инструмент Arrow (Стрелка) служит для выделения, перемещения и изменения
формы объектов. Быстрый вызов — V. Инструмент имеет следующие модифика-
торы:
• Snap to Object (Привязка к объектам) — привязка перемещаемого или изме-
няемого объекта к другому объекту или месту; устанавливает одноименный
флажок в меню View (Вид);
Инструменты и модификаторы 473
Subselection (Подвыделение)
Subselection (Подвыделение) — векторный инструмент (рис. П4.24). Работает
с точками векторных кривых и маркерами касательных. Быстрый вызов — А.
Выберите инструмент и щелкните на векторном рисунке. Протащите один из
появившихся маркеров ил№ одну из точек для изменения объекта.
Line (Линия)
Line (Линия) — этот инструмент предназначен для рисования прямых линий.
Быстрый вызов — N.
Lasso (Лассо)
Инструмент Lasso (Лассо) служит для выделения объектов произвольной фор-
мы. Быстрый вызов — L. В отличие от инструмента Arrow (Стрелка) позволяет
обрисовать объект или несколько объектов по краю, не захватывая при этом
другие объекты. Имеет следующие модификаторы:
• Magic Wand (Волшебная палочка) — позволяет вырезать область, руковод-
ствуясь указанным цветом;
• Magic wand Properties (Настройка волшебной палочки) — установка парамет-
ров волшебной палочки;
• Polygon Mode (Многоугольник) — выделение объекта путем его обрисовки
прямыми отрезками.
Выберите нужный модификатор и обведите область или щелкните на нужном
цвете, чтобы выделить область, закрашенную таким цветом. Можно вырезать
часть заливки или контура.
•
Реп (Перо)
Реп (Перо) — инструмент для рисования векторными линиями. Требует некото-
рого навыка в использовании. Быстрый вызов — Р.
Для того чтобы нарисовать пером, щелкните мышью в начальной точке буду-
щей кривой. Затем переместите указатель мыши до следующей точки и еще раз
щелкните. Если после этого отвести мышь в сторону, не отпуская ее левую
кнопку, то от последней точки и до указателя мыши протянется касательная.
474 Приложение 4. Flash
Text(Текст)
Text (Текст) — это инструмент для ввода текста. Быстрый вызов — Т. В програм-
ме Flash существует два способа ввода текста.
Первый самый простой — достаточно щелкнуть мышью на нужном месте и на-
чать вводить текст. Строка будет автоматически увеличиваться по мере ввода
текста. Для перевода на новую строку нажмите клавишу Enter.
Второй способ связан с использованием текстового блока заданного размера.
Сначала вы очерчиваете границы блока, а затем вводите в него текст.
Характер блока определяется по его виду. Если в верхнем правом углу располо-
жен кружок, значит вы имеете дело с блоком переменной ширины. Если же вы
видите квадратик, значит ширина блока фиксирована и перенос будет происхо-
дить без вашего участия.
Oval (Овал)
Oval (Овал) — инструмент предназначен для рисования кругов и эллипсов. Бы-
стрый вызов — О.
Нажмите левую кнопки мыши на столе, где будет находиться овал, не отпуская
кнопку переместите мышь на необходимое расстояние, задав тем самым форму
фигуры и размер. Отпустите кнопку. Для рисования круга достаточно удержи-
вать клавишу Shift.
Rectangle (Прямоугольник)
Инструмент Rectangle (Прямоугольник) предназначен для рисования квадратов
и прямоугольников. Быстрый вызов — R. Имеет один модификатор, управляю-
щий радиусом скругления угла — Round Rectangle Radius (Скругление углов пря-
моугольника).
Нажмите левую кнопки мыши на столе, где будет находиться фигура, не отпус-
кая кнопку переместите мышь на необходимое расстояние, задав тем самым
форму и размер. Отпустите кнопку. Для рисования квадрата достаточно удер-
живать клавишу Shift.
Pencil (Карандаш)
Инструмент Pencil (Карандаш) предназначен для рисования произвольного кон-
тура. Быстрый вызов — Y. Имеет один модификатор — Pencil Mode (Режим ка-
рандаша). Доступно три режима:
• Straighter (Спрямление) — создание «правильных» фигур;
• Smooth (Сглаживание) — сглаживание кривых;
• Ink (Чернила) — режим оставит все нарисованное без изменений.
Пользоваться карандашом, думаю, все умеют. Берем и рисуем...
Инструменты и модификаторы 475
Brush (Кисть)
Инструмент Brush (Кисть) предназначен для рисования заливки. Быстрый вы-
зов — В. Также имеет модификатор Brush Mode (Режим кисти). Предоставляет на-
бор возможностей, которые делают кисть хорошо управляемым инструментом:
• Paint Normal (Обычный) — полное закрашивание;
• Paint Fills (Заливка) — оставляет контуры нетронутыми;
• Paint Behind (Закраска позади объекта) — позволяет закрасить фон за объек-
том, но не сам объект;
• Paint Selection (Закраска выделений) — предназначен для закрашивания выде-
ленной области;
• Paint Inside (Внутренняя закраска) — метод закраски только внутренней час-
ти одного из объектов, на котором сделан первый мазок.
Модификаторы Brush Size (Размер кисти) и Brush Shape (Форма кисти) управля-
ют формой и размером кисти.
Рассказывать, как пользоваться, полагаю, не надо — кисть в руках наверняка все
держали, малярную или маникюрную.
Dropper (Пипетка)
Dropper (Пипетка) — стандартный инструмент растровых редакторов, предна-
значенный для копирования цвета. Быстрый вызов — I.
Щелчком выберите необходимый цвет среди находящихся на столе рисунков.
Eraser (Ластик)
Eraser (Ластик) — инструмент предназначен для удаления нарисованного. Быст-
рый вызов — Е. Имеет следующие модификаторы:
• Eraser Mode — выбор режима работы ластика:
Q Normal (Обычный) — обычный режим: стирается все;
Q Erase Fills (Стирание заливки) — стирание заливки: контур остается нетро-
нутым;
Q Erase Lines (Стирание контура) — стирается только контур;
О! Erase selected (Стирание выделения) — удаление выделенной области;
Q Erase Inside (Внутреннее стирание) — метод удаления только той заливки,
на которой начался процесс стирания;
• Faucet (Распылитель) — удаление линии или заливки целиком;
• Erase Shape (Форма) -- выбор формы ластика; аналогично выбору формы
кисти.
Hand (Рука)
Инструмент Hand (Рука) позволяет перетаскивать стол мышью без помощи по-
лос прокрутки, подобно тому, как вы двигаете лист бумаги по столу. Быстрый
вызов — Н.
Zoom (Масштаб)
Инструмент Zoom (Масштаб) служит для увеличения или уменьшения отобра-
жения масштаба документа. Горячие клавиши — М, Z.
Приложение 5
ActionScript
Чудеса!
На миг отвернулся, а он уже вырос,
Росток бамбука.
Кобаяси Исса*
comment
// комментарий
Указывает на начало комментария.
continue
continue;
Заставляет пропустить оставшуюся часть тела цикла и перейти к проверке
условия выхода из цикла.
а=[1.0.2.2,0.2.102.5.2.8]
while (i<10) {
i++;
if (a[i]!=0) {continue;}:
trace (i);
// Печатаем номера всех нулевых элементов
delete
delete(reference):
Удаляет объект или переменную-аргумент и возвращает true, если объект был
успешно удален. В противном случае возвращает fal se.
do.. .while
do
{statement:}
while (condition) :
Сначала выполняются инструкции, указанные в фигурных скобках, а затем про-
веряется условие выхода из цикла (condition).
a=new ArrayO:
1—1;
do {i++:
// Заполняем массив а=[0. 1.2. 3.4. 5. б. 7. 8. 9, 10]
// Выводим значения по одному
trace (a[i]);}
while (i<10);
duplicateMovieClip
duplicateMovieClip (target, newname, depth):
Создает экземпляр клипа в процессе выполнения Flash-фильма.
on(release) {
i=40;
while(i>0) {
duplicateMovieClip (_root.star. "star" + i. i):
// Заполняем экран клипом звезд разной прозрачности
with ("star"+i ) {
_x=100*Math.random();
_y=100*Math.random():
_al pha=100*Math . random( ) ;
Основные действия (Actions) 479
else
else {statements} :
Определяет альтернативные действия для действия i f .
a=new АггауО;
If (i<10) {a[i]-i:}
else {a[i]=i-10}:
else if
if (condition)
{statements;
} else if (condition){
statements;}
Последовательно выполняет действие el se, а затем i f . Используется только по-
сле действия if.
if (i<10) {a[i]=i:}
else if (i>=20)
else {a[i]=i-20}:
// Заполняем массив последними цифрами чисел до 30
for
fordnit: condition; next) { statement;}.
Выполняет инструкции, указанные в фигурных скобках, до тех пор пока не бу-
дет выполнено условие (condition). После ключевого слова также указываются
аргументы: init — инициализация переменной цикла, next — изменение пере-
менной цикла.
a=new АггауО:
for(i=0; i<10: i++)
{ a[i] = i*10:
trace (a[i]):}
// Заполняем массив числами 0. 10. 20. 30. 40. 50. 60. 70. 80. 90 и печатаем их
for.. .in
for (variableiterant in object){ statement; }
Действие выполняет инструкции, указанные в фигурных скобках, для всех
свойств (variableiterant) объекта (object).
for (name in myObject) {
trace "myObject. " + name
+"= "+ myObject[name]):}
fscommand
fscommandCcommand. arguments);
Позволяет Flash-фильму обращаться к проигрывателю Flash или браузеру и осу-
ществлять передачу данных JavaScript с помощью функции moviename_Dofscommand
на HTML-странице, содержащей фильм1.
fscommand ("quit"):
fscommandC' full screen", true);
1
В качестве приставки к имени функции Dofscommand используется имя Flash-фильма, указанное в
атрибуте name тега <EMBED> или атрибута id тега <OBJECT>. Например, если фильму присвоено
имя theMovie, функция JavaScript должна называться theMovie_Dofscommand.
480 Приложение 5. ActionScript
function
function functionname ([argumentO. argumentl argumentN]) { statement(s)}
Объявляет функцию пользователя.
y=cube(2X:
function cube(x) { return x*x*x:}
getURL
getURUurl [. window [. variables]]);
Загружает документ с адреса URL в окно браузера или передает переменные
другому приложению.
gotoAndPlay
gotoAndPlay ([scene], frame);
Выполняет переход к указанному кадру указанной сцены и начинает воспроиз-
ведение фильма с этого места.
gotoAndStop
gotoAndStop(scene, frame);
Выполняет переход к указанному кадру указанной сцены и останавливает вос-
произведение фильма.
if
if (condition) { statements:}
Если условие condition имеет значение true, выполняются действия, указанные
в фигурных скобках.
ifFrameLoaded
ifFrameLoaded ([scene], frame) { statements;}
Проверяет, загружен ли кадр frame, и если да, то выполняются действия, указан-
ные в фигурных скобках.
^include
finclude "filename.as":
Включает содержание файла, указанного в качестве параметра. Расширение
.as — рекомендуемое расширение файла.
load Movie
loadMovie(url [target, method]]);
Загружает SWF-файл, замещая фильм-аргумент target.
on(release) {
loadMovie ("nextScene.swf"._root.myClip);}
loadMovieNum
loadMovieNum ( u r l . [level, method] );
Загружает SWF-файл на определенный уровень.
on(release) {
1oadMovi eNum("nextScene.swf"._! evel 0):}
Основные действия (Actions) 481
load Variables
loadVariables(url. target [. method]);
Считывает данные из внешнего текстового файла, передавая их определенному
клипу.
on(release) {
1oadVa riables("data.txt". _root.myCli p):}
loadVariablesNum
loadVariablesNum ( url. level, method );
Считывает данные из внешнего текстового файла на определенный уровень в
фильме.
on(release) {
loadVariab1esrdata.txt". JevelO):}
nextFrame
nextFrameO;
Действие выполняет переход на следующий кадр и останавливает воспроизве-
дение.
,
nextScene
nextSceneC):
Выполняет переход на следующую сцену и останавливает воспроизведение.
on
on (mouseEvent) {statements; }
Обработчик события мыши или нажатия клавиши.
.
onClipEvent
г
onClipEvent(movieEvent)(statements; }
Обработчик события экземпляра клипа.
onClipEvent(keyDown) {
// Передвигаемся по кадрам фильма с помощью клавиш управления курсора
if (Key.getCode()==Key.RIGHT) {__parent.nextFrame();}
else if (Key.getCode()==Key.LEFT){_parent.prevFrame():}
play
playO:
Начинает воспроизведение фильма или клипа.
prevFrame
prevFrame();
Переводит воспроизведение на предыдущий кадр.
prevScene
prevSceneO ;
Переводит воспроизведение на предыдущую сцену и останавливает фильм.
print
printCtarget, "bmovie"):
print(target, "bmax");
print(target. "bframe");
16 Зак.96
482 Приложение 5. ActionScript
printAsBitmap
printAsBitmapCtarget. "bmovie"):
printAsBitmapCtarget, "bmax"):
printAsBitmapCtarget. "bframe"):
Действие как растровый рисунок печатает клип с именем, указанным в парамет-
ре target, согласно модификатору печати, указанному во втором параметре1.
printAsBitmapC'myMovie "."bmovie ");
printAsBitmapNum
printAsBitmapNum ( level, type );
Аналог предыдущей команды, но указывается уровень (level) вместо фильма
или клипа.
printAsBitmapCJevelO. "bmovie"):
printNum
printNum ( level. type );
Аналог команды print, но указывается уровень (level) вместо фильма или клипа.
print (Jevell. "bmovie"):
removeMovieClip
removeMovieClip(target);
Удаляет экземпляр клипа, который был создан действием duplicateMovieClip.
return
return[expression]:
return:
Определяет значение, возвращаемое функцией пользователя.
function factorial (a){
if (а>1) {return a*factorial Са-1):}
else {return 1} }
set variable
variable = expression:
setCvariable, expression):
Определяет значение переменной.
Запись set(x,2); эквивалентна х=2.
setProperty
setPropertyCtarget, property, expression);
Изменяет свойство клипа при воспроизведении фильма.
on(release){ { setPropertyC'star".
alpha - 30):}
1
Используйте printAsBitmap для печати фильмов, в которых используются свойства прозрачное™
или специальные цветовые эффекты.
Основные действия (Actions) 483
startDrag
startDrag(target):
startDragCtarget.nock]);
startDrag(target [Jock [. left. top. right, bottom]]);
Делает указанный клип перетаскиваемым.
on(press) { startDrag("".true);}
stop
stop 0:
Останавливает воспроизведение текущего клипа или фильма.
on(release){stop О:}
stopDrag
stopDragO:
Останавливает текущую операцию перетаскивания клипа.
on(release) { stopDrag():}
tellTarget
tellTarget(target) { statements: }
Применяет инструкции, перечисленные в фигурных скобках, к киноленте, ука-
занной в параметре target.
Во Flash 5 вместо функции tellTarget рекомендуется использовать действие
with.
toggleHighQuality
toggleHighQualltyO:
Переключает режимы сглаживания проигрывателя Flash.
on(release) {
toggleHighQualityO:}
trace
trace (expression):
Действие выводит значение expression в окне Output.
trace("Пример");
unloadMovie
unloadMovie(location);
Выгружает фильм, загруженный действием loadMovie.
un1oadMovie(_root):
unloadMovieNum
unloadMovieClevel):
Выгружает фильм, загруженный действием loadMovie.
on(press) {
unloadMovi e(_level15);}
var
van variableNamel [= valuel] [ variableNameN [-valueN]]:
Служит для объявления локальных переменных.
var s="string". b=true. n=12:
484 Приложение 5. ActionScript
while
while(condition) { statements; }
Неоднократно выполняет действия, указанные в скобках, пока условие
(condition) не оказывается истинным.
whiled < 5) {
duplicateMovieClipC'star". "me" + i. i):
i++:}
with
with(object) { statement(s): }
Временно изменяет контекст, используемый для оценки выражений и действий,
указанных в фигурных скобках.
with (Russia){
_a1pha = 30;
with (Saint-Petersburg){
_alpha = 50;
I
with (Nevsky){
_alpha = 100;
1
Операторы (Operators)
% (остаток от деления)
expression! % expression2
Вычисляет остаток от деления параметра expression! на параметр expression2.
х = Ш5: // х равно 2
х = 4.3X2.1; // х равно 0.1
"" (кавычки)
"expression"
Служит для оформления значения строковой переменной.
() (круглые скобки)
(expressionl. expression2); functiontfunctionCalll functionCallN);
Служит для группировки или объединения параметров.
х - (2+3)*(4+5);
getTimeO:
gotoAndPlay("frame"):
,
* (умножение)
expressionl * expression2
Перемножает два числовых выражения.
+ (сложение)
expressionl + expression2
Прибавляет числовые значения или конкатенирует (объединяет) символьные
Если один из параметров — строка, другой параметр конвертируется в символь
ное значение, и оба значения объединяются.
*
Операторы (Operators) 485
- (вычитание, минус)
-expression
expressionl - expression2
Используется для присваивания отрицательного значения или вычитания.
/(деление)
expressionl / expression
Делит параметр expressionl на expression2.
++ (инкремент)
•n-expression expression-н-
Префиксный или постфиксный оператор инкремента, который прибавляет 1
к параметру expression. Префиксная форма оператора прибавляет 1 до возвра-
щения результата, постфиксная форма — после.
х = 1; у = ++х: // у равно 2
х = 1; у = х++; // у равно 1
- (декремент)
--expression expression--
Префиксный или постфиксный оператор декремента, который вычитает 1 из пара-
метра expression. Префиксная форма оператора вычитает единицу из параметра до
возвращения результата, постфиксная форма — после возвращения результата.
х = 5: у = --х: // у равно 4
х = 5; у = х--: // у равно 5
= = (равно)
expressionl == express!on2
Проверяет два выражения на равенство. Если выражения равны, результат ра-
вен true. Числа и логические значения сравниваются по значению и признаются
равными, если они имеют равные значения. Две строки равны, если они имеют
одинаковое количество символов. Переменные, объекты, массивы и функции
сравниваются по содержанию. Две переменные равны, если они ссылаются на
один и тот же объект, массив или функцию. Два разных массива никогда не
признаются равными, даже если они имеют одинаковое число элементов.
о (не равно)
expressionl <> expression2
Проверяет два выражения на равенство. Если параметр expressionl равен пара-
метру expression2, результат равен false. Числа, символьные и логические значе-
ния сравниваются по значению; переменные, объекты, массивы и функции срав-
ниваются по содержанию.
Рекомендуется использовать появившийся в программе Flash 5 оператор !=.
!= (не равенство)
expressionl != expression2
Проверяет два выражения на равенство. Если параметр expressionl равен пара-
метру expression2, результат равен false. Числа, символьные и логические значе-
ния сравниваются по их значению; переменные, объекты, массивы и функции
сравниваются по их содержанию.
486 Приложение 5. ActionScript
< (меньше)
expressionl < expression2
Сравнивает два выражения. Если expressionl меньше expression, возвращается
true, если нет — false. Текстовые значения сравниваются по числу символов
в строке.
<= (меньше или равно)
expressionl <= expression2
Сравнивает два выражения. Если expressionl меньше или равен expression2, воз-
вращает значение true, в противном случае возвращает fal se.
> (больше)
expression! > expression2
Сравнивает два выражения. Если expressionl больше параметра expressionZ, ре-
зультат равен true, в противном случае — false.
>= (больше или равно)
expressionl >= expressionZ
Сравнивает два выражения. Если expressionl больше или равен expression?, ре-
зультат равен true, иначе — false.
! (логическое отрицание)
!expression
Инвертирует логическое значение expression.
&& (короткая конъюнкция)
expressionl && expressionZ
Короткая конъюнкция. Выполняет операцию конъюнкции (логическое «и»).
11 (дизъюнкция)
expressionl || expression2
Результат равен true, если один или оба параметра равны true; результат равен
f al se, только если оба параметра равны f al se.
not (логическое отрицание)
not expression
Выполняет логическое отрицание.
В программе Flash 5 следует использовать оператор !.
and (логическое «и»)
conditionl and condition2
Логический оператор умножения.
В программе Flash 5 следует использовать оператор &&.
or (логическое «или»)
conditionl or condition2
Логический оператор сложения.
В программе Flash 5 следует использовать оператор 1 1 .
Операторы (Operators) 487
Операторы присваивания
(Compound Assignment)
%= (присваивание остатка)
expressionl %= expression
Присваивает expressionl результат операции expressionHexpression2.
// х %= у эквивалентно х = х%у
х = 16:
х %= 5 // х равно 1. так как 16^5 равно 1
+= (присваивание сложения)
expressionl += expressionZ
Присваивает expression! результат операции expressionl+expression2.
// х += у эквивалентно х - х+у
х = 5:
х +=• 10; // х равно 15
у = "Меня зовут ";
у +- "Дмитрий"; // у равно "Меня зовут Дмитрий"
-= (присваивание вычитания)
expressionl -= expression2
Присваивает expressionl результат операции expressionl-expression2.
// х -= у эквивалентно х = х-у
х = 7;
х -= 8: // х равно -1
/= (присваивание деления)
expressionl /- expression
Присваивает expressionl результат операции expressionl/expression2.
// х /= у эквивалентно х = х/у
х = 10;
х /= 2; // х равно 5
/
«= (поразрядный сдвиг влево и присваивание)
expressionl «- expression2
Исполняет поразрядную операцию сдвига влево и присваивает результат1 пара-
метру expressionl.
// Следующие два выражения эквивалентны:
// А «= В;
// А = (А « В):
Функции (Functions)
boolean
boolean(expression);
Конвертирует и возвращает логическое значение параметра.
Функции (Functions) 491
escape
escape(expression);
Преобразует параметр в текст и кодирует в формат URL, где все алфавитно-
цифровые символы представлены в шестнадцатеричном коде со знаком процен-
Определяет номер строки, которая будет верхней в поле после прокрутки всего
текста.
on (release) { if (myText,scroll<myText.maxscrol 1) myText.scrol 1++;}
newline
newli ne;
Константа. Вставляет символ возврата каретки (перевод строки) в текст. Вместо
данной константы можно использовать символы \г.
number
Number(expression):
Преобразует параметр в число.
parseFloat
parseFloat(string);
Преобразует текст в число с плавающей запятой.
parselnt
parselnt(expression. radix):
Преобразует текст в целое число. Целые числа, начинающиеся с нуля или пред-
ставленные в восьмеричной системе счисления, интерпретируются как восьме-
ричные числа. Целые числа, начинающиеся с символов Ох, интерпретируются
как шестнадцатеричные числа.
х = parselnt("3.5"); // х равно 3
х - parselnt("4hf"); // х равно 4
х = parselntC'OxF"); // х равно 15
х = parselnt("44". 5); // х равно 24
random
random(value):
Возвращает случайное целое число между нулем и целым числом yal ue.
Вместо функции random рекомендуется использовать метод Math.random.
scroll
variablejiame.scroll - x
Определяет, с какой строки начинает отображаться текст в поле.
on (release) { pole.scroll = pole.scroll+1:}
string
String(expression);
Возвращает строковое представление указанного параметра.
targetPath
targetPath(movieClipObject):
Возвращает строку, содержащую целевой путь к клипу, указанному в параметре.
true
true
Логическое значение (истина).
Функции (Functions) 493
unescape
unescape(x):
Функция, обратная функции escape. Преобразует строку из формата URL в ASCII-
символы и возвращает полученную строку.
updateAfterEvent
updateAfterEvent(movie_clip_event):
Обновляет экран после возникновения события клипа, указанного в качестве
параметра.
substring
substring(string, index, count):
Извлекает часть строки.
Рекомендуется использовать метод String.substring.
Свойства (Properties)
.alpha
instancename._alpha;
Устанавливает или возвращает значение прозрачности (value) экземпляра кли-
па. Допустимые значения: от 0 (полная прозрачность) до 100 (абсолютная не-
прозрачность).
_currentframe
i nstancename._currentframe;
Возвращает номер текущего кадра киноленты (только для чтения).
_droptarget
draggableInstanceName._droptarget:
Возвращает абсолютный путь с применением синтаксиса слеша (/) к экземпля-
ру клипа, на который «отпустили» перетаскиваемый клип draggableInstanceName
(только для чтения). Используйте функцию eval для преобразования возвра-
щенного значения.
focusrect
_focusrect - Boolean;
Определяет, появляется ли прямоугольник на активном (имеющем фокус) эле-
менте управления. Значение по умолчанию — true.
_framesloaded
i nstancename._framesloaded;
Сообщает число уже загруженных кадров клипа (только для чтения).
if (_frames1oaded >= _totalframes)
{ gotoAndPlay ("Scene 1". "start"); }
else
{setProperty ("_root.loader". _xscale. (_frames1oaded/_totalframes)*100):}
_height
instancename._height;
Присваивает или возвращает высоту клипа.
_highquality
_highquality = value:
Определяет уровень сглаживания, применяемого к текущему фильму.
Возможные значения:
• value - 2 — наилучшее качество;
• value = 1 — высокое качество;
• value = 0 — низкое качество.
Свойства (Properties) 495
_name
instancename.jiame:
Определяет имя экземпляра клипа.
„quality
_quality:
Присваивает или возвращает качество воспроизведения фильма.
Возможные значения:
• Low — низкое качество;
• Medium — среднее качество;
• High — высокое качество;
• Best — наилучшее качество.
„rotation
i nstancename._rotati on:
Определяет угол поворота клипа в градусах.
_soundbuftime
_soundbuftime = integer;
Устанавливает число секунд предварительно загружаемого в буфер звука. Зна-
чение по умолчанию — 5 секунд.
„target
instancename._target:
Возвращает путь к экземпляру клипа (только для чтения).
_totalframes
i nstancename._totalframes;
Возвращает общее количество кадров в клипе (только для чтения).
_url
instancename._url;
Возвращает URL-адрес SWF-файла, из которого был загружен клип (только
для чтения).
.visible
i nstancename._vi si Ы е:
Определяет, является ли клип видимым.
.width
instancename._width:
Определяет ширину клипа.
_х
istancename._x;
Определяет координату х клипа относительно локальных координат родитель-
ского клипа. Если клип относится к главной киноленте, то начало его системы
координат (0,0) находится в верхнем левом углу сцены.
496 Приложение 5. ActionScript
_xmouse
i nstancename._xroouse:
Возвращает координату х позиции указателя мыши (только для чтения).
_xscale
instancename._xscale:
Определяет горизонтальный масштаб (в процентах).
_У
instancename._y;
Определяет координату у клипа относительно локальных координат родитель-
ского клипа.
_ymouse
i nstancename._ymouse:
Указывает координату у позиции указателя мыши (только для чтения).
_yscale
Instancename._yscale;
Определяет вертикальный масштаб клипа (в процентах).
Объекты (Objects)
Массивы (Array)
concat
myArray.concat ( v a l u e O . v a l u e l . . . . v a l u e N ) ;
Добавляет к массиву туАггау параметры и записывает новый массив.
alpha - new A r r a y ( " a " . " b " . " c " ) ;
numeric = new Array(1.2,3):
alphaNumeric = alpha.concatСnumeric):
// Массив alphaNumeric содержит [ " a " , " b " , " с " . 1 . 2 . 3 ]
join
myArray.join (): myArray.join(separator);
Преобразует элементы массива в символьные значения, конкатенирует их,
вставляет указанный разделитель (separator) между элементами и возвращает
полученную строку.
myDate = new Аггау("2". " October","1957");
MyVarl = myDate.join( ):
// Переменная MyVarl содержит "2 October 1957"
length
myArray.length;
Свойство. Содержит длину массива. Автоматически изменяется, когда к масси-
ву добавляются новые элементы.
myArray - new ArrayO:
myArray[9] = 'с';
// Значение myArray.length равно 10
Объекты (Objects) 497
new Array
new Array ();
new Array(length);
new ArrayCelementO, elementl. element2....elementN):
Позволяет обращаться к элементам массива и управлять ими.
pop
щуАггау.рорО;
Удаляет последний элемент массива и возвращает его значение.
v
Цвет (Color)
getRGB
myColor.getRGBO
Возвращает числовые значения, установленные последним вызовом setRGB.
getTransform
myColor.getTransform()
Возвращает измененное значение, установленное последним вызовом setTransform.
new Color
newColor(target):
Создает объект Color для клипа, указанного в параметре.
setRGB
myColor.setRGB(OxRRGGBB);
Устанавливает цвет.
setTransform
myColor.setTransform(colorTransformObject):
Метод возвращает набор цветов для изменения объекта Col or. Объект цветового
преобразования colorTransformObject должен иметь параметры га, rb, ga, gb, ba, bb,
аа или ab:
га — процент для красного компонента (от -100 до 100);
rb — смещение для красного компонента (от -255 до 255);
да — процент для зеленого компонента (от -100 до 100);
gb — смещение для зеленого компонента (от -255 до 255);
Ьа — процент для синего компонента (от -100 до 100);
bb — смещение для синего компонента (от -255 до 255);
аа — процент для прозрачности (от -100 до 100);
ab — смещение для прозрачности (от -255 до 255).
// Создаем объект с именем myColor для клипа myMovie
myColor - new Color(myMovie):
// Создаем объект преобразования цвета myColorTransfrom
myColorTransform - new Object;
// Установливаем значения для inyColorTransform
myColorTransform = { га: ' 5 0 ' . rb: ' 2 4 4 ' . д а : ' 4 0 ' . gb: '112', ba: '12', bb: ' 9 0 ' . аа:
' 4 0 ' . ab: 70'}
// Присваиваем изменение цвета объекту myColor
myColor.setTransform(myColorTransforrn);
• '•' • '!'
Дата (Date)
getDate
Date.getDateO;
Возвращает День месяца для указанного объекта Date.
getDay
Date.getDayO;
Возвращает день недели для указанного объекта Date.
500 Приложение 5. ActionScript
getFullYear
Date.getFullYearO;
Возвращает четырехразрядный год для указанного объекта Date.
getHours
Date.getHoursO:
Возвращает час для указанного объекта Date.
getMilliseconds
Date.getMi11i seconds():
Возвращает миллисекунды для указанного объекта Date.
getMinutes
Date.getMinutesO;
Возвращает минуты для указанного объекта Date.
getMonth
Date.getMonthO;
Возвращает месяц для указанного объекта Date.
getSeconds
Date.getSecondsO:
Возвращает секунды для указанного объекта Date.
getTime
Date.getTimeO:
Возвращает число миллисекунд, прошедших с полуночи 1 января 1970 года по
Гринвичу, для указанного объекта Date.
getTi mezoneOffset
Date.getTimezoneOffsetO;
Возвращает разницу в минутах между временем компьютера и временем по
Гринвичу.
getUTCDate
Date.getUTCDateO;
Возвращает день месяца для указанного объекта Date соответственно времени
по Гринвичу.
getUTCDay
Date.getUTCDayO;
Возвращает день недели для указанного объекта Date соответственно времени
по Гринвичу.
i. •/
getUTCFullYear
Date.getUTCFullYearO:
Возвращает четырехразрядный год для указанного объекта Date соответственно
времени по Гринвичу.
getUTCHours
Date.getUTCHoursO:
Возвращает час для указанного объекта Date соответственно времени по Гринвичу.
Объекты (Objects) 501
getUTCMilliseconds
Date.getUTCMi111 seconds();
Возвращает миллисекунды для указанного объекта Date соответственно времени
по Гринвичу.
getUTCMinutes
Date.getUTCMinutesO:
Возвращает минуты для указанного объекта Date соответственно времени по
Гринвичу.
getUTCMonth
Date.getUTCMonthO:
Возвращает месяц для указанного объекта Date соответственно времени по
Гринвичу.
getUTCSeconds
Date.getUTCSeconds
Возвращает секунды для указанного объекта Date соответственно времени по
Гринвичу.
getYear
Date.getYearO;
Возвращает год для указанного объекта Date.
new Date
new DateO;
new Date(year [. month [. date [. hour [. minute [. second [. millisecond >]] ):
Создает новый объект Date.
setDate
Date.setDate(date):
Устанавливает день месяца для указанного объекта Date.
setFullYear
myDate.setFullYear(year [. month [, date]] );
Устанавливает полный год для объекта Date.
setHours
myDate.setHours(hour);
Устанавливает часы для объекта Date.
setMilliseconds
myDate.setMi11i seconds(mi 11i second);
Устанавливает миллисекунды для объекта Date.
setMinutes
myDate.setMi nutes(mi nute):
Устанавливает минуты для объекта Date.
setMonth
myDate.setMonthtmonth [. date ]):
Устанавливает месяц для объекта Date.
502 Приложение 5. ActionScript
setSeconds
myDate.setSeconds(second);
Устанавливает секунды для объекта Date.
setTime
myDate.setTime(mi11isecond):
Устанавливает время для указанного объекта Date в миллисекундах.
setUTCDate
myDate.setUTCDate(date);
Устанавливает дату для указанного объекта Date соответственно времени
по Гринвичу.
setUTCFullYear
myDate.setUTCFullYear(year [. month [. date]]):
Устанавливает год для указанного объекта Date соответственно времени
по Гринвичу.
setUTCHours
myDate,setUTCHours(hour [. minute [. second [. millisecond]]])):
Устанавливает час для указанного объекта Date соответственно времени
по Гринвичу.
setUTCMilliseconds
myDate.setUTCMi11i seconds( mi 11i second);
Устанавливает миллисекунды для указанного объекта Date соответственно
времени по Гринвичу.
setUTCMinutes
myDate.setUTCMinutes(minute [. second [. millisecond]])):
Устанавливает минуты для указанного объекта Date соответственно вре-
мени по Гринвичу.
setUTCMonth
myDate.setUTCMonth(month [. date]):
Устанавливает месяц для указанного объекта Date соответственно време-
ни по Гринвичу.
setUTCSeconds
myDate.setUTCSecondstsecond [. millisecond])):
Устанавливает секунды для указанного объекта Date соответственно вре-
мени по Гринвичу.
setYear
myDate.setYear(year):
Устанавливает год для указанного объекта Date соответственно показаниям
часов компьютера, на котором выполняется Flash-проект.
toString
Date.toString
Объекты (Objects) 503
Клавиатура (Key)
BACKSPACE
Key.BACKSPACE
Константа, ассоциируемая с кодом клавиши Backspace (8).
CAPSLOCK
Key.CAPSLOCK
Константа, ассоциируемая с кодом клавиши CapsLock (20).
CONTROL
Key.CONTROL
Константа, ассоциируемая с кодом клавиши Ctrl (17).
DELETEKEY
Key.DELETEKEY
Константа, ассоциируемая с кодом клавиши Delete (46).
DOWN
Key.DOWN
Константа, ассоциируемая с кодом клавиши 4- (40).
END
Key.END
Константа, ассоциируемая с кодом клавиши End (35).
ENTER
Key.ENTER
Константа, ассоциируемая с кодом клавиши Enter (13).
ESCAPE
Key.ESCAPE
Константа, ассоциируемая с кодом клавиши Esc (27).
getAscii •
Key.getAsciiO;;
Возвращает ASCII-код последней нажатой клавиши.
getCode • . •
Key.getCodeO;;
Возвращает код последней нажатой клавиши.
504 Приложение 5. ActionScript
HOME
Key.HOME
Константа, ассоциируемая с кодом клавиши Home (36).
INSERT
Key.INSERT
Константа, ассоциируемая с кодом клавиши Insert (45).
isDown
Key.isDown(keycode);:
Возвращает true, если нажата клавиша, указанная в параметре.
isToggled
Key. i sTogg 1 ed (key code);;
Возвращает true, если активизирована клавиша NumLock (144) или CapsLock (20).
LEFT
Key.LEFT .
Константа, ассоциируемая с кодом клавиши <- (37).
PGDN
Key.PGDN
Константа, ассоциируемая с кодом клавиши PageDown (34).
PGUP
Key.PGUP
Константа, ассоциируемая с кодом клавиши PageUp (33).
RIGHT
Key.RIGHT
Константа, ассоциируемая с кодом клавиши -» (39).
SHIFT
Key.SHIFT
Константа, ассоциируемая с кодом клавиши Shift (16).
SPACE
Key.SPACE
Константа, ассоциируемая с кодом клавиши Пробел (32).
TAB
Key.TAB
Константа, ассоциируемая с кодом клавиши Tab (9).
UP
Key.UP
Константа, ассоциируемая с кодом клавиши Т (38).
Объекты (Objects) 505
Math.E
Константа Эйлера и основание натуральных логарифмов.
Во Flash равна 2.71828182845905.
ехр
Math.exp(x);
Вычисляет экспоненту х.
floor
Math.floor(x):
Округляет число х до меньшего целого.
LN10
Math.LNIO
Натуральный логарифм числа 10. Во Flash равен 2,3025850929940459011.
LN2
Math.LN2
Натуральный логарифм числа 2. Во Flash равен 0,69314718055994528623.
506 Приложение 5. ActionScript
log
Math.log(x):
Натуральный логарифм х.
LOG2E
Math.LOG2E
Логарифм Е по основанию 2. Bo Flash равен 1,442695040888963387.
LOG10E
Math.LOGlOE
Логарифм Е по основанию 10. Bo Flash равен 0,43429448190325181667.
max
Math.maxO;
Возвращает большее из двух целых чисел х и у.
min
Math.minU, у):
Возвращает меньшее из двух целых чисел х и у.
PI
Math.PI
Возвращает число к — отношение длины окружности к ее диаметру. Во Flash
равно 3.14159265358979.
pow
Math.pow(x. у):
Возводит х в степень у.
random
Math.randomO;
Возвращает псевдослучайное число в интервале между 0,0 и 1,0.
round
Math.round(x):
Округляет х до ближайшего целого числа.
sin
Math.sin(x):
Синус х.
sqrt
Math.sqrUx):
Квадратный корень х.
SQRT1_2
Math.SQRTlJ
Квадратный корень из 1/2. Во Flash равен 0,707106781186.
SQRT2
Math.SQRT2
tan
Math.tan(x);
Вычисляет тангенс х.
Мышь (Mouse)
hide
Mouse.hide()
Скрывает указатель мыши, видимый по умолчанию.
show
Mouse. showO
Отображает указатель мыши.
Клипы (MovieClip)
attachMovie
anyMovieClip.attachMovie( idName. newname. depth);
Создает новый клип в библиотеке и присоединяет его к фильму.
duplicateMovieClip
anyMovieClip.duplicateMovieClipt newname. depth);
Создает экземпляр указанного клипа.
getBounds
anyMovi eCli p.getBounds( ta rgetCoordi nateSpace):
Возвращает минимальное и максимальное значения координат х и у для коор-
динатного пространства клипа, указанного в качестве параметра. Возвращаемый
объект будет содержать свойства {xMin, xMax, yMin, yMax}.
getBytesLoaded
anyMovi eCli p. getBytesLoadedO:
Возвращает число загруженных байтов для указанного объекта клипа.
getBytesTotal
anyMovieClip.getBytesTotalO:
Возвращает размер указанного объекта клипа в байтах.
MyText-"наш фильм занимает всего "+_root.getBytesTotalO/1024+" Кбайт на диске":
getURL
anyMovieClip.getURLt URL [.window, variables]]);
/•
gotoAndStop
anyMovieClip.gotoAndStopC frame);
Инициирует переключение и остановку клипа на указанном кадре.
hitTest
anyMovieClip.hitTesK x, у. shapeFlag):
anyMovieClip.hitTest(target);
Исследует, соотносится ли, и если да, то как (накладывается, пересекается), эк-
земпляр клипа с областью срабатывания, указанной параметром или заданной
координатами х и у. Согласно свойству shapeFl ag учитывается ограничивающий
прямоугольник или сама фигура клипа.
loadMovie
anyMovieClip.loadMoviet url [ . v a r i a b l e s ] ) :
Загружает и проигрывает фильм.
loadVariables
anyMovieClip.loadVariables( u r l . variables);
Считывает данные из внешнего текстового файла.
localToGlobal
anyMovieClip.1ocalToGlobal( point):
Переводит локальные координаты объекта point клипа в глобальные коорди-
наты.
nextFrame
anyMovieClip.nextFrameO :
Переключает клип на следующий кадр.
play
anyMovieClip.playO:
Начинает воспроизведение клипа.
prevFrame
anyMovieClip.prevFramet);
Переключает клип на предыдущий кадр.
removeMovieClip
anyMovi eCli p. removeMovieClipO;
Удаляет экземпляр клипа, созданного действием duplicateMovieclip либо мето-
дом duplicateMovieclip или attachMovie объекта MovieClip.
startDrag
anyMovieC11p.startDrag( [lock, left, right, top, bottom]);
Позволяет пользователю перетаскивать указанный клип. Одновременно можно
перетаскивать только один клип.
stop
anyMovieClip.stopO;
Останавливает воспроизведение клипа.
Объекты (Objects) 509
stopDrag
anyMovleCl1p.stopDragt):
Отменяет возможность перетаскивания, назначенную методом startDrag.
swapDepths
anyMovieClip.swapDepths(depth);
anyMovieClip.swapDepths( target);
Меняет уровень глубины экземпляра клипа, назначая ему уровень, указанный
в параметре.
•
unloadMovie
anyMovieCli p. unloadMovieO;
Удаляет клип, загруженный методом loadMovie или attachMovie объекта
MovieClip.
Числа (Number)
MAX_VALUE
Number. MAXJALUE
Константа, представляющая самое большое выводимое число. Это число при-
близительно равно 1J9769313486232E+308.
MIN_VALUE
Number. MINJ/ALUE
Константа, представляющая самое маленькое выводимое число. Это число при-
близительно равно 4,94065645841247Е-324.
NaN
Number.NaN
Константа, представляющая «не число» (Not a Number, NaN).
NEGATIVE_INFINITY
Number. NEGATIVEJNFINITY
Константа, представляющая отрицательную бесконечность.
new Number
myNumber = new Number(value):
Конструктор. Создает новый объект Number.
POSITIVE_INFINITY
Number. POSITIVEJNFINITY
Константа, представляющая положительную бесконечность. Ее значение совпа-
дает с глобальной переменной Infinity.
toString
myNumber.toString(radix):
Возвращает строковое представление объекта Number по основанию, указанному
в параметре.
510 Приложение 5. ActionScript
valueOf
щу Number.valueOft);
Возвращает исходное значение объекта Number.
Объекты (Object)
new Object
new ObjectO:
new Object(value):
•
Конструктор. Создает новый объект Object.
toString
myObject.toStringO:
.
Метод. Конвертирует объект в строку.
valueOf
myObject.valueOfO:
Метод. Возвращает примитивное значение объекта или сам объект.
Выделение (Selection)
getBeginlndex
Selecti on.getBegi nIndex()
Возвращает индекс начала области выделения.
getCaretlndex
Selection.getCaretlndexC)
Возвращает позицию курсора в области выделения.
getEndlndex
Select1 on.getEndIndex()
Возвращает индекс конца выделенной области.
getFocus
Selection.getFocusO:
Возвращает имя переменной, связанной с. редактируемым текстовым полем и
имеющей фокус.
setFocus
Selection.setFocus(variable):
Перемещает фокус на поле, ассоциированное с переменной vari abl е.
setSelection
Selection.setSelection(start. end)
Присваивание начального и конечного индекса выделенной области.
Звук(Sound)
attachSound
mySound.attachSoundC'idName"):
Метод. Присоединяет звук к объекту mySound.
Объекты (Objects) 511
getPan
mySound.getPanO:
Метод. Возвращает уровень баланса.
getTransform
mySound.getTransform():
Метод. Возвращает информацию о преобразованиях звука, заданных последним
вызовом метода setTransform.
getVolume
mySound. getVolumeO:
Метод. Возвращает уровень громкости.
new Sound
new SoundO: new SoundCtarget):
Конструктор. Создает новый объект Sound для указанного клипа. Если вы не
определите адресат (параметр target), объект Sound будет управлять всеми зву-
ками в фильме.
setPan
mySound.setPan(pan):
Метод. Задает баланс между левым и правым каналами.
setTransform
mySound.setTransform(soundTransformObject);
Метод. Задает преобразование для звукового объекта.
MySoundTransformObject = new Object
MySoundTransformObject.il • 100
MySoundTransformObject.lr - 100
mySoundTransformObject.rr - 0
mySoundTransformObject.rl - 0
setVolume
mySound.setVolume(volume);
Метод. Задает уровень громкости для звукового объекта.
start
mySound. startO:
mySound.sta rt([secondOffset. 1oop]):
Метод. Начинает воспроизведение звука с начала, если ни один из параметров
не определен, или с места, указанного в качестве параметра secondOffset.
stop
mySound.stopO: mySound.stop(["idName"]);
Метод. Останавливает все звуки или только указанные в качестве параметров.
charCodeAt
myString.charCodeAt(index):
Метод. Возвращает код символа, стоящего на месте index. Возвращаемое значе-
ние — 16-разрядное целое число от 0 до 65 535.
concat
String.concatCvaluel valueN):
Метод. Объединяет указанные значения и возвращает новую строку.
fromCharCode
String.fromCharCode(cl.c2....cN):
Метод. Возвращает строку, составленную из символов, указанных в параметрах.
indexOf
myString.indexOftvalue);
myString.indexOf (value, start);
Метод. Находит строку и возвращает позицию первого указанного значения.
Если значение не найдено, метод возвращает -1.
lastlndexOf
myString.lastIndexOf(substring):
myString.lastlndexOf(substring, start);
Метод. Находит строку и возвращает индекс последней позиции substring, най-
денной в пределах вызываемой строки. Если подстрока не найдена, метод воз-
вращает -1.
length
string.length
Свойство. Возвращает число символов в указанном объекте String. Индекс по-
следнего символа для любой строки х равен x.length-1.
stringl="AfAfAfgfg";
counter=0;
counterl=0;
m=stringl.length;
for (i=0: i<m;i++)
{if (stringl.charCodeAt(i)==65) counter++ :
if (stringl.charAtd)—"f") counterl++ ;}
fa=counter; // fa равно 3
ff=counterl; '// ff равно 4
•
new String
new String(value);
Конструктор. Создает новый объект String.
slice
String.slice(start. end):
Метод. Извлекает подстроку указанного объекта Stri ng и возвращает ее как но-
вую строку без изменения первоначального объекта String. Возвращенная стро-
ка включает символ start и все символы до (но не включая) символа end.
Объекты (Objects) 513
split
myString.split(delimiter):
Метод. Разбивает объект String, разделяя строку везде, где находится указан-
ный в качестве параметра разделитель, и возвращает подстроки в массиве. Если
разделитель не определен, возвращенный массив содержит только один эле-
мент — собственно строку. Если разделитель — пустая строка, каждый символ
в объекте Stri ng становится элементом в массиве.
substr
myString.substr(start, length);
Метод. Возвращает подстроку, начиная с позиции start длиной length.
substring
myString.substringCfroni. to);
Метод. Возвращает подстроку, состоящую из символов между позициями, ука-
занными параметрами from и to.
toLowerCase
myString.toLowerCaseO;
Метод. Возвращает копию строки String со всеми символами в нижнем регистре.
toUpperCase
.myString.toUpperCaseO;
Метод. Возвращает копию Stri ng со всеми символами в верхнем регистре.
XML
appendChild
myXML.appendChi1d(chi1dNode);
Метод. Добавляет дочерний узел.
attributes
myXML.attributes;
Коллекция. Возвращает массив, содержащий атрибуты объекта XML.
childNodes
myXML.childNodes:
Коллекция (только для чтения). Возвращает массив дочерних узлов объекта myXML.
cloneNode
myXML.cloneNode(deep);
Метод. Конструирует и возвращает новый узел того же типа, что и myXML
createElement
myXML.createElement(name);
Метод. Создает новый элемент с указанным именем. Новый элемент изначаль-
но не имеет родителей и джочерних узлов. Метод возвращает ссылку на создан-
ный элемент.
17 Зак. 96
514 Приложение 5. ActionScript
createTextNode
myXML.createTextNode(text);
Метод. Создает новый текстовый узел, содержащий указанный текст. Новый
узел изначально не имеет родителей и не может иметь джочерних узлов. Метод
возвращает указатель на созданный узел.
docTypeDecl
myXML.XMLdocTypeDecl:
Свойство. Задает и возвращает определение типа документа DOCTYPE.
firstChild
myXML.firstChild:
Свойство (только для чтения). Ссылается на первый дочерний узел в списке ро-
дителя.
haschildNodes
myXML.hasChildNodesO;
Метод. Возвращает true, если есть дочерние узлы, и false, если их нет.
insertBefore
myXML.insertBefore(childNode, beforeNode):
Метод. Вставляет дочерний узел childNode перед узлом beforeNode.
lastChild
myXML.lastChild:
Свойство (только для чтения). Ссылается на последний дочерний узел в списке
родителя.
load
myXML.load(url):
Метод. Загружает документ с указанного адреса.
loaded
myXML.loaded:
Свойство (только для чтения). Определяет успешность загрузки документа.
new XML
new XMLO; new XML(source):
Конструктор. Создает новый объект XML.
nextSibling
myXML.nextSibling;
Свойство (только для чтения). Ссылается на следующего «брата» в списке до-
черних объектов.
nodeName
my XML.nodeName:
Свойство. Задает и возвращает имя узла.
Объекты (Objects) 515
nodeType
myXML.nodeType:
Свойство. Возвращает тип узла: тип 1 — XML-элемент, З — текстовый узел.
nodeValue
myXML.nodeValue;
Свойство. Возвращает значение узла.
onLoad
myXML.onLoad(success):
Метод. Вызывается, когда документ получен сервером. Рекомендуется пере-
определить данный метод своей функцией.
parentNode
myXML.parentNode;
Свойство (только для чтения). Ссылается на родительский узел.
parseXML
myXML.parseXML(source);
Метод. Разбирает текст, указанный в качестве параметра как XML-документ.
previousSibling
myXM. previ ousSi Ы i ng;
Свойство (только для чтения). Ссылается на предыдущего «брата» в списке до-
черних объектов.
removeNode
myXML.removeNodeO:
Метод. Удаляет узел.
send
myXML.send(url): myXML.send(url. window):
Метод. Кодирует XML-объект в XML-документ и посылает по указанному ад-
ресу методом post.
sendAndLoad
myXML.sendAndLoad(url.targetXMLobject):
Метод. Кодирует XML-объект в XML-документ и посылает по указанному ад-
ресу методом post. Затем загружает ответ сервера и записывает в объект target -
XMLobject.
status
myXML.status;
Свойство (целое число), указывающее на успешность прочтения документа и
превращения его в XML-объект.
toString
myXML.toStringO;
Метод. Преобразует объект в строковое представление.
516 Приложение 5. ActionScript
xmlDecl
myXML.xmlDecl;
Свойство. Задает и возвращает информацию об объявлении документа XML.
XMLSocket
close
my XMLSocket. closeO;
Метод. Закрывает соединение, указанное в myXMLSocketMethod.
connect
myXMLSocket.connect(host, port);
Метод. Устанавливает соединение с указанным сервером host через порт port
и возвращает true или false.
new XMLSocket
new XMLSocket О:
Конструктор. Создает XMLSocket-объект.
onClose
myXMLSocket. onCloseO:
Метод. Вызывается, когда соединение закрыто сервером. Рекомендуется пере-
определить данный метод своей функцией.
onConnect
myXMLSocket.onConnect(success):
Метод. Вызывается, когда заканчивает действовать метод XMLSocket. connect. Реко-
мендуется переопределить данный метод своей функцией.
onXML
myXMLSocket. onXMLO;
Метод. Вызывается, когда указанный XML-объект object «проходит» через соеди-
нение myXMLSocket. Рекомендуется переопределить данный метод своей функцией.
send
myXMLSocket. sencKobject):
Метод. Конвертирует object и посылает на сервер.
Другие действия
,(запятая)
expression!. expression2
Сначала определяется expression!, затем — expression2, и возвращается значение
expression2.
. (оператор точки)
object.property_or_method
i nstancename. van' abl e
i nstancename.chi1di nstance.vari able
Другие действия 517
Оператор точки используется для указания иерархии объекта, метода или свой-
ства.
my.name = "Дмитрий";
my.address = "улица, дон";
ту.city = "Гатчина":
?: (условное выражение)
expression! ? expressionZ : expressions
Если expression! равно true; возвращается значение expression2, в противном
случае — значение expressions.
х = 6;
У = 12:
. г = (х < 5) ? х : у;
trace Cz):
// Будет выведено 12
// (разделитель комментария)
// комментарий
Указывает начало комментария.
// Данная строка игнорируется ActionScript
/* (разделитель комментария)
/* комментарий */
/*
* комментарий
*/
Определяет одну или более строк в качестве комментария.
/*
*Данные строки
*игнорируются
*ActionScript
*/
[ ] (оператор доступа к элементу массива)
myArray = ["aO". al aN]:
туАггау[Е] - value
object[valuel, value2, ...valueN];
Оператор создает новый массив с указанными элементами или обращается к эле-
ментам в массиве. Он также позволяет обращаться к свойствам объекта.
{ } (объектный инициализатор)
object {namel: valuel. namel: value2, ... nameN: valueN }:
Оператор создает новый объект и инициализирует его парами свойств (имя и
значение).
=(присваивание)
expressionl = expression2
Оператор присваивает expressionl значение expression2.
_parent
_parent.property = х
Свойство определяет или возвращает путь к родительскому клипу.
518 Приложение 5. ActionScript
_root
_root; _root.movieClip; _root.action:
Свойство определяет или возвращает путь к корневой киноленте фильма.
this
this
Ключевое слово ссылается на объект или экземпляр клипа.
Приложение 6
В начале 2002 года свет увидела новая версия Flash — Flash MX (рис. П6.1). Ко-
нечно, нельзя сказать, что это привело к революционным изменениям в жизни
web-дизайнеров. Скорее это — очередная эволюционная ветвь программы. Мно-
гие изменения, наметившиеся в пятой версии, получили свое воплощение.
• Основательно поменялся внешний вид интерфейса.
• ActionScript стал еще более объектно-ориентированным.
• Появились новые настройки и возможности.
Найти новую версию программы можно на сервере Macromedia: www.macro-
media.com. Точный адрес продукта для загрузки был таким: http://download.
macromedia.eom/pub/shockwave/flash/english/win95nt/6.0.29.0/flashplayer6installer.exe.
Разработчики и дизайнеры
Первое, что бросается в глаза при открытии окна What's New (Что нового), — это
деление пользователей на дизайнеров и разработчиков (рис. П6.2). Для каждо-
го — свои новости. Это деление простирается не только на новостную ленту.
Если выбрать команду Window > Panel Sets (Окно > Настройка панелей), то в от-
крывшемся подменю классификация настроек панелей проводится с учетом
разрешения экрана и типа пользователя: Designer (Дизайнеры) и Developer (Раз-
работчики). На рис. П6.3 и П6.4 показаны примеры расположения панелей для
режимов Designer [1024x768] и Developer [1024x768].
1
В переводе В. Марковой и Т. Соколовой-Делюсиной.
520 Приложение 6. Новые возможности Flash MX
• :"::/:,:; '"'/.Name:
•.'Organization
Serial-Number:
Macromedia Flash MX
For the developer
: What's ..Mew. Flash MX gives application
developers access to advanced
scripting and debugging tools, bum-
:
-movie prc in code reference, and Flash :
pv6'fvKj\v o! some с components to rapidly deploy rich
features in this rek<
CheckBox f ComboBon
LislBox Ш PushBullon
Щ RadioBulloti | SciollBai
ScfolPane
Совместимость
Вместе с Flash MX увидел свет и новый Flash Player 6 (plug-in для браузеров,
позволяющий проигрывать Flash-фильмы). Он необходим, чтобы было воз-
можно просматривать фильмы, созданные во Flash MX, не только в авторской
среде, но и в браузере. Однако, как и в предыдущих версиях, вы можете экспор-
тировать ваш фильм для любой версии Flash Player. При этом будут использова-
ны только возможности указанной версии.
Формат файлов тоже изменился, но есть возможность сохранять фильмы и в
формате Flash 5. Если вы использовали какие-то новые возможности Flash MX,
программа выдаст вам список использованных новых средств и предупредит,
что все они будут потеряны, если файл будет сохранен в формате Flash 5. В лю-
бом случае никто не мешает для работы использовать Flash MX, а затем экспор-
тировать готовый фильм во Flash 5.
Инструменты
На панели инструментов объявились два новых жителя: Free Transform (Свобод-
ное преобразование) и Fill Transform (Преобразование заливки). По своей сути
это не новые инструменты, а получившие место под солнцем модификаторы.
Инструмент Free Transform (Свободное преобразование) вырос из модификато-
ров инструмента Arrow (Стрелка) — Scale (Размер) и Rotate (Вращение). В про-
цессе этого инструмент приобрел свои собственные модификаторы.
• Rotate and Skew (Вращение и скос) — произвольное вращение и скос объекта.
• Scale (Размер) — изменение размеров объекта.
• Distort (Искажение) — искажение нарисованной фигуры. Это новая возмож-
ность Flash MX: передвигая 8 черных маркеров, вы можете сильно исказить
объект.
• Envelope (Искажение огибающей) — искажение с помощью огибающей. У это-
го модификатора изначально 24 маркера на огибающей: 8 узловых точек и по
два маркера касательных на точку. Управляя ими, как маркерами на обычной
векторной кривой, квадрат можно легко превратить в кляксу (рис. П6.5).
ПРИМЕЧАНИЕ
Два последних модификатора применимы только к рисованным фигурам, для символов
они недоступны.
Панели
Панели претерпели наибольшие изменения. Некоторые исчезли — их поглотила
панель Properties (Свойства), другие сменили название, а третьи впервые увиде-
ли свет (рис. П6.6).
j Hatched В OK
|
||
| Hairline
; Distant
atBlJNone
. ' . • •• • . • ;•.: • •
ijrvilllj Straight " ;
Lqual
..'..;" •;.'.:. : : ;:.;;j:;
Рис. Пб.7. Настройка контура
...^..iL..^..^.^.,..^^^.^.^..^.:...^^,.,^*.^^^^;*.^*.. >.•.*.:<•.:>:.,::-,~:~,>:,~,,..
'ЩВ1;«:] fl T'U
[URL
W ' JNramal
Вид панели свойств при выборе текста зависит от типа текстового блока
(рис. П6.8). Теперь для динамического текста и поля ввода можно задать имя,
через которое к блоку можно будет обращаться как к объекту. Не путайте его
с переменной — поле Var (Переменная) осталось без изменений. Пропали кноп-
ки для встраиваемых символов, которые украшали панель Text Options (Пара-
метры текста) в режиме поля ввода. Их заменила кнопка Character (Символ).
Actions (Действия)
Панель Actions (Действия) претерпела значительные изменения (рис. П6.9). Теперь
это полноценный редактор сценариев.
Слева, как и раньше, находится список папок с действиями. Если вы знаете, что
вы ищете, то можно воспользоваться группой Index (Указатель), в которой по-
чти все действия перечислены в алфавитном порядке.
Над полем сценария находится довольно много кнопок:
• Add a new item to the script (Добавить новое действие в сценарий);
• Delete the selected action(s) (Удалить выделенное действие);
526 Приложение 6. Новые возможности Flash MX
Find (Поиск);
Replace (Замена);
Insert a target path (Путь) — служит для указания пути к объекту;
Auto Format (Автоформат);
Show Code Hint (Показать подсказку);
Reference (Справка) — открывает одноименную панель;
Debug Option (Параметры отладчика) — открывает меню с командами уста-
новки и снятия точек останова:
Q Set Breakpoint (Задать точку останова),
О Remove Breakpoint (Удалить точку останова),
Q Remove All Breakpoints (Удалить все точки останова);
View Options (Параметры панели) — открывает меню с командами:
G Normal Mode (Обычный режим),
Q Expert Mode (Режим эксперта),
LJ View Line Numbers (Режим отображения номеров строк в поле сценария).
Functions «I
II
Constants
Properties
Objects
Deprecated
Flash UI Components
FCheckBox
P FComboBox
З FPushButlon.
Щ Methods ; ; л? ;.
® getEnabled
Ш getLabel
dS legisterSkinElem...
@ setClickHandler
setEnabled
setSize
setStyleProperty
Щ FRadioButton
E|| FScrolBat
.•.'•': Д FScmllPane
Д FStyleFofmat
й: Index :
Reference (Справка)
Как вы уже поняли, справочную информацию по ActionScript можно получить
прямо в авторской среде Flash. Для этого служит панель Reference (Справка). На
ней также присутствует иерархический список действий слева, а в правом поле
отражается описание выбранного действия.
Debugger (Отладчик)
Панель Debugger (Отладчик), также связанная со сценариями, приобрела более
рабочий вид (рис. П6.10). По сути, во Flash теперь есть полноценный отладчик
с возможностью прерывать работу сценария в нужном месте и следить за пере-
менными.
ЕВ
JevelO
il!
Caiistac*
ActionScript
Значительно вырос список действий ActionScript. Это произошло за счет вклю-
чения в язык методов встроенных объектов. Нет смысла подробно описывать
все новые команды языка. Если вам сложно читать описание действий на ан-
глийском, можете приобрести «Самоучитель Flash MX» (см. список литературы)
или поискать перевод справки в Интернете.
СОВЕТ
Многие старые команды попали в папку Deprecated. Если вы настроились работать только
во Flash MX, лучше не использовать их. Однако для совместимости с другими версиями
Flash эти команды могут быть незаменимыми.
FScrollBar
Компонент FScrollBar обеспечивает полосы прокрутки для динамического текста
и полей ввода. Методы этого компонента перечислены в табл. П6.1.
ВНИМАНИЕ
Методы компонентов не выполняют проверку на ошибки вводимых данных. Поэтому перед
использованием методов рекомендуется проверять правильность параметров.
Метод Описание
FScrollBar.getEnabled Возвращает значение свойства доступности компонента
FScrollBar.getScrollPosition Возвращает целое число, представляющее
текущую позицию бегунка
FScrollBar.registerSkinElement Регистрирует свойство элемента оформления
FScrollBar.setChangeHandler Определяет функцию-обработчик, отслеживающую изме-
нения позиции бегунка на полосе прокрутки
FScrollBar.setEnabled Устанавливает свойство доступности компонента
FScrollBar.setHorizontal Задает направление полосы прокрутки:
горизонтальное (true) или вертикальное (false)
FScrol I Ba r. setLargeScrol I Задает число прокручиваемых позиций при щелке
на полосе прокрутки вне бегунка
FScrollBar.setScrollPosition Задает позицию бегунка для полосы прокрутки как целое
число между минимальной и максимальной позициями
FScrollBar.setScrollProperties Задает параметры полосы прокрутки
Прочее 529
Метод Описание
Прочее
Перечислим прочие мелкие и серьезные нововведения.
• Появилась иерархия слоев. Теперь слои можно укладывать в папки, а пап-
к и — в другие папки.
• Исчезла строка быстрого доступа.
• Исчез Generator. Теперь рисунки и фильмы можно загружать напрямую с
помощью команды loadMovieQ.
• Теперь видео можно импортировать практически в любом формате, причем
Flash может изменить любые параметры этого видеоклипа, что позволит су-
щественно сокращать размеры Flash-фильмов.
• Flash MX позволяет создавать шаблоны (templates) и использовать их в ка-
честве заготовок для новых фильмов.
• Появилась возможность корректировать рисунки с точностью до пиксела при
помощи сетки.
Перечислять все изменения, произошедшие в программе, — значит написать но-
вую книгу, а это в наши планы сейчас не входит. Если вы будете работать с
Flash MX, вы сами без труда найдете различия и сумеете в них разобраться.
Главное — не бояться, и вперед — вас ждут великие дела!
Толковый словарик Интернета
От людских голосов
Пугливо вздрагивают по вечерам
Красавицы вишни.
Кобаяси Исса'
Отпечатано с готовых диапозитивов в ФГУП ордена Трудового Красного Знамени «Техническая пиита»
Министерства РФ по делам печати, телерадиовещании и средств массовых коммуникаций
198003, Санкт-Петербург, Измайловский пр., 29