Создание компьютерной анимации в Adobe Flash CS3 Professional 1. Лекция: Знакомство с Adobe Flash CS3 Professional. Интерфейс. Инструменты рисования, выделения и редактирования Итак, откроем Adobe Flash CS3 Professional и для начала "подергаем его за разные ниточки". Пока перед нами очень простая цель - запомнить, что как называется, где лежит и для чего служит. Рис. 1.1. Интерфейс похож на другие в программах, разработанных Adobe. Сверху, как обычно, находится строка меню, в которой можно найти хорошо нам известные пункты работы с файлами, редактирования, просмотра, помощи. Конечно, не все пункты меню и команды нам будут знакомы. Панель "Инструменты" В левой части экрана традиционно находится панель инструментов. Она предоставляет набор инструментов, которые применяются для создания и редактирования графических объектов.Для удобства работы панель инструментов разделена на четыре части (рис. 1.2): · Инструменты выбора и инструменты рисования; · Cредства управления просмотром изображения: "Рука" - при выборе этого инструмента рабочую область можно перемещать в любом направлении с помощью мыши; "Масштаб" - щелчок на кнопке включает режим быстрого масштабирования изображения в рабочей области; · Инструменты выбора цвета контура и цвета заливки объектов; · Параметры или дополнительные опции - элементы установки дополнительных параметров выбранного инструмента. При необходимости панель инструментов может быть перенесена в любую часть экрана. Рис. 1.2. Панель инструментов Монтажный стол Рабочая область занимает всю центральную часть окна. В центре рабочей области находится монтажный стол. Размер стола и его цвет определяют соответственно размер и цвет "кадра" при просмотре фильма. В рабочей области можно выполнять любые операции, однако в итоговый "кадр" попадут только те объекты или их фрагменты, которые расположены в пределах монтажного стола. На всей остальной части рабочей области можно рисовать, редактировать, располагать объекты. Кроме того, она нам потребуется в анимации для входа объекта в кадр (или выхода из него). 1 Создание компьютерной анимации в Adobe Flash CS3 Professional Временная шкала Над рабочей областью расположена панель временной шкалы. Временная шкала является основным инструментом при создании анимации. Она показывает расположение слоев, последовательность изменения кадров (объектов, находящихся в кадре). Эта панель содержит большое число элементов управления. Кроме того, в зависимости от установленных параметров ее внешний вид может измениться. Мы вернемся к этой панели, когда будем создавать анимацию. Панель свойств Ниже рабочей области (в состоянии "по умолчанию") размещается панель свойств (ее еще называют Инспектором свойств). Если в рабочей области не выбран ни один объект, а выбран инструмент "Стрелка", то панель свойств отображает общие параметры фильма. При выборе объекта или инструмента внешний вид панели соответственно меняется. На рис. 1.3 показана панель свойств для документа (фильма) в целом. Рис. 1.3. Панель инспектора свойств документа В этом случае на панели свойств можно отредактировать следующие элементы: · кнопка "Размер" показывает текущий размер стола (то есть размер кадра фильма). Нажатие на кнопку открывает дополнительное диалоговое окно "Свойства документа", которое позволяет изменить размеры стола, а также скорректировать значения других параметров документа (рис. 1.4); · кнопка "Фон" позволяет выбрать фон фильма (то есть цвета стола); · поле "Частота кадров" позволяет задать частоту смены кадров анимации. Об этом параметре мы поговорим позже. Пока его лучше не менять. Справа от рабочей области находятся дополнительные панели, помогающие в работе. Любую панель можно переместить, свернуть, закрыть, - а потом вновь открыть, найдя ее название в пункте меню Window ("Окно"). Рис. 1.4. Окно свойств документа Кстати, рекомендуется открыть еще одну знакомую и удобную панельку "Основная", найдя ее там же - в меню "Окно". Она дает доступ к основным командам в виде пиктограмм и располагается под строкой меню. Рис. 1.5. Выбор панели в меню "Окно" 2 Создание компьютерной анимации в Adobe Flash CS3 Professional Знакомство с инструментами В векторной графике любой объект состоит из контура и заливки. Как частный случай возможен "отсутствующий" контур или "отсутствующая" заливка. Рассмотрим применение инструментов на практике. Чтобы нарисовать мультфильм, надо нарисовать фоны, объекты, героев, которые будут использоваться в анимации. А чтобы они получились, надо достаточно хорошо освоить инструменты рисования и редактирования объектов. Начнем с одного из самых простых инструментов. Не бойтесь экспериментировать - функция отмены ваших действий имеет большую глубину и позволяет практически всегда вернуться на любое количество шагов назад. Инструмент "Линия" Этот инструмент рисует прямые линии - контуры. В панели инструментов можно заранее выбрать цвет линии. Обратите внимание на опцию рисования в нижней части панели инструментов. Кнопка Рисование объектов не должна быть пока включена (к ней мы еще вернемся, и позже разберемся с ее функциями) (рис. 1.6). Рис. 1.6. Кнопка режима рисования объекта Этот инструмент для нас был бы не очень полезен, если бы не его возможности редактирования. После того как линия нарисована, мы можем отредактировать ее различными способами. Выберем инструмент выделения "Стрелка" и щелкнем по нашей нарисованной линии. Объект подсветился, после чего можно изменить параметры линии-контура в панели свойств: цвет, толщину, тип линии. Можно наш объект перенести на другое место или удалить его клавишей Del. Снимем выделение, щелкнув на пустом месте на монтажном столе. Подведем курсор к "середине" линии. Внешний вид курсора поменялся и говорит нам, что мы можем отредактировать кривизну линии. Нажав кнопку мыши, получаем кривую. Это один из простейших способов получить ту форму линии, которая нам нужна. Подведем курсор к концу нашей линии. Внешний вид курсора опять изменяется, и мы можем отрегулировать расположение конечных точек нашего контура. Добавим еще один объект - линию: нарисуем ее так, чтобы линии пересекались. Подведем курсор к пересечению для редактирования линии. Поэкспериментируем с формой: в точке пересечения линий они "слиплись" - стали единым объектом. Инструмент "Прямоугольник" Этот объект состоит из двух составляющих - контура и заливки. Чтобы получить правильную фигуру (квадрат) при рисовании, надо держать нажатой клавишу Shift на клавиатуре. Кроме изменения параметров контура и заливки можно изменить величину скругления углов прямоугольника. Для изменения этого параметра следует в панели свойств ввести соответствующие значения. Обратите внимание: на панели рядом с пиктограммой этого инструмента есть маленький черный треугольничек в нижнем правом углу. Это означает, что под этой пиктограммой "спрятан" еще один или несколько инструментов. Если нажать кнопку мыши и немного подержать, мы увидим пиктограммы других инструментов, рисующих базовые фигуры (рис. 1.7). 3 Создание компьютерной анимации в Adobe Flash CS3 Professional Рис. 1.7. Раскрывающееся меню инструментов Инструмент "Овал" Созданная фигура также состоит из двух составляющих - контура и заливки, которые могут редактироваться отдельно друг от друга. Чтобы получить круг, при рисовании надо держать нажатой клавишу Shift на клавиатуре. Рис. 1.8. Фигуры, нарисованные с помощью инструмента "Овал" С помощью этого инструмента можно нарисовать овал, круг, дугу, окружность, сектор, кольцо или часть кольца (см. рис. 1.8). Для этого задаются настройки в панели свойств. Нарисуем овал или круг, предварительно выбрав цвет контура и заливки. Обратите внимание на опцию рисования в нижней части панели инструментов. Кнопка "Рисование объектов" выключена! Выберем объект инструментом "Стрелка" щелчком мыши и перенесем его на другую часть монтажного стола. Оказывается, выбрался не весь объект, а только его заливка (или контур, если щелчок пришелся по контуру). Дело в том, что в программе любой объект, состоящий из контура и заливки, рассматривается как две составляющие. Но если мы сделаем двойной щелчок на объекте, он выделится целиком. Очистим наш монтажный стол. Для этого "нарисуем" Черной стрелкой прямоугольник так, чтобы внутрь этого прямоугольника попали все объекты, и нажмем клавишу Del. Инструмент "Многоугольник" Еще один инструмент - "Многоугольник". В панели свойств (Параметры - рис. 1.9) можно задать количество углов (сторон) и "звездность". Поэкспериментируйте с этим инструментом, рисуя правильный шестиугольник, восьмиугольную звезду, другие фигуры. 4 Создание компьютерной анимации в Adobe Flash CS3 Professional Рис. 1.9. Изменение параметров инструмента "Многоугольник" Прежде чем перейти к описанию применения других инструментов рисования, рассмотрим возможности редактирования объектов на примере тех, которые уже нарисованы и расположены на нашем монтажном столе. Самый функциональный и часто используемый инструмент - "Стрелка - Черная стрелка". С некоторыми его функциями мы уже познакомились: чтобы выбрать весь объект, следует выполнить одно из двух действий: · щелкнуть дважды мышью внутри объекта; · установить указатель мыши за пределами объекта, и, нажав кнопку мыши, переместить указатель таким образом, чтобы весь объект оказался внутри области, ограниченной прямоугольником. Выбранный объект отображается покрытым мелкой сеткой, а контур - более толстой линией по сравнению с обычным состоянием. Для выбора контура объекта следует подвести указатель к границе объекта и щелкнуть один раз левой кнопкой мыши. Если контур объекта представляет собой ломаную или многоугольник (состоит из нескольких кусочков), то щелчок на любом участке контура приводит к выбору только этого участка. Чтобы выбрать весь такой контур, следует сделать двойной щелчок на контуре или щелкнуть последовательно на всех отрезках контура, удерживая нажатой клавишу Shift. (Эта клавиша добавляет объекты к выбору. Если еще раз щелкнуть по выбранному объекту, он будет удален из набора выбранных.) Не забываем о возможности редактирования кривизны контура. Часто это единственный способ нарисовать что-либо свое (рука дрожит, мышь скачет, планшета нет). Проведите эксперимент: удалите контур фигуры, оставив заливку; подведите курсор мыши к границе заливки - вы убедитесь, что форма заливки редактируется так же, как и контур. Выбор заливки объекта выполняется аналогично: включив инструмент "Стрелка", следует щелкнуть (один раз!) внутри объекта. Заливка будет выделена, а контур - нет. Чтобы отменить выбор (снять выделение), достаточно щелкнуть мышью в любом свободном месте рабочей области. Рис. 1.10. Дополнительные настройки для инструмента "Стрелка" При выборе инструмента "Стрелка" в поле дополнительных параметров панели инструментов отображаются дополнительные настройки работы инструмента (рис. 1.10): · Привязка к объектам - если "магнит" включен, то перемещаемый объект "связывается" с другим объектом; · Сглаживание - контуры предварительно выбранного объекта можно сгладить, выровнять; · Выпрямление - контуры объекта выпрямляются, уменьшается кривизна линий. Инструмент "Карандаш" Инструмент рисует контуры. Рис. 1.11. Меню режимов работы "Карандаша" Для него имеются три режима работы (рис. 1.11). 5 Создание компьютерной анимации в Adobe Flash CS3 Professional Попробуем нарисовать одним движением руки овал карандашом, используя различные режимы (начиная с последнего!). Результат объясняет все! · Режим "Выпрямление" просчитывает преобразование исходного изображения, нарисованного "вручную", в одну из геометрических фигур, наиболее приближенную к вашему рисунку. Простейшим случаем такого преобразования является выпрямление линии, нарисованной не очень ровно. · Режим "Сглаживание" является менее "жестким" и позволяет избавиться от некоторых шероховатостей в рисунке. · Третий режим - "Краска" - оказывает еще меньшее воздействие на исходную линию. Цвет и толщина линии настраиваются с помощью панели свойств инструмента. Инструмент "Кисть" Инструмент позволяет создавать линии, напоминающие мазки кистью. Для него предусмотрен целый ряд дополнительных специальных эффектов, включая эффект каллиграфического письма. Следует отметить, что кисть рисует фигуры, состоящие из одной заливки. Для инструмента предусмотрено пять режимов работы. Выбор режима выполняется с помощью кнопки-модификатора (рис. 1.12). · Нормальная закраска - "мазок" кисти покрывает все линии и заливки редактируемого изображения, а также любой другой объект или участок стола, оказавшиеся на пути кисти (рис. 1.13б); · Закраска заполнением - обеспечивает закрашивание заливок, не влияя на контуры и пустую область стола (рис. 1.13в); · Закраска позади объекта - "мазок" кисти покрывает расположенную за изображением пустую область стола, оставляя все линии и заливки на редактируемом изображении без изменения (рис. 1.13г); Рис. 1.12. Меню режимов использования инструмента "Кисть" · Закраска выделения - "мазок" кисти влияет только на предварительно выбранную область; · Внутренняя закраска - закрашивается только та заливка, с которой операция была начата; другие заливки, контуры и стол остаются без изменения (рис. 1.13д); если вы начнете закрашивание в пустой области рабочего стола, то эффект будет тот же, что и в режиме "Закраска" позади объекта. · исходное изображение · Нормальная закраска · Закраска заполнением · Закраска · Внутренняя позади объекта закраска Рис. 1.13. Эффект применения различных режимов инструмента "Кисть" (работа с кистью начиналась во всех случаях на бежевой заливке) 6 Создание компьютерной анимации в Adobe Flash CS3 Professional Также пользователь может выбрать размер, форму, цвет кисти. Рис. 1.14. Редактирование контуров объектов, нарисованных "Карандашом" и "Кистью" Для того чтобы лучше увидеть различия между инструментами "Карандаш" и "Кисть", попробуем отредактировать их контуры инструментом "Черная стрелка" (рис. 1.14). Инструмент "Ластик" Обратите внимание: "Ластик" не просто удаляет часть рисунка - при его частичном применении редактируется форма объекта. Для инструмента предусмотрено шесть режимов работы. Выбор режима выполняется с помощью двух кнопок: "Режим стирания" и "Кран" (рис. 1.15). Рис. 1.15. Меню режимов использования инструмента "Ластик" Кнопка "Кран" включает режим, при котором одним щелчком мыши удаляется та часть объекта (контур или заливка), на которой установлен указатель - капелька из водопроводного крана. Включение режима "Кран" отменяет любой из пяти других режимов, и наоборот. С помощью кнопки "Режим стирания" может быть установлен один из следующих режимов: · Нормальная очистка - ластик удаляет все "попавшееся под руку"; · Очистка заполнением - стирание заливок, не затрагивая контуры; · Очистка линий - ластик удаляет контуры, оставляя заливки на изображении без изменения; · Очистка выделения - ластик удаляет только предварительно выбранные заливки; · Внутренняя очистка - стирается только та заливка, с которой операция была начата. Другие заливки и контуры остаются без изменения. Дополнительно можно выбрать форму и размер ластика. Все объекты, которые мы изображали до настоящего момента, были просты по форме. Как же нарисовать достаточно сложный объект? Один из способов - просто добавить или вычесть объекты. Нарисуем объект в виде полумесяца. Для этого: 1. выберем инструмент "Овал"; 2. проверим, что не включена кнопка "Рисование объектов" (рис. 1.6); 3. нарисуем закрашенный круг и нарисуем второй круг с частичным наложением на первый; 4. выделим второй круг инструментом выделения "Стрелка" и удалим его клавишей Del. В программе нарисованные таким образом объекты модифицируются - в данном случае один объект обрезает второй (рис. 1.16). 7 Создание компьютерной анимации в Adobe Flash CS3 Professional Попробуем другой вариант. Нам надо нарисовать "крест". Воспользуемся инструментом "Прямоугольник", изобразив два узких прямоугольника так, чтобы получилось изображение креста. А теперь выделим двойным щелчком (или с клавишей Shift) весь контур и удалим его. Получился единый объект (рис. 1.17). В данном случае объекты объединились в один. Рис. 1.16. Создание объекта вычитанием области Рис. 1.17. Создание объекта наложением области Это интересный способ создания новых достаточно сложных объектов. Придумайте свои примеры таких форм, которые можно создать объединением или вырезанием двух или нескольких объектов. Но! Иногда нам этот прием будет мешать! Не всегда нужны сложные объекты. В этом случае нам и пригодится кнопка "Рисование объектов" (рис. 1.6). Если включить эту кнопку, наши нарисованные объекты станут единым элементом. При включенной кнопке каждый нарисованный объект ограничивается подсветкой в виде синего контура, что говорит нам о его "единости". Чтобы отредактировать такой объект, надо щелкнуть мышкой на нем два раза. Мы попадем в окно редактирования этого объекта (все остальные рисунки будут слабо окрашены) (рис. 1.18). После "стандартного" изменения объекта двойной щелчок на свободном месте стола вернет нас в "кадр". a) б) Рис. 1.18. Редактирование объекта Похожим действием является группирование объектов для соединения нескольких объектов в единую группу для выбора и редактирования. Операция группирования выполняется с помощью команды "Группировать", входящей в меню "Изменить" основного окна. 8 Создание компьютерной анимации в Adobe Flash CS3 Professional Визуально группа объектов выделяется прямоугольной рамкой голубого цвета. Чтобы отредактировать элементы группы, выполняется та же последовательность действий. Допускается вложение одной группы в другую. Например: в группу "человечек" вложены группы "рука", "рука", "нога", "нога", "тело", "голова", а в группу "голова", в свою очередь, - группы "лицо" и "волосы". Чтобы вернуть все исходные элементы группы к "исходному состоянию", надо воспользоваться командой "Разгруппировать" или "Разделить" меню "Изменить". Будьте осторожны: наши объекты вновь начнут накладываться друг на друга или обрезать друг друга! Рассмотрим еще один инструмент для создания сложных по форме объектов. Инструмент "Перо" С помощью данного инструмента можно рисовать прямые, ломаные линии и сегменты кривых. Линия строится по базовым точкам на основе механизма кривых Безье. Этот инструмент - самый сложный по технике применения Мы рассматриваем работу с этим инструментом в общем виде, так как здесь требуется определенный опыт, который вырабатывается постепенно. Чтобы нарисовать прямую линию, необходимо указать первую и последнюю точки отрезка. Точка создается щелчком на столе. Например, чтобы получить ломаную, состоящую из трех отрезков, требуется четыре точки. Нарисованную линию можно либо оставить незамкнутой - дважды щелкнуть на последней точке линии, либо преобразовать в замкнутую фигуру - щелкнуть на начальной точке. Незамкнутая фигура является контуром. Если фигуру замкнуть, к контуру автоматически добавится заливка. Рисование кривых с помощью пера основано на редактировании узлов - базовых точек и касательных или направляющих в этих узлах. Длина и направление касательной определяют размер и величину изгиба сегмента кривой между двумя узлами. Чтобы нарисовать сегмент кривой, необходимо выполнить следующие действия: 1. Создать первую базовую точку - узел, щелкнув мышью на столе. 2. Для создания второго узла переместить указатель на требуемое расстояние и нажать левую кнопку мыши; в результате на экране появится линия, соединяющая базовые точки. 3. Не отпуская кнопку, переместить указатель в сторону, противоположную требуемому направлению изгиба; при перемещении указателя на экране появится направляющая, размер и направление которой определяют глубину и угол изгиба (рис. 1.19). 4. При получении требуемой формы сегмента кривой отпустить кнопку мыши. Направляющая станет невидимой, а узлы (первая и конечная точки сегмента) будут пред- став-лены маленькими окрашенными прямо-угольничками. 5. Чтобы добавить еще один сегмент к созданному ранее, требуется повторить шаги 2, 3, 4 описанной выше процедуры. Рис. 1.19. Рисование кривых с помощью "Пера" При работе с пером следует иметь в виду, что нарисованная линия считается "незавершенной" до тех пор, пока вы не нажмете клавишу Esc или не переключитесь на 9 Создание компьютерной анимации в Adobe Flash CS3 Professional другой инструмент. Иначе каждая новая точка будет считаться принадлежащей данной линии и автоматически соединяться с ней новым сегментом. Для инструмента "Перо", как и для других инструментов рисования, пользователь может установить толщину и цвет линии, а также цвет заливки. Инструмент "Спецвыделение" ("Белая стрелка") Этот инструмент, так же как и предыдущий, сложен в использовании без определенных практических навыков. Инструмент "Спецвыделение" отличается двумя свойствами: во-первых, при выборе объекта с его помощью объект рассматривается как единое целое, без разделения на контур и заливку; во-вторых, его работа основана на редактировании кривых Безье. С помощью этого инструмента объект можно выбрать одним из двух способов: 1. заключить объект в прямоугольную область (как при использовании инструмента "Стрелка"); 2. щелкнуть на контуре объекта. В обоих случаях по периметру объекта появится отображение опорных точек кривых Безье, которые задают форму данного объекта. Редактируя расположение узлов, длину и угол направляющей, можно добиться получения любой самой сложной формы объекта (рис. 1.20). Рис. 1.20. Изменение формы инстр. "Спецвыделение" Инструмент "Свободное преобразование" и панель "Преобразование" Практически все операции по трансформированию (преобразованию) объекта могут быть выполнены с помощью инструмента "Свободное преобразование". С выбранным объектом (или несколькими) можно проделать следующее: 1. изменение положения точки трансформации; 2. масштабирование; 3. поворот и вращение; 4. трансформацию. При включении инструмента "Свободное преобразование" становятся доступны четыре кнопки-модификатора. Каждая из них работает как переключатель, то есть одновременно нельзя включить два режима. Но когда ни одна из кнопок не нажата, обеспечивается наиболее универсальный режим работы инструмента "Свободное преобразование", при котором доступны почти все основные его функции. Трансформирование объекта выполняется с помощью маркеров, расположенных на выделяющей рамке. Чтобы пользователям было удобнее различать предназначение маркеров, с каждым из них связан свой вариант указателя мыши. Возможности инструмента обширны (рис. 1.21). Панель "Преобразование" имеет в целом то же предназначение, что и инструмент "Свободное преобразование", однако перечень реализуемых с ее помощью функций несколько отличается. Панель "Преобразование" не отображается на экране в первоначальном интерфейсе - выберите ее в меню "Окно" или нажмите комбинацию клавиш Ctrl+Т. исходный объект , поворот, наклон, , искажение, изгиб 10