Issuu on Google+

Aine: Flash-tehnoloogiad Õpetaja: Jevgenija Mišina Erialad: Multimeediatehnoloogiad põhi- ja keskkooli baasil

Jevgenija Mišina e-post web

5542977 jevgenija.misina@nvtc.ee http://zenjamisina.pri.ee

1


Лекции Aine: Flash-tehnoloogiad............................................................................................................................. 1 Õpetaja: Jevgenija Mišina............................................................................................................................ 1 Erialad: Multimeediatehnoloogiad põhi- ja keskkooli baasil.........................................................................1 1. Лекция: Знакомство с Adobe Flash CS3 Professional. Интерфейс. Инструменты рисования, выделения и редактирования................................................................................................................... 3 Содержание............................................................................................................................................ 3 2. Практическая работа: Учимся рисовать.............................................................................................23 Содержание.......................................................................................................................................... 23 3. Лекция: Работа с цветом. Типы заливок и их применение...............................................................26 Содержание.......................................................................................................................................... 26 4. Практическая работа: Я — художник!................................................................................................. 35 Содержание.......................................................................................................................................... 35 5. Лекция: Покадровая анимация. Анимация формы. Трассировка растровых изображений...........39 Содержание.......................................................................................................................................... 39 6. Практическая работа: Все изменяется............................................................................................... 53 Содержание.......................................................................................................................................... 53 7. Лекция: Анимация движения. Работа с текстом................................................................................57 Содержание.......................................................................................................................................... 57 8. Практическая работа: Пляшущие человечки.....................................................................................66 Содержание.......................................................................................................................................... 66 9. Практическая работа: Титры. Как представить свою работу............................................................70 Содержание.......................................................................................................................................... 70 10. Лекция: Символы. Сложная анимация.............................................................................................74 Содержание.......................................................................................................................................... 74 11. Практическая работа: Танцы в парке............................................................................................... 81 Содержание.......................................................................................................................................... 81 12. Лекция: Слой-маска. Маскирование слоев......................................................................................83 Содержание.......................................................................................................................................... 83 13. Практическая работа: Земля и Солнце............................................................................................87 Содержание.......................................................................................................................................... 87 14. Лекция: Звук. Сохранение, экспорт, публикация.............................................................................91 Содержание.......................................................................................................................................... 91 15. Практическая работа: Хватит молчать!............................................................................................97 Содержание.......................................................................................................................................... 97 16. Лекция: Основы создания анимационного фильма.........................................................................99 Содержание.......................................................................................................................................... 99 17. Практическая работа: Анимация эффектов...................................................................................103 Содержание........................................................................................................................................ 103 18. Лекция: Творческий проект к модулю "Создание компьютерной анимации в Adobe Flash CS3 Professional"............................................................................................................................................ 105 Содержание........................................................................................................................................ 105

2


1. Лекция: Знакомство с Adobe Flash CS3 Professional. Интерфейс. Инструменты рисования, выделения и редактирования Содержание • •

Цели занятия Содержание занятия o Панель "Инструменты" o Монтажный стол o Временная шкала o Панель свойств o Знакомство с инструментами o Инструмент "Линия" o Инструмент "Прямоугольник" o Инструмент "Овал" o Инструмент "Многоугольник" o Инструмент "Карандаш" o Инструмент "Кисть" o Инструмент "Ластик" o Инструмент "Перо" o Инструмент "Спецвыделение" ("Белая стрелка") o Инструмент "Свободное преобразование" и панель "Преобразование" o Выравнивание объектов Примерные вопросы для контроля

Цели занятия • • •

познакомить учащихся с интерфейсом программы; познакомить учащихся с инструментами рисования и редактирования; научить учащихся рисовать и редактировать простые векторные объекты.

Содержание занятия Задача нашего курса - научиться рисовать в векторном редакторе и создавать мультфильмы (в компьютерной графике они называются анимацией). Это лишь небольшая часть возможностей программы. Итак, откроем Adobe Flash CS3 Professional и для начала "подергаем его за разные ниточки". Пока перед нами очень простая цель - запомнить, что как называется, где лежит и для чего служит.

3


увеличить изображение Рис. 1.1. Интерфейс похож на другие в программах, разработанных Adobe. Сверху, как обычно, находится строка меню, в которой можно найти хорошо нам известные пункты работы с файлами, редактирования, просмотра, помощи. Конечно, не все пункты меню и команды нам будут знакомы. Основные элементы Flash показаны на рис. 1.1. Панель "Инструменты" В левой части экрана традиционно находится панель инструментов. Она предоставляет набор инструментов, которые применяются для создания и редактирования графических объектов. Для удобства работы панель инструментов разделена на четыре части (рис. 1.2): • •

• •

Инструменты выбора и инструменты рисования; Cредства управления просмотром изображения: "Рука" - при выборе этого инструмента рабочую область можно перемещать в любом направлении с помощью мыши; "Масштаб" щелчок на кнопке включает режим быстрого масштабирования изображения в рабочей области; Инструменты выбора цвета контура и цвета заливки объектов; Параметры или дополнительные опции - элементы установки дополнительных параметров выбранного инструмента.

При необходимости панель инструментов может быть перенесена в любую часть экрана.

4


Рис. 1.2. Панель инструментов Монтажный стол Рабочая область занимает всю центральную часть окна. В центре рабочей области находится монтажный стол. Размер стола и его цвет определяют соответственно размер и цвет "кадра" при просмотре фильма. В рабочей области можно выполнять любые операции, однако в итоговый "кадр" попадут только те объекты или их фрагменты, которые расположены в пределах монтажного стола. На всей остальной части рабочей области можно рисовать, редактировать, располагать объекты. Кроме того, она нам потребуется в анимации для входа объекта в кадр (или выхода из него). Временная шкала Над рабочей областью расположена панель временной шкалы. Временная шкала является основным инструментом при создании анимации. Она показывает расположение слоев, последовательность изменения кадров (объектов, находящихся в кадре). Эта панель содержит большое число элементов управления. Кроме того, в зависимости от установленных параметров ее внешний вид может измениться. Мы вернемся к этой панели, когда будем создавать анимацию. Панель свойств Ниже рабочей области (в состоянии "по умолчанию") размещается панель свойств (ее еще называют Инспектором свойств). Если в рабочей области не выбран ни один объект, а выбран инструмент "Стрелка", то панель свойств отображает общие параметры фильма. При выборе объекта или инструмента внешний вид панели соответственно меняется.

5


На рис. 1.3 показана панель свойств для документа (фильма) в целом.

увеличить изображение Рис. 1.3. Панель инспектора свойств документа В этом случае на панели свойств можно отредактировать следующие элементы: •

• •

кнопка "Размер" показывает текущий размер стола (то есть размер кадра фильма). Нажатие на кнопку открывает дополнительное диалоговое окно "Свойства документа", которое позволяет изменить размеры стола, а также скорректировать значения других параметров документа (рис. 1.4); кнопка "Фон" позволяет выбрать фон фильма (то есть цвета стола); поле "Частота кадров" позволяет задать частоту смены кадров анимации. Об этом параметре мы поговорим позже. Пока его лучше не менять.

Справа от рабочей области находятся дополнительные панели, помогающие в работе. Любую панель можно переместить, свернуть, закрыть, - а потом вновь открыть, найдя ее название в пункте меню Window ("Окно").

Рис. 1.4. Окно свойств документа Кстати, рекомендуется открыть еще одну знакомую и удобную панельку "Основная", найдя ее там же - в меню "Окно". Она дает доступ к основным командам в виде пиктограмм и располагается под строкой меню.

6


увеличить изображение Рис. 1.5. Выбор панели в меню "Окно" Знакомство с инструментами В векторной графике любой объект состоит из контура и заливки. Как частный случай возможен "отсутствующий" контур или "отсутствующая" заливка. Рассмотрим применение инструментов на практике. Чтобы нарисовать мультфильм, надо нарисовать фоны, объекты, героев, которые будут использовать��я в анимации. А чтобы они получились, надо достаточно хорошо освоить инструменты рисования и редактирования объектов. Начнем с одного из самых простых инструментов. Не бойтесь экспериментировать - функция отмены ваших действий имеет большую глубину и позволяет практически всегда вернуться на любое количество шагов назад. (Мы рассматриваем только основные функции инструментов, которые используют учащиеся для рисования и редактирования объектов. За более подробными инструкциями следует обратиться к Инструкциям разработчика.) Инструмент "Линия" Этот инструмент рисует прямые линии - контуры. В панели инструментов можно заранее выбрать цвет линии. Обратите внимание на опцию рисования в нижней части панели инструментов. Кнопка Рисование объектов не должна быть пока включена (к ней мы еще вернемся, и позже разберемся с ее функциями) (рис. 1.6).

Рис. 1.6. Кнопка режима рисования объекта Этот инструмент для нас был бы не очень полезен, если бы не его возможности редактирования. После того как линия нарисована, мы можем отредактировать ее различными способами. •

Выберем инструмент выделения "Стрелка" и щелкнем по нашей нарисованной линии. Объект подсветился, после чего можно изменить параметры линии-контура в панели свойств: цвет, толщину, тип линии. Можно наш объект перенести на другое место или удалить его клавишей Del. Снимем выделение, щелкнув на пустом месте на монтажном столе. Подведем курсор к "середине" линии. Внешний вид курсора поменялся и говорит нам, что мы можем отредактировать кривизну линии. Нажав кнопку мыши, получаем кривую. Это один из простейших способов получить ту форму линии, которая нам нужна. 7


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

Добавим еще один объект - линию: нарисуем ее так, чтобы линии пересекались. Подведем курсор к пересечению для редактирования линии. Поэкспериментируем с формой: в точке пересечения линий они "слиплись" - стали единым объектом. Инструмент "Прямоугольник" Этот объект состоит из двух составляющих - контура и заливки. Чтобы получить правильную фигуру (квадрат) при рисовании, надо держать нажатой клавишу Shift на клавиатуре. Кроме изменения параметров контура и заливки можно изменить величину скругления углов прямоугольника. Для изменения этого параметра следует в панели свойств ввести соответствующие значения. Обратите внимание: на панели рядом с пиктограммой этого инструмента есть маленький черный треугольничек в нижнем правом углу. Это означает, что под этой пиктограммой "спрятан" еще один или несколько инструментов. Если нажать кнопку мыши и немного подержать, мы увидим пиктограммы других инструментов, рисующих базовые фигуры (рис. 1.7).

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

8


увеличить изображение Рис. 1.8. Фигуры, нарисованные с помощью инструмента "Овал" С помощью этого инструмента можно нарисовать овал, круг, дугу, окружность, сектор, кольцо или часть кольца (см. рис. 1.8). Для этого задаются настройки в панели свойств. Нарисуем овал или круг, предварительно выбрав цвет контура и заливки. Обратите внимание на опцию рисования в нижней части панели инструментов. Кнопка "Рисование объектов" выключена! Выберем объект инструментом "Стрелка" щелчком мыши и перенесем его на другую часть монтажного стола. Оказывается, выбрался не весь объект, а только его заливка (или контур, если щелчок пришелся по контуру). Дело в том, что в программе любой объект, состоящий из контура и заливки, рассматривается как две составляющие. Но если мы сделаем двойной щелчок на объекте, он выделится целиком. Очистим наш монтажный стол (Стоп, стоп! Вы уже заметили на панели инструментов "Ластик", но для этой задачи он нам не понадобится). Для этого "нарисуем" Черной стрелкой прямоугольник так, чтобы внутрь этого прямоугольника попали все объекты, и нажмем клавишу Del. Инструмент "Многоугольник" Еще один инструмент - "Многоугольник". В панели свойств (Параметры - рис. 1.9) можно задать количество углов (сторон) и "звездность". Поэкспериментируйте с этим инструментом, рисуя правильный шестиугольник, восьмиугольную звезду, другие фигуры.

9


Рис. 1.9. Изменение параметров инструмента "Многоугольник" Прежде чем перейти к описанию применения других инструментов рисования, рассмотрим возможности редактирования объектов на примере тех, которые уже нарисованы и расположены на нашем монтажном столе. Самый функциональный и часто используемый инструмент - "Стрелка - Черная стрелка". С некоторыми его функциями мы уже познакомились: чтобы выбрать весь объект, следует выполнить одно из двух действий: • •

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

Выбранный объект отображается покрытым мелкой сеткой, а контур - более толстой линией по сравнению с обычным состоянием. Для выбора контура объекта следует подвести указатель к границе объекта и щелкнуть один раз левой кнопкой мыши. Если контур объекта представляет собой ломаную или многоугольник (состоит из нескольких кусочков), то щелчок на любом участке контура приводит к выбору только этого участка. Чтобы выбрать весь такой контур, следует сделать двойной щелчок на контуре или щелкнуть последовательно на всех отрезках контура, удерживая нажатой клавишу Shift. (Эта клавиша добавляет объекты к выбору. Если еще раз щелкнуть по выбранному объекту, он будет удален из набора выбранных.) Не забываем о возможности редактирования кривизны контура. Часто это единственный способ нарисовать что-либо свое (рука дрожит, мышь скачет, планшета нет). Проведите эксперимент: удалите контур фигуры, оставив заливку; подведите курсор мыши к границе заливки - вы убедитесь, что форма заливки редактируется так же, как и контур. Выбор заливки объекта выполняется аналогично: включив инструмент "Стрелка", следует щелкнуть (один раз!) внутри объекта. Заливка будет выделена, а контур - нет. Чтобы отменить выбор (снять выделение), достаточно щелкнуть мышью в любом свободном месте рабочей области.

Рис. 1.10. Дополнительные настройки для инструмента "Стрелка" При выборе инструмента "Стрелка" в поле дополнительных параметров панели инструментов отображаются дополнительные настройки работы инструмента (рис. 1.10):

10


• • •

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

Инструмент "Карандаш" Инструмент рисует контуры.

Рис. 1.11. Меню режимов работы "Карандаша" Для него имеются три режима работы (рис. 1.11). Попробуем нарисовать одним движением руки овал карандашом, используя различные режимы (начиная с последнего!). Результат объясняет все! •

• •

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

Инструмент "Кисть" Инструмент позволяет создавать линии, напоминающие мазки кистью. Для него предусмотрен целый ряд дополнительных специальных эффектов, включая эффект каллиграфического письма. Следует отметить, что кисть рисует фигуры, состоящие из одной заливки. (Учащиеся не видят разницы между инструментами "Карандаш" и "Кисть", причем считают Кисть предпочтительней для рисования линий. Стоит отдельно подчеркнуть разницу в нарисованных объектах - для линий (контуров) используем "Карандаш" или "Линию"). Для инструмента предусмотрено пять режимов работы. Выбор режима выполняется с помощью кнопки-модификатора (рис. 1.12). • • •

Нормальная закраска - "мазок" кисти покрывает все линии и заливки редактируемого изображения, а также любой другой объект или участок стола, оказавшиеся на пути кисти (рис. 1.13б); Закраска заполнением - обеспечивает закрашивание заливок, не влияя на контуры и пустую область стола (рис. 1.13в); Закраска позади объекта - "мазок" кисти покрывает расположенную за изображением пустую область стола, оставляя все линии и заливки на редактируемом изображении без изменения (рис. 1.13г);

11


Рис. 1.12. Меню режимов использования инструмента "Кисть" • •

Закраска выделения - "мазок" кисти влияет только на предварительно выбранную область; Внутренняя закраска - закрашивается только та заливка, с которой операция была начата; другие заливки, контуры и стол остаются без изменения (рис. 1.13д); если вы начнете закрашивание в пустой области рабочего стола, то эффект будет тот же, что и в режиме "Закраска" позади объекта.

• • • • •

исходное изображение Нормальная закраска Закраска заполнением Закраска Внутренняя

позади объекта закраска

увеличить изображение Рис. 1.13. Эффект применения различных режимов инструмента "Кисть" (работа с кистью начиналась во всех случаях на бежевой заливке) Также пользователь может выбрать размер, форму, цвет кисти.

12


Рис. 1.14. Редактирование контуров объектов, нарисованных "Карандашом" и "Кистью" Для того чтобы лучше увидеть различия между инструментами "Карандаш" и "Кисть", попробуем отредактировать их контуры инструментом "Черная стрелка" (рис. 1.14). Инструмент "Ластик" Обратите внимание: "Ластик" не просто удаляет часть рисунка - при его частичном применении редактируется форма объекта. Для инструмента предусмотрено шесть режимов работы. Выбор режима выполняется с помощью двух кнопок: "Режим стирания" и "Кран" (рис. 1.15).

Рис. 1.15. Меню режимов использования инструмента "Ластик" 13


Кнопка "Кран" включает режим, при котором одним щелчком мыши удаляется та часть объекта (контур или заливка), на которой установлен указатель - капелька из водопроводного крана. Включение режима "Кран" отменяет любой из пяти других режимов, и наоборот. С помощью кнопки "Режим стирания" может быть установлен один из следующих режимов: • • • • •

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

Дополнительно можно выбрать форму и размер ластика. Все объекты, которые мы изображали до настоящего момента, были просты по форме. Как же нарисовать достаточно сложный объект? Один из способов - просто добавить или вычесть объекты. Нарисуем объект в виде полумесяца. Для этого: 1. 2. 3. 4.

выберем инструмент "Овал"; проверим, что не включена кнопка "Рисование объектов" (рис. 1.6); нарисуем закрашенный круг и нарисуем второй круг с частичным наложением на первый; выделим второй круг инструментом выделения "Стрелка" и удалим его клавишей Del. В программе нарисованные таким образом объекты модифицируются - в данном случае

один объект обрезает второй (рис. 1.16). Попробуем другой вариант. Нам надо нарисовать "крест". Воспользуемся инструментом "Прямоугольник", изобразив два узких прямоугольника так, чтобы получилось изображение креста. А теперь выделим двойным щелчком (или с клавишей Shift) весь контур и удалим его. Получился единый объект (рис. 1.17). В данном случае объекты объединились в один.

14


увеличить изображение Рис. 1.16. Создание объекта вычитанием области

увеличить изображение Рис. 1.17. Создание объекта наложением области Это интересный способ создания новых достаточно сложных объектов. Придумайте свои примеры таких форм, которые можно создать объединением или вырезанием двух или нескольких объектов. Но! Иногда нам этот прием будет мешать! Не всегда нужны сложные объекты. В этом случае нам и пригодится кнопка "Рисование объектов" (рис. 1.6). Если включить эту кнопку, наши нарисованные объекты станут единым элементом. При включенной кнопке каждый нарисованный объект ограничивается подсветкой в виде синего контура, что говорит нам о его "единости". Чтобы отредактировать такой объект, надо щелкнуть мышкой на нем два раза. Мы попадем в окно редактирования этого объекта (все остальные рисунки будут слабо окрашены) (рис. 1.18). После "стандартного" изменения объекта двойной щелчок на свободном месте стола вернет нас в "кадр".

15


b) a)

Рис. 1.18. Редактирование объекта 16


Похожим действием является группирование объектов для соединения нескольких объектов в единую группу для выбора и редактирования. Операция группирования выполняется с помощью команды "Группировать", входящей в меню "Изменить" основного окна. Визуально группа объектов выделяется прямоугольной рамкой голубого цвета. Чтобы отредактировать элементы группы, выполняется та же последовательность действий. Допускается вложение одной группы в другую. Например: в группу "человечек" вложены группы "рука", "рука", "нога", "нога", "тело", "голова", а в группу "голова", в свою очередь, - группы "лицо" и "волосы". Чтобы вернуть все исходные элементы группы к "исходному состоянию", надо воспользоваться командой "Разгруппировать" или "Разделить" меню "Изменить". Будьте осторожны: наши объекты вновь начнут накладываться друг на друга или обрезать друг друга! Рассмотрим еще один инструмент для создания сложных по форме объектов.

Инструмент "Перо" С помощью данного инструмента можно рисовать прямые, ломаные линии и сегменты кривых. Линия строится по базовым точкам на основе механизма кривых Безье. Этот инструмент - самый сложный для учащихся по технике применения, поэтому в дальнейшем лишь немногие из них пользуются его возможностями. Эффективное применение инструмента "Перо" требует определенных практических навыков. Чтобы освоить его применение, надо провести несколько практических занятий - в данном случае основным является опыт. Кроме этого, важна общая подготовленность учащихся (возможно, они уже рисовали кривые Безье в других векторных редакторах). Тем не менее затраты времени на его освоение окупятся, как только возникнет необходимость создать нечто нестандартное. Поэтому изучение этого инструмента можно предложить желающим в качестве самостоятельного задания. Мы рассматриваем работу с этим инструментом в общем виде, так как здесь требуется определенный опыт, который вырабатывается постепенно. Чтобы нарисовать прямую линию, необходимо указать первую и последнюю точки отрезка. Точка создается щелчком на столе. Например, чтобы получить ломаную, состоящую из трех отрезков, требуется четыре точки. Нарисованную линию можно либо оставить незамкнутой - дважды щелкнуть на последней точке линии, либо преобразовать в замкнутую фигуру - щелкнуть на начальной точке. Незамкнутая фигура является контуром. Если фигуру замкнуть, к контуру автоматически добавится заливка. Рисование кривых с помощью пера основано на редактировании узлов - базовых точек и касательных или направляющих в этих узлах. Длина и направление касательной определяют размер и величину изгиба сегмента кривой между двумя узлами. Чтобы нарисовать сегмент кривой, необходимо выполнить следующие действия: 1. Создать первую базовую точку - узел, щелкнув мышью на столе. 2. Для создания второго узла переместить указатель на требуемое расстояние и нажать левую кнопку мыши; в результате на экране появится линия, соединяющая базовые точки. 3. Не отпуская кнопку, переместить указатель в сторону, противоположную требуемому направлению изгиба; при перемещении указателя на экране появится направляющая, размер и направление которой определяют глубину и угол изгиба (рис. 1.19). 4. При получении требуемой формы сегмента кривой отпустить кнопку мыши. Направляющая станет невидимой, а узлы (первая и конечная точки сегмента) будут представлены маленькими окрашенными прямо-угольничками. 17


5. Чтобы добавить еще один сегмент к созданному ранее, требуется повторить шаги 2, 3, 4 описанной выше процедуры.

Рис. 1.19. Рисование кривых с помощью "Пера" При работе с пером следует иметь в виду, что нарисованная линия считается "незавершенной" до тех пор, пока вы не нажмете клавишу Esc или не переключитесь на другой инструмент. Иначе каждая новая точка будет считаться принадлежащей данной линии и автоматически соединяться с ней новым сегментом. Для инструмента "Перо", как и для других инструментов рисования, пользователь может установить толщину и цвет линии, а также цвет заливки. Инструмент "Спецвыделение" ("Белая стрелка") Этот инструмент, так же как и предыдущий, сложен в использовании без определенных практических навыков. Инструмент "Спецвыделение" отличается двумя свойствами:

18


• •

во-первых, при выборе объекта с его помощью объект рассматривается как единое целое, без разделения на контур и заливку; во-вторых, его работа основана на редактировании кривых Безье.

С помощью этого инструмента объект можно выбрать одним из двух способов: • •

заключить объект в прямоугольную область (как при использовании инструмента "Стрелка"); щелкнуть на контуре объекта.

В обоих случаях по периметру объекта появится отображение опорных точек кривых Безье, которые задают форму данного объекта. Редактируя расположение узлов, длину и угол направляющей, можно добиться получения любой самой сложной формы объекта (рис. 1.20).

Рис. 1.20. Изменение формы объекта инструментом "Спецвыделение" Инструмент "Свободное преобразование" и панель "Преобразование" Практически все операции по трансформированию (преобразованию) объекта могут быть выполнены с помощью инструмента "Свободное преобразование". С выбранным объектом (или несколькими) можно проделать с��едующее: • • • •

изменение положения точки трансформации; масштабирование; поворот и вращение; трансформацию.

При включении инструмента "Свободное преобразование" становятся доступны четыре кнопкимодификатора.

19


Каждая из них работает как переключатель, то есть одновременно нельзя включить два режима. Но когда ни одна из кнопок не нажата, обеспечивается наиболее универсальный режим работы инструмента "Свободное преобразование", при котором доступны почти все основные его функции. Трансформирование объекта выполняется с помощью маркеров, расположенных на выделяющей рамке. Чтобы пользователям было удобнее различать предназначение маркеров, с каждым из них связан свой вариант указателя мыши. Возможности инструмента обширны (рис. 1.21). Панель "Преобразование" имеет в целом то же предназначение, что и инструмент "Свободное преобразование", однако перечень реализуемых с ее помощью функций несколько отличается. Панель "Преобразование" не отображается на экране в первоначальном интерфейсе - выберите ее в меню "Окно" или нажмите комбинацию клавиш Ctrl+Т. • • • • •

исходный объект поворот наклон искажение изгиб

увеличить изображение Рис. 1.21. Возможности инструмента "Свободное преобразование"

Рис. 1.22. Формат панели "Преобразование" Формат панели "Преобразование" показан на рис. 1.22. Он достаточно прост. Лишь некоторые особенности: чтобы зеркально отобразить объект или его часть, надо в режиме "Перекос" задать 180 градусов. В нижнем правом углу панели: •

Кнопка "Сброс", которая предназначена для восстановления исходных параметров объекта; 20


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

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

Рис. 1.23. Панель "Выравнивание" Панель "Выравнивание" (рис. 1.23) дает возможность выровнять выбранные объекты по горизонтальной или вертикальной оси. Вы можете выравнивать объекты вертикально (по правому краю, по центру или по левому краю выбранных объектов) либо горизонтально (по верхнему краю, по центру или нижнему краю выбранных объектов). Выравнивание выполняется по соответствующим сторонам выделяющих рамок, окружающих каждый выбранный объект. Кроме этого можно распределить объекты в пространстве на равном расстоянии (группы кнопок "Распределить" и "Промежуток") и выравнять по размеру (группа кнопок "Подоб. Размер") (рис. 1.24). Выравнивание по левому краю и распределение на равном расстоянии по вертикали

Распределение на равном расстоянии по вертикали и по горизонтали

Выравнивание по центру по горизонтали и вертикали

21


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

Примерные вопросы для контроля 1. Из каких частей состоит панель инструментов? 2. Для чего служит панель свойств? От чего зависит ее внешний вид? 3. Как изменить размер кадра (монтажного стола), фоновый цвет, скорость (количество кадров в секунду) анимации? 4. Какие инструменты используются для выделения? Как выделить весь объект? его часть? 5. Какие функции выполняет инструмент "Стрелка"? 6. Для чего служит инструмент "Свободное преобразование"? 7. Как включается и выключается привязка к объектам? 8. Какие возможности предоставляет панель "Выравнивание" для точного расположения объектов? 9. Какие объекты можно нарисовать инструментом "Линия"? 10. Расскажите об инструменте "Карандаш" и его настройках. 11. Какие дополнительные настройки имеются у инструмента "Кисть"? Как они влияют на работу этого инструмента? 12. Какие объекты можно нарисовать инструментами "Овал" и "Прямоугольник"?

22


2. Практическая работа: Учимся рисовать Содержание • • •

Задание o Определим, что нам нужно сделать, чтобы выполнить работу Советы по выполнению Подсказки

Одно из чудес векторного изображения — простота создания формы. Даже не умеющий рисовать сможет изобразить простейшие фигуры. Итак: долой каляки-маляки, учимся рисовать! Что надо знать и уметь, чтобы выполнить задание: знать основы работы с инструментами рисования линий и форм, уметь редактировать векторные объекты (в том числе копирование, трансформирование, выравнивание и распределение объектов). Задание Нарисовать любые 6 из предложенных ниже объектов (рисунков), используя инструменты создания и редактирования векторной графики. Определим, что нам нужно сделать, чтобы выполнить работу 1. Рассмотрим рисунок. Вам надо максимально приближенно к оригиналу изобразить данные рисунки. 2. Все 12 (!) рисунков можно разделить на: o достаточно простые, состоящие из простейших форм; o более сложные — форму объекта придется редактировать; o сложной формы. 3. Найдите в каждом из рисунков простейшие элементы — овал, многоугольник и другие. Если форма объектов сложнее, определите (придумайте) способ создания такого объекта. 4. При взаимном размещении объектов в рисунке пользуйтесь средствами выравнивания объектов. 5. Располагайте ваши рисунки на одном монтажном столе. 6. Сохраните свои изображения. 7. Оцените свои силы и возможности и… продолжите работу над оставшимися рисунками. Желаем успеха! Советы по выполнению • •

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

23


увеличить изображение • • • • •

Для расположения элементов по окружности перенесите регистрационную точку, воспользуйтесь панелью "Преобразование" и командой "Применить" к копии при определенном угле поворота несколько раз. Любой контур состоит из узлов и отрезков кривых, соединяющих эти узлы. В вашем распоряжении есть инструмент "Перо", которым при некотором опыте можно нарисовать любую фигуру. Команды панели "Выровнять" предоставляют средство контроля над объектами в изображениях, позволяя выравнивать и распределять эти объекты относительно друг друга и страницы. Если вам требуется работать с несколькими объектами как с единым целым, целесообразно их сгруппировать. Команды группировки и разгруппировки объектов облегчают копирование, вырезание и перемещение сложных составных объектов. Еще один способ нарисовать фигуру сложной формы: возьмите кисть с заливкой цветом — и рисуйте на здоровье. Если случайно была включена кнопка "Рисование объектов", выделите все нарисованное и "разбейте", применив команду "Разделить". Если что-то не устраивает, редактируйте средствами команд "Стрелка", "Ластик" и др. В вашем распоряжении мощное средство редактирования: 20 "шагов вглубь" — отмен действий по умолчанию. А можно поставить еще больше. Не бойтесь экспериментировать! 24


• • • • • •

При создании объекта (рисунка) не забывайте про всю рабочую область. На ней можно разместить детали, части, копии. У контура (линии) можно выбирать толщину, тип линии и цвет. Иногда это важное свойство игнорируется. При переносе выделенного объекта с нажатой клавишей Ctrl получится копия объекта. Сохраняйте промежуточный результат! Сохраненный файл будет иметь расширение .fla. Всегда есть вероятность какого-то сбоя. Сохранение файла сбережет вам время и нервы. Сохраняйте окончательный результат! Чтобы оставить только результаты нашей работы, законченный файл должен пройти процесс компиляции. Такая компиляция происходит, когда мы нажимаем комбинацию клавиш Ctrl+Enter. При этом создается файл с расширением .swf. Если файл .fla уже был ранее сохранен в какой-нибудь папке, то в той же папке сохраняется и вновь созданный SWF-файл. Его можно открыть для просмотра двойным щелчком в "Проводнике". На любом этапе создания анимации, в том числе и на любом этапе рисования, вы можете посмотреть на свой труд глазами "пользователя". Для этого нужно всего лишь нажать комбинацию клавиш Ctrl+Enter. Закрыв окно тестирования, вы опять вернетесь в среду разработки и сможете продолжить свою работу. Flash, как векторный редактор, позволяет приблизить изображения с изменением масштаба просмотра до 2000%. При сильном увеличении хорошо видны все недочеты рисунка. Можно использовать инструменты просмотра изображения панели инструментов, а можно воспользоваться комбинацией клавиш Ctrl+ и Ctrl-, что гораздо удобнее. Во время рисования увеличьте масштаб до 200% или больше, так, чтобы было удобно добиться большей точности при рисовании.

Подсказки •

• • •

• •

Рисунок 1: один из самых простых. Выберите инструмент "Многоугольник", поменяйте в панели свойств количество сторон на 6, выберите красный цвет заливки и белый цвет контура и нарисуйте шестиугольник. Скопируйте его и поменяйте цвет заливки. Нарисуйте также восьмиугольник. Выровняйте объекты с помощью панели выравнивания (обратите внимание: на этой панели есть средства даже для подгонки фигур под один размер). Рисунки 3, 8: рисуем "Линией" с последующим редактированием, "Карандашом", "Пером" половину контура предмета. С помощью панели "Преобразование" (Наклон — 180 град.) и ее команды "Применить к копии" зеркально отражаем эту половину. Аккуратно придвигаем вторую половину к первой и заливаем цветом. Рисунок 6: "кольца" можно нарисовать так: из одного овала вырезаем другой овал и добавляем белый контур (овал с белым контуром без заливки). А можно применить инструмент "Овал" с опциями кольца. Рисунок 7: один из самых сложных. Инструменты — или "Карандаш", или "Перо". Рисунок 9: прост и красив. Нарисуйте овал без заливки (или удалите заливку). После этого на панели "Преобразование" зададим угол поворота копии 30 градусов. Все. Осталось только два раза нажать кнопку "Применить к копии". Маленький круг в середине завершит картину (его можно выровнять относительно всей фигуры, только предварительно сгруппируйте фигуру из трех овалов). Рисунок 10: все уже знакомо, только точку трансформации, вокруг которой будет "крутиться" фигура, надо вынести за ее пределы. Рисунок 12: 1 объект, панель "Преобразование" и 30 копий этого объекта!

25


3. Лекция: Работа с цветом. Типы заливок и их применение Содержание • •

Цели и задачи Содержание занятия o Инструмент "Чернильница" o Инструмент "Ведро с краской" o Панели "Цвет" и "Образцы" o Инструмент преобразования градиента o Использование импортированных изображений Примерные вопросы для контроля

Цели и задачи • • •

научить учащихся применять различные заливки; показать возможности применения различных заливок; научить редактировать заливки.

Содержание занятия Черно-белый мир скучен. Возможности рисунка не ограничиваются одними контурами и цветом заливки. Иначе все работы напоминали бы аппликацию и были бы похожи друг на друга. Большие возможности программы по использованию различных типов заливок и их редактированию открывают простор нашей фантазии в создании рисунка. Для заливки может быть применен базовый (однотонный) цвет, градиент (плавный переход между цветами) или растровое изображение. Для работы с цветом предназначены следующие средства: • • • • • • • • • •

"Чернильница", "Ведро с краской", "Инструмент преобразования градиента" (под кнопкой "Свободное преобразование"), "Пипетка", кнопка "Цвет обводки", кнопка "Цвет заливки", кнопка цветов "Черно-белый" обеспечивает замену цветовой схемы на используемую по умолчанию: черный контур и белая заливка, кнопка "Нет цвета" предназначена для создания объектов с прозрачной заливкой (без заливки) или с прозрачным контуром (без контура), кнопка "Смена цветов" позволяет быстро (одним щелчком) поменять местами цвета заливки и контура выбранного объекта, панели "Цвет" и "Образцы".

Инструмент "Чернильница" Этот инструмент предназначен для изменения цвета контура объекта (мы не забываем о том, что линии, нарисованные инструментами "Линия" и "Карандаш", по сути те же контуры). Кроме того, с его помощью можно изменять толщину и стиль контура. Чтобы изменить с помощью "Чернильницы" толщину и/или стиль линии, необходимо установить соответствующие параметры в панели свойств инструмента и затем щелкнуть им по редактируемой линии. Если этим же инструментом щелкнуть на заливке (объекте без контура), то у фигуры появится контур с выбранными параметрами. Инструмент "Ведро с краской" 26


Инструмент предназначен для изменения цвета заливки объекта, а также для закрашивания произвольной замкнутой области на столе. Инструмент "Ведро с краской" имеет дополнительные параметры. Из опыта (возможного) с графическими программами известно, что залить можно только замкнутые области. Flash дает нам возможность заливать незамкнутые области (в контуре могут существовать "дырки"). Кнопка "Размер промежутка" открывает меню, позволяющее выбрать вариант незамкнутой области, которую требуется закрасить (рис. 3.1).

Рис. 3.1. Кнопки-модификаторы инструмента "Ведро с краской" Выбор любого из вариантов (закрыть малые промежутки, закрыть средние промежутки и закрыть крупные промежутки) обеспечивает закрашивание областей, контур которых имеет один или более "просветов". Необходимо отметить, что различие в размерах "маленького" и "большого" промежутков придется подбирать. Модификатор "Блокировка заливки" используется только для градиентных заливок и растровых изображений. Он создает эффект, что все изображения как бы являются частью одного, занимающего весь стол. Соответственно, каждому изображению "достается" свой участок общей заливки, цвет которого зависит от позиции объекта на столе. Эта опция автоматически срабатывает, если мы заранее выберем несколько объектов для такой заливки. Кнопки могут использоваться либо совместно с инструментами рисования, рассмотренными выше, либо с инструментом "Стрелка" после выбора объекта. Щелчок на кнопке выбора цвета контура или заливки приводит к открытию окна палитры, в котором производится выбор нужного цвета. Панели "Цвет" и "Образцы" Панель Цвет позволяет выполнять следующие действия: • • • • •

устанавливать цвет заливки для выбранного или вновь создаваемого объекта; создавать новые и редактировать основные цвета палитры Flash; редактировать существующие градиентные заливки; создавать новые градиентные заливки; выбирать растровое изображение, которое должно использоваться в качестве заливки.

Формат панели зависит от вида операции, который может быть выбран из раскрывающегося списка: 27


• • • •

"Сплошной" - установить для заливки один из цветов; "Линейный" - заливка с линейным градиентом; "Радиальный" - заливка с радиальным градиентом; "Растровое изображение" - выбрать растровое изображение для заливки; в данном случае панель дополняется своеобразным списком, в котором отображаются растровые изображения, импортированные в фильм.

Заливка цветом включает в себя дополнительные возможности: если параметр "Альфа" ("Прозрачность") мы выберем меньше 100 процентов, у нашего объекта заливка будет прозрачной. Чем меньше процентов мы выберем, тем прозрачней будет заливка. Градиентные заливки представляют собой заливку плавным переходом между цветами. Во Flash применяются два вида градиентов: линейные с переходом между цветами по прямой линии и радиальные с переходом цвета от центра к краю окружности по радиусу. Для создания новой градиентной заливки достаточно просто выбрать в списке режимов панели пункт "Линейный" или "Радиальный". Ползунковый регулятор, предназначенный для коррекции цветовых переходов, состоит из двух основных компонентов: • •

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

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

28


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

29


Рис. 3.3. Преобразование радиального градиента Использование импортированных изображений Широкие возможности Flash по созданию изображений могут быть еще более усилены за счет ��ключения в Flash-фильмы импортированных изображений. Flash поддерживает импорт как векторных, так и растровых изображений в различных форматах. В меню "Файл" надо выбрать команду "Импорт". Можно импортировать файлы на рабочий стол или в библиотеку. В любом случае импортированный файл будет сохранен в библиотеке. Чтобы просмотреть библиотеку, надо открыть ее панель из меню "Окно". Все, что было импортировано в данную работу, сохраняется в библиотеке до тех пор, пока мы не удалим элемент из библиотеки. Работа с векторными изображениями проста. Если рисунок нарисован в векторном редакторе (например, Adobe Illustrator) и сохранен в векторном формате (WMF или др.), его можно импортировать во Flash. Если импортированного изображения нет на монтажном столе, его можно просто "перетащить" из библиотеки на стол, "ухватив" мышкой. Если импортированное векторное изображение уже находится в рабочей области, при его выделении появятся прямоугольные рамки голубого цвета (рис. 3.4). Так визуально выделяется группа объектов - векторные изображения при импорте объединяются в группы. Вся остальная работа с изображением сводится к редактированию групп и объектов.

30


увеличить изображение Рис. 3.4. Импортированное векторное изображение Рассмотрим работу с растровой (пиксельной) графикой. Технология работы с такими изображениями практически не зависит от формата и аналогична для GIF, JPEG, PNG и BMP. Конечно, сначала надо импортировать рисунок. Растровое изображение на рабочем столе при выделении подсвечивается серой рамкой. Возможны 3 варианта работы с импортированной растровой графикой. I вариант. Самое элементарное - ничего с рисунком не делать, кроме изменения масштаба и поворота. Самые интересные растровые форматы - GIF и PSD, они могут содержать изображение с прозрачной областью. Эта прозрачность сохраняется при импортировании. (Существуют специальные библиотеки объектов, а можно создать свое изображение в Adobe Photoshop на прозрачном слое.) II вариант. Можно создать объект, используя содержание (сам растровый рисунок). При этом рисунок будет являться заливкой этого объекта. Для этого надо:

31


1. выбрать изображение на столе; 2. в меню "Изменить" выбрать команду "Разделить" (или в контекстном меню на правой кнопке мыши). После выполнения этой команды импортированный рисунок становится прямоугольной формы объектом с заливкой этим рисунком. Далее выполняются любые действия по редактированию формы объекта. Остановимся на еще одном инструменте выбора и редактирования - "Лассо". Чтобы выбрать объект или произвольную часть объекта с помощью инструмента "Лассо", следует, нажав кнопку мыши, очертить выбираемую часть.

И то же изображение в контурном режиме:

Рис. 3.5. Создание нового объекта из растрового изображения Для выбора области одного оттенка цвета в полученном объекте (из импортированной растровой графики) используется инструмент "Лассо" при включенном модификаторе "Волшебная палочка". С помощью "Волшебной палочки" в объекте с растровой заливкой можно выбирать (и удалять), например, области похожего цвета. Сама "Волшебная палочка" также может настраиваться с помощью дополнительного диалогового окна, которое открывается щелчком на кнопке "Параметры волшебной палочки". Чем большее значение мы введем, тем большее количество оттенков цвета "Волшебная палочка" будет воспринимать "как один цвет" и наоборот. Например, если импортирована фотография с головой мальчика на фоне неба, можно получить объект в форме головы мальчика и заливкой в этом объекте этой фотографией (рис. 3.5). III вариант. Изображение может использоваться для закрашивания заливки объектов. Чтобы использовать растровое изображение в качестве заливки, следует выполнить следующие действия:

32


1. Импортировать растровое изображение в библиотеку с помощью команды "Импорт". Если рисунок на монтажном столе - без жалости удалить его со стола (мы помним: все импортированные изображения остаются в библиотеке). 2. Открыть панель "Цвет" и в списке режимов заливки выбрать пункт "Растровое изображение". 3. В списке растровых изображений, состоящем из маленьких квадратиков, щелкнуть на миниатюре изображения, которое будет использовано в качестве заливки. 4. Если требуется изменить заливку для ранее созданных объектов, следует включить инструмент "Ведро с краской" и использовать его обычным образом.

увеличить изображение Рис. 3.6. Использование растровой заливки 5. При использовании растрового изображения в качестве заливки оно масштабируется (уменьшается) и затем размножается таким образом, чтобы заполнить всю площадь заливки. Очевидно, что придется воспользоваться Инструментом преобразования градиента для задания подходящих параметров - масштаба, поворота, наклона, расположения (рис. 3.6). Существует еще один вариант использования растровой графики… но не будем открывать все секреты сразу. При импортировании растровой графики в анимацию кроме приятных и полезных моментов появляется и проблема - увеличивается объем файла. Если мы будем готовить анимацию для расположения в интернете, стоит об этом задуматься и использовать средства оптимизации. Примерные вопросы для контроля 1. 2. 3. 4.

Какими средствами можно изменить цвет, толщину и стиль нарисованной линии? Какие четыре типа заливок используются при рисовании? Как создать градиентную заливку со своими оттенками? Как создать градиентную заливку, переходящую в прозрачный цвет? 33


5. 6. 7. 8.

Как создать однотонную полупрозрачную заливку? Как сохранить созданную заливку для дальнейшего ее использования? Что такое растровая заливка? Как ее создать? Каким инструментом и как можно отредактировать центральную точку радиального градиента, его протяженность, сжатость, угол поворота? 9. Каким инструментом и как можно отредактировать направление линейного градиента, его протяженность, сжатость, угол поворота? 10. Каким инструментом и как можно отредактировать размер, угол поворота, наклона растровой заливки?

34


4. Практическая работа: Я — художник! Содержание • • •

Задание o Определим, что нам нужно сделать, чтобы выполнить работу Советы по выполнению Подсказки

Еще одно из чудес векторного изображения — простота создания заливок: даже не умеющий рисовать сможет изобразить простейшие фигуры. Иногда приходится создавать новое "правдивое" изображение кнопок, трубочек, шариков... При некоторых навыках и пространственном воображении можно быстро создать трехмерные объекты в плоскости листа. Что надо знать и уметь, чтобы выполнить задание: знать основы работы с инструментами рисования линий и форм, уметь редактировать векторные объекты (в том числе копирование, трансформирование, выравнивание и распределение объектов). Задание Часть 1. Нарисовать "детский" рисунок: домик, дорожку, землю, небо и раскрасить их. Для выполнения данного задания потребуются растровые изображения из библиотеки текстур. Их можно взять из библиотеки другой программы или найти в Интернете (если вы умеете создавать текстуры, можно воспользоваться своими). Часть 2. Создать имитацию объемных объектов на плоскости. Определим, что нам нужно сделать, чтобы выполнить работу 1. Нарисовать линиями (контурами) рисунок. Обратите внимание: нельзя залить просто фон. Поэтому для земли и неба у вас должны быть ограничивающие линии по контуру монтажного стола (в заключение работы их можно убрать). 2. Импортировать в библиотеку текстуры с изображениями неба с облаками, кирпичиков или дерева, травы и др. 3. Открыть окно библиотеки Library и убедиться, что все изображения находятся в библиотеке. 4. Выбрать инструмент "Ведро с краской", на панели "Цвет" установить заливку растровым изображением, выбрать подходящее изображение в списке и залить объект. 5. Скорее всего, залитое изображение слишком мало. Выберем инструмент преобразования градиента и отредактируем заливку, растягивая, наклоняя и поворачивая. 6. Не полагайтесь только на растровую заливку, можно применить и другие заливки. Например, нарисовать солнышко с радиальным градиентом от желтого к прозрачному. 7. Сохраните свои изображения. 8. Оцените свои силы и возможности и… продолжите работу. Посмотрите на рисунок 2 в данном задании — эти объекты нарисованы в редакторе Flash. Попробуйте изобразить их. 9. Практически любой объем передается с помощью плавных переходов (градиентов) между светлым и темным цветами. Проанализируем освещенность шарика, цилиндра и "коробочки". 10. Чтобы проще было создать объем, будем сначала работать с черно-белым изображением с полутонами. Желаем успеха!

35


увеличить изображение Рис. 1. Редактирование растровой текстуры

Рис. 2. Имитация объема на плоскости 36


Советы по выполнению •

• • • • • •

• •

Если вам требуется работать с несколькими объектами как с единым целым, целесообразно их сгруппировать. Команды группировки (в меню — "Изменить") и разгруппи-ровки объектов облегчают копирование, вырезание и перемещение сложных составных объектов. В вашем распоряжении мощное средство редактирования — 20 отмен действий по умолчанию. А можно поставить еще больше. Не бойтесь экспериментировать! При создании объекта (рисунка) не забы��айте про всю рабочую область. На ней можно разместить детали, части, копии. У контура (линии) можно выбирать толщину, тип линии и цвет. Иногда это важное свойство игнорируется. Сохраняйте промежуточный результат! Сохраненный файл будет иметь расширение .fla. Всегда есть вероятность какого-то сбоя. Сохранение файла сбережет вам время и нервы. Сохраняйте окончательный результат! Чтобы оставить только результаты нашей работы, законченный файл должен пройти процесс компиляции. Такая компиляция происходит, когда мы нажимаем комбинацию клавиш Ctrl+Enter. При этом создается файл с расширением .swf. Если файл .fla уже был ранее сохранен в какой-нибудь папке, то в той же папке сохраняется и вновь созданный SWF-файл. Его можно открыть для просмотра двойным щелчком в "Проводнике". На любом этапе создания анимации, в том числе и на любом этапе рисования, вы можете посмотреть на свой труд глазами "пользователя". Для этого нужно всего лишь нажать комбинацию клавиш Ctrl+Enter. Закрыв окно тестирования, вы опять вернетесь в среду разработки и сможете продолжить свою работу. Flash, как векторный редактор, позволяет приблизить изображения с изменением масштаба просмотра до 2000%. При сильном увеличении хорошо видны все недочеты рисунка. Можно использовать инструменты просмотра изображения панели инструментов, а можно воспользоваться комбинацией клавиш Ctrl+ и Ctrl-, что гораздо удобнее. Самый простой способ создать иллюзию света — отбросить тень, ведь если есть тень, значит где-то есть и источник света. Будьте осторожны: тень не должна быть светлее объекта. На рисунке 2 про тень "забыли". Если создадите "тень", иллюзия объемности увеличится. Часто удобнее и быстрее выполнить команду, найдя ее в контекстном меню. Контекстное меню — это меню, которое открывается при щелчке правой кнопкой мыши на объекте, кадре или слое. В контекстном меню имеются только те команды, которые можно выполнить над данным элементом фильма. В контекстном меню при выборе объекта можно найти эффект тени. Хотя создать ее самим гораздо интереснее. Если вы делаете работу, в которой есть освещение, то должна быть и тень от всех объектов, на которые оно направлено. Часто при монтаже возникают две ошибки: про тень забывают вовсе или ее направление не совпадает с другими объектами.

Подсказки • • •

Чтобы передать имитацию объема, необходимы световые переходы — градиенты. Создайте их заранее и сохраните. Для "создания" шара потребуется радиальный градиент от белого к темно-серому. Центр градиента располагаем сверху сбоку для более полного впечатления "круглости". Для создания цилиндра нам потребуются два овала одного размера и две линии (или прямоугольник без заливки). Собираем фигуру и удаляем лишнее.

37


Рис. 3. Создание цилиндра • • •

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

Он создаст эффект металлической поверхности. •

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

38


5. Лекция: Покадровая анимация. Анимация формы. Трассировка растровых изображений Содержание • •

Цели занятия Содержание занятия o Покадровая анимация o Автоматическая анимация трансформации объекта - анимация формы o Редактирование растровых изображений (IV вариант) Примерные вопросы для контроля

Цели занятия • • • • • • •

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

Содержание занятия Итак, мы научились изображать простые (и не очень) векторные объекты, редактировать их форму, работать с группами… Пора от статичной неподвижной графики переходить к движению анимации. Что же такое компьютерная анимация? Анимация - это процесс создания множества изображений, демонстрирующих изменение объекта во времени, и воспроизведение их с такой скоростью, что создается иллюзия непрерывного (плавного) движения. Вы можете создать фильм, в котором в течение 3 минут один и тот же шарик будет неподвижно лежать на столе. В этом случае все кадры фильма будут похожи друг на друга больше, чем близнецы, и зритель не сможет отличить ваш "мультик" от статичного изображения. С другой стороны, можно изготовить несколько замечательных кадров и... воспроизвести их почти в один и тот же момент времени (например, с частотой кадра 60 кадров в секунду!). Результат будет прежним - зритель не сможет увидеть происходящее. С какой же именно скоростью (частотой кадров) необходимо демонстрировать наблюдателю меняющиеся изображения, чтобы у него создалась иллюзия непрерывного движения? Ответ на этот вопрос определяется целью создания анимации и ее последующего воспроизведения. Наиболее часто используются следующие варианты частоты смены кадров анимации: • • • •

24 кадра в секунду - скорость записи и воспроизведения кинофильмов; 25 кадров в секунду - кадровая частота в телевизионных стандартах PAL/SECAM; 30 кадров в секунду - кадровая частота в телевизионном стандарте NTSC; 28 кадров в секунду - скорость, используемая обычно в мультипликации. Иногда на пленку запечатывают по два одинаковых кадра подряд, то есть фактически только 14 разных кадров в секунду. Это делается для удешевления производства анимационных фильмов, но не может не сказаться на их качестве - степени проработанности движений; 4 кадра в секунду для анимационного GIF, например, баннера на web-страничке.

Во Flash по умолчанию предлагается частота кадров 12 кадров в секунду, что вполне подходит для компьютерной анимации (обычно достаточно 12-15 кадров в секунду).

39


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

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

увеличить изображение Рис. 5.1. Панель временной шкалы Кадры, создаваемые на каждом слое, имеют различное предназначение и внешне отличаются друг от друга.

Ключевой кадр. Кадр, который редактируется и в автоматической анимации является исходным.

Последовательность промежуточных кадров. Промежуточный кадр редактировать нельзя.

Пустой ключевой кадр. В кадре нет ни одного объекта.

Раскадровка автоматической анимации между двумя ключевыми кадрами.

40


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

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

Рис. 5.2. Выпадающее меню редактирования кадров •

Shift+F6 - Очистить ключевой кадр. Кадр станет промежуточным, т.е. повторит предыдущий ключевой кадр без возможности его редактирования.

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


Мультик, созданный с применением покадровой анимации, представляет собой последовательность ключевых кадров, с каждым из которых связано некоторое изображение (картинка) на столе. Создадим простейшую покадровую анимацию, применяя на практике знания о создании различных типов кадров. Наш первый мультик будет прост и примитивен. Предположим, что "героем" фильма будет шар, который падает и разбивается на три части. Будем считать, что для раскрытия столь "сложного" сюжета достаточно пяти кадров: 1. 2. 3. 4. 5.

Шар в исходном положении. Шар падает (в середине кадра). Шар упал, но пока цел. От шара откололись два кусочка. На столе лежит нечто, в предыдущей жизни бывшее шариком.

С учетом описанного сюжета последовательность работы должна быть следующей. 1. На временной линейке в ячейке первого кадра щелкните правой кнопкой мыши и в контекстном меню выберите команду "Вставить ключевой кадр", если пустого ключевого кадра нет. 2. Инструментом "Овал" нарисуйте круг (с заливкой) где-нибудь в верхней части стола; при этом первый кадр на временной линейке будет помечен как ключевой (черной точкой). 3. Щелкните правой кнопкой мыши в ячейке второго кадра и в контекстном меню выберите команду "Вставить ключевой кадр". На линейке появился второй ключевой кадр, при этом кадр полностью повторил предыдущий. Обратите внимание: при выделенном кадре в ячейке на временной линейке (темным цветом) все изображение у нас сразу выделено (можно не выделять наш объект заново). Переместите изображение шара в среднюю часть монтажного стола - шар в процессе падения. 4. Щелкните правой кнопкой мыши в ячейке третьего кадра и в контекстном меню вновь выберите команду "Вставить ключевой кадр" или нажмите клавишу F6. Новый кадр также будет помечен как ключевой, и для него сохранится предыдущее изображение. Переместите шар в нижнюю часть стола. 5. Создайте четвертый кадр, выбирая в контекстном меню команду "Вставить ключевой кадр". Инструментом "Лассо" выделите поочередно "кусочки шара" и перенесите их в сторону (можно к кусочкам применить трансформацию объекта, например поворот). 6. Создайте пятый кадр, выбирая в контекстном меню команду "Вставить кадр". После завершения работы нужно проверить, все ли получилось так, как вы хотели. Чтобы воспроизвести фильм, достаточно просто нажать клавишу Enter (альтернативный вариант выбрать в меню "Управление" команду "Воспроизвести"). При этом считывающая головка панели временной диаграммы автоматически перемещается от текущего к последнему ключевому кадру. Вы можете принудительно выбрать любой кадр для просмотра, щелкнув в соответствующей ячейке временной диаграммы левой кнопкой мыши. Чтобы просмотреть анимацию "глазами пользователя", т. е. как она будет выглядеть в итоге, нажмите комбинацию клавиш CTRL+Enter или Shift+CTRL+Enter (в меню "Управление" "Тестировать ролик" или "Тестировать сцену"). Просмотрев полученный мультик, мы имеем два вывода: 1. Наконец-то! У меня на экране что-то движется. 2. Можно ли исправить? У меня получились резкие изменения, и сам мультик слишком короткий и быстрый. Исправим некоторые недочеты. Для этого: •

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


клавишу F6 и передвинем изображение шара в промежуточное положение между начальным и "средним". Так же добавим ключевой кадр с промежуточным положением -теперь между третьим и четвертым кадром; если на ваш взгляд анимация происходит слишком быстро, добавим к каждому ключевому кадру по дополнительному промежуточному. Для этого выбираем ключевой кадр, в контекстном меню выбираем команду "Вставить кадр" или нажимаем клавишу F5;

Рис. 5.3. Общий вид временной линейки для анимации шара •

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

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

43


a)

b)

44


Рис. 5.4. Режимы "Шлейф" и "Контуры шлейфа"

45


С помощью кнопок "Шлейф" или "Контуры шлейфа" можно проконтролировать анимационное преобразование. При нажатии на одну из них на рабочее поле выводится содержание не только текущего кадра, но и нескольких соседних. "Шлейф" - выводит содержание соседних кадров в полупрозрачном виде, а "Контуры шлейфа" - в виде контуров. рис. 5.4 иллюстрирует возможность увидеть на рабочем поле сразу несколько кадров созданной нами анимации. Итак, первая анимация готова. У вас в руках есть все возможности ее редактирования (кадры, слои, объекты). Сохраняйте промежуточный результат! Сохраненный файл будет иметь расширение .fla. Это формат редактируемого файла во Flash. Чтобы сохранились только результаты нашей работы, законченный файл должен пройти процесс компиляции. Такая компиляция происходит, когда мы нажимаем комбинацию клавиш CTRL+Enter. При этом создается файл с расширением .swf. Если файл .fla уже был ранее сохранен в какойнибудь папке, то в той же папке сохраняется и вновь созданный SWF-файл. Его можно открыть для просмотра двойным щелчком в "Проводнике". На любом этапе создания анимации, в том числе и на любом этапе рисования, можно посмотреть на свой труд глазами "пользователя". Для этого нужно всего лишь нажать комбинацию клавиш CTRL+Enter. Чтобы продолжить работу над роликом, закрываем окно тестирования и возвращаемся в среду разработки. Уже по первому опыту становится ясно, что создание покадровой анимации - длительный и трудоемкий процесс. Для уменьшения трудоемкости применяется автоматическая анимация. Учтите: автоматизация не решит всех проблем, иногда не даст желаемого результата - для создания хорошего мультфильма "только компьютера" недостаточно. Рассмотрим первый вид автоматической анимации - анимацию формы. Автоматическая анимация трансформации объекта - анимация формы Используя анимацию трансформации, вы можете создавать эффект плавного "перетекания" объекта из одной формы в другую. Причем результирующая форма может не иметь абсолютно ничего общего с исходной. Кроме изменения формы можно получить эффект изменения цвета (и контура, и заливки) (рис. 5.5).

Рис. 5.5. Пример трансформации объекта и трансформации цвета 46


Рассмотрим анимацию формы на примере. 1. Инструментом "Овал" нарисуем круг в первом ключевом кадре. Анимация формы применяется только для несгруппированных объектов (голубой рамки вокруг нашего изображения не должно быть). В противном случае или выполняем команду "Разделить", или рисуем заново. 2. Щелкнем правой кнопкой мыши в ячейке того кадра, который хотим сделать последним в преобразовании, например 24-го (по умолчанию скорость нашей анимации 12 кадров в секунду, значит мы будем любоваться преобразованием 2 секунды). В контекстном меню выберем команду "Вставить ключевой кадр" или нажмем клавишу F6. В результате получим следующую "цепочку": ключевой кадр, 22 промежуточных, идентичных первому ключевому, ключевой кадр. 3. Во втором ключевом кадре заменим изображение круга на квадрат другого цвета. (Можно было вставить пустой ключевой кадр и нарисовать фигуру). 4. Выберем первый ключевой кадр, щелкнув в ячейке первого кадра (не на линейке кадров!) На столе появилось изображение первого кадра, а в панели свойств отобразились настройки для кадра. В раскрывающемся списке "Анимация" выберем "Форма - анимация формы" (по умолчанию там стоит "Нет"). В результате пе��вый и последний ключевые кадры на временной линейке будут соединены стрелкой на светло-зеленом фоне (рис. 5.6). Это говорит о том, что создание анимации успешно завершено. 5. Проверим результат.

Рис. 5.6. Вид временной диаграммы при анимации формы объекта Ключевые кадры для анимации формы (трансформации) обозначаются как черные точки, соединенные линией со стрелкой, на светло-зеленом фоне (линия со стрелкой заменяет все промежуточные кадры). Если у вас между кадрами появилась пунктирная линия, значит, или конечный (заключительный) ключевой кадр отсутствует, или в настройках анимации что-то сделано не так. Выбор пункта "Форма" в списке "Анимация" приводит к изменению формата панели свойств. С ее помощью могут быть установлены следующие дополнительные параметры анимации трансформирования объекта: •

• • •

скорость изменений; по умолчанию изменения протекают с постоянной скоростью, однако вы можете управлять ею, изменяя значения параметра "Замедлить": отрицательные значения этого параметра (от -1 до -100) означают, что изменения будут постепенно ускоряться, а положительные значения (от 1 до 100), наоборот, означают постепенное замедление изменений; способ трансформации; он определяется значением, выбранным в списке "Смешать": "Дистрибутив" ("Размазанный") - Flash создает анимацию, в которой промежуточные формы являются более сглаженными; "Угловой" - Flash создает анимацию, при которой в промежуточных формах сохраняются очевидные углы и прямые линии.

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


a)

b)

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


результирующем изображении. Всего для одной фигуры может быть использовано не более 26 контрольных точек (по числу букв латинского алфавита). Метки на исходном изображении окрашены в желтый цвет, на результирующем - зеленым. Для расстановки контрольных точек требуется выполнить следующие действия: 1. Создайте анимацию формы между двумя ключевыми кадрами. 2. Щелкните левой кнопкой мыши в ячейке ключевого кадра, соответствующего исходному изображению (первого ключевого кадра). 3. В меню "Изменить" выберите каскадное меню "Форма", а в нем - команду "Добавить контрольную точку"; в результате на изображении появится "заготовка" первой метки кружок красного цвета с буквой "а". 4. Переместите его мышью на ту точку изображения, которую вы хотите пометить как контрольную (Расстановку меток следует выполнять с помощью инструмента "Стрелка" при включенном модификаторе "Привязка к объектам"). Контрольные точки должны находиться на контурах и границах объектов. 5. Щелкните левой кнопкой мыши в ячейке кадра, соответствующего результирующему изображению (второго ключевого кадра в анимации формы). В центре будет присутствовать красный кружок с той же буквой, что и в исходном кадре. 6. Переместите кружок в точку изображения, которая должна соответствовать отмеченной в исходном кадре; после перемещения кружок изменит цвет на зеленый. 7. Вернитесь на первый ключевой кадр анимированной последовательности и убедитесь, что цвет метки изменился на желтый. 8. Если требуется продолжить расстановку контрольных точек, повторите описанную процедуру для каждой из них. Если вы используете при трансформации несколько контрольных точек, то выполняйте расстановку меток по часовой стрелке, начиная с левого верхнего угла изображения. Это обусловлено тем, что Flash обрабатывает контрольные точки в алфавитном порядке. После расстановки контрольных точек целесообразно провести тестовый запуск фильма и при необходимости скорректировать их расстановку и выбор. Всегда можно удалить лишние метки или добавить новые (в первом ключевом кадре анимации). После того как результат вас удовлетворит, вы можете "спрятать" контрольные точки. Перечисленные операции удобнее всего выполнять с помощью контекстного меню. Чтобы его открыть, следует щелкнуть на одной из меток правой кнопкой мыши. Анимация формы просто завораживает подростков - они могут по несколько минут любоваться самыми простыми преобразованиями. При этом, как показывает опыт, они в большинстве своем не видят нелогичности и "неправильности" преобразований, когда все находится в движении. Особенность применения автоматической анимации состоит в том, что с ее помощью можно анимировать только один объект на слое. Для создания сцены, в которой предполагается наличие нескольких анимированных объектов, требуется разместить каждый из них на отдельном слое. Выполним мини-упражнение: нарисуем рожицу и анимируем ее мимику. При выполнении этого задания можно долго биться над преобразованием, если всю рожицу нарисовать в ключевом кадре одного слоя, а в другом ключевом кадре этого же слоя нарисовать преобразованную рожицу. В принципе задание может получиться, но слишком много факторов при этом надо учесть. Ведь придется расставлять контрольные точки для всех основных элементов. А можно выполнить эту работу быстро, "полушутя": посчитаем, сколько "объектов" должны двигаться в мимике рожицы - например, само "лицо" (смена цвета и формы), рот (смена формы), глаза - два, брови две (!) - всего 6 объектов, значит должно использоваться 6 слоев (рис. 5.8).

49


увеличить изображение Рис. 5.8. Анимация "…вышла рожица кривая…" Чем проще объекты в ключевых кадрах, тем проще программе создать "правильные" промежуточные кадры при просчитывании анимации формы. Осталось только не перепутать слои при рисовании (будьте внимательнее!). Редактирование растровых изображений (IV вариант) Мы научились импортировать растровую графику и рассмотрели возможности ее применения. Однако импортированная растровая графика порой занимает слишком много места и часто стилистически не подходит к нарисованным объектам. Выходом из этой ситуации может служить трассировка - преобразование растровой графики в векторную. (Иногда такое преобразование также называют векторизацией.) При трассировке происходят замены группы пикселей, близких по цвету, в объекты, залитые похожим цветом. Чтобы выполнить трассировку, надо выполнить следующие действия.

50


• • •

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

Путем подбора установок в диалоговом окне "Векторизация" можно найти компромисс между размером файла и качеством изображения (рис. 5.9). • • • •

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

Рис. 5.9. Окно "Векторизация"

увеличить изображение Рис. 5.10. Результат преобразования растрового изображения в векторное при различных значениях параметров Получившиеся в результате векторизации контуры можно увидеть воочию, включив контурный режим отображения содержимого кадров (цветной квадратик рядом с именем слоя на временной шкале). Глядя на их количество (см. рис. 5.11), становится ясно, что если потребовать слишком высокого качества векторизации, то количество контуров, а с ним и размер файла, может не только не уменьшиться, но даже возрасти!

51


увеличить изображение Рис. 5.11. Контурный режим просмотра дает представление о количестве объектов результата трассировки Часто для трассированных изображений не помешает процедура сглаживания и оптимизации. Эта процедура вызывается командой меню Изменить/ Форма/ Оптимизировать. В появившемся диалоговом окне предлагается указать степень желаемого сглаживания и оптимизации кривых. Итак, мы получили оригинальное векторное изображение. Где и как оно может нам пригодиться? 1. При небольшой редакции можно использовать его в качестве фонов и объектов нашей анимации - неплохой вариант для тех, кто не умеет рисовать. 2. Можно пользоваться такой группой объектов как своеобразной палитрой цветов. Располагаем оттрассированный рисунок где-то в стороне на рабочем поле. После чего сложный рисунок рисуем сами, но не надо подбирать цветовые оттенки самим, достаточно снять цвет инструментом "Пипетка" с объекта. 3. Можно применить в анимации "эффект калейдоскопа": если объектов в кадре очень много, и во втором ключевом кадре - тоже приблизительно столько (в ключевых кадрах лежат оттрассированные растровые изображения), то при выполнении анимации формы кусочки красиво разлетятся, а потом снова соберутся в новое изображение. Примерные вопросы для контроля 1. Какие типы кадров используются для создания анимации? Как они создаются? 2. Чем (и внешне на линейке времени, и функционально) отличаются различные типы кадров в фильме? 3. Как создать покадровую анимацию? 4. Какую роль при создании фильма играют слои? 5. Как создаются, удаляются и перемещаются слои? 6. Что такое контурный режим работы в слое? 7. Для каких целей применяют анимацию формы? 8. Что такое контрольные точки и для чего они применяются? 9. Как правильно использовать контрольные точки? 10. Что такое трассировка изображений, для чего и как она делается? 11. В каких случаях можно получить неудовлетворительный результат трассировки?

52


6. Практическая работа: Все изменяется Содержание • • •

Задание Советы по выполнению Подсказки

Весна… В природе все меняется: солнце светит ярче, тает снег, бегут ручьи, из почек проклевываются первые листочки, распускаются цветы… Что надо знать и уметь, чтобы выполнить задание: уметь пользоваться инструментами рисования, уметь редактировать векторные объекты, знать основы создания покадровой анимации и анимации формы, знать основы преобразования растровых изображений в векторные. Задание Создать анимацию длиной не более 5 секунд на тему "Весна". Определим, что нужно сделать, чтобы выполнить работу Часть 1 1. Придумайте несложный сюжет. o На голубом фоне неба — ветка с почками, появляется солнце, из почек появляются листики. o Снеговик, из-за горизонта всходит солнце, снеговик тает. o Из земли появляется росток, на нем появляются листики, бутон, бутон раскрывается в цветок. o Что-то другое на ваш вкус. 2. Мысленно разделите свой сюжет на отдельные кусочки, представьте, сколько слоев вам потребуется для анимации — где можно воспользоваться анимацией формы, а где потребуется покадровая анимация. 3. Выполните свой замысел. 4. Сохраните свою анимацию. Часть 2 Попробуйте свои силы в создании эффекта калейдоскопа, используя два оттрассированных растровых пейзажа (например, зимний и летний). Желаем успеха! Советы по выполнению • •

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

53


Рис. 1. Анимация линий — контуров • • •

• • • •

• •

Не забывайте, что анимация формы предполагает и изменение цвета — из темно-зеленых почек могут вырастать светло-зеленые листики, солнце из красного становится яркожелтым и т. д. Чтобы не получилось "абракадабры" в преобразовании всех объектов, помните про расположение каждого анимированного объекта на разных слоях. Если вы забыли про предыдущий совет и все-таки нарисовали несколько объектов (для последующего анимирования) на одном слое, вам поможет команда контекстного меню "Распределить по слоям". Чтобы воспользоваться ею, выделите все объекты на слое, щелкните правой кнопкой на выделенном и выберите эту команду. Каждый объект окажется на отдельном слое. Не путайте слои! Частая первоначальная ошибка: в первом ключевом кадре слоя — "солнце", а в последнем — "сугроб". Выбирайте на временной линейке нужный слой и кадр, прежде чем изобразить что-то. Переименуйте слои так, чтобы с первого взгляда вам было ясно, что находится на данном слое. Чтобы не "испортить", закрывайте готовые слои "замком" от возможности редактирования. Если вам потребовалось "двойное" применение контрольных точек (анимация формы через ключевой кадр переходит в новую анимацию формы), поставьте в середине два ключевых кадра. Первый ключевой кадр (в середине) закончит первую анимацию формы по меткам, второй ключевой кадр задаст новые точки для следующей анимации формы. (Метки предыдущей и последующей анимации формы могут находиться в одном ключевом кадре, но это затрудняет просчет для программы, и результаты могут быть самыми непредсказуемыми.) Нарисовать фигуру сложной формы можно инструментом "Кисть": возьмите кисть с заливкой цветом — и рисуйте на здоровье. Если случайно была включена кнопка "Рисование объектов", выделите все нарисованное и "разбейте", применив команду "Разделить". Если вас что-то не устраивает, редактируйте командами "Стрелка", "Ластик" и др. При создании объекта (рисунка) не забывайте про всю рабочую область. На ней можно разместить детали, части, копии. При трассировке пейзажа подберите подходящие параметры так, чтобы деталей было много. 54


• • • • •

Сохраняйте промежуточный результат! Всегда есть вероятность какого-то сбоя. Сохранение файла сбережет вам время и нервы. Сохраняйте окончательный результат! Тестируйте работу "глазами пользователя". Окончательную анимацию командой "Экспорт" из меню "Файл" сохраните как SWF-файл. Используйте изменение масштаба просмотра. При сильном увеличении хорошо видны все недочеты рисунка. Можно использовать инструменты просмотра изображения панели инструментов, а можно воспользоваться комбинацией клавиш Ctrl+ и Ctrl-, что гораздо удобнее. Чтобы проиграть фильм со скоростью, заданной в окне настройки фильма, то есть так, как он будет проигрываться в браузере, нажмите клавишу Enter. Чтобы остановить просмотр, нажмите ее еще раз. Каждое нажатие этой клавиши останавливает просмотр или запускает его с того же места. Чтобы просмотреть фильм с начала, надо перетащить головку воспроизведения на первый кадр, а затем нажать клавишу Enter. Все это время, сами того не зная, мы находились в среде разработки, или в авторской среде Flash, и просматривали авторский фильм. Авторский фильм (с расширением fla) — это фильм именно в том виде, в каком его видит автор в процессе создания. Он содержит всю информацию об объектах, их структуре, устройстве кадров и сцен. Этот файл всегда можно отредактировать, открыв его в программе Flash. Открыв готовый авторский фильм, вы достаточно быстро сможете разобраться, как он устроен. В браузере или проигрывателе зритель видит совсем другой фильм. Он видит публикацию — файл с расширением swf, который получился из авторского фильма после публикации. В процессе публикации фильм освобождается от всей ненужной зрителю информации.

Подсказки Рассмотрим подробно сюжеты, предложенные как примеры в задании. 1. На голубом фоне неба — ветка с почками, появляется солнце, из почек появляются листики. o Фон надо изменить на голубой. o Первый (самый нижний) слой — "солнце". Первый ключевой кадр: "солнце" на рабочем столе справа снизу. Последний ключевой кадр (например, 20-й): "солнце" на монтажном столе в верхнем правом углу, размер его больше. Далее до 60-го кадра — дублируется ключевой кадр промежуточными. o Второй слой — "ветка". Изображение не анимируется, поэтому — только первый ключевой кадр и промежуточные длительностью 60 кадров. o Третий (и последующие слои) — "почки-листочки". Первый ключевой кадр на (например) 20-м кадре, последний — на 60-м. В первом ключевом кадре "почка" в форме маленького листочка темно-зеленого цвета, в последнем — тот же объект, увеличенный с помощью трансформации и с изменением цвета. И — анимация формы. o Чтобы добавить "еще один листок на ветку", повторяем действия в новом слое. Или можно скопировать кадры предыдущего слоя, вставить их на новый слой и отредактировать расположение "почки" и "листочка".

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

55


o o

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

Для выполнения второй части задания: • • • • • •

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

увеличить изображение Рис. 3. Расположение кадров для второй части задания

56


7. Лекция: Анимация движения. Работа с текстом Содержание • • •

Цели занятия Содержание заняти�� o Анимация движения o Создание анимации движения Примерные вопросы для контроля

Цели занятия • • • •

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

Содержание занятия Рассмотрим вопросы, связанные с возможностью применения программы Flash для введения и обработки текста. Нашей целью не является редактирование больших объемов текста. Однако бывает нужно вывести на экран пояснительные подписи или сделать титры. А может быть захочется, чтобы текст стал частью анимации, например, сделать сами буквы движущимися объектами. Идей может быть множество. Чтобы добавить текстовое поле, следует выполнить следующие действия: 1. Включить инструмент "Текст". Этот инструмент относится к инструментам рисования, но мы не рассматривали его до настоящего момента. 2. Щелкнуть мышью в той позиции на столе, куда требуется поместить текстовое поле. В результате появится текстовый курсор, окруженный выделяющей рамкой, - заготовка к текстовому блоку. Текстовые блоки могут быть трех типов. Нам потребуется только первый из них - "Статический текст". 3. Набрать текст. Все команды панели свойств инструмента Текст можно разделить на три группы: • • •

"традиционные" команды работы с текстом (изменение шрифта, размера, стиля написания…); команды выравнивания и трекинга (тоже достаточно распространенные); дополнительные команды, которые мы рассматривать не будем. Вряд ли они пригодятся нам для наших задач.

Выделить существующий текстовый блок можно тремя инструментами: "Текст", "Стрелка" и "Свободное преобразование". Инструментом "Текст" следует пользоваться в том случае, когда нужно изменить часть текста. Инструментом "Стрелка" можно перемещать текстовые блоки по экрану, так же как и любые другие графические объекты. Их можно поворачивать, масштабировать и искажать инструментом "Свободное преобразование". При выделении текстового блока инструментом "Стрелка" или "Свободное преобразование" можно провести изменения форматирования всего текста в текстовом блоке с помощью панели свойств (рис. 7.1). Очень удобный раскрывающийся список шрифтов и поле ввода для размера этих шрифтов не нуждаются в комментариях. Команды редактирования шрифта и абзаца хорошо знакомы по текстовым редакторам. Графический редактор позволяет преобразовать текстовый блок в рисунок. Это делается в два этапа. Сначала выделенный текст командой меню "Изменение/Разделить" разбивается на

57


увеличить изображение Рис. 7.1. Панель свойств при вводе и редактировании текста отдельные буквы. Но это все еще буквы, а не рисунки. Для того чтобы превратить их в рисунки, нужно еще раз, выделив их, применить команду из меню "Изменение/Разделить". С этого момента буквы стали графическими объектами, "похожими на буквы". Можно изменить форму этих объектов, цвет и стиль изначальных контуров и заливок. Попробуем применить наши знания на практике - создадим свои замысловатые буквы, залитые линейным многоцветным градиентом или растровым рисунком (рис. 7.2). 1. Активизируем инструмент "Текст". Введем любой текст, например "FLASH". Ничего, что размер и цвет букв не производят впечатления. Все впереди. 2. Инструментом "Стрелка" выделим текстовый блок. Текстовый блок окажется окруженным тонкой синей рамкой. 3. В панели свойств выберем шрифт Arial Black. Поэкспериментируем: зададим другой цвет букв, зададим другой размер шрифта. Размер, цвет и шрифт немедленно изменятся. Убедимся, что тип созданного текстового блока - статический. 4. Инструментом "Свободное преобразование" изменим размер и пропорции текста. 5. Разделим текст на отдельные буквы. Для этого применим команду меню "Изменение/Разделить" или эту же команду из контекстного меню правой кнопки мыши. 6. Выделим все буквы рамкой и еще раз применим команду "Разделить". Каждая буква стала отдельным рисунком. 7. Редактируя отдельно каждую "букву", изменим их формы и придадим им какой-нибудь замысловатый вид. 8. Создадим в панели "Цвет" градиентную заливку (или выберем растровый рисунок). 9. Выделим все "буквы" вместе и, активизировав инструмент "Ведро с краской", одним щелчком зальем сразу все буквы. Теперь буквы переливаются разными цветами. 10. Если это покажется необходимым, можно отредактировать заливку с помощью инструмента преобразования градиента. Экзотическая, оригинальная надпись готова. Кстати, нам потребуется эта процедура и в другом случае: вдруг вы выберете для текста какойнибудь "нестандартный" шрифт, и при показе вашего фильма на другом компьютере этот шрифт не отобразится. Лучше заранее "подстраховаться" и перевести все надписи из текста в объекты.

58


a)

b)

59


c)

d)

Рис. 7.2. Создание "рисованных" букв

60


Анимация движения Существует другой тип автоматической анимации - если в процессе анимации существенные характеристики объекта (например, его форма) не изменяются, а изменяются лишь такие его параметры, которые могут быть вычислены компьютером. Такими параметрами объекта являются, например, его текущие координаты, размеры или ориентация на рабочем поле. В этом случае достаточно задать состояние объекта анимации в начале и в конце движения. Подобная анимация объекта получила название анимации движения. Анимацию движения можно применить к объектам, форма которых неизменна. Какие это объекты? Во-первых, это сгруппированный рисунок, т. е. такой, форма которого зафиксирована. Во-вторых, объектом анимации движения может служить текстовый блок или отдельная буква (форма букв тоже строго фиксирована). Третьим типом объектов является экземпляр символа. Что такое группа и текстовый блок, мы уже знаем, а с символами и их экземплярами еще познакомимся. Создание анимации движения В качестве первого шага при создании анимации движения создаем для нее отдельный слой (правило "каждому анимированному объекту - отдельный слой" остается в силе). Затем в пустой ключевой кадр этого слоя (такой кадр можно создать клавишей F7 в любом месте слоя) помещаем или создаем объект анимации: группу, текстовый блок или экземпляр символа. На достаточном удалении по линейке кадров (простой подсчет: частота кадров, умноженная на секунды. Т е. если анимация будет идти 3 секунды, надо найти 36-й кадр) с помощью клавиши F6 создаем копию этого ключевого кадра. Здесь будет конечная фаза анимации. Редактируя в этом ключевом кадре изменения расположения, размеров, пропорций или ориентации объекта анимации, получим конечную фазу анимации. Более "глубокие" виды редактирования, например с применением режима редактирования групп или с применением команды меню "Разделить" - не допускаются. Начальная и конечная фазы анимации должны быть получены из одного и того же объекта. Перейдем к первому ключевому кадру, щелкнув в ячейке кадра. В панели свойств выберем из списка "Анимация - Движение". Такой выбор, как хорошо видно на рис. 7.3, немедленно определяет сиреневый цвет промежуточных кадров временной шкалы, и появляется стрелка, соединяющая начало и конец анимации. Если вместо стрелки появляется штриховая линия, значит, что-то сделано не так и анимации скорее всего не будет. Даже если анимация и получится, очевидно, сбой произойдет позднее. Вот некоторые причины ошибки: в кадре находится неподходящий объект (например, просто несгруппированный рисунок), в кадре сохранились "остатки" каких-то объектов, движение применяется, например, к двум группам сразу. Взгляните на панель свойств кадра: если там появилась желтая треугольная кнопка с предупреждающим знаком (!), то Flash пытается сообщить вам об ошибке.

Рис. 7.3. Временная линейка с раскадровкой анимации движения

61


При выборе "Движение" в панели свойств открываются дополнительные параметры настройки "анимации движения" (рис. 6 4).

увеличить изображение Рис. 7.4. Панель свойств при выборе анимации движения • Чтобы анимация шла корректно, проследим за тем, чтобы был установлен флажок "Масштаб", иначе не будет возможности изменения пропорций. • При выборе положительных значений параметра "Замедлить" анимация будет идти замедленно, а при выборе отрицательных - ускоренно. • В списке "Поворот" можно предусмотреть принудительный поворот по часовой стрелке или против. В окошке рядом можно задать количество таких принудительных оборотов объекта в процессе анимации. Изменение положения центра вращения можно изменить инструментом "Свободное преобразование". Заставим объект двигаться по кругу. 1. Начнем с того, что нарисуем в первом кадре квадрат (звезду, круг…). Удалим у фигуры контур (если он нарисован). 2. Сгруппируем рисунок. Зачем? У нас всего один объект? Но этот объект - не группа, не текстовый блок и не экземпляр символа. Поэтому - группируем. 3. Выделим группу инструментом преобразования и перенесем центр будущего вращения на некоторое расстояние, а сам объект-группу сдвинем от центра монтажного стола. 4. Оценим длительность анимации - если наша анимация будет длиться в течении 4-6 кадров, даже компьютер не сможет сделать ее плавной. Условимся, что в данном случае нам "хватит" 30 кадров. 5. Перейдем в тридцатый кадр. Вставим ключевой кадр - копию первого кадра - с помощью клавиши F6. 6. Вернемся в первый кадр. 7. В панели свойств кадра выберем анимацию движения. В дополнительном списке "Поворот" обязательно выберем принудительное вращение либо по часовой, либо против часовой стрелки. Количество принудительных оборотов - один. Вот и все. Просмотрим (протестируем) фильм. Если требуется, внесем изменения. Да, внесем. Причем такие: в некоторой точке наш объект должен уменьшиться, а потом вернуться в первоначальный размер. Для этого: 1. поставим считывающую головку в середину "сиреневой полоски" на временной шкале; 2. на монтажном столе видим некоторое промежуточное положение нашего объекта. В этом месте нет ключевого кадра, но его легко сделать, просто выполнив одним из способов вставку ключевого кадра; 3. во вновь созданном ключевом кадре изменим масштаб нашего объекта; 4. можно тестировать фильм. Можно создать анимацию движения двумя способами: o o

с помощью панели свойств кадра; с помощью команды "Создать анимацию движения" контекстного меню по правой кнопке мыши на кадре. 62


Для анимации движения с помощью команды контекстного меню выполняем следующие действия: o o

o

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

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

1. Создать ключевые кадры с начальным и конечным положениями объекта, задать между ними анимацию движения. 2. Щелкнуть правой кнопкой мыши на имени слоя, содержащего анимацию движения. В контекстном меню выбрать "Добавить путеводитель" или щелкнуть по соответствующей пиктограмме внизу слева. 3. В результате в списке слоев появится новый слой, помеченный специальным значком (рис. 7.5), а имя слоя с анимацией сдвинется вправо - признак того, что этот слой стал ведомым. 4. Щелкнуть на имени слоя-путеводителя, чтобы сделать его активным. 5. В ключевом кадре этого слоя любым инструментом рисования контуров нарисовать траекторию движения объекта. Эта линия не должна содержать пересекающиеся участки, разрывы и не должна быть замкнутой. 6. Выделить ключевые кадры анимации и в панели свойств кадра (включив анимацию движения) задать: 7. "Ориентировать по пути", если нужно сориентировать ось симметрии объекта по направляющей линии; 8. "Привязать", так как надо привязать точку регистрации объекта к направляющей движения (Без этого параметра объект не захочет двигаться по кривой!). Протестировать фильм.

63


увеличить изображение Рис. 7.5. Создание траекторий движения Основные ошибки при направлении объекта по заданному пути две: учащиеся не привязывают объект во втором ключевом кадре или направляющая линия имеет мелкие (видимые только при большом увеличении) разрывы. Выполним еще одно мини-упражнение - движение карандаша по бумаге. Для этого: 1. В первом ключевом кадре нарисуем карандаш или импортируем его изображение из клипарта в векторном формате. 2. Сгруппируем изображение карандаша, инструментом "Свободное преобразование" повернем карандаш так, как он выглядит со стороны при письме (можно расположить карандаш в левой части монтажного стола, поскольку пишем мы слева направо). 3. В данном случае очень важно расположение точки регистрации нашего объекта - поставим ее на кончик грифеля карандаша. 4. Через 30-40 кадров создадим последний ключевой кадр анимации. 5. В нем перенесем изображение карандаша в другое место монтажного стола, Можно чутьчуть повернуть его.

64


6. Выделим все кадры одновременно, "протянув" курсор мыши вдоль полоски кадров, и в панели свойств выберем анимацию движения и поставим "галочки" рядом с параметрами "Ориентировать по пути" и "Привязать". 7. Добавим слой, управляющий движением, - путеводитель. 8. В ключевом кадре этого слоя нарисуем траекторию движения. Проверим, что полоска промежуточных кадров совпадает с длиной нашей анимации; ключевого кадра в конце не нужно. 9. Протестируем фильм. 10. Возможно, вы все сделали аккуратно и карандашик начал движение по нарисованному пути, но наш карандаш вертится вокруг кривой как ненормальный. Отключим галочку около параметра "Ориентировать по пути" - движение карандаша стало реалистичней. Обратите внимание: траектория пути объекта невидима в режиме тестирования фильма и не будет видна в готовом фильме. Если вы хотите видеть траекторию в фильме, ее надо скопировать и вставить на любой другой (видимый) слой (в меню редактирования существует команда "Вставить на место"). Вот и все! Основы автоматической анимации в программе Flash нами изучены. Осталось только познакомиться с более сложными приемами, чтобы стать настоящими профессионалами. Примерные вопросы для контроля 1. 2. 3. 4. 5. 6. 7. 8.

Как отредактировать текст? Как превратить текст в "нарисованные буквы"? Для каких целей применяют анимацию движения? Чем анимация движения отличается от анимации формы? Чем анимация движения отличается от пошаговой анимации? Для каких объектов можно создать анимацию движения? Каким образом задаются настройки анимации движения? Для чего и как создается слой-путеводитель?

65


8. Практическая работа: Пляшущие человечки Содержание • • •

Задание Советы по выполнению Подсказки

Жизнь — движение. Можно анимировать шарики, круги, прямоугольники, линии и другие фигуры… Но давайте замахнемся на грандиозную задачу: заставим двигаться (танцевать) "человечка". Что надо знать и уметь, чтобы выполнить задание: уметь пользоваться инструментами рисования, уметь редактировать векторные объекты, знать основы создания покадровой анимации и анимации движения. Задание Создать анимацию движения рисованного человечка длиной не более 5-10 секунд. Определим, что нам нужно сделать, чтобы выполнить работу 1. Придумайте вашего рисованного человечка (на самом деле это может быть любой персонаж). 2. Мысленно разделите ваш персонаж на "отдельные кусочки" — голову, руки, ноги, тело. Чем больше частей, тем интереснее будет анимация. Как максимальный вариант — 14 частей: голова, тело, каждая рука из трех частей, каждая нога тоже из трех частей. 3. Определите, из каких объектов будет состоять персонаж (овалы, прямоугольники, отрисованные кистью, более сложной формы). Представьте, сколько слоев вам потребуется для анимации (по слою для каждой части + можно добавить фоновое изображение). 4. Выполните свой замысел — нарисуйте и анимируйте персонаж. 5. Сохраните свою анимацию. Желаем успеха! Советы по выполнению • • •

• • • • • •

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

66


Рис. 1. Точки трансформации у головы, ног и рук персонажа-марсианина •

• • • • •

Придерживайтесь строгой последовательности действий: 1. изображение объекта; 2. группировка; 3. изменение точки трансформации; 4. создание копии в новом ключевом кадре; 5. редактирование объекта — поворот в этом ключевом кадре. Чтобы анимация руки из трех частей была синхронной, ключевые кадры "руки" до��жны находиться в одной точке временной линейки. А расположение ключевых кадров другой руки может не совпадать с "первой рукой". Удобно создавать ключевые кадры сразу на нескольких слоях. Для этого выделите через все необходимые слои позицию для вставки кадра и вставьте ключевой кадр. Сохраняйте промежуточный результат! Всегда есть вероятность какого-то сбоя. Сохранение файла сбережет вам время и нервы. Сохраняйте окончательный результат! Тестируйте работу "глазами пользователя".

67


увеличить изображение Рис. 2. Синхронное создание ключевых кадров в нескольких слоях одновременно • •

Окончательную анимацию командой "Экспорт" из меню "Файл" сохраните как SWF-файл. Используйте изменение масштаба просмотра. При сильном увеличении хорошо видны все недочеты рисунка. Можно использовать инструменты просмотра изображения панели инструментов, а можно воспользоваться комбинацией клавиш Ctrl+ и Ctrl-, что гораздо удобнее. Можно попробовать сделать анимацию из обработанного растрового изображения, например фотографии друга. Для этого сфотографировать его надо стоящим с немного раздвинутыми руками и ногами. После импортирования командой "Изменить/Разделить" превратить растровое изображение в прямоугольник с растровой заливкой, убрать фон фотографии (этим мы занимались в уроке 3). Потом инструментом "Лассо" разрезать на части: руки, ноги, голова. Группируем каждую часть и… .

Подсказки •

• • • • • • •

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

68


69


9. Практическая работа: Титры. Как представить свою работу Содержание • • •

Задание Советы по выполнению Подсказки

Заставим буквы влетать на экран и, расталкивая друг друга, складываться в слово, выезжать целыми предложениями сбоку, снизу, сверху, прыгать по экрану — создадим анимационные титры или просто анимированную надпись. Что надо знать и уметь, чтобы выполнить задание: уметь пользоваться инструментами рисования, уметь редактировать векторные объекты, уметь использовать различные заливки, уметь создавать покадровую анимацию, знать основы создания анимации движения, иметь представление о создании и редактировании текстовых блоков. Задание Создать анимацию движения текста длиной не более 10 секунд. Определим, что нам нужно сделать, чтобы выполнить работу 1. Создать текстовый блок. 2. Придумать, как будет происходить анимация текста: o буквы по одной появляются из-за "кадра" и складываются в слово; o текст появляется весь сразу из точки в середине экрана и, увеличиваясь в размерах, "приближается" к зрителю; o эффект титров "Звездных войн" — текст в перспективе уезжает вдаль; o что-то другое. Вариантов — множество. 3. Выполнить замысел. 4. Сохранить свою анимацию. Желаем успеха! Советы по выполнению • •

• •

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

70


увеличить изображение Рис. 1. Вариант оформления текста • •

• • • • • • • • •

Если слой не закрыт от редактирования, всегда можно выделить все объекты на всех слоях сразу. Если буквы должны собраться в слово или предложение, воспользуйтесь следующим советом: расположите в первом ключевом кадре текст так, как он должен выглядеть в конце анимации, скопируйте ключевой кадр вставкой второго ключевого кадра через некоторый промежуток времени на временной линейке. Теперь можно изменять расположение и позицию букв в первом ключевом кадре и задавать анимацию движения. Тот же способ можно применить, если хотите, чтобы буквы попрыгали на месте (например, по очереди) или, скажем, сжимались, как резиновые: сначала несколько ключевых кадров с копиями текста "в нужном месте", а потом в определенных кадрах редактируем буквы. Не путайте слои! Выбирайте на временной линейке нужный слой и кадр, прежде чем изобразить что-то. Чтобы не "испортить", закрывайте готовые слои "замком" от возможности редактирования. Чтобы не путаться при редактировании слоев, иногда полезно еще и скрыть "ненужные" в данный момент слои, нажав на "глаз" рядом с именем слоя. Сохраняйте промежуточный результат! Всегда есть вероятность какого-то сбоя. Сохранение файла сбережет вам время и нервы. Сохраняйте окончательный результат! Тестируйте работу "глазами пользователя". Окончательную анимацию командой "Экспорт" из меню "Файл" сохраните как SWF-файл. Используйте изменение масштаба просмотра.

Подсказки 1. Сначала с помощью инструмента "Текст" создадим текстовый блок и напишем слово (или фразу), которое должно оживать на экране. В окне панели свойств убедимся в том, что тип созданного текстового блока — статический. 2. Командой "Разделить" разобьем текст на отдельные буквы, предварительно выделив его. 3. Командой "Распределить по слоям" разведем буквы написанного нами слова по отдельным слоям. В результате каждая буква, оставаясь в первом кадре, окажется в своем слое. 4. Займемся дизайном каждой буквы. Для этого выделим кадр, содержащий конкретную букву. 71


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

увеличить изображение Рис. 2. Вариант "влета" букв

72


увеличить изображение Рис. 3. Продолжение анимации. "Приседание" каждой буквы по очереди 7. На линейке кадров на некотором удалении от начала будущей анимации нажатием клавиши F6 создадим копию первого кадра. Этим мы зададим конечную фазу будущей анимации. 8. Выделив первый кадр, вернемся в начало анимации. Изменим стартовые значения анимации. Для этого выделим изображение буквы и вынесем его за пределы рабочей области. Инструментом "Свободное преобразование" изменим пропорции этого изображения, повернем его, если нужно — перенесем центр вращения в другое место. 9. Оставаясь в первом кадре, выберем в панели свойств в списке "Анимация" значение "Движение". Там же поворот установим в один оборот. Теперь буква будет влетать из-за пределов рабочего поля, постепенно изменяя свои размеры и поворачиваясь. 10. Аналогично создадим анимации движения всех букв по очереди. 11. Время движения различных букв может быть разным.

73


10. Лекция: Символы. Сложная анимация Содержание • •

Цели занятия Содержание занятия o Редактирование символов o Редактирование экземпляра символа o Создание сцен и их использование Примерные вопросы для контроля

Цели занятия • • • • •

дать учащимся общие сведения о структуре библиотеки и символах; научить создавать статические и анимированные символы; научить применять символы, как экземпляры символов в анимации; ознакомить учащихся с понятием сцены; научить создавать, удалять и переименовывать сцены.

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

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

Поскольку для символа особенностью является его связь с библиотекой, стоит сказать и о других элементах, помещаемых в библиотеку, — импортированные изображения (растровые и векторные), звуковые файлы и видеоклипы. Любой из этих элементов при импортировании обязательно попадает в библиотеку и в дальнейшем может быть многократно использован в фильме. У символа-фрагмента есть важное предназначение — к нему могут обращаться команды языка Action Script. Этот символ максимально используется при создании интерактивной анимации. За подробностями можно обратиться к Инструкциям разработчика, а мы эти возможности пропускаем.

74


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

Рис. 10.1. Панель библиотеки фильма Любой объект в панели можно просмотреть (или прослушать), их можно упорядочить, удалить, сделать дубликат символа (например, для создания нового, но похожего символа) и др. Для символа каждого типа используется своя пиктограмма. Библиотека фильма связана с конкретным фильмом, при создании нового файла она уже существует. 'Удалить ее нельзя, можно только удалять или добавлять элементы в библиотеку. Часто, забывая про этот факт, учащиеся создают символ в одном фильме, начинают новый фильм, а потом безуспешно в библиотеке нового фильма ищут созданный ранее символ. Или, проделав большую работу по созданию фильма, очищают все, чтобы начать сначала, забыв про библиотеку. В заголовке панели библиотеки выводится название фильма. Символы из библиотеки переносятся на монтажный стол перетаскиванием мышью. Причем можно воспользоваться не только библиотекой данного фильма, но и любого другого, если открыта его панель библиотеки. При использовании "чужого" символа он тут же сохраняется в библиотеке фильма. Если нужно воспользоваться библиотекой конкретного фильма, не открытого в данный момент, можно в меню "Файл" выбрать команду "Импорт \ Открыть внешнюю библиотеку". Сам фильм открываться не будет, а его библиотекой можно будет воспользоваться. Итак, как же создать символ? Существуют два способа: либо сначала создается некоторый объект, который затем преобразуется в символ, либо создается "заготовка" под символ и заполняется. Рассмотрим создание статических символов. Тип символа (графика или фрагмент ролика) не имеет для нас в данном случае никакого значения. 1-й способ. Преобразование в символ существующего объекта.

75


• • •

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

2-й способ. Создание нового символа. • • •

В меню "Вставить" или в панели библиотеки выбрать команду "Новый символ". В открывшемся диалоговом окне ввести имя символа и выбрать его тип. Имя желательно давать "говорящее". Автоматически откроется режим редактирования символа — создать его.

Статические символы хороши в том случае, когда надо поместить в кадр несколько "похожих" объектов. Возможен вариант, что некие объекты используются в нескольких мультфильмах, тогда опять же выручат символы. Где же нам потребуются анимированные символы? Человек идет по дорожке; бабочка летит над полем; перебирая лапками, в кадр вползает жук; едет автомобиль (крутятся колеса, мигают фары…); кружок превращается в квадратик, при этом двигаясь по сложной траектории, и многое другое, — для такого сложного движения потребуются анимированные символы, которые будут вложены в анимацию основного фильма. Рассмотрим процесс создания анимированного символа (как графики, так и фрагмента ролика). Как и в случае со статическими символами, способов создания — два. 1-й способ. Создание нового символа. • • • •

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

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

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

Учащимся очень нравится легкость создания символа — "В контекстном меню правой кнопки мыши выбрать команду "Преобразовать в символ" или нажать клавишу F8, можно просто перетащить объекты в окно библиотеки". Этот способ они автоматически пытаются применить и к 76


созданию анимированного символа, но получают статический символ и недоумение по поводу результата. После завершения создания символа его можно включить в сцену перетаскиванием из библиотеки на монтажный стол. Анимация экземпляра символа (как статического, так и анимационного) внутри основного фильма выполняется любым из способов, рассмотренных ранее. Например, чтобы заставить жучка, перебирающего лапками (анимированный фрагмент ролика), двигаться по "кадру", можно использовать анимацию движения, дополненную направляющей движения. Учащиеся часто пугаются полученного результата — при нажатии клавиши Enter анимации экземпляров символа не видно. Обратите внимание: при просмотре анимации имеется одна важная особенность — если вы воспроизведете анимацию, просто нажав клавишу Enter, то собственную, "внутреннюю" анимацию символа-фрагмента вы не увидите. Чтобы увидеть все анимационные преобразования, надо в меню "Управление" выбрать тестирование сцены или ролика. Редактирование символов Во Flash предусмотрено три варианта редактирования символа: • • •

в режиме редактирования символа (именно такой способ используется при создании нового пустого символа); в отдельном окне; в контексте сцены, то есть непосредственно на столе.

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

"Редактировать" — включение режима редактирования символа; "Редактировать на месте" — редактирование символа в "сцене"; "Редактировать в новом окне".

В любом случае над панелью временной диаграммы появляется имя редактируемого символа, а на его изображении — отметка точки привязки в виде крестика. После завершения работы с символом следует выйти из режима его редактирования. Редактирование экземпляра символа Каждый экземпляр имеет собственные атрибуты, которые могут редактироваться без изменения символа. Можно изменять цвет и прозрачность экземпляра, переопределять его тип (например, преобразовывать графический символ в фрагмент ролика); можно наклонять, вращать или масштабировать экземпляр без того, чтобы воздейство��ать на символ. Чтобы редактировать свойства экземпляра, необходимо использовать панель свойств (формат панели зависит от типа экземпляра) (рис. 10.2). Список "Цвет" и связанные с ним элементы управления обеспечивают изменение следующих визуальных атрибутов экземпляра: • •

яркости; оттенка цвета (тон); 77


прозрачности (альфа).

увеличить изображение Рис. 10.2. Панель свойств экземпляра графического символа Кроме того, для создания более сложных цветовых эффектов может быть использован еще один пункт — "Дополнительно". В этом случае можно создавать новые цветовые оттенки, комбинируя их с прозрачностью экземпляра (рис. 10.3).

увеличить изображение Рис. 10.3. Пример использования оттенка цвета и прозрачности. На столе - 7 экземпляров одного символа К экземпляру символа любого типа может быть применена уже знакомая процедура разбиения объекта на самостоятельные компоненты — "Разделить". В результате ее выполнения экземпляр разделяется на контуры и заливки, каждый из которых может редактироваться отдельно от других. Кроме того, разбиение экземпляра приводит к разрыву связи между ним и исходным символом. Создание сцен и их использование В процессе изучения материала и создания мини-анимаций нам вполне хватало одной сцены (вся работа проводилась в Сцене 1). По мере возрастания сложности проекта для распределения логических фрагментов его содержимого постоянно придется добавлять новые сцены. Для добавления сцены используется панель "Сцена" из меню "Окно" (рис. 10.4).

78


Рис. 10.4. Панель работы со сценами Щелкните на кнопке + ("Добавить сцену"), в окне панели "Сцена" появится имя новой сцены. По умолчанию каждой новой сцене присваивается имя с порядковым номером. При создании новой сцены Flash переключается на нее автоматически. Копирование анимации, а тем более сложной сцены с большим количеством слоев, — достаточно громоздкий процесс. В панели существует команда "Дублировать сцену", позволяющая создавать точные копии сцены путем нажатия всего одной кнопки. Поскольку имена, по умолчанию назначаемые дубликатам и новым сценам, отличаются только порядковым номером, при поиске определенного содержимого сцену трудно идентифицировать. Поэтому в больших проектах целесообразно присваивать сценам специальные имена, которые характеризуют их содержимое. Порядок размещения имен сцен на панели Сцена определяет последовательность воспроизведения сцен в фильме. Имена сцен на данной панели можно перемещать, устанавливая порядок воспроизведения сцен независимо от последовательности, в которой они были созданы. Для переключения между различными сценами фильма в процессе работы над Flash-проектом можно использовать следующие варианты: • •

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

Рис. 10.5. Кнопка "Изменить сцену" Протестировать можно как весь фильм целиком, так и отдельную сцену. Примерные вопросы для контроля 1. Что такое библиотека фильма? 2. Что является содержанием библиотеки? 3. Что такое символ? Какие типы символов вы знаете? 79


4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15.

Как можно добавить символ в библиотеку? Как создать символ? Чем отличается графический символ от символа-фрагмента ролика? Как можно создать анимированный символ? Можно ли воспользоваться библиотекой другого файла? Как? Чем отличается символ от экземпляра символа? Как можно отредактировать символ? Как можно отредактировать экземпляр символа? Как разорвать связь между экземпляром и самим символом? Для чего во Flash используются сцены? Как создать сцену? Как просмотреть фильм целиком? отдельную сцену?

80


11. Практическая работа: Танцы в парке Содержание • • •

Задание Советы по выполнению Подсказки (один из вариантов выполнения)

Используем возможности Flash для эффективной и быстрой работы. Что надо знать и уметь, чтобы выполнить задание: уметь пользоваться инструментами рисования линий и форм, уметь редактировать векторные объекты (в том числе копирование, трансформирование, выравнивание и распределение объектов), уметь использовать различные заливки, уметь создавать покадровую анимацию, знать основы создания анимации движения. Задание Создать анимацию, состоящую из двух сцен. При создании анимации использовать только символы различных типов. Определим, что нам нужно сделать, чтобы выполнить работу 1. Сюжет для данной анимации будет следующим. o 1-я сцена: на однотонном фоне появляется текст — например, приглашение на вечеринку. Текст мягко растворяется. o 2-я сцена: Парк. Площадка, окруженная деревьями и кустами. На площадке танцуют человечки. 2. Для танцующих человечков потребуется предыдущая работа (практическая работа № 4). Желаем успеха! Советы по выполнению • • • • • • •

Не путайте слои! Выбирайте на временной линейке нужный слой и кадр, прежде чем изобразить что-то. Чтобы не "испортить", закрывайте готовые слои "замком" от возможности редактирования. Сохраняйте промежуточный результат! Всегда есть вероятность какого-то сбоя. Сохранение файла сбережет вам время и нервы. Сохраняйте окончательный результат! Тестируйте работу "глазами пользователя". Окончательную анимацию командой "Экспорт" из меню "Файл" сохраните как SWF-файл. Используйте изменение масштаба просмотра.

Подсказки (один из вариантов выполнения) 1. В первой сцене на темно-синем фоне будет появляться наш текст. Зададим фон анимации. 2. Чтобы текст появлялся "из ничего", а потом растворялся, выполним следующее. o Напишем текст. o Выберем для него крупный размер так, чтобы текст занимал приблизительно половину или две трети монтажного стола. o Выберем подходящий шрифт. o Цвет для текста возьмем светлый и яркий, например светло-желтый (если фон сделаем все-таки темно-синим). o Возможны любые варианты анимации надписи, применяемые (и не примененные нами) в предыдущей практической работе. o Конвертируем нашу надпись в символ типа "Графика".

81


3. Создадим анимацию экземпляра символа "Текст". С первого по второй — текст будет проявляться, со второго по третий — дадим возможность зрителю прочитать его, с третьего по четвертый — надпись плавно "растворится". Для этого: o посчитаем количество кадров для раскадровок. "Проявление" — 1 секунда, "чтение" — 3 секунды, "исчезновение" — 1,5 секунды; o создадим еще три ключевых кадра, с копиями первого; o в первом ключевом кадре выберем для экземпляра символа эффект прозрачности Альфа=0, для кадра — анимацию движения; o в третьем ключевом кадре зададим анимацию движения (обратите внимание — мы не меняем расположение и масштаб экземпляра "Текст"!); o в четвертом ключевом кадре для экземпляра символа ставим опять "полную прозрачность". 4. Протестируем сцену. Текст должен появляться и через 3 секунды исчезать. 5. Создадим сцену 2, добавив в панели "Сцена". 6. Для создания парка нарисуем дерево (конечно, можно и два дерева, и куст, и фонарь… ©). 7. Нарисованное дерево конвертируем в символ. 8. Расположим на монтажном столе экземпляры этого символа, изменяя размер, пропорции, подсветку цветом (Тон), яркость. Можно сделать зеркальное отражение. 9. Создадим новый слой и нарисуем овальную танцевальную площадку. (Ее можно нарисовать и в первом слое.) 10. Откроем файл с "танцующим человечком". Его мы будем использовать для создания героев нашей нынешней анимации. Скопируем все кадры анимации "человечка". 11. Вернемся назад, перещелкнув по названиям файлов на вкладках рабочей области. 12. Создадим новый символ, зададим ему тип "Фрагмент ролика". 13. Вставим скопированные кадры во временную линейку этого символа. 14. Вернемся в сцену (вторую!) и разместим на "площадке" экземпляры символа "Человечек", меняя параметры этих экземпляров. Подумайте — можно получить "привидение", а можно каждому персонажу "отбросить тень". 15. Можно протестировать сцену. (Как же так? У нас ведь всего один кадр!) Поскольку у символа "Фрагмент ролика" независимая временная линейка, движение будет воспроизведено даже при одном кадре (при воспроизведении клавишей Enter анимацию символа-фрагмента вы не увидите. Выберите в меню "Управление" команду тестирования сцены или всего ролика). 16. А вот если персонажи должны "войти в кадр", уйти, исчезнуть, — без некоторой раскадровки и анимации движения не обойтись. 17. Дерзайте, пробуйте, творите… Все в ваших руках.

82


12. Лекция: Слой-маска. Маскирование слоев Содержание • • •

Цели занятия Содержание занятия Примерные вопросы для контроля

Цели занятия • • •

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

Содержание занятия Слой-маска позволяет создать эффект отверстия, через которое "просвечивает" нижележащий слой (или слои). Это еще один тип специального слоя. Если на рабочем поле ключевого кадра слоя-маски имеется какой-либо объект с заливкой, то он является "окном", сквозь которое становится видным содержимое расположенного ниже маскируемого слоя. Применение "слоя-маски" без анимации не может быть сколько-нибудь целесообразно — вырезать часть изображения и показать только его можно более простыми средствами. Если анимировать изображение, созданное в слое-маске, и перемещать его по экрану, то сквозь возникшее перемещающееся "окно" будет видно содержимое лежащего ниже слоя. Этот прием можно использовать, например, для того, чтобы высветить "фонариком" часть изображения темной комнаты или ночного пейзажа. На маскируемом слое также может быть создана анимация любого типа. Для того чтобы преобразовать обыкновенный слой в слой-маску нужно выделить его на временной шкале и выбрать команду "Маска" в контекстном меню (рис. 12.1). Слой-маска и маскируемый им 83


слой при этом автоматически оказываются заблокированными. Блокировка обоих слоев является непременным условием возможности просмотра их работы прямо на рабочем поле (при нажатии клавиши Enter). Если надо отредактировать любой из этих слоев, то блокировку придется снять. Создадим простую слой-маску — тот самый "фонарик в темноте". • • • • • • •

На первом нижнем слое у нас будет фон — импортированное растровое изображение леса. Зададим цвет фона темно-синим (пока непонятно зачем, ведь картинку растянем на весь стол). Создадим 60 промежуточных кадров (ключевые кадры не нужны, картинка-фон статична). Создадим новый слой и в ключевом кадре нарисуем закрашенный круг. Он и будет нашим "окном в лес", а вернее лучом света от фонарика. Зададим анимацию движения для этого круга. Щелкнем правой кнопкой мыши на названии слоя и в контекстном меню выберем "Маска". После просмотра анимации можно снять блокировку слоев, отредактировать движение и снова закрыть блокировку для корректного просмотра.

В файле может быть много слоев-масок. Каждый из них может маскировать несколько слоев. Нельзя только маскировать слой-маску (И слой-маска не может быть самым нижним слоем. А почему?) Если с помощью мыши перенести обычный слой непосредственно под слой-маску он станет маскируемым. Также легко сделать слой немаскируемым: для этого нужно перетащить мышкой маскируемый слой так, чтобы он оказался выше слоя-маски, или воспользоваться контекстным меню. Удалить слой-маску можно так же, как и обычный слой.

Рис. 12.1. Создание слоя-маски Маскируемый слой становится невидимым не в том смысле, что он отгорожен и закрыт другим слоем (слоем-маской, например), а в том смысле, что становится абсолютно прозрачным и потому невидимым.

84


Если в слое-маске имеется какой-либо объект, то любая его заливка является "окном непрозрачности", и сквозь это "окно" становится видным содержимое маскируемого слоя. При этом будет видно содержимое слоя, расположенного еще ниже и не связанного со слоем-маской! Это обстоятельство позволяет создавать очень эффектные анимации с участием слоев, расположенных под маскируемым слоем. Создадим эффект постепенного появления или исчезания изображения (такой переход можно применить для смены сцен в мультфильме). Для этого используем анимацию движения изображения, находящегося на слое-маске. 1. Пусть наш эффект будет длиться 3 секунды. По умолчанию скорость анимации 12 кадров секунду, значит, она должна продолжаться 36 кадров. 2. На первый слой разместим первоначальную "сцену" (чтобы не тратить время на рисование, можно импортировать два растровых изображения). Продлим ее длительность на 36 кадров. 3. На следующий слой поместим следующую "сцену" с той же длительностью (при эффекте полного перехода между изображениями не должно быть на втором слое "пустых", незакрашенных областей). 4. Создадим новый слой. 5. В первом кадре этого будущего слоя-маски на рабочем поле (например, слева от монтажного стола) нарисуем небольшой прямоугольник и сгруппируем его. Группировка необходима для того, чтобы затем применить к этому прямоугольнику технологию анимации движения. 6. Оставаясь в этом слое, выделим последний 36-й кадр и нажмем клавишу F6. Теперь этот кадр стал ключевым кадром, содержащим копию сгруппированного прямоугольника. 7. С помощью инструмента "Свободное преобразование" растянем нарисованный прямоугольник так, чтобы он закрывал весь монтажный стол. 8. Создадим анимацию движения. 9. Сделаем этот слой маской для второго слоя.

увеличить изображение Рис. 12.2. Эффект перехода между "сценами" анимации с помощью слоя-маски Можно было обойтись и без группировки нарисованного прямоугольника, но тогда в панели свойств следовало бы выбрать анимацию формы (рис. 12.2). В данном случае это не имеет значения. Если в слое-маске задать анимацию от объекта, закрывающего весь монтажный стол, к "точке" — минимальному объекту или к объекту, расположенному вне монтажного стола, переход пойдет "в обратную сторону" — от "сцены 2" к первой "сцене". Как было сказано выше, можно использовать неподвижную маску в качестве "окошка", в котором идет анимация. В связи с этим фактом — еще одно полезное практическое применение масок. Очевидно, при выполнении заданий возникали случаи, когда при экранном просмотре готовой анимации все выглядит идеально. Но если увеличить размер окошка (или посмотреть анимацию в браузере), становятся видны "рабочие моменты" — вхождение в кадр, "невидимый" край и др. Чтобы не дать пользователю это увидеть, можно все слои анимации на последнем этапе маскировать прямоугольной неподвижной маской по размеру монтажного стола (рис. 12.3).

85


увеличить изображение Рис. 12.3. Маскирование всех слоев Примерные вопросы для контроля 1. Что такое слой-маска? Как и для чего он создается? 2. Как преобразовать обычный слой в маскируемый и обратно? 3. В каких слоях могут создаваться маски?

86


13. Практическая работа: Земля и Солнце Содержание • • •

Задание Советы по выполнению Подсказки

Используем богатейшие возможности Flash для эффектной, зрелищной и сложной анимации — заставим на экране нашу матушку-Землю крутиться вокруг своей оси и вокруг Солнца. Что надо знать и уметь, чтобы выполнить задание: уметь пользоваться инструментами рисования, уметь редактировать векторные объекты, уметь использовать различные заливки, уметь импортировать векторную и растровую графику и редактировать ее, уметь создавать покадровую анимацию, анимацию движения и формы, уметь создавать и пользоваться символами различных типов, знать основные приемы маскирования слоев. Задание Создать анимацию — модель вращения Земли вокруг Солнца. Солнце, вокруг Солнца крутится по орбите Земля, Земля сама вращается вокруг собственной оси, вокруг Земли крутится по орбите Луна. Определим, что нам нужно сделать, чтобы выполнить работу 1. Для выполнения работы нам потребуются три анимированных символа: "солнце", "земля" и "луна". 2. "Солнце" можно изобразить в форме круга без контуров с радиальной заливкой, переходящей на краях в "прозрачный цвет". Можно задать ему небольшую пульсацию, например анимацией формы, и сохранить как символ-фрагмент ролика. 3. Для создания "Земли" используем слой-маску в форме круга. Под слоем-маской надо создать анимацию движения земной поверхности (см. Подсказки). 4. "Луну" можно сделать аналогично. Можно (из-за небольших размеров) анимацию поверхности не делать. 5. Создать из двух символов "земля" и "луна" символ-фрагмент ролика "вращение Луны вокруг Земли". 6. На основной временной линейке расположить экземпляр "солнце" и задать анимацию движения по орбите клипу "земля-луна". 7. Добавить иллюминатор "космического корабля", через который и просматривается весь фильм. Желаем успеха! Советы по выполнению •

• •

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


• • • • • • •

Вы всегда можете изменить расположение, форму и количество "смотровых окон" маски. Чтобы сделать ее доступной для редактирования, достаточно снять с нее блокировку, щелкнув на значке замка (маскируемый слой можно не разблокировывать). При этом автоматически снимается и режим маскирования. Вспомните процесс создания символов разного типа (без использования символов это задание не сделать!). Не путайте слои! Выбирайте на временной линейке нужный слой и кадр, прежде чем изобразить что-то. Чтобы не "испортить", закрывайте готовые слои "замком" от возможности редактирования. Сохраняйте промежуточный результат! Всегда есть вероятность какого-то сбоя. Сохранение файла сбережет вам время и нервы. Сохраняйте окончательный результат! Тестируйте работу "глазами пользователя". Окончательную анимацию командой "Экспорт" из меню "Файл" сохраните как SWF-фай��.

Подсказки 1. На первом этапе создадим "Землю" (почувствуйте себя Богом ©). o Создадим новый символ-фрагмент ролика и в нем будем изображать планету. o Для достоверного изображения поверхности Земли нам потребуется плоская карта или изображение материков. Найдите такое изображение в Интернете, возможно, оно есть в векторном клип-арте (в крайнем случае, нарисуйте "свою Землю"). Импортируйте найденное изображение в фильм. o Расположите на столе два экземпляра карты встык (рис. 13.1).

увеличить изображение Рис. 13.1. Расположение изображений для создания "Земли" o o

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

88


увеличить изображение Рис. 13.2. Создание маски o o o o o o

Щелкните правой кнопкой мыши на имени слоя-маски и в контекстном меню выберите пункт "Маска"; с этого момента новый слой становится маской. Вы увидите только круг, залитый текстурой поверхности земли. Чтобы включить режим редактирования, необходимо снять блокировку слоев. Можно временно отключить режим маскирования. Для группы из двух изображений задайте анимацию движения так, чтобы "прокрутилась вся карта". В строке слоя-маски добавьте промежуточные кадры по длительности анимации. Проверьте движение в режиме маскирования и отредактируйте его, если это потребуется. Наша "земля" должна совершить "полный оборот" вокруг своей оси. Дополните изображение планеты реалистичными деталями — можно наложить сверху еще один такой же круг, но с радиальной градиентной заливкой от прозрачного к темно-синему для эффекта объема, можно добавить полупрозрачный круг для эффекта атмосферы и т. д. (рис. 13.3).

Рис. 13.3. Пример изображения Земли После того как получите подходящий результат, вернитесь из режима редактирования символа в основной фильм. 2. Второй этап — создание "Луны". o Простейший способ — нарисовать круг серого цвета и преобразовать его в графический символ. 3. Создадим символ "земля-луна". Для этого: o создадим новый Фрагмент ролика; o вставим в точку регистрации символ "земля"; o на следующий слой вставим символ "луна" и зададим ему движение по овалу (не забудьте на слое-путеводителе в направляющей сделать небольшую точку разрыва линии); o

89


вернитесь в основной фильм, вставьте экземпляр этого символа и протестируйте его: "земля" должна крутиться вокруг своей оси, а "луна" — по орбите вокруг "земли"; o если все получилось, как задумано, можно переходить к следующему этапу. Создайте символ "солнце". Аналогично предыдущим действиям выполните движение экземпляра символа "землялуна" вокруг "солнца". Добавьте фон — космос. Добавьте верхний слой — окно "иллюминатора". Его можно сделать фоновым с "дыркой" или воспользоваться средствами маскирования для всех нижних слоев. o

4. 5. 6. 7.

Рис. 13.4. Пример получившегося изображения

90


14. Лекция: Звук. Сохранение, экспорт, публикация Содержание • • •

Цели занятия Содержание занятия o Озвучивание фильма o Публикация фильма Примерные вопросы для контроля

Цели занятия • • • • •

дать учащимся общие представления об озвучивании анимации; научить "вставлять" и синхронизировать звуковые дорожки; рассмотреть возможности сохранения результата работы — анимации; ввести понятие публикации фильма; рассмотреть возможности различных форматов при публикации фильма.

Содержание занятия Озвучивание фильма Звук всегда добавляет зрелищности и эффектности любому произведению. Конечно, от использования звука наша анимация только выиграет. Мы наконец-то добрались до работы со звуком. При создании типичного анимационного фильма все происходит наоборот: диалоги персонажей и звуковое сопровождение записываются предварительно, а анимация впоследствии подстраивается под звуковую дорожку. Такой подход позволяет значительно упростить синхронизацию анимационного действия, например мимику персонажей и их движение, со звуком. Flash не располагает средствами создания звуков, но позволяет импортировать звуковые файлы в различных форматах и затем корректировать параметры звука в соответствии с требованиями фильма. Наиболее часто при озвучивании анимации используются следующие цифровые форматы стереофонического и монофонического звука: WAV, AIFF, MP3. Добавленные в фильм звуки помещаются в библиотеку фильма, наряду с растровыми изображениями и другими символами. Чтобы добавить звук к фильму, необходимо выполнить следующие действия: 1. Импортируйте в фильм один или несколько звуковых файлов. 2. Добавьте на временную шкалу фильма новый слой, который будет использоваться в качестве звукового (применение отдельного звукового слоя облегчает тестирование и редактирование фильма). Разрешается создавать несколько звуковых слоев, чтобы при воспроизведении фильма звуки на разных слоях, совпадающие во времени, воспроизводились одновременно. 3. Выберите в звуковом слое ключевой кадр, с которого вы хотите начать воспроизведение звука. 4. Перетащите из библиотеки звуковой файл на монтажный стол. Или щелкните в ячейке озвучиваемого кадра и в панели свойств выберите в раскрывающемся списке "Звук" требуемый звуковой файл; на панели станут доступны элементы управления, используемые для установки параметров звука, а также его исходные параметры: ширина полосы частот, моно/стерео, разрядность, длительность, занимаемый объем памяти (рис. 14.1).

91


увеличить изображение Рис. 14.1. Панель свойств кадра при озвучивании 5. В раскрывающемся списке "Синхр" (от "синхронизация") выберите способ синхронизации звука: o Событие — звук синхронизируется посредством привязки его к определенным событиям фильма; воспроизводится с момента перехода на соответствующий ключевой кадр и продолжается независимо от временной диаграммы, даже если фильм будет остановлен (если, конечно, звук достаточно продолжителен); o Начать — вариант аналогичен предыдущему, за исключением того, что при очередном наступлении заданного события начинается воспроизведение нового экземпляра звука, даже если воспроизведение предыдущего еще не закончено; o Остановить — прекращается воспроизведение указанного звука; o Поток — обеспечивает "насильственную" синхронизацию анимации и потокового звука; воспроизведение потокового звука всегда прекращается при завершении анимации; потоковый звук никогда не продолжается дольше, чем воспроизводятся связанные с ним кадры анимации. 6. Можно установить длительность звучания; она определяется как число повторений звука. Непосредственно после выбора в списке "Звук" одного из звуковых файлов его амплитудная характеристика отображается на временной шкале (рис. 14.2).

увеличить изображение Рис. 14.2. Представление на временной шкале озвученного кадра

92


Публикация фильма Вся работа по созданию Flash-фильма происходит при редактировании файла с расширением FLA. В таком файле хранятся и обрабатываются все нарисованные и импортированные изображения, звуки, библиотека символов. Законченный файл должен пройти процесс компиляции (или визуализации). Основным форматом Flash-фильма, который обеспечивает его просмотр с помощью Flash-плеера (либо автономно, либо через окно Web-браузера), является формат SWF. Это единственный формат, который поддерживает все интерактивные возможности фильма. Тем не менее существует масса случаев, когда нам может потребоваться другой формат при сохранении результата. Прежде всего это формат HTML-документа, посредством которого производится загрузка SWF-файла в браузер: сначала в браузер загружается HTML-файл, содержащий вызов Flash-плеера, а тот, в свою очередь, уже открывает SWF-файл. Чтобы создать "готовую анимацию", достаточно единственной команды "Опубликовать", входящей в меню "Файл". Она обеспечивает визуализацию исходного FLA-файла не только в формат SWF, но и в другие графические и видеоформаты. Кроме того, с помощью этой команды генерируется и HTML-документ, предназначенный для запуска фильма с заданными параметрами. Для сохранения анимации в видеоформате можно использовать и команду "Экспорт", которая также входит в меню "Файл" (рис. 14.3).

Рис. 14.3. Форматы экспорта анимации Остановимся на некоторых подробностях. • •

При экспорте в формат AVI (Microsoft Video) качество получаемого видео сильно зависит от выбранной компрессии (кодека). Внимание: библиотечные символы-фрагменты ролика в этом формате "теряют" свое движение! При экспорте в видеоформат Quick Time фильм экспортируется наилучшим образом. Этот вариант предпочтителен, если предполагается дальнейшее редактирование анимации в других программах редактирования видео (например, Adobe Premiere). При тестировании фильма, а также при публикации его с помощью команды "Опубликовать" используются параметры публикации, установленные по умолчанию. Чтобы установить собственные значения этих параметров, следует воспользоваться командой "Параметры" публикации из меню "Файл". Выбор данной команды приводит к открытию диалогового окна, с помощью которого и выполняются требуемые изменения. Окно настройки параметров публикации содержит несколько вкладышей (рис. 14.4):

93


Рис. 14.4. Окно установки параметров публикации •

• •

Форматы — данная вкладка предназначена для выбора форматов файлов, которые должны быть созданы при публикации фильма; сняв флажок "Использовать имена по умолчанию", вы можете ввести собственное имя для каждого визуализируемого файла; если необходимо, можно указать полный маршрут доступа к файлу, причем для каждого файла свой; при выборе одного из форматов в окне Параметры публикации создается соответствующая вкладка; Flash — данная вкладка обеспечивает установку параметров экспорта файла FLA в формат SWF; HTML — элементы этой вкладки обеспечивают выбор некоторых дополнительных параметров размещения фильма на HTML-странице. Кнопка ОК обеспечивает сохранение установленных параметров; введенные значения будут использоваться по умолчанию для всех последующих публикаций. Кнопка "Опубликовать", помимо сохранения установленных параметров, выполняет публикацию анимации во все выбранные форматы.

94


Рассмотрим отдельные настройки на вкладышах, которые могут понадобиться при публикации фильма. На вкладыше Flash содержатся следующие элементы (рис. 14.5):

Рис. 14.5. Вкладка Flash • • • • •

раскрывающийся список версий позволяет выбирать версию Flash-плеера, для которой должен быть сгенерирован SWF-файл; флажок "Сжать ролик", если установлен, указывает на необходимость дополнительного сжатия фильма при его экспорте в формат SWF; ползунковый регулятор "Качество JPEG-изображения" и связанное с ним текстовое поле обеспечивают выбор приемлемого (на ваш взгляд) качества импортированной растровой графики; кнопки "Задать" позволяют изменить параметры звукового сопровождения фильма; флажок "Переопределить параметры звука", если установлен, разрешает индивидуальную установку параметров для отдельных элементов звукового сопровождения; это позволяет создавать две версии звукового сопровождения: лучшего качества (но большего размера)

95


— для локального использования и более низкого качества — для публикации в Интернете. Публикация фильма в формате Windows Projector (exe) означает создание самовыполняющегося файла с расширением .exe, который содержит в себе и SWF-файл, и Flash-проигрыватель. Преимущество такого файла — его можно запустить "везде и всегда" (независимо от программ, установленных на компьютер). Чтобы оценить установленные вами параметры публикации, целесообразно воспользоваться командой "Предварительный просмотр публикации", входящей в меню "Файл". Следует отметить: в нашем курсе не уделяется особого внимания созданию анимаций специально для Интернета, а следовательно, не рассматриваются вопросы оптимизации работы для уменьшения размера SWF-файла. В составе Flash существуют всевозможные средства для выполнения этой задачи. Чтобы ознакомиться с ними, следует обратиться к Инструкциям разработчика. Примерные вопросы для контроля 1. 2. 3. 4. 5.

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

96


15. Практическая работа: Хватит молчать! Содержание • • •

Задание Советы по выполнению Подсказки

Звук — один из самых недооцененных элементов мультипликации. Эффективное использование звука — один из самых творческих и важных компонентов успеха анимации. Что надо знать и уметь, чтобы выполнить задание: знать основы работы со звуком, способы синхронизирования его с анимацией. Задание Озвучить одну из своих предыдущих работ. Определим, что нам нужно сделать, чтобы выполнить работу 1. Импортировать звуковые файлы в фильм. 2. Задать синхронизацию звука и эффекты. 3. Сохранить полученный результат в различных форматах. Желаем успеха! Советы по выполнению • •

• • • •

Звук всегда добавляет зрелищности и эффектности любому произведению. Конечно, от использования звука наша анимация только выиграет. Flash не располагает средствами создания звуков, но позволяет импортировать звуковые файлы в различных форматах и затем корректировать параметры звука в соответствии с требованиями фильма. Наиболее часто при озвучивании анимации используются следующие цифровые форматы стереофонического и монофонического звука: WAV, AIFF, MP3. Добавленные в фильм звуки помещаются в библиотеку фильма, наряду с растровыми изображениями и символами. Добавьте во временную диаграмму фильма новый слой, который будет использоваться в качестве звукового (использование отдельного звукового слоя облегчает тестирование и редактирование). Разрешается создавать несколько звуковых слоев, чтобы при воспроизведении фильма звуки на разных слоях, совпадающие во времени, воспроизводились одновременно. Чаще всего звуковые слои располагают на верху временной шкалы. Звук, перенесенный во Flash, не может быть изменен. Изменение тона, эффекты отражения, уменьшение шумов необходимо редактировать до импортирования звукового файла. Однако некоторые технические изменения звука в программе возможны. Применяйте, если необходимо, звуковые эффекты из панели свойств звука. Они регулируют громкость динамиков и уровень сигнала в каждом из каналов. В раскрывающемся списке "Синхр" (от "синхронизация") выберите способ синхронизации звука: o Событие — звук синхронизируется посредством привязки его к определенным событиям фильма; воспроизводится с момента перехода на соответствующий ключевой кадр и продолжается независимо от временной диаграммы, даже если фильм будет остановлен (если, конечно, звук достаточно продолжителен); o Начать — вариант аналогичен предыдущему, за исключением того, что при очередном наступлении заданного события начинается воспроизведение нового экземпляра звука, даже если воспроизведение предыдущего еще не закончено; o Остановить — прекращается воспроизведение указанного звука; 97


Поток. Flash обеспечивает "насильственную" синхронизацию анимации и потокового звука; воспроизведение потокового звука всегда прекращается при завершении анимации; потоковый звук никогда не продолжается дольше, чем воспроизводятся связанные с ним кадры анимации. Определитесь, насколько высоким должно быть качество экспортируемого звука. Чем выше качество, задаваемое в параметрах публикации, тем больше размер результирующего файла. Нет необходимости устанавливать максимально возможное значение скорости передачи в битах для звука. Качество звука будет такое же, как если выбрать какое-нибудь среднее значение. А если экспортировать звук со скоростью 16 Кбит/с, файл уменьшится весьма значительно, но персонажи будут говорить так, как будто их посадили в жестяной бидон. Тестируйте работу "ушами пользователя". Обязательно прослушайте звук достаточно громко; возможно, стоит сменить настройки сжатия звука при публикации фильма. Умение находить баланс между качеством звука и размером файла достигается практикой и терпением. o

Подсказки •

Существует масса программ для записи звука. Во время записи старайтесь выдерживать неизменное расстояние до микрофона, а во время прослушивания устанавливать средний уровень громкости. Если при записи голоса слышно много хлопков и свистящих звуков, попробуйте поместить между ртом и микрофоном лист бумаги. Известны два типа звука — звуковое сопровождение и звуковые эффекты. К звуковому сопровождению относятся более мягкие внешние фоновые звуки, громкость которых должна быть минимальна (журчание ручья, шум улицы…). Звуковые эффекты могут применяться для привлечения внимания или тонкой подачи действия. Где вы возьмете звуки, зависит от вашей изобретательности, а имитация их — от вашей фантазии. Например, сминание пластиковой упаковки — треск лесного пожара, хлопание перчаткой о перчатку — звук хлопающих крыльев. Естественно, огромное количество различных звуков можно найти в цифровом виде. Когда мы говорим, то произносим звуки. Звукам соответствуют основные положения рта. Как правило, в анимации положений рта от 6 до 10. В анимации для передачи мимики рта говорящего часто применяется метод аппликаций — просто помещается на лицо определенное изображение рта. Не надо пытаться совместить каждый звук с определенным изображением. Ищите акцентированные звуки. Для этого можно потренироваться перед зеркалом, произнося слова преувеличенно четко. Чтобы работа по озвучиванию персонажа стала проще, поместите слой с диалогом непосредственно над слоем, содержащим рот персонажа. Голова персонажа при таком методе находится на отдельном слое. Не забывайте применять к изображению головы растяжение и сжатие. Слова, которые произносит персонаж, должны отражаться его телом и выражением лица. Лучший способ усыпить зрителя — обыкновенные говорящие головы. Для анимирования диалогов можно применять и растровые изображения, поместив челюсть и рот "фотографии" на разные слои.

98


16. Лекция: Основы создания анимационного фильма Содержание • •

Цели занятия Содержание занятия o Фазы производства анимационного фильма o Идея, концепция o Раскадровка будущей анимации o Монтаж o Технологические приемы монтажа сцен

Цели занятия • • •

дать учащимся общие знания о процессе создания анимации с точки зрения производства продукта — создания творческого проекта; дать учащимся представление об основных документах проекта — сценарии и раскадровке; дать учащимся понимание возможностей правильного монтажа отдельных сцен в готовый продукт.

Содержание занятия Это занятие дает только общетеоретические основные знания. Но эти знания помогут в создании нашего творческого проекта — заключительного этапа нашего курса. Фазы производства анимационного фильма •

• • • •

Разработка концепции проекта. Идея анимационного фильма может родиться в голове его создателя (например, из сценки, подсмотренной на улице) или быть предложена заказчиком (например, преподавателем). В любом случае, удачная концепция анимации – это хороший задел при подготовке сценария и раскадровок. Написание сценария и подготовка раскадровок. Сценарии и раскадровки являются основными рабочими документами. Только наличие толкового сценария и грамотно выполненных раскадровок может обеспечить эффективность и плодотворность столь сложной работы, как создание анимационного фильма. Создание объектов и персонажей сцены, а также ее окружения. Непосредственно анимация сцены. На этом этапе происходит добавление требуемых визуальных эффектов, монтаж эпизодов анимационного фильма, наложение звука и тому подобное. Монтаж сцен в единое целое. Визуализация анимации. С учетом того, что каждая минута анимации может содержать 840 и более кадров, требующих визуализации, надо подходить к этому этапу максимально собранно и ответственно.

Идея, концепция Для хорошего результата нам не обойтись без сценария. Сценарий не должен быть длинным (чем длиннее сценарий, тем большая длительность анимации предполагается). Но сценарий должен "напоминать сочинение" — в нем должны в обязательном порядке присутствовать: вступление, развитие событий, заключение. Чтобы анимация получилась не "просто так", попробуйте ответить на следующие вопросы: • • • •

Для чего нужна работа? Для кого (для какой группы населения) она выполняется? Кому она будет интересна? Как работа должна выглядеть? Каким образом ее можно будет посмотреть — в интернете, на диске, на DVDпроигрывателе…? 99


В каком формате, объеме, времени требуется представить работу?

Раскадровка будущей анимации Если мы вспомним определение компьютерной анимации, то поймем, почему в основе любой дискуссии о времени анимации, длительности различных ее сцен и последовательности происходящих в них событий лежит понятие кадра. Наиболее часто можно встретить следующее определение компьютерной анимации: анимация – это процесс создания множества изображений, демонстрирующих изменение объекта во времени, и воспроизведение их с такой скоростью, что создается иллюзия непрерывного (плавного) движения. И действительно, если любая анимация — это множество сменяющих друг друга кадров, то при ее создании важнейшей представляется информация о том, какие это кадры и какова их последовательность и длительность. Раскадровки анимации, называемые также сюжетными панелями, появились в 1930-х годах, когда художники-аниматоры осознали, что традиционные текстовые сценарии мало подходят для создания анимационных фильмов. И объясняется это тем, что в отличие от "живого" действия анимация стремится обычно выразить все через визуальный ряд. Типичная раскадровка (сюжетная панель) содержит обычно наброски наиболее важных сцен и сопутствующие им сценарные замечания, относящиеся к синхронизации анимации, эффектам камеры, звуковому сопровождению и прочему (табл. 12.1). Давайте рассмотрим терминологию, используемую при подготовке раскадровок. • • • • • • • • •

Установочный кадр — обзорный кадр в начале каждого эпизода анимации (сцены), позволяющий зрителю понять, где и когда происходит действие, с чьим участием и тому подобное. Также часто используется название мастер-кадр. Крупный план — для акцентирования внимания зрителя на одном объекте он может занимать весь кадр или большую его часть. Очень крупный план — съемка объекта с еще более близкого расстояния, например, только глаза актера. Цель та же, что и у предыдущего кадра. Средний план — кадр, снятый со среднего расстояния, например, фигура человека от пояса до головы. Дальний план — кадр, сделанный с удалением от объекта съемки. Например, машина и человек, стоящий возле нее. Общий план — сделанный со значительного удаления кадр. Например, весь склон горы и группа альпинистов на нем. Наезд — изменение фокусного расстояния объектива (поля зрения камеры) для изменения крупноты плана, например, выхода из установочного кадра. Отслеживание — съемка движущейся камерой через место действия. Часто используется для обозначения движения к определенному объекту или от него. Преследование — вариант отслеживания, при котором камера постоянно держит в фокусе определенный объект.

100


Таблица 12.1. Пример раскадровки будущей анимации № Длительность Крупность кадра 1 3с Общий план

2

3

Описание

Установочный кадр — вид улицы в маленьком городке Крупный план Человек идет по улице, разыскивая нужный дом Секционированный Половина экрана — экран тот же человек (средний план), половина — звонящий мобильный телефон (крупный план) … …

Звук Тихая мелодия

На фоне мелодии — резкий звук звонка телефона

Секционированный экран — два или более изображений, одновременно выведенных на экран. Например, два телефонных собеседника, находящихся в различных частях города, но присутствующих на экране одновременно.

Раскадровка может выглядеть как в табл. 12.1. Часто отдельным столбцом добавляют небольшие эскизы общего вида кадра. Значительно облегчить составление сценариев и раскадровок может, как ни странно, школьная программа по литературе и то, что в ее рамках рассказывают о структуре художественных произведений. Ведь фильмы во многом подобны литературным произведениям: они имеют вступление (экспозицию), в них можно выделить завязку, кульминацию и развязку. Монтаж Чаще всего под монтажом подразумевается окончательная "сборка" анимационного, кино-или видеофильма из отдельных фрагментов — кадров. Однако надо помнить, что "нарезать" и "склеить" различные эпизоды еще не значит смонтировать фильм. Грамотный монтаж подразумевает знание и творческое (а не просто механическое!) применение целого набора правил. В большинстве случаев при монтаже требуется добиться такого эффекта, чтобы при просмотре зритель не замечал того, что видеоряд состоит из нескольких склеенных между собой кадров или сцен. Это правило иногда называют комфортным восприятием склейки (стыка) кадров. Эти правила эмпирически вырабатывались на протяжении десятилетий существования кинематографа и впоследствии были теоретически обоснованы и экспериментально доказаны в работах кинорежиссера и теоретика кино Льва Кулешова. Вот основные из правил монтажа видеоряда. •

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


• • • • • •

Монтаж по фазе движения. Это правило напрямую связано с предыдущим. Если на плане, снятом с удаления, виден человек, карабкающийся на гору, то и после склейки он должен в кадре, снятом средним планом, продолжать взбираться на нее. Монтаж по направлению движения. Изменение направления движения объекта съемки на стыке кадров не должно превышать 90 градусов. Грамотно смонтировать отличающиеся по направлению движения кадры поможет короткий статичный эпизод в конце первого из них. Монтаж по ориентации в пространстве. Это очень важное при монтаже диалогов правило. Не выводите зрителя (камеру) за пределы линии взаимодействия объектов. Монтаж по композиции. Если при монтаже кадров, отличающихся масштабом, объект смещается более чем на треть ширины (высоты) кадра, это может вызвать временную потерю зрителем центра внимания. Помните об этом. Монтаж по цвету и свету. В месте стыка соседние кадры не должны резко отличаться по цвету и — как частный случай — по свету. Использование перебивок. Перебивка — это вклеенный между двумя другими кадрами кадр, резко отличающийся от них по содержанию, но всегда прямо или косвенно связанный с ними по сюжету. Например, при монтаже отдельных частей движения по местности (поход) перебивками могут служить короткие кадры с видом карты маршрута и пунктами нахождения в данный момент.

Технологические приемы монтажа сцен Подобрав кадры, отвечающие ��казанным выше монтажным правилам, необходимо решить, какие между ними должны быть переходы, как эти сцены должны быть состыкованы. Вот некоторые из наиболее часто используемых приемов смены сцен (кадров). • • • • • •

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

102


17. Практическая работа: Анимация эффектов Содержание • •

Задание Советы по выполнению o Огонь o Вода o Ветер o Дождь или снег o Имитация объема на плоскости o Стекло

Мир эффектов — еще один жанр анимации. Наличие во Flash функции создания символов обеспечивает возможность циклического воспроизведения фрагмента в течение длительного времени. Искусно сделанные элементы анимации, украшенной эффектами, могут повысить настроение или усилить впечатление от работы. Что надо знать и уметь, чтобы выполнить задание: уметь пользоваться инструментами рисования, уметь редактировать векторные объекты, уметь использовать различные заливки, уметь импортировать векторную и растровую графику и редактировать ее, уметь создавать покадровую анимацию, анимацию движения и формы, уметь создавать и пользоваться символами различных типов, знать основные приемы маскирования слоев. Задание Эта работа отличается от предыдущих заданий. Вам просто предлагаются советы по созданию некоторых природных и физических явлений, которые придадут живости и реалистичности вашей анимации. Какую из предложенных анимаций выбрать — решать вам. Желаем успеха! Советы по выполнению •

Команда "Смягчить края заливки" в меню "Изменить\Форма" — прекрасный инструмент, при помощи которого края объекта можно сделать мягкими. Для создания более обширных эффектов размытия лучше использовать Adobe Photoshop. При этом не следует забывать про прозрачный фон в этих файлах и про увеличение размера файла после импортирования такой графики. Возможно, в вашей анимации вы примените эффекты временной шкалы — взрыв, тень и т. д.

Огонь • •

Огонь можно разделить на два типа: маленькое пламя и большое. Менее крупные языки пламени обычно слегка колеблются и двигаются вверх-вниз. Если понаблюдать за свечкой, можно заметить, что движение очень спокойное, огонь колеблется из стороны в сторону, иногда высота пламени увеличивается. Для передачи движения пламени свечи достаточно создать четыре-пять ключевых кадров пламени и повторить их в разной последовательности. Пятно в нижней части языка пламени немного светлее остальной части. Оно может быть полупрозрачным, чтобы был виден фитиль. Для этого светлого ореола вокруг фитиля можно задать легкое круговое движение. Большой огонь отличается намного большей живостью. Пропорции и темперамент языков пламени могут быть всевозможными. Фактически самих рисунков пламени может быть около трех. Но каждому ключевому кадру надо придать оригинальности преобразованием — наклоном, масштабом, поворотом, изменением тона и др. Реалистическую глубину огня можно имитировать с помощью дополнительных слоев.

103


Вода •

Текстура воды постоянно меняется, поэтому анимировать воду достаточно трудно. Попробуем изобразить волны. Нарисуем 6 одинаковых прямоугольников в 6 ключевых кадрах (между ними по 4-5 промежуточных). В каждом ключевом кадре с помощью "Ластика" и "Кисти" сделаем верхний край в виде волн. Добавим анимацию формы между всеми кадрами. Если движение надо зациклить, поместим анимацию в символ. В этом случае надо, чтобы последний кадр анимации совпадал с первым. А чтобы этот кадр не дублировался, поставим ключевым предпоследний кадр и после этого последний удалим. В этом случае циклическая анимация будет без задержек. Для иллюзии глубины можно применить линейный градиент — чем дальше, тем темнее цвет.

Ветер •

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

Дождь или снег •

• •

Капли дождя или снежинки падают случайным образом. Создайте несколько символов с анимацией движения маленькой линии сверху вниз. Создайте новый символ. В нем разместите экземпляры этих символов на столе случайным (ни в коем случае не равномерным) образом. На основной линейке временной шкалы разместите несколько экземпляров получившегося нового символа, убедившись, что размеры и расстояния между ними неодинаковы. По мере приближения к земле объекты обычно набирают скорость. Используйте ускорение в анимации движения. Для создания иллюзии глубины поместите один слой с дождем перед персонажами, а другой — за ними.

Имитация объема на плоскости • • •

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

Стекло •

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

104


18. Лекция: Творческий проект к модулю "Создание компьютерной анимации в Adobe Flash CS3 Professional" Содержание • • • •

Что надо знать и уметь, чтобы выполнить задание: Определим, что нам нужно сделать, чтобы выполнить работу. Советы по выполнению Советы по анимации

"Коль можешь ты мечтать о чем-то Или способен это сделать — Не сомневаясь, начинай. Есть в смелости и сила, и талант, и волшебство" После изучения основной части модуля учащимся предлагаются творческие проектные работы по созданию анимации. Работа выполняется по собственному сценарию, в творческих группах от 2 до 4 человек. Эффективной формой контроля такой учебной деятельности является защита проекта, на которой учащиеся представляют свои разработки и защищают их. Учащиеся используют возможности Adobe Flash CS3 Professional для создания анимации по собственному сценарию. Что надо знать и уметь, чтобы выполнить задание: • • • • • • • •

уметь пользоваться инструментами рисования и редактирования векторных объектов; уметь создавать покадровую анимацию, анимацию движения и анимацию формы; уметь использовать символы и маскирование слоев; уметь озвучивать анимацию; уметь сохранять (публиковать) свою работу в соответствии с задачами работы; знать основы монтажа фильма; знать технические приемы монтажа сцен; знать методику написания монтажного листа (раскадровки).

Определим, что нам нужно сделать, чтобы выполнить работу. • • • • • • • • • • •

Разработайте концепцию проекта. Идея анимационного фильма может родиться в голове его создателя (например, из сценки, подсмотренной на улице) или быть предложена заказчиком (например, преподавателем). Оцените свои силы. В вашей творческой группе распределите "роли". Кто будет режиссером, кто — художником, кто — аниматором? Подготовьте сценарную заявку (лучше всего — в письменном виде). В сценарной заявке постарайтесь ответить на вопросы: Для чего нужна эта работа? Для кого она выполняется? Кому она будет интересна? Как работа должна выглядеть? Каким образом ее можно будет посмотреть — в интернете, на диске…? В каком формате, объеме, в какие сроки требуется представить работу? Напишите в сценарной заявке сценарий вашего "мультика". За основу сценария можно взять сюжет стихотворения, рассказа, анекдота, песни, а можно придумать его самим. Подготовьте раскадровки (монтажные листы). Сценарии и раскадровки являются основными рабочими документами. Создайте объекты и персонажей сцены, а также ее окружения.

105


• • •

Непосредственно анимация. На этом этапе происходит добавление требуемых визуальных эффектов, монтаж эпизодов анимационного фильма, наложение звука и тому подобное. Визуализация ан��мации. С учетом того, что каждая минута анимации может содержать 720 и более кадров, требующих визуализации, надо подходить к этому этапу максимально собранно и ответственно. Защитите свой проект (сценарная заявка + монтажный лист + сама анимация).

Желаем успеха! Советы по выполнению 1. Только наличие толкового сценария и грамотно выполненных раскадровок может обеспечить эффективность и плодотворность столь сложной работы, как создание анимационного фильма. Будьте предусмотрительны и планируйте все заранее, в самом крайнем случае планируйте в уме. Провал интересного проекта из-за плохого планирования — наихудший вариант. 2. Раскадровка может выглядеть как в таблице 1. Часто отдельным столбцом добавляют небольшие эскизы общего вида кадра. 3. Значительно облегчить составление сценариев и раскадровок может школьная программа по литературе и то, что в ее рамках рассказывают о структуре художественных произведений. Ведь фильмы во многом подобны литературным произведениям: они имеют вступление (экспозицию), в них можно выделить завязку, кульминацию и развязку.

Таблица 1. Пример раскадровки будущей анимации № Длительность Крупность кадра 1 3с Общий план

2

3

Описание

Установочный кадр — вид улицы в маленьком городке Крупный план Человек идет по улице, разыскивая нужный дом Секционированный Половина экрана — тот экран же человек (средний план), половина — звонящий мобильный телефон (крупный план) … …

Звук Тихая мелодия

На фоне мелодии — резкий звук звонка телефона

4. Надо помнить, что "нарезать" и "склеить" различные эпизоды еще не значит смонтировать фильм. Грамотный монтаж подразумевает знание и творческое (а не просто механическое!) применение целого набора правил. 5. В большинстве случаев при монтаже требуется добиться такого эффекта, чтобы при просмотре зритель не замечал того, что видеоряд состоит из нескольких склеенных между собой кадров или сцен. Это правило иногда называют комфортным восприятием склейки (стыка) кадров. 6. Те объекты, которые предполагается использовать в фильме неоднократно (хотя бы дважды), целесообразно сразу создавать как новые символы. 7. Хотя Flash и обладает достаточно "дружественным" интерфейсом, создание Flashфильмов является весьма непростым делом. Поэтому после завершения очередного шага полезно проверить полученный результат, протестировать его. Flash позволяет тестировать как отдельные сцены фильма, так и фильм в целом. 8. Если тестирование прошло успешно, не забывайте сохранить результат своей работы на диске. 9. Часто удобнее и быстрее выполнить команду, найдя ее в контекстном меню. Контекстное меню — это меню, которое открывается при щелчке правой кнопкой мыши на объекте, кадре или слое. В контекстном меню имеются только те команды, которые можно выполнить над данным элементом фильма. 10. Вы всегда можете изменить порядок расположения слоев, а также редактировать объекты одного слоя независимо от элементов других слоев. Однако при необходимости можно 106


11.

12.

13. 14.

15.

16.

17.

выбрать одновременно объекты из разных слоев и работать с ними как с единым целым. Например, можно изменить их цвет или сгруппировать. Число слоев, которые вы можете создать, ограничено только объемом оперативной памяти вашего компьютера и не влияет на размер файла публикуемого фильма. Для удобства работы со слоями в Flash реализована возможность хранения каждого набора взаимосвязанных слоев в отдельной папке слоев. Плавная перекрестная смена изображения одной сцены изображением другой либо постепенное исчезновение или проявление изображения достигаются использованием анимации символа, в который конвертирована копия всей сцены (применяется эффект прозрачности экземпляра символа). Вытеснение старого изображения новым также достигается использованием анимации движения символа, в который конвертирована копия всей сцены. Во многих случаях бывает удобно видеть на столе одновременно содержание всех (или нескольких) кадров анимации. Flash обеспечивает несколько вариантов такого совмещения. Выбор варианта производится с помощью кнопок, расположенных у нижнего края панели временной линейки: o шлейф — включение режима одновременного просмотра нескольких кадров; при этом активный кадр (на котором установлена считывающая головка) отображается полноцветным, а остальные — более блеклыми; отображаемый диапазон помечается на шкале временной диаграммы специальными маркерами. Перемещая их с помощью мыши, можно изменять границы диапазона; в этом режиме для редактирования доступен только активный кадр; o контуры шлейфа — включение режима, при котором соседние с активным кадры представлены только контурами; в этом режиме для редактирования также доступен только активный кадр; o редактировать несколько кадров — включение режима, при котором все видимые кадры доступны для редактирования; используется для переноса или изменения размеров объектов сразу в нескольких кадрах. Поскольку изображение, созданное на фоновом слое, должно быть видимым на всем протяжении анимации, удобнее сначала создать анимацию, а затем добавить в фильм фоновый слой. "Фоновый слой" может располагаться и выше остальных слоев, например рама окна, если действие идет "за окном". Поскольку имена, по умолчанию назначаемые дубликатам и новым сценам, отличаются только порядковым номером, при поиске определенного содержимого сцену трудно идентифицировать. Поэтому в больших проектах целесообразно присваивать сценам специальные имена, которые характеризуют их содержимое. Если так случилось, что в вашей творческой группе никто не умеет нарисовать болееменее хорошую картинку, воспользуйтесь готовыми изображениями и анимируйте их. Только будьте осторожны: при анимировании чужих произведений нужно чувство меры.

Советы по анимации 1. Если мы хотим добиться правдоподобной анимации объектов, то необходимо четко представлять, учитывать и корректно моделировать физику их движения. В окружающем нас мире все предметы и объекты имеют определенную массу и не могут быть перемещены никак иначе, как приложением к ним силы. Последнее утверждение можно более четко сформулировать следующим образом: o Находящееся в покое тело стремится и далее оставаться в покое. То есть стакан, стоящий на столе, не упадет сам на пол, если только его туда не сбросят. o Тело, пришедшее в движение, стремится и далее в нем оставаться. Другими словами, начавший падать со стола стакан уж точно не передумает и не остановится на полпути к полу. o Изменить такое положение вещей (см. первые два правила) можно только приложением к объектам определенной силы. Понятно, что остановить падение стакана может только чья-нибудь рука, вовремя перехватившая его. 2. Различные анимационные методы (концепции), выработанные за долгие годы художниками-мультипликаторами: o Преамбула является действием, предваряющим и определяющим последующую анимацию. Преамбула может использоваться для подготовки зрителя к тем событиям, которые должны произойти, или для привлечения его внимания к тому месту, где они произойдут. Например, завершение уличной панорамы короткой

107


o

o

o

o

o

паузой на изображении входной двери дома подготавливает зрителя к тому, что в следующей сцене действие будет продолжено именно в нем. Одним из основных свойств живой ткани и многих других материалов является то, что они могут деформироваться как в процессе самого движения, так и в моменты его начала или завершения. Очевидно, что бильярдный шар и теннисный мячик отскакивают от препятствия и деформируются совершенно разным образом. Деформируемый объект стремится сохранить свой объем неизменным. Например, попробуйте наступить на хорошо накачанный футбольный мяч, и он будет компенсировать свое вертикальное сплющивание расширением вбок. Важнейшим аспектом реалистичного моделирования движения объектов является концепция перекрывающегося действия. В окружающем нас мире события редко происходят (начинаются и завершаются) одновременно. Всегда присутствует хоть и малое, но разделение и перекрытие взаимосвязанных действий. Чтобы лучше понять это, представьте себе, как вы берете карандаш со стола. Ваша рука не приходит в движение вся и сразу. Сначала поднимается плечо, затем разворачивается предплечье, и только потом отклоняется кисть, последними включаются пальцы руки. Каждое из указанных движений начинается до завершения предыдущего и с ним перекрывается. Анимация, в которой не соблюдается эффект перекрывающегося действия, обычно выглядит неестественной и безжизненной. С перекрывающимся действием очень тесно связан эффект сопровождения. Суть этого явления заключается в том, что никакое действие обычно не завершается внезапно (резко). Хорошим примером может служить продолжение движения ноги футболиста после того, как она уже совершила удар по мячу. Нога будет двигаться по инерции за мячом. Описанные выше приемы анимации ставили перед собой цель — повысить реалистичность анимации. Однако часто требуется преувеличить какое-либо движение или его последствия с целью привлечь внимание зрителя. При правильн��м использовании этого метода можно значительно усилить воздействие анимации на зрителя, сделать ее более легкой и понятной для восприятия и при этом нисколько не уменьшить ее правдоподобность. Одной из наиболее сложных проблем является достоверное моделирование движений животных и людей. Природе чуждо любое линейное движение. Например, поворачивая голову к своему собеседнику, вы совершаете ею гладкое дугообразное движение, а не просто вращение вокруг вертикальной оси. Будьте весьма осторожны с использованием преувеличенных движений применительно к человеческим персонажам. Ваш зритель достаточно хорошо представляет, какое движение ему и окружающим его людям свойственно, а какое нет.

Только постоянное и очень внимательное наблюдение за окружающим нас миром позволит выявить присущие ему закономерности и особенности движения объектов. И только выявив и перенеся их в свою анимацию, вы сможете рассчитывать на ее полноценное восприятие со стороны зрителя.

108


Создание компьютерной анимации