Анимация настенных часов  Дата: Сен 05 | Категория: Flash | Автор: admin |

Символ в символе, настенные часы, урок для начинающих N7
Adobe Flash CS3, иерархия символов (или временных шкал).

В этом уроке мы учимся создавать иерархическую систему символов (или систему-дерево). Расположение символов в такой системе определяется целью создания той или иной анимации.
В нашем случае цель – создать анимацию настенных часов. Циферблат будет неподвижен, минутная стрелка будет совершать полный оборот за 1 секунду, часовая стрелка будет совершать полный оборот за 12 секунд.
Иерархия символов в данном случае будет такой:

Внешний символ «Часы», в принципе делать необязательно – он нужен для удобства копирования (например, если нам понадобится использовать часы в другой анимации или сделать несколько часов).
Статические символы (для стрелок) нужны для создания анимации движения (Motion Tween) внутри символов-стрелок.

1. Открываем исходник File > Open… > …

Часы для урока были нарисованы в Illustrator’e.

2. Создадим символ «Часы». Для этого выберем первый кадр слоя «Часы», затем нажмем клавишу F8 (или Modify > Convert to Symbol), назовем символ «Часы», тип символа – Movie Clip > OK.

3. Распределим объекты по слоям внутри символа «Часы»

- Зайдем в символ «Часы»
- Создадим два дополнительных слоя
- Назовём нижний слой – «Циферблат», средний слой – «Часовая стрелка», верхний слой – «Минутная стрелка»

- Выберем чёрной стрелкой на нижнем слое часовую стрелку.
- Вырежем её, нажав Ctrl + X (или Edit > Cut)
- Выберем слой «Часовая стрелка»
- Вставим вырезанное в то же место слоя «Часовая стрелка», нажав Ctrl + Shift + V (или Edit > Paste in Place)
- Выберем чёрной стрелкой на нижнем слое минутную стрелку.
- Вырежем её.
- Выберем слой «Минутная стрелка»
- Вставим вырезанное в то же место слоя «Минутная стрелка»

4. Создадим новые символы для стрелок часов

- Выберем первый кадр слоя «Часовая стрелка»
- Нажимаем F8, называем символ «Стрелка часовая, статик» > OK (тип символа везде оставляем Movie Clip)
- Нажимаем F8, называем символ «Стрелка часовая» > OK (сразу создаём вложенные символы)
- Выберем первый кадр слоя «Минутная стрелка»
- Нажимаем F8, называем символ «Стрелка минутная, статик» > OK
- Нажимаем F8, называем символ «Стрелка минутная» > OK

5. Создадим анимацию минутной стрелки

- Зайдём в символ «Стрелка минутная». А заодно попробуем ещё один способ для захода в символ (редактирования символа). Для захода в символ можно нажать на кнопку «Edit Symbols» на палитре «Timeline», затем в меню выбрать символ «Стрелка минутная» (по названию)

- Включим анимацию Motion Tween для первого ключевого кадра
- Инструментом Free Transform переместим центр трансформации (белый кружок) в нижнюю часть стрелки (туда, где должна находиться ось вращения стрелки). Для удобства увеличьте масштаб просмотра (нажмите Ctrl + + несколько раз) и выключите прилипание (View > Snapping > Snap to Objects)

- Добавим 31-й ключевой кадр (стрелка будет делать один оборот в секунду, частота кадров = 30, плюс 1 лишний кадр, чтобы устранить задержку)
- В настройках любого кадра первого промежутка анимации (с 1 по 30) выбираем Rotate: CW 1 times

- Добавим 30-й ключевой кадр
- Уберём 31 кадр (команда Remove Frames)
- В настройках любого кадра первого промежутка анимации (с 1 по 30) выбираем Rotate: CW 0 times
- Проверим анимацию (Ctrl + Enter)

6. Создадим анимацию часовой стрелки

- Зайдём в символ «Стрелка часовая».
- Включим анимацию Motion Tween для первого ключевого кадра
- Переместим центр трансформации в нижнюю часть стрелки.
- Добавим 361-й ключевой кадр (стрелка будет делать один оборот за 12 секунд, частота кадров = 30, плюс 1 лишний кадр, чтобы устранить задержку; всего 30*12 + 1)
- В настройках любого кадра первого промежутка анимации выбираем Rotate: CW 1 times
- Добавим 360-й ключевой кадр
- Уберём 361 кадр (команда Remove Frames)
- В настройках любого кадра первого промежутка анимации (с 1 по 30) выбираем Rotate: CW 0 times
- Проверим анимацию (Ctrl + Enter)

Продолжение следует…

Автор: Seegix.net и Arttower.ru & Ejempos.ru