Все возможные поводы для гуляний позади, пятый семестр моей зачетной книжки полностью заполнен, за окном -25 градусов — у меня просто нет причин откладывать выполнение своего обещания, данного вам перед Новым годом в «КВ» № 50 . Итак, продолжим беседу о технологии Flash и популярном пакете для создания интерактивных приложений Macromedia Flash Professional 8. Сегодня заострим наше внимание на хитрых приемах рисования.
Должен сразу предупредить, что нудного перечисления инструментов Flash с описанием свойств и методов каждого вы тут не встретите. Эту информацию легко можно найти в самоучителях, электронных справочниках и help’у по Flash. Я же попытался собрать самые интересные технические приемы, которые используются продвинутыми пользователями и которые будут интересны как начинающим user’ам, так и Flash-дизайнерам со стажем. Ну-с, за дело!
Предположим, что вам необходимо создать на монтажном столе Flash 8 прямоугольник со скругленными углами. Данная геометрическая фигура рисуется при помощи инструмента Rectangle Tool (R), для которого с помощью появившейся в нижней части панели инструментов (в разделе «Options») кнопки-модификатора «Set Corner Radius» установлен радиус сопряжения. Этот метод может успешно применяться для быстрого написания несложных кнопок.
При активизации любого инструмента во Flash следует обращать внимание на его кнопки-модификаторы, которые могут в корне изменить принцип действия выбранного средства рисования. Например, карандаш (Pencil Tool) может работать в одном из трех режимов: выпрямление линий (Straighten), сглаживание острых углов (Smooth) и рисунок чернилами (Ink). Каждый из перечисленных режимов задается при помощи кнопки-модификатора и может быть полезен при излишнем дрожании мышки в руке во время рисования. У инструмента Eraser (ластик) также есть несколько режимов работы, которые позволяют настроить его на уничтожение линий (режим «Erase Lines»), областей, заполненных цветом (режим «Erase Fills»), и др. Обычно из названия кнопки-модификатора прямо следует ее назначение.
Блокировка заливки
Если использовать инструмент Paint Basket («Заливка») для раскраски нескольких объектов с параметром, отвечающим за блокировку заливки (кнопка-модификатор «Fill Lock»), то текстура или градиент, используемый для заполнения фигуры, будет повторяться в каждом последующем объекте. Другими словами, блокировка заливки позволяет создать ощущение того, что раскрашиваемые фигуры вырезаны из одного цветного листа бумаги. Этим свойством также обладает и инструмент «кисть» — Brush Tool (B).
Блокировку заливки удобно использовать в тех случаях, когда через некоторые объекты должны быть видны другие. Этим способом легко создается вид из окна на ночное небо в полнолуние.
Грубо говоря, в каждой створке окна (и в форточке тоже) наблюдатель должен видеть части одной и той же картины — ночное небо и лунный диск, свечение которого ослабевает с расстоянием. Этот эффект и обеспечивает блокировка заливки. Начнем по порядку. Само окно я рисовал при помощи полых прямоугольников (инструмент Rectangle Tool) и карандашных линий (Pencil Tool) с переменной толщиной и градиентной заливкой (необходимые цвета были подобраны на панели Window -> Color Mixer). Все элементы окна расположены на одном слое. Затем я выделил правую часть окна и заполнил ее (инструмент Paint Basket) радиальным градиентом «черный-синий-черный», включив режим блокировки заливки (кнопка-модификатор «Fill Lock»). Воспользовавшись средством Gradient Transform Tool («Настройка градиента»), подобрал оптимальный способ наложения градиента. Форточка и вторая половина окна были закрашены все тем же содержимым Paint Basket. И последний штрих — луна. Для этого берем Oval Tool («Эллипс»), убираем контур, зажимаем shift и рисуем правильный круг в самой яркой точке неба. Звезды добавьте по вкусу. )
То же самое можно было сделать и при помощи маскирующего слоя, на котором расположены прямоугольники, обеспечивающие видимость неба в створках окна. Но в этом случае, согласитесь, больше возни. А так мы обошлись только одним слоем.
Заливка растровым изображением
Вернемся к результатам предыдущего урока и нарисуем зимние узоры на стекле.
Для этого подберем текстуру, выбрав в окне «Color Mixer» в списке «Type» пункт «Bitmap». Зальем все окна и инструментом Gradient Transform Tool откорректируем положение, размер и наклон текстуры. Видно, крепчает мороз. )
Пусть некто пытался посмотреть в окно и расчистил некоторую область от инея, как мы с вами часто поступаем зимою в транспорте. Возьмем кисть (Brush Tool), загрузим для нее растровое изображение (вид из окна) и нанесем несколько мазков, включив режим «Fill Lock». Вот так «волшебная палочка»! В тех местах, где поработала кисть, открылся зимний пейзаж. Однако увлекаться растровыми текстурами все же не стоит — размер выходного файла при этом растет как на дрожжах. )
Тень у движущегося объекта
Рассмотренные ранее способы (фильтр и эффект временной шкалы Drop Shadow) заставляют предмет отбрасывать тень только в вертикальной плоскости. Т. е. если мы возьмем наш клип или графическое изображение и поднесем его к стене, освещаемой произвольно расположенным источником света, то тень будет располагаться на вертикальной поверхности (стене) за предметом. Однако довольно часто необходимо расположить тень в любой другой плоскости (на полу, наклонной поверхности и т. д.). И здесь стандартные средства уже бессильны.
Давайте рассуждать логически. С объектом любого типа (Graphic, Button и MovieClip) можно выполнять следующие операции: изменение размера, поворот на угол, наклон и т. д. (меню Modify -> Transform). Это же векторная графика! Допустим, имеется ролик (возьмем стандартный с обезьяной, раскачивающейся на ветке, из папки «Samples And Tutorials»). В библиотеке данного клипа находится символ клипа, а на монтажном столе — его представление (образ). Кто нам мешает перетянуть на рабочую область еще одно представление этого клипа, залить черным цветом и разместить в нужной плоскости при помощи процедуры «Rotate And Skew» меню Modify -> Transform? Никто! И при этом тень будет полностью соответствовать своему объекту — вращающимся обезьяне и ветке, в нашем случае. Так и поступим.
Чтобы весь клип залить черным цветом, можно пойти двумя путями: перекрасить каждую деталь ролика, на что, конечно же, уйдет уйма времени, или на панели свойств клипа (Window -> Properties -> Properties или «Ctrl+F3») в списке Color выбрать Tint («Окрашивать») с 100% черным цветом. Последнее явно предпочтительнее. ) В результате весь клип окрасится в черный цвет. Однако тень не имеет четких очертаний, поэтому полученный ролик необходимо размыть. Для этого выберем фильтр Blur и выставим размытие по горизонтали BlurX=50, по вертикали BlurY=4, а качество установим низкое (Quality=Low), чтобы при проигрывании всего клипа нагрузка на аппаратную часть ПК была меньше. Теперь тень необходимо расположить в требуемой плоскости (плоскости земли). Сложная анимация, в которой движущиеся предметы отбрасывают тень по законам физики, создается описанным выше способом.
Взаимодействие объектов
Отличительной чертой Flash как векторного редактора является взаимодействие графических объектов, находящихся в одном слое кадра. Характер их взаимодействия зависит от типа и взаимного расположения. Например, одинаково окрашенные фигуры при наложении слипаются, а обычная линия может разрезать предмет на части. Последнее часто используется для разбиения области заливки, что, в свою очередь, позволяет добиться впечатляющих результатов. Чтобы исключить взаимодействие объектов, их нужно располагать на разных слоях.
Оформление надписей
В некоторых случаях текстовые блоки полезно превратить в графические объекты, чтобы воспользоваться методами оформления, неприменимыми к обычному тексту. Однако преобразование надлежит выполнять только тогда, когда строки полностью готовы для последующей обработки: слова написаны без ошибок, выбран необходимый шрифт и т. д. Потом вернуться обратно к текстовому типу данных и исправить эти огрехи стандартными средствами инструмента Text не удастся.
Итак, будем считать, что у нас в рабочей области имеется текстовая надпись, из которой необходимо смастерить логотип или шапку для web-сайта. А Flash, как любой полноценный редактор векторной графики, легко позволит это сделать. Разобьем командой Modify -> Break Apart фразу на буквы (для этих целей также можно использовать сочетание «Ctrl+B»). В результате исходный текстовый блок раскололся на несколько частей, число которых равно количеству символов в исходном текстовом фрагменте. Чтобы преобразовать каждый символ в графику, проделаем эту процедуру еще раз. Теперь буквы представлены областями заливки, и с ними можно проделывать те же действия, что и с графическими объектами. Например, обводить по контуру. Для этого нужно активировать инструмент Ink Bottle Tool («Чернильница»), подобрать толщину и цвет линии, а затем кликнуть им на каждой букве. Контурный текст (полые буквы) создается путем удаления областей заливки. Кроме того, каждую букву или слово целиком можно подвергнуть деформации и т. д. Все символы собираются в один графический блок при помощи команды Modify -> Convert To Symbol или клавиши «F8».
Оптимизация графики
Во Flash существует несколько способов уменьшения размера выходного файла (применительно к форматам FLA, SWF и MOV). Во-первых, при публикации ролика можно выбрать степень сжатия растровых изображений, а также включить дополнительную компрессию документа (меню File -> Publish Settings). Этот вариант, естественно, не подходит для FLA — внутреннего типа файлов Flash. Во-вторых, пользователь может удалить ненужные фигуры и лишние линии со сцены, а также свести число используемых символов к минимуму, заранее продумав структуру каждого объекта и удалив лишние символы из библиотеки. В-третьих, можно воспользоваться встроенным оптимизатором линий, который позволит обойтись минимальным числом линий, уменьшив тем самым объем необходимых для запоминания данных. Для этого выделяем весь документ («Ctrl+A») и отправляемся в меню Modify -> Shape -> Optimize. В появившемся диалоговом окне можно установить требуемые параметры оптимизации. Я запустил мастера для картинки с видом на луну. В исходном файле содержалась информация о 91 кривой, а после оптимизации число кривых линий уменьшилось до 43. Т. е. размер выходного SWF-файла уменьшился вдвое. Эти действия, конечно же, никоим образом не повлияли на качество картинки, потому что в данном случае оптимизируется формульное описание изображения. Если в векторной графике заменить составные линии сплошной, а кривые немного выпрямить, потребуется меньше информации для описания всего рисунка.
Вместо заключения
На сегодня все. Когда я трудился над данным опусом, я исходил из того, что читатель уже знаком с предыдущими статьями о Flash, опубликованными в «КВ» №№48 -49 /2005. Поэтому сегодня я не приводил никаких ссылок на прошлый материал. Однако если вам что-то было непонятно, то, возможно, ключик спрятан в прошлых номерах.
Все вопросы автору можно задавать на форуме «КВ». Может быть, я даже смогу на них ответить. )