Леше в
Создание
интерактивного
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. Славный праздник Новый год