1. Предварительные настройки
- Создаём новый документ: File > New > Flash File (ActionScript 3.0)
- Изменим частоту кадров с 12 fps (12 кадров в секунду) до 30 fps. Для этого дважды щёлкаем на надписи 12 fps в нижней части палитры Timeline, затем в поле Frame Rate пишем 30.
- Изменяем имя слоя «Layer 1» на «Мяч»
2. Рисуем мяч. Шаги почти такие же, как в уроке N1 при создании тушки колобка.
- Выбираем первый кадр слоя «Мяч»
- Рисуем в нижней части рабочей области небольшой круг (т.к. мяч будет прыгать вверх)
- Ещё раз выбираем первый кадр слоя «Мяч»
- На палитре Color выбираем тип заливки Radial
- Для центра градиента (левый цвет градиента) выбираем любой светлый цвет, для края градиента (правый цвет градиента) выбираем любой цвет средней яркости
- Перемещаем центр градиента
Для правильной работы анимации движения должно быть выполнено несколько условий:
1. Наличие символа для каждого анимируемого объекта. Другими словами, анимация движения всегда создаётся на основе символов.
2. Отсутствие посторонних объектов. В начальном и конечном ключевых кадрах анимации движения должен находиться только один символ - ничего лишнего.
3. Для анимации используется один и тот же символ. Т.е. в начальном и конечном ключевых кадрах анимации движения должен находиться один и тот же символ. В процессе анимации будут меняться только свойства этого символа (например, изменяя координаты символа, получаем анимацию перемещения в пространстве)
3. Создаём символ - основу анимации движения (Motion Tween).
- Выбираем первый кадр слоя «Мяч». При создании символов желательно выбирать именно кадр, а не объекты на рабочей области, т.к. при выборе кадра Вы автоматически выбираете всё его содержимое (проще соблюсти условие N2).
- Выполняем команду Modify > Convert to Symbol… (F8)
- Называем символ «Мяч». Тип символа - Movie Clip.
Список всех символов для текущего документа можно найти на палитре Library (Window > Library (Ctrl +L)). Палитра Library обычно находится в правой нижней части окна Flash.
4. Создаём анимацию прыжков. Анимация прыжков состоит из двух стадий. На первой стадии мяч подпрыгивает вверх, замедляясь до нулевой скорости, затем на второй стадии он падает вниз, ускоряясь от нулевой скорости. Для нормальной работы циклической анимации первый и последний кадр анимации должны быть одинаковы.
- Добавляем в слой «Мяч» пятнадцатый и тридцатый ключевой кадр (нажимаем правой кнопкой на кадр, выбираем Insert Keyframe).
- Выбираем 15 кадр слоя «Мяч».
- Перемещаем мяч наверх, удерживая клавишу Shift (инструмент Selection Tool - чёрная стрелка).
- Выбираем первый кадр слоя «Мяч» (или любой кадр первой стадии анимации - с первого по четырнадцатый).
- Включаем анимацию движения на первой стадии. Для этого на палитре настроек (Properties) выбираем из списка Tween: > Motion (по умолчанию None - покадровая анимация). Если всё сделано правильно, кадры первой стадии окрашиваются в голубой цвет, и рисуется стрелочка слева-направо.
- В настройках анимации (на палитре Properties), выберем Ease > 100 (при значении Ease = 100 происходит замедление движения до нулевой скорости).
- Выбираем пятнадцатый кадр слоя «Мяч» (или любой кадр второй стадии анимации - с пятнадцатого по тридцатый).
- Включаем анимацию движения на второй стадии. Для этого на палитре настроек (Properties) выбираем из списка Tween: > Motion.
- В настройках анимации, выберем Ease > -100 (при значении Ease = -100 происходит ускорение движения с нулевой скорости).
5. Тестируем анимацию - команда Control > Test Movie (Ctrl + Enter)
6. Усложним анимацию, добавив сплющивание мяча. В итоге получится анимация из четырёх стадий:
1. Сплющенный мяч восстанавливает форму (Начинаем со сплющенного мяча, т.к. в начале анимации мяч находится внизу, и анимация циклическая). Восстановление формы происходит с ускорением.
2. Мяч подпрыгивает (с замедлением).
3. Мяч падает (с ускорением).
4. Мяч сплющивается (с замедлением). В конце 4 стадии мяч должен быть настолько же сплющен, как и в начале 1 стадии, чтобы при воспроизведении анимации не произошло скачка.
Приступим:
- Скопируем первый кадр слоя «Мяч» в 4 кадр и в 27 кадр, чтобы создать небольшие промежутки простоя мяча в начале и конце анимации (при добавлении обычным способом - Insert Keyframe, добавится частичное подпрыгивание на первую и четвёртую стадию, а нам это не нужно). Для этого нажимаем правой кнопкой на первый кадр, выбираем Copy Frames, затем правой кнопкой на 4 кадр > Paste Frames, правой кнопкой на 27 кадр > Paste Frames.
- Выбираем первый кадр слоя «Мяч»
- Сплющиваем мяч инструментом Free Transform (Q). Для этого перетаскиваем вниз его верхнюю границу, удерживая клавишу Alt (если не использовать Alt, низ мяча будет подскакивать).
- Скопируем первый кадр слоя «Мяч» в 30 кадр (чтобы добавить сплющивание на последнюю стадию и устранить скачок при переходе с последнего кадра на первый кадр в циклической анимации). Для этого нажимаем правой кнопкой на первый кадр, выбираем Copy Frames, затем правой кнопкой на 30 кадр > Paste Frames.
- Проверим ускорение на всех стадиях. Выбираем первый кадр, на палитре настроек выбираем Ease > -100; 4 кадр - Ease > 100; 15 кадр - Ease > -100; 27 кадр - Ease > 100.
7. Проверим анимацию (Ctrl + Enter).