Конспект урока "Анимация движения" 9 класс

1
Урок информатики
Дата: 02.03.2017 г.
Тема: «Анимация движения»
Класс: 9 «А»
Тип урока: изучение и первичное закрепление новых знаний
Цели урока:
Образовательная:
формирование умений создавать анимацию движения по траектории;
Воспитательная:
воспитывать внимательность, интерес к самостоятельной работе,
творчеству, ответственность за сохранность школьного имущества, в
частности, компьютерного класса, ответственность и требовательность
к себе, трудолюбие, дисциплинированность.
Развивающая:
развитие познавательного интереса, логического и алгоритмического
мышления.
Программное и методическое обеспечение урока: редактор Flash,
учебное пособие «Информатика. 9 класс», § 16
Структура урока:
1. Организационный момент (2 мин)
2. Проверка домашнего задания (5 мин).
3. Усвоение новых знаний и способов действий о 15 мин)
4. Физкультпауза (2 мин)
5. Закрепление изученного материала на практике ( до 16 мин)
6. Домашнее задание (1 мин)
7. Подведение итогов занятия (3 мин)
8. Этап рефлексии (1 мин)
Ход урока.
1. Организационный момент:
Здравствуйте! Садитесь. Кто сегодня отсутствует?
Сегодня на уроке мы продолжим изучение графического редактора
Macromedia Flash . Освоим анимацию движения.
2
2. Проверка домашнего задания
И прежде всего мы с вами вспомним и освежим в памяти прошлые
уроки.
Что такое покадровая анимация?
(Покадровая анимация это анимация, полностью составленная из
ключевых кадров)
Назовите достоинства и недостатки покадровой анимации?
(Недостатки: Покадровую анимацию сложно модифицировать.
Приходится модифицировать все кадры.
Покадровая анимация занимает достаточно большой объем, так как
приходится хранить информацию о каждом кадре.
Достоинства: плавные переходы от кадра к кадру)
Как создать ключевой кадр? (F6)
Как занести объект в библиотеку? (F8)
3. Объяснение нового материала.
Анимация движения - вид автоматической анимации
осуществляющаяся путем автозаполнения промежуточных кадров.
Анимация движения производится путём автоматической генерации
(автозаполнения) промежуточных кадров. При этом ключевыми
являются лишь первый и последний кадры, которые содержат
начальную и конечную фазы анимации. Промежуточные кадры
создаются путём изменения положения и трансформации экземпляров
символов. Генерацию промежуточных фаз обеспечивает инструмент
Motion Tween (движение благодаря изменению промежуточных
кадров).
Для вставки промежуточного кадра нажать F5
Для удаления промежуточного кадра нажать Shift+F5
N=f*t
N-необходимое число кадров
f-частота кадров(12 по умолчанию);
t-длительность анимации (в секундах);
Демонстрация выполнения примеров 1-4.
Пример 1. Создать анимацию движения шара на фоне деревьев (рис. 3.39).
3
1. Импортируем рисунок trees.gif. Он попадет на единственный
имеющийся слой и в библиотеку. Поскольку этот рисунок служит
неподвижным фоном, не будем превращать его в символ.
2. Откорректируем его положение и размеры инструментом
Трансформация. Слой, на котором он находится, назовем «лес».
3. Bo избежание случайных изменений заблокируем его.
4. Добавим еще один слой и
назовем его «шар» (рис. 3.40).
B кадре 1 этого слоя, нарисуем шар,
выбрав заливку радиальным градиентом.
Преобразуем его в символ типа графика
(Graphic), присвоив имя «шар»
5. Созданный символ попадет в библиотеку (вызывается клавишами Ctrl
+ L), a на слое «шap», теперь находится его экземпляр.
6. Поместим экземпляр символа «шap» слева перед деревьями.
7. Выделим на шкале времени 12-й кадр в обоих слоях и преобразуем в
ключевой, нажав клавишу F6. Все кадры заполнятся содержанием,
дублирующим ключевые кадры своего слоя (на это укажет серая
окраска этих кадров на шкале времени).
8. На самом деле изображения находятся только в ключевых кадрах 1 и
12, а промежуточные кадры 2—11 содержат ссылки на кадр 1. Поэтому
Flash-фильм (файл .swf) имеет очень маленький размер.
9. Кадры слоя «лес» оставим без изменения, поскольку фон неподвижен.
10. В 12-ом кадре слоя «шар» переместим шар в конечное положение,
уменьшив его размеры с помощью инструмента трансформации.
11. Произведем автозаполнение промежуточных кадров. Для этого
выделим первый или любой промежуточный кадр этого слоя
(например, кадр 7). С помощью меню Вставка —› Создать анимацию
движения правой кнопки мыши или панели Свойства сгенерируем
промежуточные кадры. Сиреневая окраска и стрелка от 1-го кадра к 12-
му указывает на то, что промежуточные кадры сгенерированы
(рис. 3.41).(B случае ошибки стрелка рисуется пунктиром.)
12. Просмотрим последовательность фаз движения перемещая указатель
кадров вдоль шкалы времени.
13. Одновременно несколько фаз анимации удобно наблюдать в режиме
калькирования (Onion Skin), который включается кнопками на нижней
рамке шкалы времени. В этом режиме отображаются контуры объектов
в соседних кадрах или шлейф движущегося изображения (рис. 3.42).
4
14. Протестируем анимацию.
Анимация движения применима только для экземпляров библиотечных
образцов (символов) или сгруппированных объектов.
Пример 2. Увеличить длительность созданной в примере 1 анимации до 3 c.
Исследовать влияние количества и частоты кадров на длительность и
плавность анимации.
1. Увеличим число кадров до N = 12 - 3 = 36, вставив промежуточные
кадры клавишей F5 или протаскиванием выделенных концевых
ключевых кадров с нажатой левой кнопкой мыши. Протестируем
анимацию. Ее длительность 3 с.
2. На панели Свойства увеличим частоту до 30 кадров B секунду.
Протестируем анимацию. Ее длительность стала 36 : 30: 1,2 с.
3. Восстановим частоту 12 кадров в секунду.
Анимация движения, состоящего из нескольких этапов, реализуется
заданием ключевых кадров в моменты начала и окончания этих этапов и
коррекцией свойств объектов (их положения, размеров, цвета, прозрачности)
в этих кадрах. Изменение скорости движения задается на панели Свойства
параметром Замедление (Ease). По умолчанию движение равномерное
(параметр=0), при установке положительного значения движение
замедленное, отрицательного — ускоренное.
Пример 3. Отредактировать созданную анимацию так, чтобы 1,5 с шар
двигался c замедлением вправо и уменьшался, останавливался, а затем
1,5 с двигался с ускорением влево и увеличивался.
1. Выделим 18-й кадр слоя «шap» и преобразуем его в ключевой.
2. Установим шар в крайнее правое положение и уменьшим его
инструментом Трансформация.
3. Выделим последний 36-й кадр и установим шар в крайнее левое
положение. Восстановим его размер.
4. Зададим на первом этапе параметр Замедление (Ease) равным 80, а на
втором- равным —80.
!
5
5. Протестируем анимацию.
Пример 4. Создать анимацию: пропеллер вентилятора совершает 1 оборот за
1 с.
1. Находясь в первом кадре единственного слоя,
нарисуем овал
(рис. 3.43, а).
2. С помощью инструментов выделения
трансформируем его в пропеллер (рис. 3.43, 6) и
превратим в символ типа Графика.
3. Центр вращения полученного объекта должен
совпадать c центром пропеллера. При необходимости
откорректируем положение
центра инструментом Трансформация (рис. 3.43, в).
4. Превратим 12-й кадр в ключевой.
5. Произведем автозаполнение промежуточных
кадров, выполнив команду Вставка —› Создать
анимацию движения.
6. Выделим любой промежуточный кадр и на панели Свойства
установим: (Поворот по чс), 1 оборот (рис. 3.44).
7. Просмотрим последовательность фаз в режиме калькирования
(рис. 3.45).
8. Протестируем анимацию.
6
4. Физкультминутка
-Движения глазными яблоками: вправо-вверх; влево-вверх, вправо-вниз,
влево-вниз. Повторить 3,4 раза.
-Глаза закрыть, отдых 10-15 секунд.
5. Закрепление изученного материала на практике
Выполнение примеров 1-4 самостоятельно
6. Домашнее задание:
Изучить материал § 16
7. Подведение итогов:
Ответы на вопросы учеников (при возникновении таковых).
Звенит звонок. Урок окончен. Всем спасибо. Можете быть свободны.
8. Рефлексия.
Сегодня нового я узнал на _______________ %
Разобрался с данной темой на ____________%
7
Конспект ученика
Анимация движения 02.03.2017
Анимация движения - вид автоматической анимации осуществляющаяся
путем автозаполнения промежуточных кадров.
F5- вставка промежуточного кадра
Shift+F5- удалить промежуточный кадр
N=f*t
N-необходимое число кадров
f-частота кадров(12 по умолчанию);
t-длительность анимации (в секундах);
Оформление классной доски
Анимация движения.
N=f*t
F5-
Shift+F5 -
02.03.2017