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

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

Документы в архиве:

22.42 КБ Ночной цветок.swf
118.5 КБ СОЗДАНИЕ АНИМАЦИИ формы В ПРОГРАММЕ FLASH 5.ppt

Название документа СОЗДАНИЕ АНИМАЦИИ формы В ПРОГРАММЕ FLASH 5.ppt

СОЗДАНИЕ АНИМАЦИИ ФОРМЫ В ПРОГРАММЕ FLASH 5 Цели урока: обучающая – сформиров...
Анимация формы с заполнением первого и последнего ключевого кадра Shape tween...
АНИМАЦИЯ ФОРМЫ
АНИМАЦИЯ ФОРМЫ
1 из 4

Описание презентации по отдельным слайдам:

№ слайда 1 СОЗДАНИЕ АНИМАЦИИ ФОРМЫ В ПРОГРАММЕ FLASH 5 Цели урока: обучающая – сформировать
Описание слайда:

СОЗДАНИЕ АНИМАЦИИ ФОРМЫ В ПРОГРАММЕ FLASH 5 Цели урока: обучающая – сформировать представление о процессе заполнения кадров с изменением формы, который используется для трансформации рисованных фигур между начальными и конечными точками кадров 2. развивающая - развивать интеллектуальные умения анализировать и сравнивать полученную информацию, развивать творческие способности при создании анимации 3. воспитательная – воспитывать эстетическое восприятие действительности, любовь к экранному искусству, формировать навыки самоконтроля.

№ слайда 2 Анимация формы с заполнением первого и последнего ключевого кадра Shape tweening
Описание слайда:

Анимация формы с заполнением первого и последнего ключевого кадра Shape tweening Анимация формы с заполнением первого и последнего ключевого кадра Shape tweening Заполнение кадров с изменением формы используется для трансформации рисованных фигур между начальными и конечными точками. Flash может выполнить операцию заполнения кадров с изменением формы только для фигур. На одном слое можно выполнить заполнение кадров для нескольких фигур. Но для четкой организации нужно, чтобы каждая фигура находилась на отдельном слое, если вы в последствии вернетесь к этому анимационному фрагменту, чтобы внести определенные изменения, то работа упростится.

№ слайда 3 АНИМАЦИЯ ФОРМЫ
Описание слайда:

АНИМАЦИЯ ФОРМЫ

№ слайда 4 АНИМАЦИЯ ФОРМЫ
Описание слайда:

АНИМАЦИЯ ФОРМЫ

Практическая работа «Создание анимации движения в программе Flash» Методическое пособие «Учимся создавать анимацию на уроках информатики»
  • Информатика
Описание:

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

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

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

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

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

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

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

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

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

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

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

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

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

    Например, вам нужно анимировать самолетик, который выписывает виражи по небу. У вас уйдет уйма времени и сил, на создание этого движения. При этом анимация будет состоять из маленьких отрезков motion tweening и отдельных кадров. Вместо этого можно нарисовать траекторию на специальном слое и привязать символ самолетика к ней.
    Если вы используете траекторию, то вам нужен дополнительный слой. Направляющий слой - это слой, который содержат кривую, по которой должен двигаться объект. К сведению, с одной траекторией можно использовать несколько символов.
    Для того, чтобы добавить направляющий слой, вам нужно выбрать слой, на котором находится ваш символ, и, нажав правую клавишу мыши, в контекстном меню выбрать «Направляющий слой». При этом исходный слой становится направляемым. Любой слой можно сделать направляющим, указав это в его свойствах, или направляемым, перетащив нужный слой мышкой, так, чтобы он находился под направляющим.
    mf2.jpg
    Далее, вам нужно нарисовать траекторию движения. Траекторией может быть любая кривая, не являющаяся областью заливки. Управляющий слой готов. Теперь, чтобы использовать этот слой, вам нужно взять ваш символ за центральную точку (это такой маленький кружочек) и перетащить ее на траекторию. Вы почувствуете, когда символ "зацепится" за нее, и увидите, как он будет по ней скользить. Далее все по знакомому сценарию - ключевые кадры, включаем motion tweening: Если нужно, чтобы объект поворачивался согласно траектории, а не просто двигался по ней, то на панели «Кадр» нужно включить флажок «Orient to path (Ориентировать по траектории)».
    mf3.jpg
    После выполнения вышесказанного, выбрать пункт меню «Управление» команда «Воспроизведение» или нажать клавишу Enter на клавиатуре. После этого анимация будет, воспроизводится. (Демонстрируется файл – Создание анимации движения в программе Flash.ppt – слайд 3).
  5. Закрепление пройденного материала.

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

    mf4.jpg
    4. После того, как вы создадите это изображение, выделите его и сгруппируйте в пункте меню Компоновать, команда Группа. Скопируйте в буфер обмена. 5. Включите рабочие окно Macromedia Flash 5, выделите первый кадр щелчком правой клавиши мыши, вызовите список, в котором выберите Вставка ключевого кадра. Выберите пункт меню Редактировать, команду Вставить из буфера обмена. В первом кадре появится фон, который мы создали в Corеl. Выделить 30 кадр, сделать ключевым. На промежутке с 1 по 30 кадр изображение будет без изменения. Заблокируйте слой от дальнейшего редактирования, для этого щелкните по точке находящейся под значком замка.
    Создание 2 слоя
    6. Щелкните правой клавишей мыши на имени слоя «Фон», в списке выберите команду Вставка слоя. Дайте имя слоя «Холст». Сделайте первый кадр на этом слое ключевым.
    7. Нарисуйте холст в Flash, с помощью инструментов: Стрелка, прямоугольник, подвыбор из палитры для выбора цвета.
    mf5.jpg
    8. Выделите холст, сгруппируйте в пункте меню Модификация команда Группа, разместите холст на сцене также, как на рис. 3
    mf6.jpg
    9. Выделите 30 кадр, сделайте ключевым. На промежутке с 1 по 30 кадр изображение будет без изменения. Заблокируйте слой от дальнейшего редактирования, для этого щелкните по точке находящейся под значком замка.
    Создание 3-4 слоя
    10. Вставьте новый слой, дайте имя «Художник». Сделайте первый кадр этого слоя ключевым. Нарисуйте художника.
    mf7.jpg
    Каждая часть художника: руки, ноги и голова, должны быть отдельно нарисованы и сгруппированы. Создадим новый слой «Рука».
    На слое «Художник» разместим: голову, туловище, 2 ноги и левую руку. На слое «Рука» разместим правую руку.
    mf8.jpg
    11. Теперь нам нужно анимировать художника, для этого мы будем работать сразу с двумя слоями «Художник» и «Рука». Выделите 5 кадр и сделайте его ключевым, сначала на слое «Художник», потом «Рука». Переместите художника немного влево со смещением рук и ног ближе к центру туловища.
    12. Выделите 10 кадр (два слоя), сделайте ключевым. Переместите художника еще влево, вернув расположение рук и ног, как раньше. Проделайте тоже самое с кадрами 15, 20, 25, 30, так чтобы художник оказался рядом с холстом. Должно получиться, будто художник идет к холсту, передвигаясь, как человек со сменой рук и ног.
    mf9.jpg
    Создание 5 слоя
    13. Вставьте новый слой с именем «Фон 2», выделите 31 кадр, сделайте его ключевым. Перейдите в программу Paint, выделите участок, который изображен на рис. 7, скопируйте его. Снова перейдите во Flash, вставьте изображение, растяните на рабочей области.
    mf10.jpg




    14. Выделите 70 кадр сделайте его ключевым.
    Создание 6 слоя
    15. Вставьте новый слой, дав ему имя «Холст 1», выделите 31 кадр, сделайте его ключевым, вернитесь к слою «Холст», скопируйте готовый холст. Вернитесь к слою «Холст 1», вставьте холст, растяните и разместите, как на рис 8. Выделите 70 кадр, сделайте ключевым.
    mf11.jpg
    Создание 7 слоя
    16. Вставьте новый слой «Холст 2», выделите 41 кадр, сделайте его ключевым. Перейдите в программу Corеl DRAW 11. Так как мы уже создали первоначальный фоновый рисунок в этой программе, нам нужно лишь создать ещё два рисунка, которые будут отличаться каждый друг от друга лишь по оттенкам цветов от светлых к более темным.
    mf12.jpg
    17. Разместите светлую 1-ю картину на холсте, выделите 48 кадр, сделайте его ключевым.
    mf13.jpg
    18. Выделите 49 кадр, сделайте его ключевым, затем на место светлой картинки вставляем, 2-ю, чуть ярче, как на рис. 11. Выделите 55 кадр, сделайте его ключевым.
    mf14.jpg
    19. Выделите 56 кадр, сделайте его ключевым, затем на место светлой картинки вставляем 3-ю яркую, как на рис. 12. Выделите 70 кадр, сделайте его ключевым.
    mf15.jpg
    20. Включите панель «Кадр». Для этого в пункте меню Окно, команда Панели, панель Кадр. Затем указателем стрелки выделите кадры с 71 до 41 и в панели «Кадр», пункт Tweening выбрать Motion.
    Создание 8 слоя
    21. Вставьте новый слой. Дайте имя «Художник 2», выделите 31 кадр, сделайте его ключевым. Вернитесь к слоям «Художник» и «Рука», скопируйте художника, вставьте его изображение на слой «Художник 2», разгруппируйте правую руку, пририсуйте кисть, снова сгруппируйте, разместите его, как на рис. 13.
    mf16.jpg
    22. Выделите 35 кадр, сделайте его ключевым, с помощью инструмента поворот поднимите руку с кистью на середину холста. Теперь выделите 39 кадр, сделайте его ключевым, поднимите руку с кистью еще до границы холста. Выделить 43 кадр, сделайте ключевым, опустите руку с кистью на середину холста, выделите 48 кадр, сделайте ключевым, опустите руку с кистью к нижней грани холста. Повторите тоже самое, поднимая и опуская руки до 60 кадра. Выделите 61 кадр, сделайте его ключевым, переместите художника за область работы. Отделите руку с кистью, разгруппируйте кисть, поместите вертикально на холсте, руку снова сгруппируйте и разместите художника в первоначальном положении.
    mf17.jpg
    23. Выделите 62 кадр, сделайте ключевым, отодвиньте художника вправо со смещением рук и ног ближе к туловищу. Выделите 70 кадр, сделайте его ключевым, отодвиньте художника еще немного вправо, верните руки и ноги в первоначальное расположение. Выделите 71 кадр, сделайте ключевым, удалите фон, перейдите в программу Paint, выделите часть рисунка, как на рис. 15, скопируйте, вернитесь во Flash, вставте рисунок, холст и художника уменьшите и расположите, как на рис. 15.
    mf18.jpg

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

    mf19.jpg

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

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


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

  1. Macromedia Flash 5/ Книга + Видеокурс: Учебное пособие – М.: Лучшие книги. Под редакцией В.Б. Комягина.
  2. Flash 8. Просто как 2х2. А.А. Борисенко
  3. ИНТЕРНЕТ: www.flashblog.ru; www.adobe.com
Автор Есина Анна Павловна
Дата добавления 09.07.2009
Раздел Информатика
Подраздел
Просмотров 5261
Номер материала 309
Скачать свидетельство о публикации

Оставьте свой комментарий:

Введите символы, которые изображены на картинке:

Получить новый код
* Обязательные для заполнения.


Комментарии:

↓ Показать еще коментарии ↓