2. Работа с графическими объектами

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

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

Такой подход позволяет точно отображать изображения фотографического характера, если точки, из которых состоит изображение, имеют достаточно малые размеры. Например, если в компьютер с помощью сканера вводят реальную "бумажную" фотографию, то качество полученного изображе­ния напрямую зависит от того, на сколько точек оно разбивается. Этот пара­метр называют "разрешением" и измеряют количеством точек, приходя­щихся на один дюйм (dpi, от англ. dots per inch).

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

Рис. 2.1. При увеличении размеров растровое изображение искажается

По этой и другим причинам часто бывает целесообразнее пользоваться так называемым векторным представлением изображений. При этом вместо последовательного перечисления цветов каждой точки в файле содержится информация о том, какие объекты расположены на рисунке. Грубо говоря, растровому представлению круга, изображенного в левой части рис. 2.1, соответствует описание типа: "Первая строка: белая точка, белая точка... Вторая строка: белая точка, белая точка..." и т.д. При этом аналогичному векторному представлению соответствует описание: "Белый фон, черный круг с центром в такой-то точке и таким-то радиусом". Как видите, это гораздо компактнее.

Элементы векторного изображения

Кончено, чем проще изображение, тем компактнее может быть его вектор­ное представление. В данном случае наше описание было столь компакт­ным, поскольку все изображение состояло из одного графического прими­тива. Обычно приходится иметь дело с гораздо более сложными изображе­ниями, но и их зачастую не так трудно представить в виде набора графи­ческих примитивов. Это могут быть линии, дуги окружностей, кривые Безье (о них еще пойдет речь в разделе 2.2.5), различные фигуры и пр. Все пере­численное образует контуры изображения, составленные из графических примитивов (рис. 2.2). Но такие контуры - это только "скелет" изображе­ния. Чтобы изображение стало полноценным, в векторной графике внутри каждого контура помещают заливку, то есть заполняют пространство внутри контура каким-либо цветом.

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

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

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

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

Итак, начнем знакомиться с программой Flash. Для начала окинем взгля­дом ее основное окно (рис. 2.3). Здесь можно увидеть окно работы над (будущим) роликом, а также панель инструментов и несколько вспомогатель­ных панелей, которые в предыдущих версиях программы назывались "инспекторами". Эти вспомогательные панели позволяют выбирать различные свойства объектов (например, цвет, толщину и вид контуров и пр.).

Рис. 2.3. Окно программы Flash

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

Панель инструментов

    

Рис. 2.4. Панель инструментов Flash

Выбор цветов

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

Слева и справа от 216-цветной "безопасной палитры" расположены черные столбцы, а левый крайний столбец предназначен для быстрого выбора стандартных цветов. Он включает шесть "безопасных" градаций серого (включая черный и белый), а также шесть "основных" компьютерных цветов: красный, зеленый, синий, желтый, голубой (cyan) и сиреневый (magenta). Разумеется, эти цвета есть и в 216-цветной "безопасной" палитре, но для удобства они продублированы в левой колонке.

Рис. 2.5. Окно выбора цвета контура

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

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

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

При этом откроется стандартное окно выбора цвета операционной системы, для операционной системы Windows оно изображено на рис. 2.6. Здесь можно выбрать любой из 16 миллионов цветов True Color. Визуальный выбор осуществляется путем перемещения крестообразного маркера по цветовому полю: горизонтальное смещение определяет тон (цветовой оттенок), а вертикальное - насыщенность. Кроме того, справа расположена отдельная линейка изменения яркости. Можно также ввести числовые параметры цвета либо в формате "оттенок - насыщенность - яркость" (так называемая шкала HSB: Hue, Saturation, Brightness), либо в "стандартном" компьютерном формате RGB, указав величину красной, зеленой и синей составляющих.

Например, указав величину красной составляющей 255 (максимум), а зеленой и синей - 0 (это можно кратко записать так: RGB 255, 0, 0), можно получить в результате чистый красный цвет. Значение RGB 0, 255, 0 соответствует чистому зеленому, а RGB 0, 0, 255 - чистому синему цвету.

Яркость каждой из составляющих варьируется от 0 до 255. Например, указав RGB 0, 0, 127, мы получим темно-синий цвет. Смешав в равных пропорциях красный и зеленый цвета (RGB 255, 255, 0), мы получим желтый. Шкала RGB весьма удобна для получения чистых цветов, но если необходим какой либо тонкий оттенок, "угадать" нужные значения RGB весьма непросто. Поэтому многие компьютерные художники и дизайнеры пользуются шка­лой HSB (Hue, Saturation, Brightness - оттенок, насыщенность, яркость).

Рис. 2.6. Стандартное окно выбора цвета операционной системы Windows

Обычно, оттенок имеет смысл углового значения (от 0 до 360 градусов), а цвет и насыщенность изменяются в диапазоне от 0 до 1. Однако в диалоговом окне Windows все эти параметры варьируются от 0 до 240.

Первое значение задает цветовой оттенок, причем значение 0 (или 240 - здесь цветовой круг замыкается) соответствует красному, 80 - зеленому и 160 - синему цвету. Между этими значениями расположены все промежуточные оттенки (нетрудно догадаться, например, что желтому цвету соответствует число 40 - среднее арифметическое между 0 и 80). Второе значение в системе HSB соответствует насыщенности цвета. "Чистые" цвета здесь получаются при значении 240, а если значение насыщенности равно 0, то цвет заведомо будет одной из градаций серого (цветовой оттенок не имеет значения). Что касается третьего значения, яркости, то при ее значении, равном 240 всегда получается белый цвет, а при яркости, равной 0 - всегда черный (остальные составляющие в этих случаях не играют роли). "Чистые" цвета получаются при средней яркости (120). Например, значе­ние HSB 0, 240, 120 дает чистый красный цвет, а HSB 200, 240, 60 - темно-сиреневый (фиолетовый).

Кстати, ввести любое значение цвета в формате RGB можно, не покидая окна, изображенного на рис. 2.5. Для этого следует щелкнуть мышью в поле ручного ввода и задать требуемый цвет с клавиатуры. Правда, в отли­чие от стандартного окна выбора цвета Windows здесь придется вводить RGB-значеиия цвета в шестнадцатеричной системе счисления (например, 00FF00 вместо 0, 255, 0), так же, как это принято в атрибутах тегов HTML (ср. например, такую запись: <BODY BGCOLOR=#00FF00 TEXT=#FF00FF>).

Рис. 2.7. Выбор цвета заливки

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

Рис. 2.8. Линейный градиент

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

Рис. 2.9. Круговой градиент

Градиенты могут быть как линейными, как на рис. 2.8, так и круговыми (рис. 2.9). Мы еще поговорим о том, как создавать и редактировать такие градиентные за­ливки, а сейчас просто обратите внимание на то, что в окне выбора цвета заливки (рис. 2.7) в нижней части есть выбор из нескольких готовых градиентов: трех линейных и четырех круговых. Кроме того, следует иметь в виду, что "безопасная" 216-цветная палитра в окне выбора цвета всего лишь задается по умолчанию. В разделе 2.3 мы рассмотрим, каким образом можно настроить этот набор по своему усмотрению.

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