Инфоурок / Информатика / Конспекты / Работа по созданию анимации - движение

Работа по созданию анимации - движение



Московские документы для аттестации!

124 курса профессиональной переподготовки от 4 795 руб.
274 курса повышения квалификации от 1 225 руб.

Для выбора курса воспользуйтесь поиском на сайте KURSY.ORG


Вы получите официальный Диплом или Удостоверение установленного образца в соответствии с требованиями государства (образовательная Лицензия № 038767 выдана ООО "Столичный учебный центр" Департаментом образования города МОСКВА).

ДИПЛОМ от Столичного учебного центра: KURSY.ORG


библиотека
материалов





Практическая работа
«Создание анимации движения в программе Flash»

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




Цели урока:
1.
обучающая – сформировать представление о процесс заполнения кадров с движением для анимации групп объектов, символов и редактируемого текста
2.
развивающая -  развивать интеллектуальные умения анализировать и сравнивать полученную информацию, развивать творческие способности при создании анимации
3.
воспитательная – воспитывать эстетическое восприятие действительности, любовь к экранному искусству, формировать навыки  самоконтроля.
Оборудование и дидактический материал: ПЭВМ, программа Macromedia Flash, мультимедийный проектор,  демонстрационный материал, электронная презентация,   задания.

Структура и ход урока:

  1. Организационный момент. Проверка учащихся и их готовности к уроку.   
                    

  2. Проверка домашнего задания                                         

Что такое анимация? Какие виды анимации вы знаете, их достоинства и недостатки? Как выполняется покадровая анимация?
На прошлом уроке мы познакомились с  покадровой анимацией. Сегодня продолжим изучение создания анимации. Запишите тему урока:
«Создание  анимации  движения в программе Flash».

  1. Целеполагание.  Формулируются цели урока.         

(Демонстрируется файлСоздание анимации движения в программе Flash.pptслайд 1).

  1. Объяснение нового материала и его конспектирование, показ выполнения основных операций.                                                                                     

Процесс заполнения кадров с движением применяется для анимации групп объектов, символов и редактируемого текста. Как видно из названия, этот вид анимации используется для перемещения элемента из одного положения в другое, также заполнение кадров с движением можно применять для анимации изменения размеров, наклона или вращения объекта. Изменение цвета прозрачности  и т. д. (Демонстрируется файл – Создание анимации движения в программе Flash.ppt – слайд 2). Учащиеся ведут краткий конспект.

Заполнение кадров с движением можно начать или остановить в любой точке. Для этого стоит добавить ключевые кадры для каждого этапа изменения, при этом в каждом этапе можно менять тип заполнения, например: перемещать и одновременно вращать объект. Универсальный способ включения и выключения motion tweening осуществляется  с помощью панели «Кадр». (
Далее все операции показываются на экране с помощью мультимедийного проектора.) Чтобы включить панель «Кадр» нужно, выбрать пункт меню «Модификация». На экране появится панель «Кадр». В поле Tweening выбрать Motion, там же можно контролировать параметры анимации:

рисунок 1

Easing - обратное экспоненциальное ускорение.

Rotate позволяет управлять вращением. Auto - Flash автоматически пытается определить количество витков - CW (Clockwise, по часовой стрелке) и CCW (Counter Clockwise - против часовой стрелки). При этом рядом, в поле справа, появляется возможность ввести количество оборотов. Можно использовать только целые значения. Можно отключить вращение, выбрав None.

Orient to path – (Ориентировать по траектории) поворачивает символ в соответствии с направляющей линией. Snap привязывает символ к этой направляющей.
В случаях, когда количество кадров основной сцены не бывает кратным количеству кадров символа, флажок Synchronize (Синхронизация) позволяет синхронизировать эти две анимации.

Для выполнения процесса заполнения кадров с движением необходимо  сделать:
1. Выделите кадр, где начинается анимация, сделайте его ключевым, вставьте объект или импортируйте изображение.
2. Если вы используете рисованное изображение, сгруппируйте его или преобразуйте в символ, для этого выберите пункт меню «
Модификация» команда «Группа».
3. Выделите кадр, в котором завершается заполнение кадров, сделать его ключевым.
4. Переместите в него объект из первого кадра, щелкните правой клавишей мыши между начальным и конечным положением кадров.   
5. Откройте  панель «
Кадр» в раскрывшемся окне списка заполнения выберите пункт «Motion», затем пункт меню «Управление» команда «Воспроизведение» или нажать клавишу «Enter».

Например,  вам нужно анимировать самолетик, который выписывает виражи по небу. У вас уйдет уйма времени и сил, на создание этого движения. При этом анимация будет состоять из маленьких отрезков motion tweening и отдельных кадров. Вместо этого можно нарисовать траекторию на специальном слое и привязать символ самолетика к ней.
Если вы используете траекторию, то вам нужен дополнительный слой. Направляющий слой - это слой, который содержат кривую, по которой должен двигаться объект. К сведению, с одной траекторией можно использовать несколько символов.
Для того, чтобы добавить направляющий слой, вам нужно выбрать слой, на котором находится ваш символ, и, нажав правую клавишу мыши, в контекстном меню выбрать «
Направляющий слой». При этом исходный слой становится направляемым. Любой слой можно сделать направляющим, указав это в его свойствах, или направляемым, перетащив нужный слой мышкой, так, чтобы он находился под направляющим.

Рисунок 2

Далее, вам нужно нарисовать траекторию движения. Траекторией может быть любая кривая, не являющаяся областью заливки.  Управляющий слой готов. Теперь, чтобы использовать этот слой, вам нужно взять ваш символ за центральную точку (это такой маленький кружочек) и перетащить ее на траекторию. Вы почувствуете, когда символ "зацепится" за нее, и увидите, как он будет по ней скользить. Далее все по знакомому сценарию - ключевые кадры, включаем motion tweening: Если нужно, чтобы объект поворачивался согласно траектории, а не просто двигался по ней, то на панели «Кадр» нужно включить флажок «Orient to path (Ориентировать по траектории)».

Рисунок 3

После выполнения      вышесказанного, выбрать пункт меню «Управление» команда «Воспроизведение» или нажать клавишу Enter на клавиатуре. После этого анимация будет, воспроизводится. (Демонстрируется файл – Создание анимации движения в программе Flash.ppt – слайд 3).

  1. Закрепление пройденного материала.  

Создание анимации  движения: «Художник» (Демонстрируется файл – Создание анимации движения в программе Flash.ppt – слайд 4).
Создание 1 слоя
1. Прежде, чем приступить к созданию анимации, нужно включить следующие программы: Macromedia Flash 5, Corеl DRAW 11 или  Paint.
2. Включаем рабочее окно программы Macromedia Flash 5, навести курсор мыши на первый слой, щелкнуть два раза и дать имя слоя «
Фон».
3. Перейти в программу   Corеl DRAW 11, создать фон для  анимации. Используйте инструменты:
Указатель, прямоугольник, эллипс, полилиния, масштаб, заливка сеткой

Рисунок 1

4. После того, как вы создадите это изображение, выделите его и  сгруппируйте  в пункте меню Компоновать, команда Группа. Скопируйте  в буфер обмена. 5. Включите рабочие окно Macromedia Flash 5, выделите первый кадр щелчком правой клавиши мыши, вызовите список, в котором выберите Вставка ключевого кадра. Выберите пункт меню Редактировать, команду Вставить из буфера обмена. В первом кадре появится фон, который мы создали в  Corеl.  Выделить 30 кадр, сделать ключевым. На промежутке с 1 по 30 кадр изображение будет без изменения. Заблокируйте слой от дальнейшего редактирования, для этого щелкните по точке  находящейся под значком замка.
Создание 2 слоя
6. Щелкните  правой клавишей мыши на имени слоя «
Фон», в списке выберите команду Вставка слоя. Дайте имя слоя «Холст». Сделайте первый кадр на этом слое ключевым.
7. Нарисуйте холст в Flash, с помощью инструментов:
Стрелка, прямоугольник, подвыбор из палитры для выбора цвета.

Рисунок 2

8. Выделите холст, сгруппируйте в пункте меню Модификация команда Группа, разместите холст на сцене также, как на рис. 3

Рисунок 3

9.  Выделите 30 кадр, сделайте ключевым. На промежутке с 1 по 30 кадр изображение будет без изменения. Заблокируйте слой от дальнейшего редактирования, для этого щелкните по точке  находящейся под значком замка.
Создание 3-4 слоя
10. Вставьте новый слой, дайте имя «
Художник». Сделайте первый кадр этого слоя ключевым. Нарисуйте художника.                                

Рисунок 4

Каждая часть художника: руки, ноги и голова, должны быть отдельно нарисованы и сгруппированы. Создадим новый слой «Рука».
На слое «
Художник» разместим: голову, туловище, 2 ноги и левую руку. На слое «Рука» разместим правую руку. 

Рисунок 5

11. Теперь нам нужно анимировать художника, для этого мы будем работать сразу  с двумя слоями «Художник» и «Рука». Выделите 5 кадр и сделайте его ключевым, сначала на слое «Художник», потом «Рука». Переместите художника немного влево со смещением рук и ног ближе к центру туловища. 
12. Выделите 10 кадр (два слоя), сделайте ключевым. Переместите художника еще влево, вернув расположение рук и ног, как раньше. Проделайте тоже самое с кадрами 15, 20, 25, 30, так чтобы художник оказался рядом с холстом. Должно получиться, будто художник идет к холсту, передвигаясь, как человек со сменой рук и ног. 

Рисунок 6

Создание 5 слоя
13. Вставьте новый слой с именем «
Фон 2», выделите 31 кадр, сделайте его ключевым. Перейдите в программу Paint, выделите  участок, который изображен на рис. 7,  скопируйте его. Снова перейдите во Flash, вставьте изображение, растяните на рабочей области.  

Рисунок 7




14. Выделите 70 кадр сделайте его ключевым.
Создание 6 слоя
15. Вставьте новый слой, дав ему имя «
Холст 1», выделите 31 кадр, сделайте его ключевым, вернитесь к слою «Холст», скопируйте готовый холст. Вернитесь к слою «Холст 1», вставьте холст, растяните и разместите, как на рис 8. Выделите 70 кадр, сделайте ключевым.

Рисунок 8

Создание 7 слоя
16. Вставьте новый слой «
Холст 2», выделите 41 кадр, сделайте его ключевым. Перейдите в программу Corеl DRAW 11. Так как мы уже создали первоначальный фоновый рисунок в этой программе, нам нужно лишь создать ещё два рисунка, которые будут отличаться каждый  друг от друга лишь по оттенкам цветов от светлых к более темным. 

Рисунок 9

17. Разместите  светлую 1-ю картину на холсте,  выделите 48 кадр, сделайте его ключевым. 

Рисунок 10

18. Выделите  49 кадр, сделайте его ключевым, затем на место светлой картинки вставляем, 2-ю, чуть ярче, как на рис. 11. Выделите 55 кадр, сделайте его ключевым. 

Рисунок 11

19. Выделите 56 кадр, сделайте его ключевым, затем на место светлой картинки вставляем  3-ю яркую, как на рис. 12. Выделите 70 кадр, сделайте его ключевым.

Рисунок 12

20. Включите панель «Кадр». Для этого в пункте меню Окно,  команда Панели,  панель Кадр. Затем указателем стрелки выделите кадры с 71 до 41 и в панели «Кадр»,  пункт  Tweening выбрать Motion.
Создание 8 слоя
21. Вставьте новый слой. Дайте имя «
Художник 2», выделите 31 кадр, сделайте его ключевым. Вернитесь к слоям «Художник» и «Рука», скопируйте  художника, вставьте его изображение на слой «Художник 2», разгруппируйте правую руку, пририсуйте кисть, снова сгруппируйте,  разместите  его, как на рис. 13. 

Рисунок 13

22. Выделите 35 кадр, сделайте его ключевым, с помощью инструмента поворот поднимите руку с кистью на середину холста. Теперь выделите 39 кадр, сделайте его ключевым, поднимите руку с кистью еще до границы холста. Выделить 43 кадр, сделайте ключевым, опустите руку с кистью на середину холста, выделите 48 кадр, сделайте ключевым, опустите руку с кистью к нижней грани холста. Повторите тоже самое, поднимая и опуская руки до 60 кадра. Выделите 61 кадр, сделайте его ключевым, переместите художника за область работы. Отделите руку с кистью, разгруппируйте  кисть, поместите вертикально на холсте, руку снова сгруппируйте и разместите  художника в первоначальном положении. 

Рисунок 14

23. Выделите 62 кадр, сделайте ключевым, отодвиньте художника вправо со смещением рук и ног ближе к туловищу. Выделите 70 кадр, сделайте его ключевым, отодвиньте  художника еще немного вправо, верните руки и ноги в первоначальное расположение. Выделите 71 кадр, сделайте ключевым, удалите фон, перейдите в программу Paint, выделите часть рисунка, как на рис. 15, скопируйте, вернитесь во Flash, вставте рисунок, холст и художника уменьшите и расположите, как на рис. 15. 

Рисунок 15

24. Выделите 75 кадр, сделайте ключевым, удалите фон. Скопируйте фон из слоя «Фон» вставьте на слое «Художник» в 75 кадре, разместите, как  холст и художника, уменьшите и расположите, как на рис. 16.  
25. Вставьте новый слой «
Птицы», выберите первый кадр, сделайте ключевым. Нарисуйте птиц в виде галочек, разместите в правом верхнем углу. Выберите 15 кадр, сделайте его ключевым, переместите птиц в центр.  Выберите 30 кадр, сделайте  ключевым, переместите птиц к левому краю. Как выглядят птицы можно просмотреть на рис. 5. Затем указателем стрелки выделить кадры с 31 до 1, в панели Кадр, пункт Tweening выбрать Motion.

Рисунок 16

26. Анимация закончена. Сохраните анимацию. Проиграйте, нажав Enter или пункт меню Управление  команда Воспроизвести.

  1.  Подведение итогов урока.   
    Ребята, предлагаю вам просмотреть работы друг друга. Обратите внимание на достоинства и недостатки  разных  анимаций.  Отдельные анимации демонстрируются всем с помощью проектора. Обсуждаются положительные моменты, ошибки, недочеты, если есть.
    Повторим основные моменты урока.
    С какой программой мы сегодня продолжили знакомство?  Как создать анимацию движения? Какое расширение имеет файл анимации? Понравились ли вам возможности программы и где вы могли бы их использовать?
    Анализ ответов учащихся;  аргументация и выставление оценок.

  2. Домашнее задание: конспект; продумать и подготовить материал  для собственной анимации.


Список используемой  литературы

  1. Macromedia Flash 5/ Книга + Видеокурс: Учебное пособие – М.:  Лучшие книги. Под редакцией В.Б. Комягина.

  2. Flash 8. Просто как 2х2. А.А. Борисенко

  3. ИНТЕРНЕТ: www.flashblog.ru; www.adobe.com






9


Очень низкие цены на курсы переподготовки от Московского учебного центра для педагогов

Специально для учителей, воспитателей и других работников системы образования действуют 65% скидки при обучении на курсах профессиональной переподготовки.

После окончания обучения выдаётся диплом о профессиональной переподготовке установленного образца с присвоением квалификации (признаётся при прохождении аттестации по всей России).

Подайте заявку на интересующий Вас курс сейчас: KURSY.ORG


Краткое описание документа:

 

 

Цели урока:
1. обучающая – сформировать представление о процесс заполнения кадров с движением для анимации групп объектов, символов и редактируемого текста
2. развивающая -  развивать интеллектуальные умения анализировать и сравнивать полученную информацию, развивать творческие способности при создании анимации
3. воспитательная – воспитывать эстетическое восприятие действительности, любовь к экранному искусству, формировать навыки  самоконтроля.
Оборудование и дидактический материал: ПЭВМ, программа Macromedia Flash, мультимедийный проектор,  демонстрационный материал, электронная презентация,   задания.

Общая информация

  • 535
  • 16.01.2015
Номер материала: 307527

Похожие материалы

Получите наградные документы сразу с 38 конкурсов за один орг.взнос: Подробнее ->>