Тема 6. Символы. Анимация движения

Символы — это объекты, которые хранятся в библиотеке и могут использоваться в ролике много раз. Важно, что при добавлении нового символа на сцену расход памяти практически не увеличивается: описание символа хранится только один раз, в библиотеке.

У символов есть еще одно важное достоинство: при изменении символа в библиотеке сразу автоматически меняются все экземпляры.

В программе Flash различают три типа символов:

• Graphic — графическое изображение без анимации;
• Button — кнопка, имеющая три различных состояния (нормальное, при наведении мыши, при щелчке);
• Movie Clip — клип, который может включать внутреннюю анимацию.

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

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

Теперь будем рисовать баскетбольный мяч.

1	2	3

4	5	6

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

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

Для создания символа «с нуля» можно использовать и другой способ: нажать клавиши Ctrl+F8 (меню Insert—New Symbol). После этого в библиотеке создается пустой символ и сразу открывается в режиме редактирования.

Для редактирования символа нужно дважды щелкнуть в окне библиотеки по значку слева от имени символа. При этом вы увидите символ на сцене и сможете изменить его элементы.

Полоска над сценой показывает, что мы работаем не с самой сценой, а с символом ball. Это очень похоже на то, что мы видели при редактировании нарисованных объектов в Теме 4. Чтобы вернуться к редактированию сцены, нужно щелкнуть мышью на тексте Scene 1 или на стрелке.

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

Если символ уже есть на сцене, для перехода в режим редактирования можно сделать на нем двойной щелчок. Это так называемое редактирование на месте (также Edit—Edit in Place в меню).

Помните, что все сделанные изменения применяются ко всем копиям символа, которые есть в ролике.

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

Заметим, что при этом фоновое изображение в кадрах 2-20 исчезло, поскольку рабочая часть временной шкалы для слоя Фон содержит только 1 кадр.

Теперь программа сможет автоматически построить все промежуточные кадры анимации между кадрами 1—10 и 10—20. Это анимация движения, поскольку форма объекта не меняется.

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

По законам физики, мяч летит вниз ускоренно, а вверх — замедленно. В программе Flash это можно сделать с помощью параметра Ease на панели Properties. Кнопка Edit справа от поля Ease позволяет точно настраивать кривую изменения скорости анимации.

Обратите внимание, что в списке Tween теперь выбрано значение Motion (движение).

Стало уже похоже на правду. Не хватает только звука.

Теперь посмотрим, какие свойства символа можно менять. Если выделить мяч и посмотреть на панель Properties, мы увидим, что выделенный объект — копия символа ball из библиотеки.

Список Color позволяет изменять цвет данного экземпляра (эти изменения не отражаются на символе в библиотеке и на других копиях):

• None — нет изменений;
• Brightness — яркость;
• Tint — цветовой оттенок;
• Alpha — прозрачность;
• Advanced — экспертная настройка цвета.

Теперь мяч «зеленеет» при подлете к полу.

Сейчас мы никак не учитываем, что в момент удара мяч меняет форму («сплющивается»). Если просто уменьшить высоту символа в кадре 10, то мяч начнет «сплющиваться» с самого верха, а в самом деле это не так — быстрое изменение формы идет только при ударе.

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

Если просмотреть ролик, теперь в кадрах 10-14 мяч просто стоит на месте. Мы сделаем так, что он будет при этом менять форму.

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

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

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

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

Напомним, что с помощью движка 1 можно менять соотношение сторон градиента, движок 2 регулирует масштаб, а движок 3 позволяет вращать градиент. Точка 4 обозначает центр градиента и может перемещаться.

Теперь построим тень для остальных кадров:

• тень в кадре 24 точно такая же, как и кадре 1;
• самая темная и самая маленькая тень — в кадрах 10-14 (мячик в нижней точке);
• для изменения тени между кадрами 1-10 и 15-24 используем анимацию формы.

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

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

Теперь надо переместить точку удара мяча в середину сцены. Чтобы мяч в нижней точке не «дергался», желательно перемещать все изображения мяча и тени в кадрах 10-14 за один раз. Для этого можно использовать уже изученный раньше режим редактирования нескольких соседних кадров.

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

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

Обратите внимание, что мяч в ключевом кадре сам «перескакивает» на направляющую (на ней должен находиться центр вращения).

Реальный баскетбольный мяч всегда вращается в полете. В программе Flash есть возможность добавить вращение объекта на целое число оборотов на каждом интервале анимации движения. На панели Properties есть список Rotation, в котором можно выбрать

• None — нет вращения;
• Auto — строится автоматически, учитывая угол поворота в начальном и конечном положениях;
• CW (clockwise) — по часовой стрелке;
• CCW (counter-clockwise) — против часовой стрелки.

В поле перед словом times можно ввести количество оборотов.

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

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

Теперь посмотрите на окно библиотеки: кроме четырех рисунков в ней появились два символа типа Graphic, которые программа автоматически создала из рисунков в формате PNG. Чтобы разобраться, где какой рисунок, щелкните мышкой на этих строчках в библиотеке и переименуйте символы в Машина и Дом.

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

Что же мы выиграли? Если посмотреть на информацию в нижней части окна, исходный размер файла (orinigal) — 36,7 Кб, а размер сжатого файла (compressed) — 1,6 Кб, таким образом мы сжали рисунок в 25 раз. Если таким образом оптимизировать все рисунки, размер SWF-файла можно существенно уменьшить, что важно, если ролик размещается в Интернете.

Конечно, качество рисунка стало значительно хуже (появились квадраты, характерные для формата JPEG). Однако машина на сцене довольно маленькая и движется быстро, поэтому это ухудшение качества никто не заметит.

Важно, что сжатие используется только при создании SWF-файла, а рисунок в библиотеке FLA-файла не меняется (проверьте это!). Это значит, что можно всегда вернуться в окно свойств и улучшить качество, увеличив значение Quality.

Если для какого-то рисунка качество не задано явно (флажок Use document default quality включен), при создании фильма используется качество, установленное в окне настроек публикации (меню File—Publich Settings, вкладка Flash, параметр JPEG Quality).

Следующий этап — залить прямоугольник рисунком-узором, который загружен в библиотеку под именем green.jpg.

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

Чтобы развернуть машину более точно, иногда приходится снимать флажок View—Snapping—Snap to Objects, отменяя привязку к существующим объектам.

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

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

Наконец, сделаем так, чтобы машина немного постояла у дома перед тем, как начнется новый цикл проигрывания ролика.

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

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

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

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

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

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

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

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

Теперь применим второй способ. Если перейти в кадр, где включена анимация движения, и щелкнуть по кнопке Edit в панели Properties, мы увидим линию, которая задает скорость движения вдоль траектории. На оси абсцисс отмечены номера кадров, а на оси ординат — процент пройденного пути.

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

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

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

Файлы в формате WAV, как правило, имеют большие размеры, поскольку не используют сжатие. Посмотрим, можно ли уменьшить звуковой файл. В верхней части окна мы увидим свойства файла: частота дискретизации 11 кГц, качество 16 бит на один отсчет, длительность 6,7 секунды, объем 147,5 Кб.

Ниже окна Quality мы видим, что сжатый звук занимает всего 13,4 Кб, то есть 9,1% от исходного объема. С помощью алгоритма MP3 мы сжали его более, чем в 10 раз.

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

Если сжатие звука не задано явно, используются настройки окна File—Publish Settings (вкладка Flash).

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

Как известно, в полночь с 31 декабря на 1 января Новый Год «вылезает» из часов Спасской башни Кремля. Теперь мы сделаем аналогичный эффект с помощью Flash (для просмотра наведите мышку на рисунок ниже).

Теперь построим анимацию, в ходе которой текст будет увеличиваться, начиная из центра циферблата. Отведем на это увеличение 6 секунд (72 кадра при частоте 12 кадров в секунду), а затем зафиксируем надпись еще на 3 секунды.

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

Последний штрих — остается добавить звук курантов. Звуковой файл хранит запись одного удара, которая занимает около 3 секунд. Мы поместим в фильм 3 копии этого звука (в кадры 1, 36 и 72).

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

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

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

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

Далее, используя фильтр Bevel, сделаем так, чтобы буквы постепенно становились золотистыми. Однако применить фильтры можно только к тексту или символам типа Movie Clip. Сейчас буквы имеют тип Graphic, это можно увидеть на панели Properties. Поэтому нужно будет изменить тип символов на Movie Clip.

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

Остается сделать небольшую паузу перед началом нового цикла.