Macromedia Flash Professional 8. Графика и анимация

Дронов В. А.

Подробно, доступно и с юмором рассматривается создание современной интернет-графики и анимации с помощью пакета Macromedia Flash Professional 8. Описываются основные инструменты рисования и правки графики, использование слоев, образцов и библиотек, работа с текстом, импорт графики, видео и звука. Рассмотрен процесс производства фильмов стандартными, и весьма богатыми, средствами Flash. Также приводятся краткое описание встроенного языка программирования Flash — Action Script — и методика его применения для разработки интерактивных элементов. Рассказывается о публикации готового изображения или фильма для распространения через Интернет.

 

Введение

 

Вы держите в руках книгу, посвященную последней на данный момент версии программного пакета Macromedia Flash — Flash 8. А это значит, что вы им заинтересовались. Так что же такое Macromedia Flash?

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

На сегодняшний момент существует множество Web-сайтов, созданных с использованием технологии Flash. Есть также довольно много программ, использующих для тех или иных целей Flash-графику. (Например, замечательный проигрыватель мультимедийных файлов J. River Media Jukebox, который вы можете найти на сайте . Этот проигрыватель не только воспроизводит Flash-фильмы, но и хранит некоторые части своего интерфейса в формате Flash.) Создано большое количество неплохих Flash-фильмов, которые вы можете увидеть на сайтах , , и др. Существует Дмитрий Дибров, показывавший в телепередаче "Ночная смена" (уже давно закрытой) потрясающие по своей невразумительности Flash-ролики. И, наконец, существует целое сообщество "флэшеров", в которое при желании можете влиться и вы.

Так для кого же эта книга? Для тех, кто хочет научиться рисовать и анимировать в среде Flash. Только и всего.

 

Flash 8 — что нового?

Печальная тенденция, сполна проявившаяся в последнее время, — новые версии программ становятся все больше и больше по размерам. Вот и дистрибутив нового Flash "распух" до 110 Мбайт. Что же он при таких размерах может предложить бывалым "флэшерам"?

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

□ Новый режим рисования — объектный. Рисуемые в этом режиме примитивы не подвергаются ни фрагментации, ни слиянию. Часто это бывает полезно.

□ Градиентные и графические цвета. Это те же самые градиентные и графические заливки, поддерживавшиеся в предыдущих версиях, но теперь их можно применять и к линиям. Полезная штуковина, которой так не хватало раньше.

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

□ Улучшения в панели Actions, предназначенные для начинающих Flash-программистов. Фактически в новую версию Flash вернули базовый режим, имевшийся во Flash MX, но убранный во Flash MX 2004.

□ Теперь серое пространство в рабочей области растягивается, так что мы можем "запихать" в нее сколько угодно графики.

□ Улучшенное диалоговое окно Preferences, "ведающее" настройками программы.

□ Улучшения в панели Library. Теперь мы можем открыть сколько угодно этих панелей, и каждая из них будет отображать содержимое библиотеки каждого открытого документа.

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

□ Фильтры. Они позволяют нам, например, создать у любого клипа тень исключительно средствами Flash, не обращаясь к другим программам.

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

□ Управление течением анимации. Теперь мы можем, например, заставить анимированный элемент двигаться сначала медленно, потом — быстро, а в самом конце снова замедлить его движение.

□ Новый видеокодек — On2 VP6. Утверждается, что он обеспечивает лучшее качество изображения и более сильное сжатие, но нагрузка на процессор при этом будет больше.

□ Немного переделанная структура меню. В новой версии она несколько удобнее, чем в предыдущей.

А теперь поговорим о том, что осталось как было. К сожалению…

□ На редкость неудобная панель Help, в которой отображается содержимое интерактивной справки Flash. Ну неужели нельзя сделать так, как в Macromedia Dreamweaver, — отдельное окно со всей справочной информацией! Так ведь намного удобнее: можно одновременно смотреть текст справки и работать в программе. Вдобавок интерактивная справка Flash сделана в виде набора Web-страниц с картинками и занимает очень много места на жестком диске.

□ Старая беда всех продуктов фирмы Macromedia — большое количество ошибок. И еще кто-то ругает Microsoft за ошибки в продуктах… Почему никто не ругает Macromedia?!!

На заметку

Когда писалась эта книга, фирму Macromedia со всеми ее продуктами купила давний ее конкурент — фирма Adobe. Так что следующая версия Flash будет выпущена уже Adobe.

 

Flash 8 и Flash 8 Professional

Flash 8, как и предыдущая версия этой программы, распространяется в двух разных комплектах поставки: обычная (Flash 8) и профессиональная (Flash 8 Professional). Профессиональная версия включает больше возможностей, но и стоит дороже.

Вот что включает в себя Flash 8 Professional:

□ средства управления анимацией;

□ эффекты и цветовые наложения;

□ средства управления сглаживанием текста и растровой графики;

□ утилита Macromedia Flash 8 Video Encoder;

□ расширенный набор компонентов;

□ окно кода — мощный инструмент, предназначенный для создания и правки файлов сценариев;

□ панель Accessibility, предназначенную для задания параметров доступности приложений;

□ некоторые дополнительные элементы.

А теперь — внимание! В данной книге мы будем изучать именно Flash 8 Professional как более полную. Никакие пакеты обновления для Flash 8 фирма Macromedia на момент написания этой книги еще не выпустила.

 

Типографские соглашения

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

□ В угловые скобки (<>) заключаются названия параметров или фрагментов кода, набранные курсивом. В код реального сценария, разумеется, должен быть подставлен реальный параметр или реальный код. Например:

gotoAndPlay (<Номер кадра>);

Здесь вместо подстроки Номер кадра должно быть подставлено реальное значение номера кадра.

□ В квадратные скобки ([]) заключаются необязательные фрагменты кода. Например:

function <Имя>([<Набор параметров>]);

Здесь Набор параметров может присутствовать, а может и не присутствовать.

□ Если в какое-либо место сценария должна быть подставлена команда, выбираемая из некоего ограниченного набора, в этом месте приводятся все команды данного набора, разделенные символом | ("вертикальная черта"). Например:

onClipEvent(mouseDown|mouseUp) {.

Здесь в качестве параметра действия onClipEvent может присутствовать либо mouseDown, либо mouseup (но не оба одновременно).

Весь остальной код сценария набирается в области редактирования кода панели Actions "как есть".

 

Благодарности

Автор приносит благодарности своим родителям, знакомым и коллегам по работе.

□ Губине Наталье Анатольевне, начальнику отдела АСУ Волжского гуманитарного института (г. Волжский Волгоградской обл.), где работает автор, — за понимание и поддержку.

□ Всем работникам отдела АСУ — за понимание и поддержку.

□ Родителям — за терпение, понимание и поддержку.

□ Архангельскому Дмитрию Борисовичу — за дружеское участие.

□ Шапошникову Игорю Владимировичу — за содействие.

□ Рыбакову Евгению Евгеньевичу, заместителю главного редактора издательства "БХВ-Петербург", — за неоднократные побуждения к работе, без которых автор давно бы обленился.

□ Издательству "БХВ-Петербург" — за издание моих книг.

□ Всем своим читателям и почитателям — за прекрасные отзывы о моих книгах.

□ Всем, кого я забыл здесь перечислить, — за все хорошее.

 

Часть I

Введение во Flash

 

Глава 1

Основы компьютерной графики

 

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

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

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

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

Особый разговор пойдет о великолепном Macromedia Flash 8 (ведь именно этому пакету и посвящена данная книга). Пора, наконец, выяснить, чем же он так хорош.

 

Компьютерная графика: прошлое и настоящее

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

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

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

Первой потехой для пользователей ПК стали компьютерные игры. Индустрия игр появилась также вместе с ПК — на больших компьютерах игр просто не существовало (хотя, по слухам, первая компьютерная игра была написана именно для большой ЭВМ). И не просто появилась, а вскоре стала подлинным двигателем прогресса в компьютеростроении. Ведь зачем совершенствуются трехмерные ускорители, звуковые карты, зачем выпускаются умопомрачительные джойстики? Неужели для Microsoft Word или "1C: Бухгалтерии"? Отнюдь! Лишь для того, чтобы любимая игрушка "бегала" быстрее, монстры были страшнее, а игроку — сподручнее их отстреливать.

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

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

Вероятно, самой первой программой для работы с видео была программа QuickTime, разработанная фирмой Apple для компьютеров Macintosh и позднее перенесенная на Microsoft Windows. Фирма Microsoft в ответ разработала программный пакет Video for Windows. Но это было еще не компьютерное видео, а лишь первый шаг к нему.

Несколькими годами позднее, когда мощности персональных компьютеров еще более возросли, a CD-ROM получили достаточно широкое распространение, появился формат записи фильмов на CD, который так и назывался — VideoCD. Это был первый и не слишком удачный опыт создания цифрового кино "для народа". На одном диске VideoCD помещалось только 74 минуты видео, поэтому полнометражные фильмы поставлялись на двух дисках. Качество "картинки" было невысоким; фильмы смотрели на компьютерах с помощью специальных программ, открывая их в маленьком окошке, или на особых проигрывателях, похожих на видеомагнитофоны.

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

Настоящую жизнь компьютерному кино дали появившиеся во второй половине 90-х диски DVD и соответствующий формат для записи на них видео — DVD-Video. На DVD помещается до 4,7 Гбайт информации, чего вполне хватает не только на полноразмерный (два часа) фильм высокого качества, но и на несколько звуковых дорожек, наборов субтитров, интерактивные меню и прочие бонусы. К несчастью, этот замечательный носитель очень долго пробивал себе дорогу и стал популярным только в самые последние годы.

Середина 90-х годов примечательна еще одним событием. Именно в то время появилось понятие мультимедиа (multimedia, "многосредность"), обозначавшее совокупность текстовых, цифровых, звуковых данных и видеоданных, объединенных в единое целое. А достаточно мощные компьютеры, обрабатывающие все эти данные, стали называться мультимедийными.

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

Ведь что такое Интернет? Нет, не так… Что такое Интернет (Всемирная Сеть или просто Сеть с большой буквы) для большинства его пользователей? Это электронная почта (отметаем сразу, ибо не наш профиль), вирусы (лучше бы их не было), хакеры (аналогично) и World Wide Web (она же WWW, Web и Всемирная Паутина). Вот на WWW мы остановимся подробнее.

Что же такое WWW? Это Web-страницы, для просмотра которых используются особые программы — Web-обозреватели (или Web-браузеры — от английского browser, обозреватель). А что такое Web-страницы? Это текст, который можно читать, файлы, которые можно загрузить, музыка, которую можно слушать, графика и видео, которые можно смотреть. Вы слышите? Графика и видео!!!

Изначально, правда, WWW была полностью текстовой. Да-да, не удивляйтесь. Тим Бернере-Ли, создавший в 1989 году язык HTML (HyperText Markup Language, язык гипертекстовой разметки), на котором и пишутся Web-страницы, не предусмотрел в нем поддержку графики. Лишь в дальнейшем, под нажимом общественности, консорциум W 3 C (или WWWC, World Wide Web Consortium — консорциум всемирно протянутой паутины… ну и название!..), занимающийся развитием языка HTML, внес в него соответствующие изменения. Так в Интернет пришла графика.

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

Забегая немного вперед, скажем, что и Flash был создан именно для работы с интернет-графикой. Так что ее развитие отнюдь не прекратилось.

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

А теперь пора приступить к изучению компьютерной графики. Начнем со статичной, т. е. неподвижной графики, анимацией же займемся потом.

 

Статичная графика

 

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

 

Два вида статичной графики

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

Растровая графика

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

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

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

В случае растровой графики в графическом файле сохраняется упорядоченный набор (опытные компьютерщики говорят — массив) значений цветов в пикселах растра. Разумеется, где-то в начале файла, в его заголовке, должен быть записан размер изображения, например, 320×200 пикселов, иначе программное обеспечение не сможет правильно обработать файл. Также иногда в файл записываются дополнительные данные: сведения о создателе, о программе, в которой редактировался файл, и пр.

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

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

В случае графики с цветностью TrueColor (фотореалистичной, или полноцветной) все очень просто. Значение цвета пиксела представляет собой три числа, обозначающих доли красной, зеленой и синей составляющих соответственно. Причем каждое число занимает ровно восемь битов, т. е. один байт. Такой способ задания цвета называется RGB (от английского Red, Green, Blue — красный, зеленый, синий).

Если изображение содержит меньшее количество цветов, то все немного сложнее. Сначала создается палитра — особая таблица, в которой записаны все цвета, используемые в изображении, в формате RGB. А значение цвета каждого пиксела в этом случае — просто номер (индекс), указывающий на нужный цвет в палитре. Такие цвета называются индексированными, а сама графика — графикой с палитрой. Размер палитры зависит от количества битов, выделяемых на представление цвета; например, если выделено 4 бита (полубайт), то палитра может содержать 16 цветов.

Очень часто, особенно в последнее время, применяются полупрозрачные изображения, сквозь которые "просвечивает" то, что находится под ними. Вы, наверно, видели шикарные пиктограммы Windows ХР, в которых полупрозрачность используется очень часто. В этом случае наряду со значением цвета каждого пиксела нужно хранить и степень его прозрачности. Для этого также используются два способа.

В случае полноцветной графики TrueColor все тоже довольно просто. Степень прозрачности пиксела задается с помощью дополнительных восьми битов ("Одного байта!" — кричат бывалые компьютерщики), добавляемых к уже имеющимся двадцати четырем (если 8 бит умножить на 3 цвета, получится как раз 24). Эти восемь битов называются каналом прозрачности или альфа-каналом, а сама цветность — TrueColor с каналом прозрачности или просто 32-битной.

Полноцветная графика позволяет художнику задать прозрачность отдельно для каждого пиксела. Графика же с палитрой таких вольностей не допускает. Здесь используется другой способ задания прозрачности: один из цветов палитры "в приказном порядке" объявляется прозрачным (прозрачный цвет). Обычно это цвет левого верхнего пиксела изображения.

Растровая графика имеет как достоинства, так и недостатки. Перечислим их, начав, разумеется, с достоинств.

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

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

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

Теперь рассмотрим недостатки растровой графики.

□ Мы уже знаем, что размер массива пикселов зависит от геометрических размеров самого изображения и от его цветности. Иногда это выходит боком. Так, если мы сохраним в растровом формате простенькое, но полноцветное и, вдобавок, огромное по размерам изображение, оно вполне может занять на диске десятки мегабайт. Что ж, очень часто недостаток является обратной стороной достоинства…

□ Растровая графика зависит от разрешения устройства вывода: монитора или принтера. Разрешение — это максимальное количество пикселов по горизонтали и вертикали, которое может вывести устройство. В самом деле, если вывести изображение размером 640×480 пикселов на монитор с таким же разрешением, то этот рисунок займет весь экран целиком. Если же его вывести при разрешении 1024×768, то на экране отобразится только часть рисунка. Так что нам либо придется мириться с этим, либо выполнять масштабирование изображения — пропорциональное изменение его размеров, — чтобы "вписать" его в нужное нам разрешение.

□ Качество растровых изображений ухудшается при сильном масштабировании.

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

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

Как можно преодолеть этот недостаток?

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

Во-вторых, рекомендуется использовать достаточно мощные графические пакеты, например, последние версии Adobe Photoshop, для масштабирования растровой графики. Реализованные в них алгоритмы позволяют менять размеры изображений практически без потерь качества. Поставляемый в составе Microsoft Windows простейший графический редактор Paint этого не может.

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

Вот и все о растровой графике. Предоставим слово конкурирующей стороне.

Векторная графика

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

В качестве примера возьмем все ту же литеру А в векторном представлении. Если внимательно присмотреться к ней (рис. 1.3), можно увидеть, что она состоит из трех примитивов — прямых линий. (На рис. 1.3 они немного отделены друг от друга для лучшей наглядности.)

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

Перечислим эти достоинства.

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

□ Прекрасная масштабируемость. В самом деле, для того чтобы изменить размеры изображения, нужно лишь умножить параметры размера всех формул примитивов на значение масштаба, вычислить их повторно и перерисовать изображение. Взглянем на рис. 1.4 — векторное изображение в любом масштабе выглядит идеально.

□ Как следствие масштабируемости — независимость от разрешения устройства вывода: монитора или принтера.

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

Кстати, знаете ли вы, что обычные компьютерные шрифты, используемые Windows, суть векторные изображения? (Здесь имеются в виду так называемые шрифты формата TrueType, файлы которых имеют расширение ttf.) Благодаря векторному представлению они исключительно хорошо масштабируются до любых размеров. Однако системные шрифты, используемые для вывода надписей на диалоговых окнах, заголовков окон, пунктов меню, хранятся все же в растровом виде, чтобы зря не расходовать системные ресурсы.

Теперь перечислим недостатки векторной графики и укажем пути их преодоления.

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

□ Вывод векторной графики (а именно, ее растеризация) требует больше времени и больших системных ресурсов. В этом смысле растровая графика "работает" быстрее.

□ Практически невозможно преобразовать полутоновое растровое изображение TrueColor в векторное (выполнить векторизацию) без больших потерь его качества.

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

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

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

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

Применение растровой и векторной графики

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

Итак, растровая графика применяется:

□ для хранения и обработки полутоновых изображений (сканированные или изначально созданные на компьютере картины, фотографии);

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

Векторная графика лучше всего подойдет, если нужно:

□ сохранить штриховые изображения (карты, чертежи, рисунки карандашом, гравюры) в электронном виде;

□ создать небольшие изображения, которые в дальнейшем будут всячески обрабатываться при выводе. Хороший пример таких изображений — шрифты формата TrueType, которые при выводе на экран не только масштабируются, но и раскрашиваются в разные цвета, поворачиваются и т. п.

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

Осталось напомнить о том, что Flash — формат векторной графики. Точнее же будет сказать: гибридной.

Гибридная графика

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

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

Вот и все о двух видах графики: растровой и векторной. Далее мы рассмотрим конкретные форматы сохранения графики, поговорим об их достоинствах и недостатках и опишем область применения каждого формата.

 

Форматы графики

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

Формат BMP

Растровый формат BMP (BitMaP, битовая матрица) — простейший формат записи растровых изображений. Он также известен под названием DIB (Device Independent Bitmap, битовая матрица, независимая от устройства вывода). Разработан фирмой Microsoft в самом начале 90-х годов прошлого века для сохранения графики в операционной системе Windows и совместимых с ней программах. Поддержка файлов формата BMP встроена непосредственно в ядро Windows.

Графика сохраняется в файлах с расширением bmp или (крайне редко) dib. Может быть любой цветности. Графические данные могут быть сжаты с использованием простейшего алгоритма RLE (Run Length Encoding, кодирование с переменной длиной строки).

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

Формат GIF

Растровый формат GIF (Graphic Interchange Format, формат обмена графикой) был разработан фирмой CompuServe в 1987 году для использования в собственной одноименной компьютерной сети. Наряду с форматом JPEG (об этом формате будет рассказано ниже) получил огромное распространение в компьютерных сетях, в частности, в Интернете.

Графика хранится в файлах с расширением gif. Цветность — 256 цветов (т. е. используется палитра). Для сжатия графики используется алгоритм I./.W. разработанный математиками Лемпелом, Зивом и Велчем. Графика может быть сохранена с чередованием строк (interleaving) — в этом случае изображение как бы постепенно "проявляется" строка за строкой по мере загрузки файла.

В 1989 году формат GIF был расширен; новая версия стандарта получила название GIF89A. Во-первых, была введена поддержка "прозрачного" цвета. Во-вторых, появилась возможность сохранять в одном файле несколько изображений, которые могли бы демонстрироваться последовательно, как кадры анимационного фильма (так называемые анимированные GIF-файлы).

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

К несчастью, будущее формата GIF весьма туманно. Еще в середине 90-х годов фирма CompuServe хотела получать авторские отчисления с продажи каждой программы, поддерживающей формат GIF, но сетевому сообществу тогда удалось отстоять его бесплатность. Теперь же фирма Unisys, владеющая патентом на алгоритм LZW, тоже хочет получать авторские отчисления, ведь именно этот алгоритм применен в формате GIF для сжатия графики. Судя по всему, этот формат в покое не оставят. Кроме того, 256 цветов по сегодняшним временам — очень мало. Поэтому формату GIF уже прочат преемника — формат PNG, описанный ниже.

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

Формат PNG

Растровый формат PNG (Portable Network Graphic, переносимая сетевая графика) разработан сообществом независимых программистов в качестве замены устаревающего и грозящего перейти в разряд коммерческих продуктов формата GIF. Он поддерживается в настоящее время многими графическими пакетами, однако большой популярности в Интернете пока не снискал, хотя автору время от времени встречаются сайты с PNG-графикой.

Графика хранится в файлах с расширением png. Она может быть любой цветности. Для сжатия графики применяется очень мощный алгоритм Deflate (буквально — "усыхание"), обеспечивающий более сильное сжатие по сравнению с LZW. Графика может быть сохранена с чередованием, причем не только строк, но и столбцов; таким образом, изображение будет "проявляться" и по строкам, и по столбцам. Поддерживается 256 степеней прозрачности "прозрачного" цвета и автоматическая коррекция яркости.

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

Пока что формат PNG используется для хранения графики, разрабатываемой в пакете Macromedia Fireworks, и на некоторых "продвинутых" сайтах. Как уже говорилось выше, его поддерживают практически все графические пакеты и Web-обозреватели.

Формат JPEG

Растровый формат JPEG (Joint Photographic Experts Group, Объединенная группа экспертов по фотографии) разработан одноименной группой программистов специально для распространения высококачественной графики в компьютерных сетях. Именно для этого он и используется в настоящее время.

Графика сохраняется в файлах с расширениями jpeg, jpe или jpg. Поддерживается только цветность TrueColor (24-битный цвет). Для сжатия графики используется исключительно мощный алгоритм под названием JPEG, фактически включающий в себя несколько алгоритмов сжатия, используемых в разных случаях. Этот алгоритм реализует сжатие с потерями, при котором из массива пикселов перед сжатием убирается некоторая часть информации, отчего его размер становится еще меньше. Во всех других форматах графики, использующих сжатие, применяются алгоритмы сжатия без потерь.

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

Формат JPEG, в отличие от GIF и PNG, не поддерживает ни анимацию, ни прозрачность. Однако существует разновидность формата JPEG, называемая прогрессивным JPEG (progressive JPEG, или p-JPEG), поддерживающая чередование строк.

Область применения формата JPEG достаточно узка — распространение высококачественной полутоновой графики в Интернете. Сканированные полутоновые изображения при использовании умеренного сжатия получаются очень даже неплохими. Формат JPEG поддерживается практически всеми современными графическими программами и Web-обозревателями.

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

 

Анимация и видео

 

Любой кино- или видеофильм можно представить как последовательный набор статичных изображений (кадров), которые очень быстро сменяют друг друга. Так как человеческий глаз не может уследить за сменой одного кадра другим, субъективно этот непрерывный "поток" изображений выглядит как одна движущаяся картинка. Для достижения такого эффекта скорость смены или, как говорят профессионалы, частота кадров должна быть достаточно велика. В табл. 1.2 приведены стандартные значения частоты кадров, применяемые в кино и на телевидении.

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

 

Два вида компьютерной анимации

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

Покадровая анимация

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

Абсолютно все фильмы, созданные к данному моменту времени трудолюбивым человечеством, представляют собой покадровую анимацию. Еще бы — ведь сам принцип действия киноаппарата основан на фиксации на светочувствительной пленке множества неподвижных изображений, каждое — через определенный промежуток времени. Двадцать четыре (стандартная частота кадров "большого" кино) раза в секунду киноаппарат приказывает: "Остановись, мгновенье". Из многих тысяч таких вот "остановившихся мгновений" и состоит любая кинолента.

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

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

Чем же полюбилась человечеству покадровая анимация? Вместо ответа рассмотрим все ее преимущества.

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

□ Широкие возможности для творчества. Ну, тут уж и говорить не о чем!..

К несчастью, на этом преимущества покадровой анимации кончаются. И начинаются недостатки.

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

□ Большие проблемы, возникающие при сохранении покадровой анимации в цифровом виде.

Вот здесь давайте остановимся и поговорим о переводе фильмов в цифровой вид (оцифровке) и их хранении.

Каждый из множества кадров, составляющих фильм, занимает при хранении определенное пространство на диске. Предположим, что это пространство составляет 100 килобайт — для хранения полноцветного изображения высокого разрешения в формате JPEG этого даже маловато. Теперь предположим, что количество изображений составляет 100 ООО — такой длинный у нас фильм. Умножив 100 на 100 000, получим 10 000 000, т. е. примерно 10 гигабайт (примерно, потому что гигабайт — это не 1 000 000 000, а 1 073 741 824 байта). Выходит, для хранения фильма нам нужен целый жесткий диск или примерно 2,5 диска DVD, а уж сколько для этого понадобится обычных CD, просто страшно подумать!

Что делать? Разумеется, сжать фильм посильнее! И заодно сжать звуковое сопровождение, если оно есть.

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

На заметку

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

Перечислим самые популярные алгоритмы сжатия видео, применяемые в настоящее время.

□ Intel Indeo. Разработан фирмой Intel в начале 90-х, на заре эры мультимедиа. Обеспечивает довольно слабое сжатие, но зато без проблем работает на старых компьютерах. Сейчас используется для сжатия совсем коротких, в несколько секунд, видеороликов, зачастую используемых в качестве элементов интерфейса Windows-программ.

□ MPEG I. Самый первый из этого семейства алгоритмов, разработанный также в начале 90-х группой MPEG (Motion Picture Encoding Group, группа кодировки движущихся изображений) для записей дисков VideoCD. Обеспечивает среднюю степень сжатия и довольно высокое качество изображения. Существует также разновидность этого алгоритма, предназначенная для сжатия звука, — MPEG I level 3 (MP3).

□ MPEG II. Был разработан во второй половине 90-х для записи дисков DVD-Video. Обеспечивает более высокие качество и степень сжатия изображения, чем MPEG I.

□ MPEG IV. Был разработан также во второй половине 90-х специально для распространения фильмов через Интернет. Обеспечивает более высокую степень сжатия, чем MPEG II, а также поддерживает различные дополнительные возможности, например, защиту от несанкционированного копирования и создание интерактивных элементов.

□ DivX. Был разработан в самом конце 90-х группой независимых программистов как бесплатная альтернатива коммерциализированному MPEG IV. Использовался для распространения пиратских копий фильмов, но потом "вступил на честный путь" и в настоящее время сам стремительно коммерциализируется.

Современные алгоритмы сжатия, например, MPEG IV и DivX, позволяют поместить сжатый в неплохом качестве полноразмерный фильм на обычный компакт-диск, т. е. размер сжатого с их помощью видеофайла составляет примерно 700 мегабайт. Фактически именно эти два алгоритма и совершили "компьютерно-киношную" революцию, создав высококачественное цифровое кино "для народа".

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

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

Очень часто и кодер, и декодер объединяют в одну программу, называемую кодеком (кодером-декодером). Кодек часто носит название реализуемого им алгоритма сжатия: так, например, существуют кодеки MPEG II и DivX.

Но здесь возникает другая проблема. Сжатые с помощью алгоритмов MPEG IV и DivX фильмы могут "осилить" только достаточно мощные компьютеры. Если вы попробуете просмотреть фильм DivX на компьютере выпуска пятилетней давности, то увидите не нормальный фильм, а некое слайд-шоу. Это происходит потому, что маломощный процессор, не успевая распаковывать данные и выдавать их на экран, вынужден пропускать целые кадры. К счастью, никому в голову не приходит запускать цифровое кино на старых компьютерах.

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

Трансформационная анимация

Давайте еще раз посмотрим на рис. 1.6 и предположим, что каждый кадр такой анимации хранится в векторном виде. (Анимация, изображенная на рис. 1.6, так и просится в векторный вид. Сами посмотрите — ведь это простейшая графика, одни только линии.) Далее, предположим, что мы можем описывать с помощью формул не только форму кривых линий и прочих графических примитивов, но и их поведение. Следовательно, мы можем изменить форму "рта", просто вызвав соответствующую формулу и подставив в нее нужные параметры. Что у нас получится?

А получится у нас трансформационная анимация. От покадровой она отличается тем, что не описывает каждый кадр последовательности отдельно, а сразу задает поведение того или иного примитива (рис. 1.7).

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

Внимание!

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

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

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

Перечислим все достоинства и недостатки трансформационной анимации. Начнем, конечно же, с достоинств.

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

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

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

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

Давайте еще раз посмотрим на рис. 1.6 и 1.7 и еще раз подумаем. Что мы можем делать с помощью покадровой и трансформационной анимации? С помощью покадровой — все. А с помощью трансформационной? Не так уж и много — только самые простейшие движения. Все богатство возможностей, предлагаемых покадровой анимацией, нам в этом случае недоступно.

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

Применение разных видов анимации

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

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

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

 

Форматы видео

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

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

Формат QuickTime

QuickTime — один из самых первых, если не самый первый, формат видеофайлов, получивший широкое распространение. Разработан фирмой Apple в конце 80-х годов; изначально предназначался для использования на компьютерах Macintosh, впоследствии был перенесен в операционную систему Microsoft Windows. Позднее подвергался неоднократным усовершенствованиям. На момент написания книги последней версией является 7.0.4, но на момент ее выхода, скорее всего, появится новая версия.

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

За прошедшие десять лет формат QuickTime приобрел довольно большую популярность, в основном, для распространения коротких музыкальных, рекламных или обзорных видеоклипов. Абсолютный лидер на платформе Macintosh. В Web-дизайне применяется крайне редко.

Формат AVI

Формат данных АVI (Audio and Video Interlaced, чередующиеся аудио и видео) был разработан фирмой Microsoft в начале 90-х годов для использования в пакете Microsoft Video for Windows — мультимедийном расширении операционной системы Windows (позже это расширение стало составной частью данной системы).

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

AVI — абсолютный лидер на платформе Windows. Широко используется для распространения самых разных фильмов: художественных, рекламных, учебных, специального назначения. Часто используется для сохранения небольших анимационных роликов, применяемых в программах (в частности, "летающие листочки" в окне копирования Windows хранятся именно в формате AVI). Иногда формат AVI также используется в Web-дизайне.

В настоящее время фирма Microsoft признала формат AVI устаревшим в силу некоторых ограничений (в частности, на размер: AVI-файл не может быть больше 4-х гигабайт). На смену ему подготовлен формат WMV, описанный ниже.

Формат MPEG

Формат MPEG был разработан в начале 90-х годов одноименной группой программистов для сохранения фильмов на компакт-дисках CD и DVD (т. е. создания VideoCD и DVD-Video).

Файл формата MPEG может хранить и видео-, и аудиоинформацию и имеет расширения dat, vob, mpg, mpe, mpeg, mpl, mp2 или mp4. Для сжатия данных чаще всего используются алгоритмы MPEG I, MPEG II или MPEG IV, иногда — DivX.

Формат MPEG используется только для распространения фильмов различной длительности и назначения на компакт-дисках CD и DVD. В Web-дизайне он практически не применяется.

Формат WMV

Формат WMV (Windows Media — Video) — это дальнейшее развитие формата AVI. Разработан фирмой Microsoft в самом конце 90-х годов как часть инициативы Windows Media (создание набора аппаратных и программных средств, направленных на улучшение мультимедийных возможностей современных Windows-совместимых компьютеров). В настоящее время постепенно приобретает популярность.

Файлы WMV могут хранить и видео-, и аудиоинформацию и имеют расширение wmv или asf. Для сжатия информации используется собственный кодек. По сравнению с AVI формат WMV имеет дополнительные возможности, в частности, средства защиты от несанкционированного копирования. Существует также особая разновидность формата, предназначенная для хранения звука; файлы такого формата имеют расширение wma (Windows Media — Audio).

Используется для распространения фильмов различной длительности и назначения. В Web-дизайне практически не применяется.

Формат RealMedia

Формат RealMedia был разработан фирмой RealNetwork в середине 90-х специально для распространения видео через Интернет. Вероятно, это первый видеоформат, ориентированный на использование в Сети. Подвергался неоднократным усовершенствованиям. В настоящее время последней версией является 10.0.

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

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

Внимание!

Формат RealMedia не поддерживается Flash.

Формат "анимированный GIF"

Также для хранения анимации может быть использован анимированный GIF-файл. Как мы помним, формат GIF89A позволяет записывать в один файл несколько изображений, которые станут кадрами фильма.

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

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

 

Краткое введение во Flash

 

А теперь настало время разобраться с Flash, выяснить, что это такое и чем он может нам помочь.

Flash — это пакет создания статичной графики и анимации, разработанный фирмой Macromedia. Графика, созданная в нем, распространяется в формате Shockwave/Flash, о котором мы потом поговорим отдельно.

То, что дает нам Flash, можно выразить тремя словами: универсальность, компактность, безопасность. Рассмотрим подробно, что же скрывается за этими словами. И начнем с перечисления недостатков старого доброго языка HTML, на котором пишутся Web-страницы.

 

Недостатки языка HTML

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

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

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

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

Вот только эта связка — HTML + JavaScript — работает из рук вон плохо. Дело в том, что различные программы Web-обозревателей поддерживают Web-сценарии (как и сам HTML) по-разному. В результате код, прекрасно работающий в Internet Explorer, может не функционировать в Navigator или Opera. Эта пресловутая несовместимость Web-обозревателей отравила жизнь многим Web-дизайнерам. И выхода — увы! — не предвидится…

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

Что делать? Как решить все эти проблемы?

И вот тут под гром фанфар на сцене появляется великий и ужасный Macromedia Flash 8. Настал его час!

 

Достоинства Flash

Давайте перечислим все достоинства Flash, Короля Графики, Спасителя Всея Интернета и проч., и проч., и проч., и подробно их опишем. Ну и, конечно, расскажем о его недостатках и о том, как их можно обойти или преодолеть.

Универсальность

Представим себе двух Web-дизайнеров, которые хотят создать Web-страничку с анимированной графикой и различными эффектами, вроде изменяющихся картинок. При этом один из них пользуется классическими технологиями (HTML и JavaScript), а другой — Flash.

Первый Web-дизайнер пишет HTML-код, пользуясь Блокнотом или более мощным Web-редактором, наподобие Macromedia Dreamweaver. После этого он переключается в графический пакет — Adobe Photoshop или Macromedia Fireworks, — рисует картинки и сохраняет их в файлах. Далее он правит HTML-код, помещая в него ссылки на нужные файлы. Результат его работы — файл Web-страницы и набор графических файлов, где хранятся нужные изображения.

Второй Web-дизайнер запускает Flash, создает новый документ, пишет текст, помещает изображения, и получает на выходе один-единственный файл Shockwave/Flash, содержащий данный документ, со всем текстом и графикой. И все это — не выходя из Flash!

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

Второй Web-дизайнер говорит: "Значит, анимация… Будет вам анимация!" После этого он запускает Flash, открывает документ и добавляет в него анимацию. И все!

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

Второму Web-дизайнеру для этого достаточно открыть документ и написать нужные Flash-сценарии на встроенном языке ActionScript. И никаких проблем с совместимостью!

Вот что значит универсальность! Если первый Web-дизайнер был вынужден для решения поставленной задачи пользоваться сразу несколькими пакетами и несколькими интернет-технологиями, зачастую плохо работающими совместно друг с другом, то второму для этого было достаточно одного только Flash. Вдобавок, первому Web-дизайнеру придется заботиться о том, чтобы на компьютерах посетителей его сайта стояло программное обеспечение, необходимое для проигрывания анимации. Для просмотра же изображений Flash нужна только одна программа-проигрыватель, а ей, как говорят, оснащены сейчас 95 % всех компьютеров мира. Но даже если где-нибудь в дремучем лесу найдется компьютер, где этой программы нет, то для того чтобы ее установить, достаточно зайти на нужную страницу сайта фирмы Macromedia и подождать несколько минут.

Компактность

Результат трудов первого Web-дизайнера — довольно большой набор файлов, занимающий немало места на диске и довольно долго загружающийся по сети. Результат трудов второго — один-единственный файл формата Shockwave/ Flash размером зачастую всего в несколько килобайт. Есть разница?

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

Вот что такое компактность в случае Flash!

Безопасность

Когда шел разговор о языке JavaScript, было сказано, что исходный код этих написанных на нем сценариев можно просмотреть с помощью любого Web-обозревателя и любого текстового редактора. В самом деле, JavaScript-сценарий пишется прямо в HTML-коде Web-страницы, страница сохраняется в обычном текстовом файле с расширением htm[l], а просмотреть текстовый файл — вообще не задача для грамотного компьютерщика.

Посмотреть, как устроены файлы Shockwave/Flash, значительно труднее. После того как мы выполним сохранение изображения Flash в этом формате, оно превращается в "вещь в себе", которую можно только рассматривать, но никак не изменять. Это значит, что мы можем реализовать в нем какие-либо ноу-хау без боязни того, что их позаимствуют без спросу.

Так что и с безопасностью у Flash все в порядке. Во всяком случае, лучше, чем у связки HTML + JavaScript.

На заметку

Здесь нужно сказать, что существуют программы для просмотра содержимого файла Shockwave/Flash в удобном для пользователя виде. Однако эти программы мало распространены, зачастую имеют ограниченные возможности, а работа с ними требует определенной квалификации.

 

Формат Shockwave/Flash

Как мы уже выяснили, векторный формат Shockwave/Flash разработан фирмой Macromedia для распространения изображений и фильмов, созданных в пакете Flash. Настало время поговорить о нем.

На заметку

В этом же самом формате сохраняется распространяемая графика и анимация, созданная в пакете Macromedia Shockwave — "старшем брате" Flash. Поэтому формат Shockwave/Flash и носит такое название.

Файл формата Shockwave/Flash хранит в себе и графику, и анимацию, и сценарии ActionScript, а также растровую графику, видео и звук, созданные в других программах и импортированные во Flash, причем хранится все это в оптимизированном и сжатом виде. Такие файлы имеют расширение swf.

Этот формат поддерживается очень многими графическими пакетами и программами для работы с видео. Но, как ни странно, он, хотя существует уже достаточно давно — несколько лет — и успел стать в Сети стандартом де-факто, до сих пор не поддерживается Web-обозревателями непосредственно. Поэтому для просмотра графики Shockwave/Flash требуется дополнительная программа — проигрыватель Flash, которая требует отдельного разговора.

 

Проигрыватель Flash

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

Первая разновидность — это встраиваемый проигрыватель Flash. Он работает совместно с Web-обозревателем и занимается выводом изображений и фильмов Shockwave/Flash на Web-страницы. Встраиваемый проигрыватель управляется самим Web-обозревателем; сам же пользователь, как правило, непосредственно с ним дела не имеет.

Современные Web-обозреватели уже имеют в комплекте своей поставки встраиваемые проигрыватели Flash. Пользователям более старых программ придется загрузить и установить их самостоятельно. Для этого проще всего зайти на особую страницу Web-сайта фирмы Macromedia и подождать несколько минут. Web-обозреватель сам загрузит дистрибутивный комплект проигрывателя и сам же его установит.

Если на каком-то из доступных вам компьютеров установлен пакет Macromedia Flash, вы можете установить себе проигрыватель Flash вручную. Для этого откройте папку Players/Release, находящуюся в папке, где установлен сам пакет Flash. В этой папке находятся файлы Install Flash Player 8 ActiveX, nisi и Install Flash Player 8 Plugin.msi — это и есть нужные дистрибутивы. Первый предназначен для пользователей Web-обозревателя Internet Explorer, второй — для поклонников Navigator, Mozilla, Firefox и Opera (впрочем, для Internet Explorer он тоже подойдет).

Вторая разновидность проигрывателя Flash называется автономным проигрывателем. Это обычная программа, которую можно запустить и открыть в ней файл с изображением Shockwave/Flash, после чего он начнет воспроизводиться. Автономный проигрыватель также поставляется в составе пакета Flash и хранится в той же папке Players/Release. Исполняемый файл этой программы называется SAFlashPlayer.exe.

Третья разновидность проигрывателя Flash не совсем обычна. Это так называемый проектор — исполняемый файл, содержащий не только уже знакомый нам автономный проигрыватель, но и изображение Shockwave/Flash. При запуске такого файла на экране появится окно автономного проигрывателя, в котором сразу же будет открыто включенное в состав проектора изображение.

Проекторы создаются в самом пакете Flash и очень полезны для распространения фильмов Shockwave/Flash — ведь в этом случае их может просмотреть любой пользователь, даже не имеющий на компьютере проигрывателя Flash. Единственный недостаток: при создании проектора размер файла с изображением Shockwave/Flash очень сильно возрастает — на целых 1544 килобайта (это размер исполняемого файла автономного проигрывателя Flash).

 

Формат документов Flash

Формат Shockwave/Flash используется только для распространения готовой графики и анимации Flash. Для хранения же графики, находящейся в данный момент в разработке, используется другой формат — так называемый документ Flash. После окончания работы над изображением необходимо выполнить операцию публикации или экспорта, чтобы сохранить его в формате Shockwave/Flash. (Публикация и экспорт графики Flash будут описаны в главе 21.)

Зачем так сделано? Почему бы не хранить рабочие файлы сразу в формате Shockwave/Flash? Тому есть всего одна, но существенная причина.

Дело в том, что документ Flash включает в себя много информации, нужной только художнику, работающему над изображением. Такой информацией могут быть импортированные растровые изображения, фильмы, звуковые клипы, тексты сценариев ActionScript, различные временные данные, графика, которая не должна отображаться на экране (например, наброски или фрагменты, оставленные про запас), и пр. Потребителю графики Shockwave/Flash все это совершенно не нужно. Более того, эта информация зачастую занимает очень много места, поэтому размер файла документа Flash может достигать нескольких мегабайт. Попробуйте опубликовать его в Интернете!

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

Внимание!

Обязательно экспортируйте изображения Flash в формат Shockwave/Flash перед распространением.

Осталось только сказать, что файл, хранящий документ Flash, имеет расширение fla.

 

Конкуренты Flash

Наш разговор будет неполон без краткого перечисления конкурентов технологии Macromedia Flash, их достоинств и недостатков. А также перспектив — а то вдруг Flash уже безнадежно устарел, а Дронов все пишет о нем книги!

На данный момент главнейшими конкурентами Flash являются уже существующие технологии и стандарты. Это, прежде всего, языки HTML и JavaScript. Простота создания документов с помощью этих языков (и бесплатность — пакет Macromedia Flash дорого стоит!..), ориентированность на тексты, обилие поддерживающего эти языки программного обеспечения обеспечивают HTML и JavaScript большую популярность, которой Flash пока что похвастаться не может. О недостатках этого конкурента мы уже говорили: "открытость" кода документов и программ и различия в поддержке этих языков разными Web — обозревателями.

Для распространения статичной графики в Интернете используются три традиционных формата: GIF, JPEG и PNG. Они, в принципе, справляются со своими задачами, и менять их на что-то другое пока смысла нет. Кроме того, они широко поддерживаются современными графическими программами и Web-обозревателями. Прочие достоинства, равно как и недостатки этих форматов, — суть достоинства и недостатки растровой графики в целом.

В мире компьютерного видео сейчас безраздельно царят форматы AVI, QuickTime и MPEG версий I, II и IV. (И еще формат "анимированный GIF", но его возможностей хватает только на короткие видеоролики, в основном рекламные.) Они также неплохо справляются со своими задачами, широко поддерживаются программным обеспечением, и менять их на что-то другое потребности не возникает.

Итак, что же мы выяснили? Оказывается, для распространения текстов лучше всего подходит язык HTML, для распространения графики — традиционные растровые форматы GIF, JPEG и PNG, а для распространения видео — не менее традиционные AVI, QuickTime и различные версии MPEG. И особых причин менять существующее положение дел у интернет-сообщества нет.

А что Flash? Выходит, это бедный родственник, которого выгнали из-за стола? Ни в коем случае! Вспомним, какую его возможность мы изучили первой. Универсальность! Flash незаменим там, где нужно объединить текст, графику и анимацию в один компактный файл. Он — "игрок" совершенно другой "весовой категории", и противники ему нужны соответствующие. А противников таких на данный момент имеется три: апплеты Java, модули расширения Web-обозревателя и компоненты ActiveX.

Апплет Java (от английского applet — "приложеньице") — это небольшая программа, написанная на особом языке Java, созданном в середине 90-х годов фирмой Sun и внедренная в Web-страницу. Для обработки апплетов Java требуется особая программа — виртуальная машина Java, которую можно найти на сайте фирмы Sun ().

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

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

Компонент ActiveX похож на апплет Java — это также небольшая программа, работающая совместно с Web-обозревателем и расширяющая его возможности. Его достоинства и недостатки те же, что у модуля расширения. К недостаткам также можно добавить привязанность к платформе Windows (что неудивительно, ведь технология ActiveX была разработана фирмой Microsoft).

На заметку

Кстати, встраиваемый проигрыватель Flash реализуется либо в виде модуля расширения Web-обозревателя, либо элемента ActiveX. Так что с этими технологиями мы, так или иначе, столкнемся, когда будем пользоваться встраиваемым проигрывателем Flash.

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

На заметку

Надо, правда, упомянуть о формате создания векторной графики и анимации SVG (Scalable Vector Graphics, масштабируемая векторная графика). Этот формат позиционируется как прямой конкурент Shockwave/Flash и постепенно набирает популярность.

Кроме того, в новой версии Microsoft Windows — Vista — будет подерживаться новый формат создания электронных документов под кодовым названием Metro. В этом формате будет возможно создавать документы, содержащие, кроме всего прочего, и анимацию. К сожалению, Windows Vista появится только в конце 2006 года, так что оценить возможности формата Metro сейчас не представляется возможным.

 

Что делают с помощью Flash

Напоследок давайте перечислим все виды графики, которые обычно создаются с использованием незаменимого Macromedia Flash.

□ Рекламные баннеры и кнопки, как правило, содержащие анимацию.

□ Интерфейсы для различных интернет-сервисов, например, почтовых серверов, интернет-магазинов или справочных баз данных.

□ Учебные, рекламные и художественные фильмы, в том числе и помещаемые на Web-страницы. Классический пример — "Масяня".

□ Небольшие программы, также часто помещаемые на Web-страницы. Чаще всего встречаются онлайновые игры или различные "приколы". (Автору однажды встретилась Flash-программа, сочиняющая название для рок-группы.)

□ Полноценные Web-сайты, в основном, развлекательные и околокультурные. (Автор может привести в качестве примеров "стильный" сайт английской группы "Death in June" и потрясающий по красоте портал, посвященный владивостокскому року. К сожалению, автор потерял ссылки на эти сайты…)

Осталось привести список всего того, что не делается в формате Flash.

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

□ Обычная графика: схемы, фотографии, картины и т. п. Их распространяют в форматах GIF и JPEG. Штриховые рисунки — схемы, гравюры, карты — лучше распространять в формате GIF, а полутоновые — картины и фотографии — в формате JPEG.

□ Любые более-менее сложные программы. Их проще написать на обычном языке программирования (C++, Pascal, Delphi, Visual Basic), откомпилировать и опубликовать в Сети в виде архивного файла или дистрибутива. Программу также можно оформить в виде апплета Java, модуля расширения Web-обозревателя или компонента ActiveX, в крайнем слхчас — как Web-сценарий, написанный на JavaScript.

□ Документы, предназначенные для печати на бумаге. Ну, это было бы совсем глупо!

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

 

Что дальше?

А дальше начнется знакомство с самим пакетом Macromedia Flash 8. Самое первое и самое предварительное знакомство, но пренебрегать им не стоит. Мы изучим интерфейс этого пакета, научимся управлять его многочисленными окнами и панелями и пользоваться интерактивной справкой.

 

Глава 2

Пользовательский интерфейс Flash

 

В этой главе мы изучим основные принципы работы с пакетом Macromedia Flash 8, без знания которых не обойтись. А именно, познакомимся с Flash, что называется, "лицом к лицу", изучим его интерфейс, многочисленные окна и панели, вспомогательные, но отнюдь не второстепенные возможности. И, конечно же, выясним, чем все это богатство поможет нам в работе.

После рассмотрения интерфейса мы узнаем, как рисуются изображения, как создаются, открываются и сохраняются файлы, как вызывается интерактивная справка и пр.

Flash 8 — программа очень мощная, а это значит, что ее интерфейс весьма сложен. (Более того — на взгляд автора, он чересчур усложнен.) Так что у начинающих пользователей Flash первое время рябит в глазах — автор изведал это на своем опыте…

Но у нас не так много времени, чтобы тратить его на пустую болтовню! Вперед, и пусть Flash покорится нам!

 

Рабочая среда Flash

 

Сначала мы разберемся с самой рабочей средой Flash и всеми инструментами, которые она предоставляет в наше распоряжение.

Запустить программу в Windows проще простого! Нажмем хорошо знакомую нам кнопку Start (Пуск), выберем в меню пункт Programs (Программы), далее — пункт Macromedia и в появившемся подменю — пункт Macromedia Hash 8.

 

Главное окно

Сразу после запуска программы Flash 8 на экране появляется ее так называемое главное окно (рис. 2.1). Рассмотрим его подробнее.

Главное окно служит "вместилищем" для превеликого множества других окон, содержащих как открытые документы Flash, так и различные инструменты, предназначенные для работы с ними. Также в главном окне находится строка главного меню, с помощью которого мы сможем получить доступ ко всем инструментам, предлагаемым Flash.

Если во Flash еще не открыт ни один документ, становится видима так называемая стартовая страница, отображаемая прямо на фоне главного окна. С помощью стартовой страницы мы можем быстро, не залезая в меню, открыть нужный документ, создать новый либо перейти на сайт фирмы Macromedia (). После открытия хотя бы одного документа стартовая страница пропадет.

Внимание!

Отображение стартовой страницы отнимает довольно много системных ресурсов, поэтому, если ваш компьютер недостаточно быстр, лучше ее отключить. Для этого найдите в ее левом нижнем углу флажок Don't show again и включите его. При следующем запуске Flash стартовая страница уже не будет выводиться.

Окно документа Flash служит для отображения открытого документа. Во Flash можно открыть сколько угодно таких окон. Поэтому говорят, что Flash — программа с многодокументным интерфейсом. (Существуют также программы с однодокументным интерфейсом, позволяющие открыть одновременно только один документ; это уже знакомый нам Блокнот, Microsoft Paint, Wordpad и др.)

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

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

Сами же панели, которые объединяют в себе группы, содержат различные инструменты, которыми мы будем пользоваться для работы с графикой Flash, и представлены в виде вкладок. Чтобы переключиться на нужную панель в группе (сделать ее активной), достаточно щелкнуть мышью вкладку, на которой написано название этой панели.

Изначально все группы панелей, имеющиеся на экране, "приклеены" к разным краям главного окна. Разработчики из фирмы Macromedia считают, что так будет удобно большинству пользователей Flash, и, похоже, они правы. Однако у нас может быть по этому поводу иное мнение. Поэтому есть возможность отделить какую-либо группу панелей от края главного окна и превратить ее в отдельное окно (рис. 2.2) (так называемая плавающая группа панелей). Для этого каждая из них имеет "ручку" для ее "переноски", находящуюся в левой части заголовка и выглядящую как набор мелких темных точек. Просто тащим нужную группу панелей подальше от края главного окна и оставляем ее там.

Ну и, конечно же, мы всегда можем присоединить группу панелей обратно к краю главного окна, чтобы она не загораживала редактируемый документ. Для этого, опять же, достаточно перетащить ее мышью за "ручку"; при этом толстая черная рамка покажет нам, в каком месте главного окна она будет "приклеена". Кроме того, мы можем таким же образом присоединить одну плавающую группу панелей к другой (рис. 2.3).

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

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

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

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

Группы панелей всегда располагаются над окнами документов, даже если в данный момент неактивны. Это сделано для того, чтобы мы всегда имели к ним доступ, вне зависимости от того, какое окно сейчас активно. Чтобы убрать какую-либо из этих групп, мы можем "вынести" ее за пределы окна документа или вообще закрыть, раскрыв ее дополнительное меню и выбрав пункт Close panel group.

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

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

Мы также можем щелкнуть мышью по довольно приметной кнопке на доке (рис. 2.6), чтобы быстро скрыть его со всеми группами панелей, а потом щелкнуть еще раз и открыть его снова.

Еще один док располагается в нижней части главного окна (см. рис. 2.1). В нем находится группа с единственной панелью Properties, о которой мы еще поговорим. Третий док, в данный момент скрытый, находится в верхней части главного окна; попробуйте переместить туда любую плавающую группу панелей — и вы его увидите.

Некоторые из панелей Flash достойны отдельного упоминания. Они так сильно отличаются от остальных панелей (в частности, имеют постоянные размеры), что даже носят особое название — инструментарии. Таких инструментариев во Flash несколько, но мы пока упомянем три из них:

□ главный инструментарий;

□ инструментарий документа;

□ стандартный инструментарий.

Главный инструментарий Flash (рис. 2.7) расположен вдоль левого края главного окна. Эта небольшая серая панель, вытянутая по вертикали, содержит в себе набор кнопок. Нажимая кнопки, мы можем выбирать те или иные инструменты, предлагаемые Flash для рисования или правки графики.

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

1.  Область основных инструментов (заголовок Tools). Здесь находятся кнопки, предоставляющие доступ ко всем инструментам, что предусмотрены во Flash для рисования и правки уже нарисованного.

2. Область вспомогательных инструментов (заголовок View). Здесь находятся всего две кнопки, которые мы рассмотрим далее в этой главе.

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

4. Область модификаторов (заголовок Options). Здесь находятся кнопки, предоставляющие доступ к модификаторам — дополнительным режимам, предусмотренным в том или ином выбранном в данный момент инструменте.

Не всегда в данный момент времени в инструментарии присутствуют все четыре области. В частности, область модификаторов (Options) в некоторые моменты может быть пуста.

В верхней части главного инструментария находится его "ручка". С ее помощью мы можем перемещать этот инструментарий.

Инструментарий документа (рис. 2.8) позволяет задавать различные режимы отображения открытого в активном окне документа и получать доступ к его составным частям. Он также содержит набор кнопок.

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

Стандартный инструментарий не имеет "ручки". Переместить его можно, захватив мышью за пустое пространство, не занятое кнопками.

 

Управление окнами и панелями Flash

Как мы выяснили, Flash может вывести на экран сразу множество разнообразнейших окон. Как разобраться во всем этом многообразии?

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

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

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

Если нам понадобится держать на виду сразу два или больше окон документов, мы воспользуемся пунктами Cascade, Tile Horizontally и Tile Vertically меню Window. Первый из этих пунктов "выкладывает" все открытые окна документов в виде "стопки" в главном окне так, что мы сможем видеть их заголовки и часть содержимого. Второй и третий пункты "выкладывают" в главном окне "мозаику" из окон документов так, чтобы они не перекрывались. Причем второй пункт выкладывает "мозаику" по горизонтали, а третий — по вертикали.

Иногда нужно держать перед глазами несколько частей очень большого изображения. Для этого случая в меню Window предусмотрен пункт Duplicate Window и эквивалентная ему комбинация клавиш ++. При выборе этого пункта Flash откроет еще одно окно документа, в котором покажет то же изображение, что было открыто в активном окне. Мы можем воспользоваться пунктом Tile меню Window, чтобы держать оба этих окна перед глазами.

Теперь давайте откроем подменю Toolbars меню View. В нем находятся три пункта:

□ пункт Main выводит стандартный инструментарий;

□ пункт Controller выводит инструментарий проигрывателя (о нем будет подробно рассказано в главе II);

□ пункт Edit Ваг выводит инструментарий документа.

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

Пункт-выключатель Tools меню Window служит для вывода на экран или скрытия главного инструментария. Вместо выбора этого пункта можно нажать комбинацию клавиш +.

Еще мы можем скрыть на время все панели, чтобы без помех просмотреть открытую Web-страницу. Для этого достаточно выбрать пункт Hide Panels в меню Window, но проще всего, конечно, нажать клавишу . Чтобы снова вывести скрытые панели на экран, достаточно в меню Windows выбрать пункт Show Panels или, опять же, нажать клавишу .

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

□ закрыть активную панель, выбрав пункт Close <название панели>;

□ закрыть всю группу панелей, выбрав пункт Close panel group;

□ увеличить размеры группы панелей так, чтобы она заняла весь экран компьютера по вертикали, выбрав пункт Maximize panel group;

□ переместить выбранную в данный момент панель в другую группу, выбрав пункт Group <название панели> with и далее в появившемся на экране подменю — пункт, соответствующий названию нужной группы панелей;

□ переместить выбранную панель в новую группу, выбрав пункт Group <название панели > with и далее в появившемся на экране подменю — пункт New panel group;

□ переименовать группу, выбрав пункт Rename panel group. После этого нам остается ввести новое название группы панелей в поле ввода Name диалотового окна Rename Panel Group (рис. 2.11) и нажать кнопку ОК для его сохранения или Cancel для отказа от переименования;

□ получить справку по активной панели, выбрав пункт Help.

Мы также можем сохранить созданное нами расположение групп панелей в виде рабочего окружения Flash. Чтобы создать новое рабочее окружение, выберем пункт Save Current в подменю Workspace Layout меню Window. На экране появится диалоговое окно Save Workspace Layout, похожее на уже знакомое нам окно Rename Panel Group (см. рис. 2.11). Введем в поле ввода Name этого окна имя создаваемого рабочего окружения и нажмем кнопку ОК.

Все созданные нами рабочие окружения присутствуют в виде пунктов в подменю Workspace Layout меню Window. Чтобы выбрать нужное рабочее окружение, нам будет достаточно выбрать в этом подменю нужный пункт. Изначально там присутствует только пункт Default, включающий рабочее окружение Flash по умолчанию.

Для управления рабочими окружениями (переименования и удаления их) служит диалоговое окно Manage Workspace Layouts (рис. 2.12). Это окно появится на экране после выбора пункта Manage подменю Workspace Layout меню Window.

Большую часть этого окна занимает список, в котором представлены все созданные нами рабочие окружения. Обратим внимание на то, что рабочее окружение по умолчанию, вызываемое пунктом Default, там отсутствует; это значит, что мы не сможем ни переименовать его, ни удалить.

Чтобы переименовать рабочее окружение, нужно выбрать его в списке и нажать кнопку Rename. Dreamweaver выведет диалоговое окно Rename Workspace Layout, похожее на окно Save Workspace Layout. Вводим в поле ввода Name этого окна новое имя и нажимаем кнопку ОК.

Для удаления выбранного в списке рабочего окружения достаточно нажать кнопку Delete. После этого на экране появится небольшое окно-предупреждение; нажмем кнопку Да для удаления или Нет для отказа от него.

Для закрытия окна Manage Workspace Layouts следует нажать кнопку ОК. (Хотя по логике следовало бы назвать эту кнопку Close.)

 

Работа с документами в среде Flash

 

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

 

Создание нового документа

Перед тем как начать что-то рисовать, нам нужно создать новый документ. Сейчас мы выясним, как это сделать.

Создание нового пустого документа

Создать новый документ Flash, не содержащий никакой графики (пустой), очень просто. Для этого достаточно выбрать в меню File пункт New или нажать комбинацию клавиш +.

На заметку

Вполне возможно, что сразу же после запуска Flash новый документ будет создан автоматически. Это поведение зависит от настроек, которые мы рассмотрим в главе 23.

На экране появится диалоговое окно New Document (рис. 2.13), в котором будет активизирована вкладка General.

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

Как только мы выберем в списке Туре какой-либо пункт, в текстовой области Description, расположенной правее списка, появится описание типа документа, за который "отвечает" выбранный пункт. Единственный недостаток текстовой области — она англоязычная. Впрочем, как и сам Flash…

Для создания документа выбранного типа нужно нажать кнопку ОК. Чтобы отказаться от создания нового документа, следует нажать кнопку Cancel.

Создание нового документа на основе шаблона

Также пакет Flash позволяет создать новый документ на основе шаблона — "заготовки", созданной опытными дизайнерами по заказу Macromedia. Такой шаблон уже имеет в своем составе некоторые фрагменты изображений, а нам остается только добавить к ним свою графику и текст.

Создать новый документ на основе шаблона так же просто, как и пустой документ. Для этого выберем все тот же пункт New в меню File или нажмем комбинацию клавиш + и в диалоговом окне New Document переключимся на вкладку Templates (рис. 2.14).

Все шаблоны Flash организованы в категории. Всего таких категорий восемь. Им соответствуют следующие пункты списка Category:

□ Advertising — рекламные баннеры различных размеров;

□ Form Applications — Flash-программы различных типов;

□ Global Phones — изображения и фильмы, предназначенные для воспроизведения на мобильных телефонах;

□ Japanese Phones — изображения и фильмы, предназначенные для воспроизведения на мобильных телефонах японских производителей;

□ PDAs — изображения и фильмы, предназначенные для просмотра на карманных компьютерах;

□ Photo Slideshows — фотогалереи, в которой одно изображение плавно сменяется другим (слайд-шоу);

□ Presentations — презентации;

□ Quiz — анкеты, опросные листы и викторины;

□ Slide Presentations — другая разновидность презентаций.

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

Чтобы создать новый документ на основе выбранного шаблона, нажмем кнопку ОК. Чтобы отказаться от создания нового документа, нажмем кнопку Cancel.

 

Параметры документа

К сожалению, Flash 8 не позволит нам задать параметры (в частности, его размеры и цвет фона) документа прямо при его создании, как было в предыдущих версиях Flash. Для этого нам придется выбрать пункт Document в меню Modify или нажать комбинацию клавиш +. После этого на экране появится диалоговое окно Document Properties (рис. 2.15).

Поле ввода Title и область редактирования Description служат для ввода заголовка и описания документа Flash соответственно. Эти данные потом будут помещены в результирующий файл Shockwave/Flash. Зачем они нужны, непонятно. Так или иначе, вводить их не обязательно.

Поля ввода width и height, находящиеся в группе Dimensions, служат для указания размеров изображения — ширины и высоты соответственно. Значения задаются в текущих единицах измерения; по умолчанию это пикселы. Размеры изображения по умолчанию — 550×400, минимальный размер — 1×1, максимальный — 2880×2880 пикселов.

Ниже находится группа переключателей Match, позволяющая быстро задать размеры изображения. Переключатель Printer делает размер изображения равным текущему размеру бумаги, заданному в настройках текущего принтера. Переключатель Contents задает такой размер изображения, чтобы вся нарисованная графика помещалась в нем, оставляя минимум пустого места. А включенный по умолчанию переключатель Default задает размер изображения по умолчанию (см. выше).

Еще ниже находится селектор цвета Background color, позволяющий задать цвет фона изображения. Чтобы сделать это, нужно щелкнуть на селекторе цвета мышью. После этого он откроется, и на экране появится небольшое окно, содержащее набор цветов, доступных для выбора (рис. 2.16). Для выбора нужного цвета достаточно щелкнуть мышью на квадратике, содержащем нужный цвет; окно селектора при этом закроется автоматически.

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

В поле ввода Frame rate задается частота кадров создаваемого фильма. Для фильмов, публикуемых в Интернете, обычно задается частота от 8 до 12 кадров в секунду. Значение по умолчанию — 12 кадров в секунду; рекомендуется его оставить, если только мы не хотим сделать свой фильм компактнее в ущерб качеству. Разумеется, в случае статичных изображений этот параметр роли не играет.

Раскрывающийся список Ruler units позволяет задать текущую единицу измерения. Эта единица будет потом использоваться везде, где нам будет нужно задать какие-либо размеры или расстояния, например, при настройке шага линий координатной сетки (о координатной сетке будет рассказано ниже). Этот список предоставляет для выбора шесть пунктов:

□ Inches — дюймы;

□ Inches (decimal) — десятичные дюймы;

□ Points — пункты;

□ Centimeters — сантиметры;

□ Millimeters — миллиметры;

□ Pixels — пикселы (значение по умолчанию).

Задав параметры фильма, нажмем кнопку ОК, чтобы применить их. Кнопка Cancel позволит отказаться от применения новых параметров фильма. А чтобы заданные нами параметры использовались по умолчанию при создании последующих документов Flash, следует нажать кнопку Make Default.

 

Окно документа Flash и работа с ним

Теперь, после создания нового документа, рассмотрим работу в окне документа — самом главном окне Flash. Ведь, если подумать, все эти инструментарии и панели нужны только для обслуживания окна документа, точнее — самого документа, открытого в этом окне. Можно сказать, что окно документа — сердце Flash.

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

Окно документа

Окно документа Flash показано на рис. 2.17. Рассмотрим его подробнее.

Прежде всего, заметим, что верхнюю половину окна документа занимает некая панель. Это хорошо заметно, если присмотреться к ее верхнему левому углу, — там видна уже знакомая нам "ручка". Так вот, панель эта называется Timeline и служит для работы со слоями (см. главу 5) и создания анимации (см. часть III). Чтобы она нам не мешала на первых порах, мы можем "вытащить" ее за пределы окна документа или вообще скрыть, для чего достаточно отключить пункт-выключатель Timeline меню Window или нажать комбинацию клавиш ++.

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

Создаваемое изображение рисуется на этом самом рабочем листе (см. рис. 2.17). Конечно, какие-то его фрагменты можно нарисовать и на сером поле, но тогда они не попадут в результирующий файл Shockwave/Flash и, соответственно, не будут выведены на экран при воспроизведении. Тем не менее, в файле документа Flash будут сохранены все фрагменты изображения: и попадающие на рабочую область, и выходящие за ее пределы.

Опытные художники часто пользуются этой особенностью, помещая на серую часть рабочей области графику, которая не должна попасть в результирующее изображение Shockwave/Flash. Это могут быть наброски, варианты какого-либо рисунка и пр.

В верхней части окна документа находится уже знакомый нам инструментарий документа. Инструменты, предлагаемые этим инструментарием, мы рассмотрим далее в этой книге.

Основные принципы работы с графикой Flash

Теперь самое время дать некоторые базовые понятия в области создания графики в среде Flash. Они очень помогут нам в дальнейшем. (Подробнее работа со статичной графикой будет описана в части II данной книги.)

Графическое изображение Flash является векторным, а это значит, что оно состоит из примитивов — линий, заливок, фрагментов текста, импортированных растровых изображений и фильмов и пр. Создаются эти примитивы с помощью соответствующих инструментов Flash, кнопки для выбора которых находятся в области Tools главного инструментария. Как только мы нажмем нужную кнопку, она останется нажатой — это значит, что данный инструмент выбран.

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

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

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

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

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

Управление окном документа

Сначала мы выясним, как можно управлять видом изображения в рабочей области.

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

Чтобы скрыть всю графику, которая оказывается за пределами рабочего листа (на сером поле), нужно отключить пункт-выключатель Work Area меню View или нажать комбинацию клавиш ++. Нужно иметь в виду, что вся эта графика так и останется на своих местах, просто она не будет о