ПРЫГАЮЩИЙ БАСКЕТБОЛЬНЫЙ МЯЧ.

ТРАНСФОРМАЦИЯ ДВИЖЕНИЯ.

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

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

ПРЫГАЮЩИЙ БАСКЕТБОЛЬНЫЙ МЯЧ.

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

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

Шаг 2Создайте новый слой «Тень» и нарисуйте на нем Тень. Овальную, без обводки, залитую серым градиентом с 50% прозрачностью. (Но можно воспользоваться предыдущим советом и стянуть Тень из другой анимации… J.) Расположите Мяч и Тень на соответствующих слоях так, чтобы вместе они являлись изображением лежащего на земле мяча.

Шаг 3Первые кадры у нас по определению являются ключевыми. В них у нас хранится изображение мяча, лежащего на земле (нижняя точка) и изображение тени.   Для Мяча и Тени создайте последовательность кадров, сделав 12-й кадр каждого слоя ключевым. Для этого, удерживая клавишу <Ctrl>, выделите 12-й кадр на слоях Мяч и Тень, и потом выполните команду контекстного меню (Вставить ключевой кадр). (Впрочем, можете это сделать и для каждого слоя в отдельности…)
Шаг 4На вставленных 12-тых кадрах разместите объекты так, как они должны быть расположены в самой верхней точке траектории: Мяч поднимите, а Тень переместите на сопоставимое расстояние по диагонали. Кроме того, Тень следует увеличить (приблизительно в два раза), повысить её прозрачность, осветлить (вспомните урок про ёлочные игрушки).
Шаг 5Теперь создадим, так называемое, ДВОЙНОЕ ДВИЖЕНИЕ. Для этого, сначала выделите ПОСЛЕДНИЙ кадр последовательности (он недавно стал ключемым) и (Вставить / Создать двойное движение), затем выделите один из промежуточных кадров этого слоя «Мяч» (не ключевой), ну, например 5-й, и еще раз выберите (Вставить / Создать двойное движение) В результате последовательность кадров станет фиолетовой и на ней появится стрелка, указывающая её начало и конец.
Шаг 6Проделайте действия Шага 5 для слоя «Тень»
Шаг 7Щёлкните по любому промежуточному из кадров. Вы увидите, что объекты в нём смещены точно так же, как если бы мы переместили их сами как в случае по кадровой анимации. Однако это изменение было просчитано программой автоматически на основании заданных нами начального и конечного положений системы. Flash просто линейно интерполировал промежуточные значения для всех изменяющихся параметров. Буквально за минуту вы создали анимацию, на которую ранее потратили массу времени и усилий. Чтобы в этом убедиться, протестируйте фильм.
Шаг 8Теперь необходимо создать анимацию падения мяча. Так как он должен вернуться в точку, откуда начал своё движение, то мы делаем 24-е кадры слоёв «Мяч» и «Тень» ключевыми и копируем в них содержимое соответствующих первых кадров. Для этого щелкаете мышкой по первому кадру и он становится выделенным черным цветом. Далее, удерживая клавишу <Alt>, перетягиваете этот кадр на 24-ю позицию. Обратите внимание, что новые кадры автоматически преобразовались в анимированную последовательность.
Поставленная задача выполнена. Прыжок мяча анимирован, причём весьма просто. Но чем-то наш первый фильм, созданный при помощи банального заполнения кадров, лучше. Чтобы понять, чем обусловлена его большая естественность, калькируем первые десять кадров автоматической анимации.   Присмотревшись, Вы увидите, что расстояние, на которое смещались объекты, во всех кадрах одинаковое. Но мяч движется неравномерно. Его скорость максимальна в начальный момент времени и равна нулю в верхней точке траектории (и это было учтено нами, когда мы создавали по кадровую анимацию). Реально ли предусмотреть это при программном заполнении кадров?
Flash предоставляет возможность замедления или ускорения движения при создании автоматических анимаций. Реализуется она в Окне «Инспектора свойств» (если вдруг его не видно, то (Окно / Свойства)), при помощи параметра Своб. (в англ. версии программы Ease (Замедлить)) для соответствующей последовательности кадров. Он изменяется от -100 (начальная скорость равна нулю, а в последнем кадре она максимальна) и до +100 (начальная скорость максимальна, к концу она падает до нуля). В общем случае этот параметр определяет, насколько скорость движения объекта в первом кадре будет отличаться от его скорости в последнем кадре. Нетрудно догадаться, что в нашем случае значение параметра Своб. (Замедлить) нужно сделать равным 100. Результат данной модернизации для первых десяти кадров представлен на рис. При падении мяч должен сначала иметь малую (нулевую скорость), увеличивающуюся с пройденным расстоянием. Поэтому значение параметра Своб. (Замедлить) нужно сделать равным -100.   И не забудьте тоже самое сделать с «Тенью». (Кстати, на будущее, если выделить по кадру в разных последовательностях, то этот параметр распространится на эти последовательности кадров…)   Протестируйте фильм, чтобы убедиться в принципиальности внесённых изменений.
ВРАЩЕНИЕ Теперь анимация, созданная при помощи автоматического заполнения кадров, ничем не отличается от трудоёмкой по кадровой прорисовки. Однако, несмотря на все наши усилия, правдоподобно она пока не смотрится. И вот почему. Настоящий мяч во время прыжка непременно вращается, а нарисованный нами мяч сохраняет исходное положение на протяжении всего ролика. Можно ли исправить этот недостаток? В случае если объект на протяжении всей последовательности кадров, должен повернуться на угол, лежащий в пределах ОДНОГО полного оборота (360 градусов), наиболее простым вариантом будет изменить его положение в последнем кадре с помощью обычной трансформации , точно так же, как мы задавали перемещение. В результате Flash разделит выполнение указанной трансформации между всеми кадрами, и вращение будет казаться непрерывным. Однако в нашем случае мяч за время движения должен повернуться несколько раз, так что описанный способ не подходит. Но есть другой, более универсальный вариант
Шаг 9Задать вращение символа при использовании автоматической анимации движения можно, и даже очень просто. Для этого нужно выделить ПОСЛЕДНИЙ не ключевой кадр требуемой последовательности (в нашем случае это 11-й) и обратится к окну Инспектора свойств Параметры в меню Вращать.   Данное меню предполагает следующие варианты вращения: · None (Отсутствует). Объект автоматически вращаться не будет. Настройка, активная по умолчанию. · Auto (Автоматическое). Направление вращения и его частота определяются системой автоматически исходя из особенностей траектории (опция используется при создании анимации с применением путей, о которых мы поговорим чуть позже). · CW. Вращение по часовой стрелке. · CCW. Вращение против часовой стрелки.   Для параметров CW и CCW можно задать количество полных оборотов, которые должен совершить объект на протяжении анимируемой последовательности кадров. Сделать это можно в окошке Разы (справа от рассматриваемого меню).
Шаг 10Итак, для взлета мяча задаём 3 оборота по часовой стрелке (в нашем примере). Такую же величину нужно, естественно, определить и для стадии падения (подумайте, как это сделать).   Тестируем фильм.   Вопреки ожиданиям, анимация не стала более правдоподобной. Наоборот, в ней появился чрезвычайно фальшивый элемент – вместе с мячом начал вращаться и блик на нём! Естественно, что в реальных условиях такого быть не может, поэтому анимацию нужно переделать J.
На самом деле, нужно всего лишь отделить сетку от мяча и вращать только сетку. А для этого сетку нужно будет поместить на отдельный слой. Наиболее длинный и надежный путь решения поставленной задачи – это нарисовать все заново. И рисовать все сразу на разных слоях – Мяч, Сетка, Тень… Но это для очень неленивых… J.
Шаг 11Мы пойдем другим путем. Будем работать с теми объектами, которые у нас есть (или утащили у других…). Сначала переходим в режим редактирования символа «Мяч» - выполнив двойной щелчок мышью по мячу. Далее, нажав клавишу <Shift>, инструментом (Указатель) последовательно выделяем все линии, образующие сетку мяча. Проще всего это сделать при большом увеличении (400-500%).
Шаг 12Далее, выделенную сетку вырезаем в буфер обмена (Редактирование / Вырезать) (или щёлкнув правой кнопкой мыши по выделенному контуру, вырезаем его в буфер при помощи команды (Вырезать) открывшегося контекстного меню.)
Шаг 13Возвращаемся на основную сцену (для этого нужно щёлкнуть мышкой по на монтажном столе) и выполняем команду (Вставить / Новый символ). Имя символа напишем как «Контур». Тип символа определим как «Графика». После этого на монтажном столе появляется пустое поле. Далее (Редактирование / Вставить). И он (или оно) появляется на Монтажном столе и автоматически оказывается в нашей Библиотеке символов. На данный момент там находятся «Мяч», «Тень», а теперь еще и «Контур». И не забудьте вернуться на основную сцену …
Шаг 14Теперь поместим символ «Контур» поверх «Мяча». Для этого создаём новый слой. Помещаем его выше остальных (так как сетка должна закрывать заливку мяча, а не наоборот). Называем его «Контур». · Перетаскиваем из библиотеки символ «Контур» на созданный слой. Совмещаем «тело» мяча с его контуром. Сделать это проще при увеличении (300%) и включённом режиме Snap to Objects (Привязать к объектам). (Все предыдущие объекты не были с пустотами и их можно было братьи перемещать за что угодно. А Контур - только за элементы сетки или за центр объекта). · Делаем 12-й кадр слоя «Контур» ключевым. Размещаем в нём сетку мяча так, чтобы она совпадала с «телом» мяча. Анимируем последовательность кадров, т.е. создаем двойное движение. · Отменим вращение для «тела» мяча (т.к. теперь будет вращаться контур сетки, а не мяч.) · Вращаться у нас теперь будет только контур, поэтому, помня о том, что мяч должен сделать три оборота на пути вверх (и вниз), поворачиваем изображение контура в верхней точке. · Копируем первый кадр слоя «Контур» и вставляем его на позицию с номером 23. Анимируя полученную последовательность кадров, получаем необходимое перемещение сетки для падения мяча. · Так как сетка должна постоянно совпадать с «телом» мяча, доопределяем для неё такие же значения замедления и ускорения. · Более эффектно будет смотреться, если при подъёме мяч будет вращаться в одну сторону, а при падении – в другую. · Не забудьте сохранить работу (Файл./ Сохранить) и протестируйте фильм.

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

Если все сделали правильно, то мы получим неплохой результат: создав вполне «живую» анимацию «весом» всего около 1 Кб. (это примерно 1 секунда для загрузки его из Internet).

Но когда чего-то добиваешься, начинаешь желать большего. Пожалуй, мячик, который просто прыгает на месте,- это слишком скучно! Вот если бы он мог двигаться в определённом направлении, и при этом амплитуда его прыжков угасала… Можно ли добиться этого при помощи автоматической анимации (сколько нужно будет трудиться, если мы пойдём путём банального заполнения кадров – даже страшно подумать)?

Заставить мяч двигаться по параболической траектории имеющимися в нашем распоряжении на данный момент средствами невозможно, так как Flash создаёт путь, соединяя два заданных пользователем положения прямой линией. Однако это всё же реально, но это уже совсем другая история…