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

В редакторе Flash существуют два вида промежуточной анимации - это анимация формы и анимация движения. На этом уроке мы рассмотрим анимацию формы, или как принято ее называть морфинг, которая позволяет плавно изменять форму объектов. Кому совсем незнаком термин морфинг советую вспомнить или пересмотреть еще раз фильм Терминатор 2 Ссудный день, где многие спецэффекты построены на этом принципе. А теперь на простых примерах начнем разбираться как создается такой вид анимации. Для начала рассмотрим простейший пример, в котором круг плавно превращается в квадрат. Нарисуем в первом кадре круг. Выделим, например, 12 позицию на шкале времени и нажмем клавишу F7, вставив туда пустой ключевой кадр. Теперь выберем инструмент прямоугольник. И изобразим в этом кадре квадрат. снова выделим первый ключевой кадр. И посмотрим на панель Properties. Сейчас нас здесь интересует раскрывающийся список Tween - тип анимации, в котором по умолчанию выбран пункт None - нет.

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

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

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

В обоих ключевых кадрах должна находится только обычная несгруппированная векторная графика, а именно линии и заливки. Сгруппируем, например, фигуру в первом кадре, выделив ее и выполнив команду Modify-Group. Теперь можно убедиться, что анимация формы пропала. Если некорректный объект будет находиться в последнем кадре, то эффект будет тот же самый. Поэтому если у вас морфинг не получается проверьте прежде всего какие объекты находятся в ключевых кадрах анимации. Разгруппируем объект в первом кадре комбинацией CTRL+Shift+G и немного усложним анимацию. Выделим последний кадр. Передвинем прямоугольник. Изменим его масштаб. А также цвет заливки.

Протестируем ролик, нажав CTRL+Enter. Как видите, анимация идет нормально. Объект перемещается, плавно изменяя свою форму и цвет. Закроем тестовое окно и посмотри какие настройки допускает анимация формы. Вернемся в первый кадр. И обратим внимание на еще два списка на панели Properties ниже параметра Tween. Раскрывающийся список Blend - перетекание, отвечает за гладкость промежуточных форм, получающихся при морфинге.

При выборе пункта Distributive - распределенная, формы получаются более сглаженными, а при выборе пункта Angular - более угловатые. Поле Easing управляет равномерностью анимации. Сюда можно ввести любое число от -100 до +100. При нулевом значении превращение одной фигуры в другую происходит равномерно. при отрицательных значениях анимация начинается

как бы постепенно, разгоняясь к концу. Давайте введем максимальное отрицательное число -100 и опубликуем ролик. Заметно, что анимация идет с ускорением. Закроем тестовое окно и введем в это поле максимальное положительное число. Т.е. +100. И снова протестируем ролик. Теперь наблюдается противоположный эффект. Анимация к концу замедляется. С помощью этой настройки удобно создавать такие эффекты как движение с ускорением, торможение и т. д. А теперь поэкспериментируем немного с заливками. Выделим последний кадр.

Обратимся к панели Mixer и установим линейную градиентную заливку. Настроим, например, красно-белый переход. Затем выполним команду Control-Test Movie и посмотрим, что получилось. Анимация идет корректно. Сплошная заливка плавно перетекает в градиентную. Закроем тестовое окно. Если у нас в обоих кадрах градиентная заливка, то и в этом случае все будет работать нормально. Единственно, что редактор в этом плане не умеет делать, так это плавно превращать линейный градиент в круговой и наоборот. Поэтому следите, чтобы в начальном и конечных кадрах был одинаковый тип градиентной заливки, либо линейная, либо радиальная. Используя свойства плавного перетекания градиентных заливок, можно получить ряд интересных эффектов. Создадим, например, иллюзию перемещения источника освещения объекта. Перейдем к первому кадру, выберем инструмент Заливка, на панели Mixer установим круговой градиент, и настроим переход от белого цвета к темно-синему.

Затем щелкнем по кругу так, чтобы центр градиента находился где-нибудь слева вверху. Скопируем объект в буфер, выделив его инструментом Arrow и кликнув по кнопке Copy. Теперь перейдем в последний кадр, удалим прямоугольник. И вставим из буфера скопированный объект командой Edit -Paste in Place вставить на место. При этом вставка произойдет точно в те же координаты, откуда объект был скопирован. Выберем инструмент Paint Bucket и сместим центр круговой заливки в противоположную сторону. Протестируем ролик и посмотрим результат. Центр градиента плавно смщается и создается впечатление перемещения источника освещения. Похожим способом несложно сделать также пульсирующие градиенты, которые хорошо подходят для изображения фонарей, мигалок, светильников, звезд и т.п. Раскрепостите свою фантазию и успех будет вам обеспечен.

Поработав с морфингом фигур сложной формы, вы непременно заметите, что иногда превращение фигур в друг друга происходит не совсем так, как этого хотелось бы. Для подобных случаев в программе предусмотрено дополнительное средство управления анимацией формы. Приведем простой пример. Предположим, нам нужно сделать превращение цифры 1 в цифру 2. Создадим новый слой, используя кнопку со знаком +, затем перейдем в нижний слой и удалим его, щелкнув по значку Корзины. Выберем инструмент Текст, щелкнем на полотне и введем цифру 1. Убедимся, что мы работем со статическим текстом. Выберем инструмент Стрелка и на панели Proprties увеличим для наглядности размер шрифта примерно до трехсот пунктов. Отметим на шкале 12 позицию и скопируем туда ключевой кадр, нажав клавищу F6. В новом ключевом кадре, с помощью инструмента Текст, заменим цифру 1 на цифру 2. Снова выберем инструмент Arrow и выполним команду Modify-Break Apart - Разбить или нажмем комбинацию CTRL+B. Тем самым мы преобразовали текстовый символ в обычную графику. В противном случае анимация формы у нас работать не будет. Перейдем к первому кадру и проделаем ту же операцию с цифрой 1. На панели Properties назначим анимацию формы.

Вроде бы анимация готова. Нажмем CTRL+Enter и увидим, что анимация происходит, но фигура при этом будто выворачивается наизнанку, чуть ли не исчезая в некоторых кадрах. Как же получить более убедительное превращение? Для таких случаев в программе предусмотрен механизм меток морфинга. Покажем как он реализуется. Оставим сделанную анимацию без изменнений для того, чтобы иметь возможность сравнивать. Создадим новый слой, щелкнув по кнопке с + внизу списка слоев. Программа автоматически добавит в новом слое 12 пустых кадров для выравнивания слоев по длительности. Удерживая клавишу Shift, выделим все кадры нижнего слоя с анимацией, щелкнем правой кнопкой мыши и в появившемся контекстном меню выберем команду Copy Frames, скопировав кадры в буфер обмена.

Выделим теперь первый кадр верхнего слоя, отобразим снова контекстное меню и выполним команду Paste Frames - вставить кадры. Кстати говоря, операции по копированию и вставке кадров можно было также выполнить с помощью соответствующих команд меню Edit. Уберем лишние кадры из верхнего слоя. Для чего выделим их, удерживая клавишу Shift, и выполним команду Insert Remove Frames или нажмем комбинацию Shift+F5. Теперь мы получили две абсолютно одинаковые анимации, расположенные друг над другом в разных слоях. Чтобы посмотреть их отдельно, давайте сместим объекты верхнего слоя вправо. Выделим первый кадр и обратимся к панели Info. В поле, где отображаются координаты объекта на оси X, увелим значение, скажем, на 300 пикселов. Добавим тройку впереди текущих цифр и нажмем клавишу Enter. Затем выделим последний кадр и выполним такие же действия.

Теперь обе анимации можно увидеть одновременно. Выделим снова первый кадр верхнего слоя и выполним команду Modify-Shape-Add Shape Hint добавить метку формы. При этом где-то в середине фигуры появится красный кружок, помеченный маленькой буквой. Если у вас на экране ничего не появилось, то откройте меню View и установите флажок Show shape Hints - показывать метки формы. Переместим метку в какую-нибудь характерную точку рисунка, проследим, чтобы она легла на край заливки или на контур, иначе программа нас не поймет. Затем перейдем в заключительный кадр и установим аналогичную метку в точку, куда, по вашему мнению, должна перейти метка в первом кадре. Если все сделано корректно, то кружок станет зеленым, а в первом кадре - желтым. В данном случае одной метки морфинга недостаточно. Для удовлетворительного результата установим еще две метки. Теперь это можно сделать следующим образом. Установим курсор на первой метке и щелкнем правой кнопкой мыши.

В контекстном меню выберем команду Add Hint - добавить метку. Переместим вторую метку в другую характерную точку. Перейдем в заключительный кадр и выполним аналогичное действие. И, наконец, проделаем похожие операции по установке третьей метки морфинга. Для улучшения визуального восприятия введем небольшую задержку в заключительный кадр анимации. Для этого выделим 15 позицию на шкале и нажмем клавишу F5. То же самое проделаем в нижнем слое. Теперь посмотрим результат нашей работы, нажав клавиши CTRL+Enter. Вы видите, что анимация с использованием меток морфинга происходит более естественно.

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

⇐Основы анимации во flash, символы и экземпляры - создание покадровой анимации, отображение кадров | TeachPro WEB-дизайн | З. раскадровка движения⇒