Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов

Цель работы: студенты должны научиться создавать покадровую анимацию

Содержание

Задание 2.1 – Покадровая анимация «Падающий шар». 1

Задание 2.2 – Покадровая анимация «Часы. Эпизод I». 6

Задание 2.3 – Покадровая анимация «Восстановление шара». 11

Задание 2.4 – Самостоятельная работа: «Создание анимационных фильмов», покадровая анимация. 13

Задание 2.1 – Покадровая анимация «Падающий шар»

Покадровая анимация «Падающий шар»

Временная диаграмма

монтажный стол

вставка ключевого кадра

частота кадров

1. Откройте приложение Macromedia Flash или Adobe Flash (уточните у преподавателя)

2. Создайте новый документ командой Файл ► Новый или Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

3. Вызовите диалоговое окно Свойства документа командой Изменить ► Документ

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

4. Установите размер документа: 400 Х 300 пикселей.

5. Сохраните документ в своей папке под именем 2-1_Ваша Фамилия.fla

6. Установите такой масштаб отображения документа, чтобы Стол целиком отображался в рабочей области.

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

7. В верхней части стола создайте изображение шара без контура:

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

при этом первый кадр на временной диаграмме будет помечен как ключевой (черной точкой):

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

8. Правой кнопкой мыши щелкните в ячейке второго кадра и в контекстном меню выберите команду Insert Keyframe (Вставить ключевой кадр):

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

На Монтажном столе появится второй кадр фильма:

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

Теперь переместите изображение шара в нижнюю часть стола:

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

9. Создайте третий ключевой кадр, на котором будет показано, как от шара откололся кусочек:

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

10. На четвертом ключевом кадре от шара должен отколоться ещё один кусочек:

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

11. На пятом ключевом кадре должно остаться нечто, в предыдущей жизни бывшее шариком:

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

12. Вызовите диалоговое окно Свойства документа командой Изменить - Документ и установите частоту кадров: 5 кадров в секунду:

13. Воспроизведите файл: Управление – Воспроизвести - …

14. Просмотрите готовый фильм, нажав сочетание клавиш <Ctrl>+<Enter> или Управление – Тестировать ролик

15. Готовое изображение сохраните в своей папке в формате *.fla

16. Выполните заливку области действия (сцены), для этого:

- м. Изменить – Документ – Цвет фона Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru - ОК

Ваш результат:

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

17. Воспроизведите файл: Управление – Воспроизвести - …

18. Просмотрите готовый фильм, нажав сочетание клавиш <Ctrl>+<Enter> или Управление – Тестировать ролик

19. Сохраните готовое изображение в своей папке в формате *.fla

20. Восстановите цвет фона - белый

21. Вставьте в область действия растровое изображение, для этого:

- создайте новый Слой 2 (1ШЛ на Слое 1 – Вставить слой)

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

- выберите на панели Цвет х - Растровое изображение

- нажмите Импорт

- выберите рисунок капля.jpg - открыть

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

- Далее самостоятельно в первом кадре нового Слоя 2 нарисуйте овал

Ваш результат:

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

22. Воспроизведите файл: Управление – Воспроизвести - …

23. Просмотрите готовый фильм, нажав сочетание клавиш <Ctrl>+<Enter> или Управление – Тестировать ролик

КОНТРОЛЬНАЯ ТОЧКА 2.1: Представьте преподавателю результаты работы

назад

Задание 2.2 – Покадровая анимация «Часы. Эпизод I»

Покадровая анимация «Часы. Эпизод I»

Временная диаграмма

Работа со слоями

Свободная трансформация

Точка трансформации

1. Создайте новый документ размером 200 Х 200 пикселей, цвет фона Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

2. Сохраните документ в своей папке под именем 2-2_Ваша Фамилия.fla

3. На монтажном столе с помощью кнопки Вставить слой Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru добавьте еще два слоя

4. Переименуйте слои в Циферблат, Маленькая стрелка, Большая стрелка(2ЩЛ в области названия слоя – и ввести название):

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

5. В первом ключевом кадре слоя Циферблат нарисуйте циферблат будущих часов:

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

6. В первых ключевых кадрах слоёв Маленькая стрелка и Большая стрелка нарисуйте соответственно маленькую и большую стрелки часов:

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

Для рисования стрелки возможен следующий алгоритм (не забудьте при рисовании стрелок переходить в нужный слой):

- Нарисовать прямоугольник в слое Маленькая стрелка Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru (заготовка стрелки)

- Используя инструмент Спецвыделение Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru - выделите контур прямоугольника

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

- Преобразуйте прямоугольник в треугольник:

- Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

- Далее аналогично нарисуйте Большую стрелку в соответствующем слое

7. Выделив во всех слоях вторые кадры, удерживая Ctrl, щелкните правой клавишей мыши и выполните команду Insert Keyframe (Вставить ключевой кадр): Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

8. На 2-м кадре, выделив Большую стрелку в слое Большая стрелка, выберите инструмент Свободная трансформация (преобразование) Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru .

9. Сместите точку трансформации (transformation point) к центру циферблата и поверните стрелку на 30°.

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru - Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru - Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

10. Тоже самое проделайте на втором кадре с маленькой стрелкой в слое Маленькая стрелка, слегка сместив её к цифре 10 на 2,5°:

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

11. Воспроизведите файл: Управление – Воспроизвести - …

12. Создавая каждый раз новые ключевые кадры, перемещая большую и маленькую стрелку, добейтесь того, чтобы в результате большая стрелка сделала круг, а маленькая встала на 10. При этом должно получиться 12 кадров:

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

13. Установите частоту смены кадров в свойствах документа (Изменить – Документ): 1 кадр в секунду.

14. Просмотрите готовый фильм, нажав сочетание клавиш <Ctrl>+<Enter>.

15. Сохраните готовое изображение в своей папке в формате 2-2_Ваша Фамилия.fla

Готовое изображение:

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

КОНТРОЛЬНАЯ ТОЧКА 2.2: Представьте преподавателю результаты работы

назад

Задание 2.3 – Покадровая анимация «Восстановление шара»

Покадровая анимация «Восстановление шара»,

Обратить кадры,

Выделение кадров

1. Откройте 2-1_Ваша Фамилия.fla

2. Сохраните документ в своей папке под именем 2-3_Ваша Фамилия.fla

3. На монтажном столе выделите все кадры фильма

- сначала выделите , удерживая Ctrl, первые кадры слоя 1 и слоя2,

- затем, удерживая Shift, щелкните на пятом кадре

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

4. В области выделения кадров, используя контекстное меню, выполните команду Обратить кадры:

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

5. Задайте частоту кадров, равную единице в Свойствах документа (м. Изменить – Документ - … )

6. Просмотрите готовый фильм

7. Готовое изображение сохраните в своей папке в формате 2-3_Ваша Фамилия.fla

КОНТРОЛЬНАЯ ТОЧКА 2.3: Представьте преподавателю результаты работы

назад

Задание 2.4 – Самостоятельная работа: «Создание анимационных фильмов», покадровая анимация

Используя покадровую анимацию, самостоятельно создайте фильмы, подобные тем, которые приведены на иллюстрациях, документ сохраните под именем 2-4_Ваша Фамилия.fla

Готовые изображения:

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

Практическая работа № 2 – Покадровая анимация изображений. Создание анимационных фильмов - student2.ru

КОНТРОЛЬНАЯ ТОЧКА 2.4: Представьте преподавателю результаты работы

назад

Наши рекомендации