Глава 5. Рисование

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

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

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

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

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

Как видите, селекторов цветов в области Colors два. Верхний из них устанавливает цвет линии об этом говорит значок карандаша слева от селектора. Нижний задает цвет заливки, что подтверждает значок опрокинутого ведра.

"Линия"

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

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

Вы можете проводить таким образом линии любой длины и под любым углом. Если же вам нужно провести линию под углом, кратным 45°, то во время проведения линии удерживайте нажатой клавишу <Shift>. В этом случае проводимая линия будет автоматически "подгоняться" под подходящий угол.

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

Вы можете изменять цвет линии с помощью уже знакомого вам селектора цвета линии. Селектор цвета заливки никакого влияния на рисуемые прямые линии не оказывает, так как у линий нет заливки.

"Прямоугольник" и "эллипс"

Оба этих инструмента очень похожи. Разница проявляется лишь в результате их применения. Поэтому мы и описываем их здесь вместе.

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

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

Вы можете рисовать, таким образом, прямоугольники и эллипсы любой формы. Если же вам нужно нарисовать правильный квадрат или правильную окружность, то во время рисования удерживайте нажатой клавишу <Shift>.

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

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

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

"Карандаш"

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

Чтобы выбрать инструмент "карандаш", щелкните в инструментарии соответствующую кнопку или нажмите клавишу Y. Курсор мыши при этом примет вид карандаша.

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

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

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

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

"Перо"

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

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

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

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

Существует возможность проводить прямые линии под углом, кратным 45°.

Для этого вам нужно при втором щелчке удерживать нажатой клавишу Shift.

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

Flash автоматически создаст замкнутую область и поместит в нее заливку, как показано на рис. 5.13.

"Кисть"

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

Чтобы выбрать инструмент "кисть", щелкните в инструментарии соответствующую кнопку или нажмите клавишу В. Курсор мыши при этом может принимать разные формы; в зависимости от настроек, заданных с помощью модификаторов.

"Ведро с краской"

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

Инструмент "ведро с краской" ведет себя аналогично реальному ведру с краской: если "опрокинуть" его над замкнутым контуром, краска "разольется" и заполнит ее. Если же контур имеет "прореху", например, вы забыли его замкнуть, заливка создана не будет. Как видите, Flash не допускает, чтобы "краска" "вытекла" наружу.

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

Правка графики

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

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

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

Выделение графики

Для выделения (или, как еще говорят, выбора) фрагментов графики для редактирования служит инструмент "стрелка выделения" (или просто "стрелка"). Щелкните кнопку в инструментарии или нажмите клавишу <V> на клавиатуре. Курсор мыши примет вид небольшой черной стрелки.

Фрагментация и слияние графики

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

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

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

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

Это произошло потому, что линия, рассекшая эллипс на четыре части (две половинки контура и две половинки заливки), и сама оказалась разделенной на три отрезка. На рис. 5.35 это проиллюстрировано наглядно.

Как видите, фрагментация налицо.

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

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

Правка графики

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

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

Перемещение и удаление графики

Перемещение и удаление графики - самые простые и наглядные операции. Мы рассмотрим их вместе.

Прежде всего, вы можете перемещать выделенные фрагменты. Для этого сначала выделите их. Далее установите курсор мыши на какую-либо часть выделенного фрагмента, нажмите левую кнопку мыши и, не отпуская ее, перетащите выделенный фрагмент на новое место, после чего отпустите кнопку. Если вам нужно переместить графику в направлении под углом, кратным 45°, удерживайте во время перетаскивания клавишу Shift.

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

На новое место можно переместить не сам выделенный фрагмент, а его копию. Для этого просто перетащите его, удерживая нажатой клавишу Alt. Вы также можете выбрать пункт Duplicate в меню Edit или нажать комбинацию клавиш Ctrl+D, чтобы создать новую копию выделенного фрагмента, а потом перетащить ее на новое место обычным способом.

Удалить ненужную графику совсем просто. Для этого выберите ее и либо нажмите клавишу Del или Backspace, либо выберите пункт Clear в меню Edit.

"Притягивание" графики

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

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

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

Если инструментарий у вас скрыт, вы можете воспользоваться меню. Пункт-выключатель Snap to Objects меню View и одноименный пункт контекстного меню листа действуют так же. Но быстрее всего, вероятно, нажать комбинацию клавиш Ctrl+Shift+/.

Отключить "притягивание" к линиям координатной сетки и направляющим также очень просто. В первом случае отключите пункт-выключатель Snap to Grid подменю Grid меню View или нажмите комбинацию клавиш <Ctrl>+<Shift>+<'>. Во втором случае, по аналогии, отключите пункт-выключатель Snap to Guides подменю Guides меню View или нажмите комбинацию клавиш Ctrl+Shift+;. (Подменю Guides и Grid также присутствуют в контекстном меню листа.) Чтобы временно отключить "притягивание" к линиям пикселной сетки, вы можете нажать клавишу С; когда вы ее отпустите, "притягивание" включится снова.

Работа с буфером обмена

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

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

Вы можете "вырезать" выделенный графический фрагмент с листа и поместить его в буфер обмена. При этом сам выделенный фрагмент с листа пропадает. Чтобы "вырезать" фрагмент, выделите его и выберите пункт Cut меню Edit или контекстного меню или нажмите комбинацию клавиш <Ctrl>+<X>.

Вы также можете скопировать в буфер обмена выделенный графический фрагмент, оставив его на листе. Для этого выберите пункт Сору меню Edit или контекстного меню или нажмите комбинацию клавиш <Ctrl>+<C>.

Чтобы вставить содержимое буфера обмена на лист, выберите пункт Paste меню Edit или контекстного меню или нажмите комбинацию клавиш <Ctrl>+<V>. Содержимое буфера обмена будет помещено в центр листа.

Если вы хотите поместить содержимое буфера обмена в ту же позицию, клг находится изначальный фрагмент, выберите пункт Paste in Place меню Edit или контекстного меню или нажмите комбинацию клавиш <Ctrl>+<Shift>+<V>. Эта операция характерна только для Flash, в других программах она может и не поддерживаться.