Приложение 3 Методическое пособие «Учимся создавать анимацию на уроках информатики»

МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
Приложение 3
Методическое пособие «Учимся создавать анимацию на уроках
информатики»
Практическая работа №1
«Создание анимации в программе Flash»
Цели урока:
1. обучающая – сформировать представление о процессе заполнения кадров
с изменением формы, который используется для трансформации рисованных
фигур между начальными и конечными точками кадров
2. развивающая - развивать интеллектуальные умения анализировать и
сравнивать полученную информацию, развивать творческие способности при
создании анимации
3. воспитательная – воспитывать эстетическое восприятие
действительности, любовь к экранному искусству, формировать навыки
самоконтроля.
Оборудование и дидактический материал: ПЭВМ, программа Flash,
мультимедийный проектор, демонстрационный материал, электронная
презентация, задания.
Структура и ход урока:
1. Организационный момент. Проверка учащихся и их готовности к
уроку.
2. Проверка домашнего задания
Что такое анимация? Какие виды анимации вы знаете, их достоинства
и недостатки? Как выполняется анимация движения?
На прошлом уроке мы познакомились с анимацией движения.
Сегодня продолжим изучение анимации. Запишите тему урока:
Создание анимации формы в программе Flash.
3. Целеполагание. Формулируются цели урока
(Демонстрируется файл – Создание анимации формы в программе
Flash.ppt – слайд 1).
4. Объяснение нового материала, его конспектирование, показ
выполнения основных операций
Анимация формы с заполнением первого и последнего ключевого
кадра Shape tweening.
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
Заполнение кадров с изменением формы используется для
трансформации рисованных фигур между начальными и конечными
точками. Flash может выполнить операцию заполнения кадров с
изменением формы только для фигур. На одном слое можно выполнить
заполнение кадров для нескольких фигур. Но для четкой организации
нужно, чтобы каждая фигура находилась на отдельном слое, если вы
впоследствии вернетесь к этому анимационному фрагменту, чтобы
внести определенные изменения, то работа упростится.
(Демонстрируется файл – Создание анимации движения в программе
Flash.ppt – слайд 2). Учащиеся ведут краткий конспект. (Далее все
операции показываются на экране с помощью мультимедийного
проектора.)
Для создания расчетной анимации формы нужно выполнить
следующие действия:
1. Нарисовать объект в ключевом кадре.
2. Находясь в первом кадре, использовать панель «Кадр», выбрать
пункт Shape, изменить ослабление.
3. Указать конечный кадр и включить команду чистый ключевой кадр,
это можно сделать, щелкнув правой клавишей мыши на кадре, который
и будет ключевым, появится список, в котором и выбрать чистый
ключевой кадр. В нем расположить изображение, затем проиграть
анимацию. Для этого выбрать пункт меню «Управление» команда
«Воспроизведение» или нажать клавишу Enter на клавиатуре. После
этого анимация будет, воспроизводится.
После того как у вас есть два ключевых кадра, вы делаете активным
первый из них (просто переходите на него), и выбираете на панели
«Кадр» в списке Tweening строку Shape:
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
Кадры на временной шкале должны окраситься в зеленоватый цвет и от
первого кадра ко второму должна протянуться стрелочка.
В результате вы получите ряд промежуточных кадров, которые будут
отражать переход от первой фигуры ко второй. (Демонстрируется файл
– Создание анимации движения в программе Flash.ppt – слайд 3):
В этой анимации круг переходит в некое подобие полумесяца. На
первом ключевом кадре нарисован круг, а на другом ключевом кадре
(это 10-й кадр сцены) полумесяц. В панели «Кадр» есть два параметра
Easing (Ускорение) и Blend (Переход)
Easing (Ускорение) задает обратное экспоненциальное ускорение.
Величина этого параметра может изменяться от - 100 до + 100. Это
означает, что если вы зададите отрицательный easing (ускорение),
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
скорость будет увеличиваться (См. рис. 4). И наоборот, если easing
(ускорение) будет положительным, анимация будет замедляться (См.
рис. 5).
Параметр Blend (Переход), определяет алгоритм перехода: Distributive
(распределяющий, общий) и Angular (угловатый). Первый старается
максимально смягчить, сгладить переход от одной фигуры к другой.
Второй же пытается сохранить пропорции углов. Если переход вас не
удовлетворяет, можно поэкспериментировать с этим параметром.
5. Закрепление пройденного материала.
(Демонстрируется файл – Создание анимации движения в программе
Flash.ppt – слайд 4).
Создание анимации формы: «Ночной цветок»
1. Создайте новый проект.
2. Создайте слой с именем «ФОН». На этом слое изобразите
ландшафт.
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
3. Затем создайте слой «НЕБО», разместите слой таким образом,
чтобы он располагался за слоем «ФОН».
4. На слое «НЕБО» в первом кадре изобразите голубой
прямоугольник, в 30-ом кадре залейте прямоугольник темносинем цветом, создайте анимацию формы между кадрами.
5. Создайте слой с именем «ГОРА», изобразите на нем
произвольную возвышенность светло-серого цвета, в 30-ом кадре
залейте гору темно-серым цветом, предварительно сделав кадр
ключевым. Затем повторите создание анимации формы, как на
предыдущем слое.
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
6. Создайте слой с именем «СОЛНЦЕ» на нем нарисуйте солнце,
сделайте 30-й кадр ключевым, разместите на нем «солнце в
зените», затем на 60-ом кадре разместите светило с другого края
сцены. Создайте анимацию движения между 1и 30 кадрами и 30
и 60.
7. Создайте слой «ЦВЕТОК» нарисуйте на нем цветок (во
избежание непредвиденных ситуаций на этом слое изобразите
только бутон, а стебель на любом другом, например, на слое
«ФОН»), на 30-ом кадре изобразите раскрывшейся бутон, а на
60-ом вновь закрытый бутон между ключевыми кадрами
создайте анимацию формы.
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
8. Все, работа закончена. Теперь экспортируйте файл в формат
*.SWF.
6. Подведение итогов урока.
Ребята, предлагаю вам просмотреть работы друг друга. Обратите
внимание на достоинства и недостатки разных анимаций. Отдельные
анимации демонстрируются всем с помощью проектора. Обсуждаются
положительные моменты, ошибки, недочеты, если есть.
Повторим основные моменты урока.
С какой программой мы сегодня продолжили знакомство? Как создать
анимацию формы? Какое расширение имеет файл анимации?
Понравились ли вам возможности программы и где вы могли бы их
использовать?
Анализ ответов учащихся; аргументация и выставление оценок.
7. Домашнее задание: конспект; продумать и подготовить материал для
собственной анимации
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
Тема: Анимация движения нескольких объектов. Анимация
движения по траектории
Цели:
Образовательные:
o
o

o
o

o
o
Закрепить знания по анимации движения.
Постараться на практике создать самостоятельно анимацию
движения.
Развивающие:
ответственность за результаты своей работы;
самостоятельность, сосредоточенность, самоконтроль.
Воспитательные:
ответственность за сохранность школьного имущества, в
частности, компьютерного класса;
ответственность и требовательность к себе;
Ход урока:




Организационный момент.
Проверка домашнего задания. Тест на компьютере или проверка
домашнего задания на компьютере. На усмотрение учителя выставляются
отметки.
Запускаем Macromedia Flash.
Показываем красивую анимацию и говорим, что мы создадим такую
же сегодня.
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.




Говорим, что это анимация движения нескольких объектов и
обязательно указываем, что при её создании необходим располагать
различные элементы на разных слоях.
Подробно разбираем создание анимации.
Рассматриваем движение по траектории.
Для закрепления изученного материала
3) В упражнении 1 сделайте движение шара вдоль какой либо кривой.

Рефлексия.
Задание на дом:

Описать создание анимации движения в тетради опираясь на
конкретный рисунок.
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
Тема: Видеоурок Анимация формы
Цели:
Образовательные:
o

o
o

o
o
Познакомиться с анимацией формы.
Развивающие:
ответственность за результаты своей работы;
самостоятельность, сосредоточенность, самоконтроль.
Воспитательные:
ответственность за сохранность школьного имущества, в
частности, компьютерного класса;
ответственность и требовательность к себе;
Ход урока:



Организационный момент.
Проверка домашнего задания. Тест на компьютере или проверка
домашнего задания на компьютере. На усмотрение учителя выставляются
отметки.
Изучение нового материала. Используем видеокурс:
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
Запускаем Macromedia Flash.
Показываем пример готовой анимации формы.
Говорим, что это второй вид анимации и сразу же указываем на то,
что анимация формы не применима к объектам, находящимся в
библиотеке.
Создаем с подробным разбором анимацию формы.





Для закрепления изученного материала

Рефлексия.
Задание на дом:
o
Описать
придумав её.
создание
анимации
формы,
предварительно
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
Тема: Видеоурок Анимация движения.
Цели:
Образовательные:
o
o

o
o

o
o
Познакомиться с анимацией движения.
Попробовать самостоятельно создать простейшую анимацию
движения.
Развивающие:
ответственность за результаты своей работы;
самостоятельность, сосредоточенность, самоконтроль.
Воспитательные:
ответственность за сохранность школьного имущества, в
частности, компьютерного класса;
ответственность и требовательность к себе;
Ход урока:




Организационный момент.
Проверка домашнего задания. Тест на компьютере или проверка
домашнего задания на компьютере. На усмотрение учителя выставляются
отметки.
Изучение нового материала. Используем видеокурс:
Говорим о главном назначении программы Macromedia Flash
создании анимаций (интерактивных изображений).
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.

Повторяем панель Timeline и основные её элементы.
На конкретных примерах объясняем, что такое анимации движения.
Рассматриваем основные ошибки при создании анимации движения.

Для закрепления изученного материала выполнить:

Рефлексия.


Задание на дом:

Описать создание анимации движения в тетради опираясь на
конкретный рисунок.
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
Тема: Анимация движения в системе Flash.
Тип урока: Урок-проект с элементами творческой работы.
Цель:
Образовательный аспект – развитие творческих способностей
учащихся с помощью активного образного мышления, развитие умения
работать с компьютером и информацией для расширения своих познаний.
Развивающий аспект – творческое применение своих знаний в области
двухмерной компьютерной графики.
Цели урока: Познакомить учащихся с типами анимации.
Сформировать умение создавать простейшую анимацию в системе Flash.
Формы организации учебно-познавательной деятельности
учащихся:
- индивидуальная – каждый ученик создает индивидуальный проект
фрагмента сказки «Колобок»;
- групповая – индивидуальные проекты учеников позволяют реализовать
групповой проект сказки «Колобок». Работа на перспективу – показ сказки
детям ДОУ и начальной школы в рамках развития социокультурного центра
в школе.
План урока:
1. Организация урока.
2. Постановка проблемы урока.
3. Получение сведений о классификации анимации во Flash
(эвристическая беседа).
4. Актуализация знаний по созданию рисованных объектов в системе.
5. Демонстрация создания простой анимации.
6. Практическая работа учащихся за компьютером.
7. Подведение итогов урока.
8. Домашнее задание.
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
ХОД УРОКА
1. Организация урока
Учитель проверяет готовность учеников к уроку.
2. Постановка проблемы урока
Рассмотрим некоторые объекты и выясним, каким из них вы отдаете
предпочтения. Какие вам нравятся больше и почему?
Просмотр некоторых Web-страниц, слайдов презентаций с анимацией и без
нее.
В ходе беседы выясняем, что красивее, симпатичнее сайты и слайды
презентаций с анимацией.
Как создать анимацию – это и есть тема сегодняшнего урока.
3. Получение сведений о классификации анимации во Flash
(эвристическая беседа с демонстрацией)
Основное назначение системы во Flash – «оживление» рисованных
изображений.
Овладев основными приемами работы в системе, вы сможете:
- создать эффективную презентацию или обучающую программу;
- сделать Web-сайт или внести «живую изюминку» в оформление вашего
сайта, т.е. создание рекламных web роликов (баннеры);
- создать мультфильм;
- запрограммировать свою первую игру.
Прежде чем начинать что то делать на практике, давайте рассмотрим
базовые понятия в анимации: кадр (frames), ключевой кадр,слой (layers), и
временная шкала (timeline), символы (symbols) (Приложение 1).
Анимация - это изменение свойств объекта с течением времени
(Анимация – процесс изменения размера, положения, цвета или формы
объекта во времени).
Кадр. Все фильмы состоят из кадров (фреймов). Каждый кадр
содержит одно статическое изображение. Иллюзия движения создается
благодаря незначительным изменениям в рисунках от одного кадра к
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
другому. Кадр может быть как составленным вручную, так и
сгенерированным Flash
Ключевой кадр – кадр доступный для обработки (отображается
чёрным кружочком, если в нём есть изображение, и белым, если нет
никакого рисунка). Кадр, в котором создатель фильма выполняет смену
анимированного изображения.
Слой – это блок фильма, состоящий из отдельных изображений, из
анимации со своей шкалой времени.
Временная шкала – поле, на котором отображается информация о
слоях, о том какие кадры являются ключевыми, а какие генерирует Flash.
Во Flash анимация, с точки зрения создания, можно выделить следующие
подвиды: покадровая анимация, автоматическая (трансформационная)
анимация и анимация на основе сценариев. У каждого типа анимации есть
свои преимущества и недостатки, сферы применения.
Покадровая анимация полностью состоит из ключевых кадров,
причем содержимое кадров вы создаете сами. Это напоминает процесс
создание мультфильмов, когда каждый кадр рисуется на отдельном листе и
если у вас в мульте 5000 кадров, то соответственно вам придется нарисовать
5000 рисунков. (показ бумажного слайд шоу). Во Flash это сделать, конечно
намного проще, чем на бумаге, но все равно это тяжелый труд, к тому же
размер файла при покадровой анимации получается большим. Во flash
покадровая анимация используется в тех случаях, когда задачу нельзя решить
другими способами.
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
В трансформационной анимации основной труд при её создании
выполняет Flash, что позволяет получить несложную анимацию.
Автоматическое анимирование (так называемая tweened-анимация), при
использовании которой автор создает только первый и последний кадры
мультипликации, а Flash автоматически генерирует все промежуточные
кадры.
Анимация на основе сценариев. Сценарий представляет собой
описание поведения объекта на собственном языке Flash, который
называется ActionScript.
С точки зрения способа построения анимация подразделяется на
анимацию движения и анимацию изменения формы. Анимация движения
выполняется над экземплярами обьекта и позволяет его переместить,
изменить масштаб, трансформировать, прозрачность, наложить цвет; при
этом форма обьекта остаётся неизменной. Анимации изменения формы
работает непосредственно с рисунками и позволяет изменить один рисунок
на другой, изменяя при этом его положение, размер и цвет.
Анимация формы
Сегодня мы познакомимся с принципами создания анимации формы.
В отличие от анимации движения, анимация формы, работает только с
примитивами, то есть с формами, созданными с помощью инструментов
рисования. Так же как и в анимации движения в одном слое не должно быть
больше одной анимированной формы.
Анимация движения
Создание анимации движения отличается от покадровой анимации тем что
нам не нужно каждый кадр создавать вручную, достаточно создать первый
кадр анимации и последний, программа заполнит все промежуточные кадры
автоматически. Нужно иметь в виду что анимация движения применима
только к символам и на одном слое должно быть не более одного
анимированного символа.
Другими словами, прежде чем приступить к созданию собственного
“мультика”, следует определиться с выбором механизма его реализации.
4. Актуализация знаний по созданию рисованных объектов в
системе.
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
Выяснить как можно создать объект, выбрать цвет фона и цвет контура
фигуры, выделить объект, где располагаются свойства объектов (с
демонстрацией на интерактивной доске).
5. Демонстрация создания простой анимации.Алгоритм выполнения.
1. При помощи панели инструментов на рабочем поле нарисуйте объект.
2. Используя инструмент «свободная трансформация»
, установите
объект в нужное место.
3. В главном меню первого кадра выберите команду Вставить – Шкала
времени – Создать промежуточное отображение (или в контексном
меню Создать промежуточное отображение).
4. На кадре, где предпочитаете закончить анимацию выберите в главном
меню команду Вставить – Шкала времени – Клавиатура (или в
контексном меню Вставить клавиатуру).
5. Измените размеры объекта конечного ключевого кадра, используя
инструмент «свободная трансформация»
и переместите объект в
нужное место.
6. Просмотрите получившийся фрагмент, выбрав Управление –
Проиграть (или нажмите клавишу Enter).
6. Практическая работа учащихся за компьютером
Создание мини-проекта по сказке «Колобок».
Комментарий для учителя. Каждому ученику выдается практическая работа
для создания отдельного фрагмента сказки. Рекомендуется озвучить сказку
«Колобок» заранее и разбить звуковой файл на отдельные сюжеты, чтобы в
работе указать ученикам длительность анимации.
Практическая работа по теме «Простейшая анимация движения в
системе Flash»
Вариант – 1
Задание. Создайте фрагмент сказки «Колобок», где на фоновой
картинке (D:/FOTO/Колобок/Картинка1.jpg) по тропинке катиться колобок и
при этом звучат следующие слова:
Колобок полежал, полежал да и покатился с окна на лавку, с лавки
на пол, по полу к двери, прыг через порог – и дальше по дорожке.
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
Звук занимает 9 секунд. 13 кадров – 1 секунда. Анимируйте картинку в
течении всего этого времени (117 кадров) и экспортируйте фрагмент фильма
в каталог D:/User/_ под именем побег.avi
Алгоритм выполнения
1. Откройте программу Flash MX 2004 (D:/SCHOOL/ Flash MX
2004/*.exe).
2. При помощи панели инструментов на рабочем поле создайте колобка
из сказки.
3. Добавьте фоновую картинку:
- Создайте новый слой, выбрав команду Вставить – Шкала времени –
Слой (перейти на второй слой, щелкнув клавишей мыши на название слоя).
- Импортируйте фоновую картинку Файл – Импорт – Импортировать
на стадию. (Картинку выбрать из каталога D:/FOTO/Колобок/Рисунок1.jpg).
- Измените размеры картинки, используя инструмент «свободная
трансформация»
, до размеров кадра.
4. Поставьте первый слой над вторым (перетащив мышью).
5. Перейдите на слой колобка. Используя инструмент «свободная
трансформация»
, установите колобка в нужное место.
6. В главном меню первого кадра выберите команду Вставить – Шкала
времени – Создать промежуточное отображение (или в контексном
меню Создать промежуточное отображение).
7. На кадре, где предпочитаете закончить анимацию выберите в главном
меню команду Вставить – Шкала времени – Клавиатура (или в
контексном меню Вставить клавиатуру).
8. Измените размеры объекта конечного ключевого кадра, используя
инструмент «свободная трансформация»
и переместите объект в
нужное место.
9. Просмотрите получившийся фрагмент, выбрав Управление –
Проиграть (или нажмите клавишу Enter).
10.Сохраните проект файла D:/User/U_.fla
11.Сохраните файл фильма, выбрав команду Файл – Экспорт – Экспорт
фильма в каталог D:/User/_ под именем побег.avi
Вариант – 2
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
Задание. Создайте фрагмент сказки «Колобок», где на фоновой
картинке (D:/FOTO/Колобок/Картинка2.jpg) по тропинке катиться колобок
навстречу зайцу и при этом звучат следующие слова:
Катиться колобок, а навстречу ему заяц:
- Колобок, колобок! Я тебя съем!
- Не ешь меня, косой, я тебе песенку спою.
Вариант – 3
Задание. Создайте фрагмент сказки «Колобок», где на фоновой
картинке (D:/FOTO/Колобок/Картинка3.jpg) колобок убегает от зайца и при
этом звучат следующие слова: И покатился колобок дальше – только заяц
его и видел.
Вариант – 4
Задание. Создайте фрагмент сказки «Колобок», где на фоновой
картинке (D:/FOTO/Колобок/Картинка4.jpg) по тропинке катиться колобок
навстречу волку и при этом звучат следующие слова:
Катиться колобок по тропинке в лесу, а навстречу ему заяц:
- Колобок, колобок! Я тебя съем!
- Не ешь меня, серый волк, я тебе песенку спою.
Вариант – 5
Задание. Создайте фрагмент сказки «Колобок», где на фоновой
картинке (D:/FOTO/Колобок/Картинка5.jpg) колобок убегает от волка и при
этом звучат следующие слова:
И покатился колобок дальше – только волк его и видел.
Вариант – 6
Задание. Создайте фрагмент сказки «Колобок», где на фоновой
картинке (D:/FOTO/Колобок/Картинка6.jpg) по тропинке катиться колобок
навстречу медведь и при этом звучат следующие слова:
Катиться колобок по лесу, а навстречу ему медведь:
- Колобок, колобок! Я тебя съем!
- Ну где тебе, косолапому, съесть меня!
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
Вариант – 7
Задание. Создайте фрагмент сказки «Колобок», где на фоновой
картинке (D:/FOTO/Колобок/Картинка7.jpg) колобок убегает от медведя и
при этом звучат следующие слова:
И опять покатился колобок – медведь только вслед ему посмотрел.
Вариант – 8
Задание. Создайте фрагмент сказки «Колобок», где на фоновой
картинке (D:/FOTO/Колобок/Картинка8.jpg) по тропинке катиться колобок
навстречу лиса и при этом звучат следующие слова:
Катиться колобок, а навстречу ему лиса:
- Здравствуй, колобок! Спой мне песенку!
Колобок и запел свою песенку, Алиса слушает да все ближе
подкрадывается.
Вариант – 9
Задание. Создайте фрагмент сказки «Колобок», где на фоновой
картинке (D:/FOTO/Колобок/Картинка9.jpg) колобок прыгает на нос лисе и
при этом звучат следующие слова:
- Славная песенка! – сказала лиса.- Да стара я стала – плохо слышу.
Сядь ко мне на носочек да пропой еще разочек.
Вариант – 10
Задание. Создайте фрагмент сказки «Колобок», где на фоновой
картинке (D:/FOTO/Колобок/Картинка10.jpg) лиса съела колобка и при этом
звучат следующие слова:
Колобок прыгнул лисе на нос и запел:
- Я колобок, колобок!..
Алиса его – ам! – и съела.
7. Подведение итогов урока
Комментарий для учителя. В это время один из учеников монтирует ролик
из готовых сюжетов, накладывает звуковые файлы, например, в программе
Windows Movie Maker.
МБОУ «Дедуровская СОШ Оренбургского района»
Дубских Г.Н.
Просмотр видеороликоввыбор критериев оценивания
Критерии:
- качественная детализация;
- передача сюжета: передача характера героя, его отличительных
особенностей;
- сохранение пропорции при трансформации;
- правильное сохранение.
Оценивание работ друг друга по цветовой схеме (оранжевый – отлично,
зеленый – хорошо, синий – требуются доработки).
8. Домашнее задание
Придумать анимационный ролик для оформления школьного сайта.
Просмотр сказки «Колобок».
9. Рефлексия