Тема 5. Анимация формы

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

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

Форма — это контур, заливка или несколько контуров и заливок. Анимация формы позволяет

• плавно преобразовать одну форму в другую (морфинг);
• изменить цвет формы;
• переместить форму.

Пример анимации формы можно посмотреть, если навести мышку на квадрат справа. Эту анимацию мы сейчас построим.

Теперь мы создадим плавные переходы между этими формами, причем рисовать вручную ничего не придется.

Слово tween — это жаргонное сокращение от английского in between (между). Это выражение пришло из классической анимации, где ведущие художники рисовали только наиболее важные (ключевые) сцены мультфильма, а их менее талантливые коллеги дорисовывали промежуточные кадры.

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

Если выделить любой из кадров и посмотреть на панель Properties, вы увидите, что в списке Tween (анимации) установлено значение Shape (shape — форма).

К анимации относятся также параметры Ease и Blend. Обычно анимация выполняется с постоянной скоростью. Если надо постепенно замедлять анимацию, используют положительные значения параметра Ease (от 1 до 100), для ускорения — отрицательные (от -1 до -100).

Параметр Blend имеет два возможных значения: Distributive (плавные контуры) и Angular (сохранение углов).

У вас должно получиться примерно то же самое, что и на ролике справа (для проигрывания анимации наведите на него мышку). Когда круг переходит в квадрат, видно некоторое вращение. Чтобы сделать анимацию более красивой, мы поможем программе, установив контрольные точки (hints).

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

Контрольные точки обозначаются латинскими буквами (a, b, c, ...). Точка a на первом кадре «приходит» туда, куда установлена точка a на последнем кадре.

Контрольные точки бывают трех цветов:

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

В программе предусмотрены следующие операции с контрольными точками:

• добавить точку — нажать клавиши Ctrl+Shift+H или выбрать пункт меню Modify—Shape—Add Shape Hint;
• удалить точку — щелкнуть правой кнопкой мыши на точке и выбрать пункт Remove Hint из контекстного меню; удалить все точки можно с помощью пункта меню Modify—Shape—Remove All Hints;
• показать (скрыть) контрольные точки можно с помощью пункта View—Show Shape Hints главного меню.

1	2	3

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

Скорее всего, бабочка получится неровная. Чтобы сделать ее симметричной, мы отрежем правую половину и скопируем на ее место отраженную левую половину.

4	5

Вы заметите, что анимация на втором интервале получилась не очень красивая. Чтобы ее улучшить, мы добавим контрольные точки.

6	7

Теперь мы проверим еще два варианта анимации формы: изменение цвета и движение.

Давайте попробуем сделать одновременную анимацию нескольких объектов.

1	2

Можно было бы предполагать, что программа «сообразит», что синий прямоугольник надо преобразовать в синий овал, а красный прямоугольник — соответственно в красный овал. Но вместо этого в середине интервала будет мешанина из четырех объектов.

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

В программе Flash, как и во многих других программах для работы с графикой, документ состоит из нескольких независимых слоев, на каждом из которых может быть отдельное изображение. Для работы со слоями служит палитра слева от временной шкалы:

В этом документе три слоя с именами Layer 1, Layer 2 и Layer 3. Для того, чтобы сменить имя, надо сделать двойной щелчок на имени слоя.

Здесь самый нижний слой — это слой Layer 1, выше него расположен Layer 2 и на самом верху — слой Layer 3. Порядок слоев можно менять, перетаскивая их мышкой.

Активный слой, на котором идет рисование, выделен синим цветом и отмечен значком карандаша. Значки над палитрой имеют следующее значение:

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

Щелчок по одному из этих значков позволяет установить (снять) эти режимы сразу у всех слоев. Если же надо применить режим к одному слою, следует щелкнуть на точке ниже соответствующего значка. На рисунке выше активным является слой Layer 3, слой Layer 2 заблокирован, а слой Layer 1 невидим.

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

Слои можно организовывать в папки. Это очень важно в больших проектах, где бывает несколько десятков слоев. Чтобы создать папку, нужно щелкнуть по кнопке . Затем перетащите нужные слои на созданную папку.

Для удаления выделенного слоя (или папки) надо щелкнуть по кнопке .

В отличие от стандартной комбинации Ctrl+V, этот прием вставляет объект не в центр поля, а в то же место, где он был (возможно, на другой слой).

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

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

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

Программа позволяет добавлять звуки четырех широко распространенных форматов:

• WAV (WAVeform audio format) — стандартный формат Windows;
• MP3 (MPEG-1 Audio Layer 3) — формат, использующий сжатие за счет удаления составляющих звука, которые человек не слышит;
• AIFF (Audio Interchange File Format) — звуковой формат фирмы Apple;
• AU (AUdio file format) — формат кодирования звука, разработанный фирмой Sun.

Перед тем, как вставить звук из файла, его нужно загрузить (импортировать) в библиотеку. Библиотека — это набор элементов (рисунков, звуков, символов и т.п.), которые используются в ролике.

Теперь звук находится в библиотеке файла и его можно увидеть на панели Library в правой нижней части экрана (см. рисунок).

В библиотеке сейчас один элемент типа Sound (звук). Он выделен, и в средней части панели мы видим диаграммы левого и правого каналов (стереозвук).

Щелкнув по кнопке можно прослушать запись.

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

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

На временной шкале на кадрах этого слоя будет изображена временная диаграмма, отражающая изменение звука во времени:

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

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

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

Можно и сразу добавит текстовый блок: включив инструмент , обвести мышкой рамку нужной ширины.

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

Свойства выделенного текста можно изменить на панели Properties:

Выпадающий список в левом верхнем углу позволяет выбрать тип текста:

• Static Text — неизменяемая надпись;
• Dynamic Text — текст, который можно менять во время работы ролика из программы (обычно используется для информационных сообщений);
• Input Text — поле для ввода текста.

В этом уроке мы будем использовать только текстовые надписи (Static Text).

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

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

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

Список, обозначенный символом , содержит варианты Normal (обычный текст), Subscript (нижний индекс) и Superscript (верхний индекс).

Еще правее можно выбрать тип коррекции мелкого текста (anti-aliasing). Сейчас выбран вариант Anti-alias for animation — сглаживание для анимации. Если нужно улучшить читаемость мелких букв (без анимации), выбирают Anti-alias for readability.

Кнопка разрешает выделение текста мышью.

Флажок Auto kern включает автоматическую коррекцию расстояния между особыми парами символов. Эффект можно увидеть, если набрать буквы A и V рядом и сильно увеличить размер шрифта.

Если ввести адрес Web-страницы в поле справа от знака , текст становится гиперссылкой. Список Target определяет, где открывается эта страница:

• _self — в том же окне браузера;
• _blank — в новом окне;
• _parent — в родительском окне (для фреймов);
• _top — в главном окне (для фреймов).

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

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

Для текста можно использовать фильтры (панель Filters).

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

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

Чтобы использовать анимацию формы, текст надо превратить в форму, то есть в заливку. Для этого дважды применим команду Break Apart из контекстного меню или из меню Modify (клавиши Ctrl+B). В первый раз текст будет разделен на отдельные буквы, которые пока остаются текстом (их можно редактировать с помощью инструмента ). Во второй раз буквы преобразуются в заливки.

Построим еще один интересный пример анимации текста. В нем имитируется освещение надписи прожектором или фонариком (наведите мышку на рисунок ниже).

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

Для создания переходов между слайдами можно использовать два пути:

1. обрезать часть рисунка, которая пока не видна;
2. каким-то образом делать эту область прозрачной (невидимой).

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

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

Если же мы работаем в режиме рисования объектов (кнопка нажата), маской становится только самый нижний объект.

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

На слоях Layer 1, Layer 2 и Layer 3 расположены три фотографии, которые должны сменять друг друга (проверьте это, отключив видимость верхних слоев). Нам нужно организовать три перехода, каждый из них будет занимать 10 кадров. Кроме того, еще 10 кадров каждая фотография удерживается на экране после окончания перехода. Таким образом, всего потребуется 60 кадров (3 раза по 10+10).

Первая фотография (в слое Layer 1) будет постоянно видима. Когда нужно, мы будем перекрывать ее другими.

Второй снимок начинает появляться с 10-ого кадра и будет не нужен после 40-ого. Третья фотография держится с 30-ого по 60-ый кадр. Временная шкала должна выглядеть так:

Если запустить ролик, мы увидим, что рисунки меняются мгновенно. Займемся переходами.

Первый переход (от 1-ой фотографии ко 2-ой) сделаем «изнутри», то есть видимая часть второго слайда появляется постепенно из центра первого (посмотрите еще раз готовый ролик). Нужно сделать маску в виде прямоугольника, который расширяется из центра до полного размера сцены.

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

Перейдем ко второму, наиболее сложному переходу. Здесь новый рисунок сначала появляется по краям сцены, а область старого постепенно сужается к центру. Таким образом, маска — это прямоугольник с «дыркой» в середине, причем эта «дырка» уменьшается до точки. Чтобы «дырка» была красивой, сделаем ее в форме звезды. Сначала «дырка» должна перекрывать всю сцену — через нее будет виден второй слайд.

Вот что должно получиться:

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

Для перехода от третьего рисунка обратно к первому мы будем также использовать слой-маску Маска 3. Сначала эта маска полностью открывает рисунок на слое Layer 3, а к 60-ому кадру полностью скрывает его, открывая таким образом слой Layer 1 (ведь Layer 2 вообще отключен на последнем этапе!). Вот так должна выглядеть временная шкала: