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

Можно, правда, использовать и сгруппированные объекты, но в этом случае программа сама автоматически конвертирует их в символы. Символы и особенности их применения - это весьма большая и важная тема раскрывать, которую я начну постепенно на следующем уроке. А пока, для того, чтобы разобраться с анимацией движения, я покажу вам лишь один из способов создания символов. В символ можно конвертировать любой графический символ. Нарисуем, например, прямоугольник. Инструментом стрелка выделим его. И выполним команду Insert - Convert to Symbol или нажмем клавишу F8. Появится диалоговое окно, в котором в поле Name предлагается задать Имя, под которым символ будет храниться в Библиотеке ролика.

А в списке Behavior - Поведение выбрать один из трех возможных типов символа. Не вдаваясь в подробности, выберем наиболее простой тип Graphic и щелкнем по кнопке ОК. Теперь у нас на сцене находится экземпляр символа и можно переходить к созданию анимации движения. Выделим на шкале нужную позицию, например 15-ую и нажмем клавишу F6, скопировав туда ключевой кадр. Переместим объект по горизонтали и снова выберем первый кадр анимации. На панели Properties в списке тип анимации выберем пункт Motion - Движение. При этом на шкале времени последовательность кадров окрасится в сиреневый цвет и сквозь нее пройдет сплошная линия со стрелкой.

Если вместо сплошной линии появится пунктирная, значит в ключевых кадрах присутствуют обычные формы, а не символ, и анимация движения будет невозможна. Нажав клавишу CTRL+Enter, посмотрим как объект постепенно перемещается по сцене. Закроем тестове окно. Выделим последний кадр и с помощью модификатора Scale отмасштабируем объект. Снова протестируем ролик. Вы видите, что одновременно с движением объект изменяет размеры. Вернемся к основной сцене и разберемся с настройками

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

Раскрывающийся список Rotate предназначен для управления вращением объекта. По умолчанию, в нем выбран режим Auto - Автоматически. При этом объект вращается только в том случае, если мы вручную повернем его в одном из ключевых кадров. Направление поворота выбирается так, чтобы угол у поворота был минимальным. Если, например, развернуть объект на 270 градусов по часовой стрелке, то фигура повернется в процессе анимации на 90 градусов против часовой стрелки. Проверим это. Перейдем в заключительный кадр. Выделим объект. откроем панель Transform. И в поле Rotate введем значение 270 градусов. Теперь протестируем ролик. Вы видите, что в процессе анимации объект поворачивается не на 270 градусов по часовой стрелке, а на 90 градусов против часовой стрелки. Что и требовалось доказать.

Закроем тестовое окно. Если же в одном из ключевых кадров сделать полный разворот на 360 градусов, то такой поворот восприниматься редактором вообще не будет, поскольку ориентация объекта не изменилась. Но это вовсе не значит, что в процессе анимации движения, объект нельзя заставить вращаться на угол больше чем 180 градусов. Перейдем в первый кадр и откроем список Rotate. Пункты Clockwise - по часовой стрелке или Counteck Clockwise - против часовой стрелки, как раз и предназначены для того, чтобы заставить объект принудительно вращаться в нужном направлении. При этом в поле справа необходимо указать количество полных оборотов.

Введем в это поле, например, цифру 1 и протестируем ролик. Вы видите, что объект в процессе движения делает дополнительный полный разворот против часовой стрелки. Закроем тест. Установка флажков Orient to Path и Snap имеет значение лишь в том случае, если мы создаем анимацию движения с помощью так называемого специального Guide-слоя, в котором нарисована траектория движения объекта. Флажок Synchronize позволяет синхронизировать анимацию символов уже содержащих в себе анимацию. Об этих параметрах мы поговорим подробнее на соответствующих уроках. Кроме того в процессе анимации движения можно заставить символ, а точнее его экземпляр изменять свой цвет и прозрачность. О том как это сделать, я расскажу на следующем уроке.

А сейчас рассмотри еще один пример и создадим анимацию, в которой объект движется по окружности. Создадим новый слой, а старый удалим. в первом ключевом кадре с помощью инструмента овал нарисуем небольшой кружок в верхней части полотна. Выделим его инструментом Arrow и преобразуем в символ нажав клавишу F8. Отметим тип Movie Clip или Graphic и щелкнем кнопку Ок. Выберем инструмент Free Transform и переместим мышью точку регистрации объекта примерно в середину рабочей сцены. Теперь выделим заключительный кадр анимации и скопируем туда первый ключевой кадр с помощью клавиши F6.

Перейдем в первый ключевой кадр и на панели Properties в списке Tween назначим анимацию движения. В списке Rotate выберем пункт вращение по часовой стрелке и введем в поле справа цифру 1. Теперь наш круг должен в процессе анимации делать один оборот по часовой стрелке вокруг точки регистрации. Убедимся в этом, протестировав ролик. У этой анимации имеется небольшой недостаток. Объект немного задерживается в верхней точке, хотя при данной скорости воспроизведения нашего фильма отмеченный эффект почти не заметен. Задержка происходит потому что при зацикливании анимации после последнего кадра проигрывается первый, а в обоих этих кадрах находится одинаковое исходное изображение, что и приводит к небольшой визуальной остановке движения. Для устраненния этого эффекта достаточно в последний ключевой кадр вставить команду перехода в первый ключевой кадр. Поскольку нам все равно не обойтись без применения Flash-кода, то давайте посмотрим как это сделать, не вдаваясь пока в подробности. Выделим последний кадр.

И откроем панель Actions Frame - Действия кадра, щелкнув по ее заголовку. Если эта панель вообще отстутствует на экране, то ее можно вызвать командой Window - Actions или нажав клавишу F9. Щелкнем по кнопке с + и в подменю Movie Control выберем команду GoTo and Play. В круглых скобках установим переход к первому кадру. При этом в последнем кадре будет добавлена команда перехода в первый ключевой кадр. Свернем панель Actions. Обратите внимание, что в кадре, в котором вставлен какой-либо код появится маленькая буква альфа. Вы можете вообще спросить

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

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

Изобразим, например, прыгающий мяч. Создадим новый ролик, щелкнув по кнопке New. При необходимости отмасштабируем рабочее полотно командой Show Frame. В нижней части полотна нарисуем прямоугольник однородного цвета, который будет изображать какую-либо твердую поверхность. Анимация будет расчитана на 20 кадров, поэтому выделим двадцатую позицию на шкале и клавишей F5, вставим цепочку обычных кадров.

Теперь создадим еще один слой, в котором будем делать анимацию движения. Выберем инструмент овал, сбросим цвет контура, и в первом ключевом кадре нарисуем круг. Затем выберем инструмент Paint Bucket, в стандартном наборе отметим радиальную градиентноую заливку и заполним нашу фигуру для придания ей объемности. Выберем инструмент Стрелка, выделим объект, и нажмем клавишу F8. В поле Name введем имя Ball - мяч. В списке Behavior отметим пункт Graphic, и щелкнем по кнопке ОК. Отметим восьмую позицию и нажмем клавишу F6. Опустим наш объект в этом ключевом кадре под срез поверхности. Эту операцию проделаем с помощью клавиатуры, чтобы случайно не завалить мяч куда-нибудь в сторону.

Теперь выделим 10 позицию и клавишей F6 скопируем туда восьмой ключевой кадр. Выберем модификатор Scale отмасштабируем объект по высоте и ширине так, как он должен выглядеть после удара о твердую поверхность. Затем снова опустим фигуру под срез прямоугольника. В 12 кадре объект должен выглядеть также как и в 8, поэтому выделим 8 кадр, щелкнем правой кнопкой мыши, и в появившемся контекстном меню выберем команду Copy Frames - Копировать кадры. Теперь выделим 12 позицию, вызовем контекстное меню. Выберем пункт Paste Frames - вставить кадры. Затем выделим 14 позицию и снова нажмем клавишу F6.

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

Итак, ключевые кадры анимации готовы, теперь нужно назначить им анимацию движения. Перейдем в первый кадр и установим на панели Properties пункт Motion. Проделаем ту же операцию с другими ключевыми кадрами анимации за исключением последнего. Кстати, это можно сделать быстрее, щелкнув правой кнопкой мыши на соответствующем кадре и выбрать в появившемся контекстном меню - create Motion Tween Создать анимацию движения. Проделаем эту операцию для всех кадров. Теперь протестируем ролик, нажав CTRL+Enter. Закроем окно и немного усложним анимацию. Для придания большей реалистичности движению объекта выполним еще ряд операций. Выделим первый кадр и в поле Ease установим отрицательное значение -80.

Тем самым, мы заставим двигаться мяч с ускорением, как будто на него воздействует сила тяжести. В предпоследнем ключевом кадре введем в это же поле положительное значение. Это приведет к тому, что по мере подъема, скорость движения мяча будет уменьшаться, как и должно быть в реальных условиях. Протестируем ролик и посмотрим результаты нашей работы. Если просмотреть этот фильм в реальном режиме Flash, скажем со скоростью 12 кадров в секунду, то вы увидите вполне правдоподобную картинку. Закроем тестовое окно и на этом закончим текущий урок.

Раскадровка формы (морфинг) | TeachPro WEB-дизайн | Символы и экземпляры, изменение свойств экземпляров символов