Статичная графика — это неподвижные изображения: фотографии, рисунки, схемы, многие элементы оформления 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 — это пакет создания статичной графики и анимации, разработанный фирмой 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 и всеми инструментами, которые она предоставляет в наше распоряжение.

Запустить программу в 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, не содержащий никакой графики (пустой), очень просто. Для этого достаточно выбрать в меню 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 или нажать комбинацию клавиш ++. Нужно иметь в виду, что вся эта графика так и останется на своих местах, просто она не будет отображаться.

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

Этот список содержит ряд пунктов, с помощью которых задается тот или иной масштаб. Подробно описывать их нет нужды — названия этих пунктов говорят сами за себя (см. рис. 2.18). Пункт Show Frame показывает в окне документа весь рабочий лист, автоматически выбирая нужный масштаб. Пункт Show All показывает в окне документа только нарисованное на рабочем листе изображение. А пункт Fit in Window выполняет то же самое, что и пункт Show Frame, но при этом подбирает такой масштаб, чтобы пользователю не пришлось прокручивать изображение в окне, чтобы рассмотреть его полностью.

Другой способ управления масштабом — использование инструмента Zoom (Лупа):

Чтобы выбрать инструмент "лупа", нужно щелкнуть кнопку, находящуюся в области View главного инструментария, или нажать клавишу <М> или . После этого курсор мыши должен принять вид небольшой лупы.

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

Для смены режимов увеличения и уменьшения мы также можем воспользоваться кнопками модификаторов:

Enlarge (Увеличение):

Reduce (Уменьшение):

Это кнопки-переключатели — включение одной такой кнопки автоматически отключает другую.

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

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

Для увеличения и уменьшения масштаба мы также можем воспользоваться пунктами Zoom In и Zoom Out меню View или комбинациями клавиш +<=> и +<-> соответственно. При этом увеличение и уменьшение масштаба производится ступенчато, по пунктам списка масштабов (см. рис. 2.18).

Еще одна возможность изменения масштаба изображения — подменю Magnification меню View. Оно имеет те же пункты, что и знакомый нам список задания масштаба. Комбинация клавиш + быстро устанавливает масштаб 100 %, +<4> — 400 %, +<8> — 800 %; +<2> действует аналогично пункту Show Frame, a +<3> — аналогично пункту Show All.

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

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

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

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

Перечислим по порядку все пункты подменю Preview Mode меню View и опишем режимы вывода изображения, за которые они "отвечают", в порядке повышения качества графики.

1. Режим вывода контуров. Включается выбором пункта Outlines или комбинацией клавиш +++<0>. Все примитивы выводятся в виде тонких контуров без всякого сглаживания (скрытия "зернистости") и без заливок. В этом режиме графика выводится очень быстро.

2. "Быстрый" режим. Включается выбором пункта Fast или комбинацией клавиш +++. Если выбран этот режим, Flash выводит графику полностью, но не выполняет сглаживания графики. Если вы работаете на маломощном компьютере, выводящем на экран одновременно максимум 256 цветов, используйте этот режим.

3. Режим сглаживания графики. Включается выбором пункта Antialias или комбинацией клавиш +++. Если выбран этот режим, Flash выполняет сглаживание контуров графики, но не символов текста. В этом режиме качество вывода графики очень высоко, но символы текста получаются грубыми, зернистыми. Используйте этот режим, если видеоадаптер вашего компьютера может работать в режимах HiColor и TrueColor, в противном случае переключитесь на "быстрый" режим.

4. Режим сглаживания и графики, и символов текста. Включается выбором пункта Antialias Text или комбинацией клавиш +++ +<Т>. Включен по умолчанию. Качество вывода графики и текста очень высокое. Всегда используйте этот режим, если имеете достаточно мощный компьютер.

5. Режим высококачественной графики. Включается выбором пункта Full.

Перечисленные выше режимы вывода графики задают только качество вывода ее на экран. Сама же нарисованная нами графика при этом никак не меняется, и качество ее не искажается.

Средства позиционирования

Средства позиционирования Flash помогут нам точно разместить графические фрагменты на листе. Давайте их рассмотрим.

Самое простое из этих средств — координатные линейки. Чтобы вывести их на экран, выберем пункт-выключатель Rulers в меню View или нажмем комбинацию клавиш +++. Результат этих действий показан на рис. 2.19.

Координатные линейки отображаются вдоль верхней и левой сторон рабочей области Flash, позволяя точно определить соответственно горизонтальную (X) и вертикальную (Y) координаты. Начало координат находится в верхнем левом углу рабочего листа. По умолчанию линейки проградуированы в пикселах, но мы можем задать другую единицу измерения. Для этого вызовем диалоговое окно Document Properties (см. рис. 2.15), выберем нужный пункт в раскрывающемся списке Ruler unit и нажмем кнопку ОК.

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

Чтобы создать направляющую, нам нужно, прежде всего, вывести на экран координатные линейки. Как это сделать, мы уже знаем. Затем поместим курсор мыши на горизонтальную или вертикальную линейку, в зависимости от того, горизонтальную или вертикальную направляющую мы хотим создать. Далее нажмем левую кнопку мыши и, не отпуская ее, "вытащим" направляющую на рабочую область, после чего отпустим кнопку. Созданные нами направляющие имеют вид тонких линий; две из них — горизонтальная и вертикальная — показаны на рис. 2.20.

Мы можем перемещать направляющие мышью и удалять их. Чтобы удалить направляющую, достаточно перетащить ее обратно на линейку. Мы можем временно сделать направляющие неперемещаемыми, заблокировав их. Для этого нужно включить пункт-выключатель Lock Guides в подменю Guides меню View или нажать комбинацию клавиш ++<;>. Существует также возможность временно скрыть все направляющие, отключив пункт-выключатель Show Guides в подменю Guides меню View или нажав комбинацию клавиш +<;>.

Flash поддерживает такую интересную возможность, как автоматическое "приклеивание" рисуемых или перетаскиваемых мышью примитивов к направляющим. Это случается, если "поднести" рисуемый или перемещаемый примитив слишком близко к направляющей. Конечно, это очень удобно, но иногда мешает. Чтобы временно отменить "приклеивание", мы отключим пункт-выключатель Snap to Guides в подменю Snapping меню View или нажмем комбинацию клавиш ++<;>.

Выбор пункта Edit Guides подменю Guides меню View или комбинация клавиш +++ выводят на экране диалоговое окно Guides (рис. 2.21). С помощью этого диалогового окна мы можем задать некоторые параметры направляющих и выполнить над ними различные действия.

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

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

Флажок Snap to guides включает или выключает "приклеивание" графики к направляющим. Он аналогичен пункту-выключателю Snap to Guides в подменю Snapping меню View.

Флажок Lock guides включает или выключает блокировку направляющих, чтобы их нельзя было ни переместить, ни удалить. Его "обязанности" такие же, как и у пункта-выключателя Lock Guides в подменю Guides меню View.

Раскрывающийся список Snap accuracy позволяет указать, как близко рисуемый примитив должен быть помещен к направляющей, чтобы быть к ней

"приклеенным". В этом списке доступны три пункта: Must be close (должен быть близко), Normal (значение по умолчанию) и Can be distant (может быть достаточно далеко). Скорее всего, придется поэкспериментировать с различными пунктами этого списка, чтобы подобрать подходящий.

Кнопка Clear All позволяет удалить все направляющие разом. Аналогичную задачу, кстати, выполняет пункт Clear Guides подменю Guides меню View.

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

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

Чтобы вывести на экран координатную сетку, включим пункт-выключатель Show Grid в подменю Grid меню View или нажмем комбинацию клавиш +<’>. Сама координатная сетка показана на рис. 2.22: видно, что она имеет вид множества тонких линий, наложенных на рабочую область.

При рисовании или правке графики примитивы "приклеиваются" к линиям координатной сетки так же, как и к направляющим. Чтобы временно убрать "приклеивание", нужно отключить пункт-выключатель Snap to Grid в подменю Snapping меню View или нажать комбинацию клавиш + ++<’>.

Выбор пункта Edit Grid подменю Grid меню View или комбинация клавиш ++ выводят на экран диалоговое окно Grid (рис. 2.23). С помощью этого диалогового окна мы можем задать некоторые параметры координатной сетки.

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

Флажок Show grid включает или выключает вывод на экран координатной сетки. По своей функции он аналогичен пункту-выключателю Show Grid в подменю Grid меню View.

Флажок Snap to grid включает или выключает "приклеивание" графики к линиям координатной сетки. Он аналогичен пункту-выключателю Snap to Grid в подменю Grid меню View.

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

Раскрывающийся список Snap accuracy позволяет указать, как близко рисуемый примитив должен быть помещен к линии координатной сетки, чтобы быть к ней "приклеенным". В этом списке доступны четыре пункта: Must be close (должен быть близко), Normal (значение по умолчанию), Can be distant (может быть достаточно далеко) и Always Snap ("приклеивается" всегда, независимо от расстояния). С этим списком, опять же, придется поэкспериментировать.

Выбрав нужные параметры, нажмем кнопку ОК, чтобы применить их. Если мы передумали, нажмем кнопку Cancel. Если же мы хотим, чтобы заданные нами параметры использовались во всех вновь создаваемых документах, т. е. стали значениями по умолчанию, нажмем кнопку Save Default.