КОНСПЕКТ УРОКА ИНФОРМАТИКИ
Тема урока: Основы Flash-анимации. Покадровая анимация
Дата: 13.02.2017
Класс: 9a
Цели урока:
· ознакомление со шкалой времени;
· формирование умений создавать покадровую анимацию;
· развитие познавательного интереса, логического и алгоритмического мышления, самооценки, навыков самоконтроля.
Тип урока: урок усвоения новых знаний и умений.
Учащиеся должны знать: типы кадров.
Учащиеся должны уметь: создавать покадровую анимацию.
Оборудования: учебное пособие «Информатика 9», редактор Flash.
Структура урока:
1. Организационный момент – 3 мин
2. Повторение изученного материала – 2 мин
3. Актуализация знаний и мотивация учащихся на изучение нового материала – 3 мин
4. Объяснение нового материала – 10 мин
5. Физкультминутка – 3 мин
6. Закрепления изученного материала – 20 мин
7. Запись домашнего задания – 2 мин
8. Подведение итогов урока – 2 мин
Ход урока
Организационный момент.
- Здравствуйте. Сегодня мы продолжим работать с редактором Flash. С начало повторим прошлую тему, а затем приступим к изучению новой темы. Сегодня тема: «Основы Flash-анимации. Покадровая анимация »
Повторение изученного материала.
- С какой целью используются слои и папки слоев?
- При создании композиций из нескольких изображений используются слои (layers).
- Каково назначение библиотеки объектов?
- Для хранения объектов многократного использования предназначена библиотека (Library). Объект из библиотеки можно размещать на рабочем поле в нескольких экземплярах, подвергая каждый из них нужным трансформациям.
- Что называют символом и экземпляром объекта?
- Чтобы поместить объект в библиотеку, необходимо преобразовать его в библиотечный образец, называемый в терминологии Flash символ (symbol). Оказавшийся на рабочем поле объект является экземпляром (instance) символа (прототипа объекта). Фактически экземпляр представляет собой лишь ссылку на библиотечный образец.
- Как преобразовать изображение в символ?
- Для превращения объекта в библиотечный образец выделим его и нажмем клавишу F8, или выполним команду меню Insert ->Convert to Symbol (Вставка -> Преобразовать в символ). В появившемся диалоговом окне введем имя (например: «яблоко»), выберем тип Графика (Graphic) (рис.3.28) и нажмем кнопку «OK».
- Как импортировать изображение?
- команд File→Import (Файл→Импорт)
Актуализация знаний и мотивация учащихся на изучение нового материала
В настоящее время Flash-анимация превратилась в мощную технологию, особенностями которой являются векторная графика; реализация нескольких видов анимации; импорт и экспорт векторных и растровых изображений, аудио- и видеофрагментов; поддержка интерактивных элементов интерфейса; встроенный язык программирования. С помощью этой технологии создаются рекламные ролики, фильмы, мультимедийные приложения, модели, интерактивные Web-страницы и даже игры. Благодаря исключительно малому размеру они широко распространены в сети Интернет.
Объяснение нового материала.
Основы Flash-анимации
Основные понятия
На предыдущих уроках мы рассматривали Flash как векторный графический редактор. Однако его главное назначение состоит в создании анимаций, которые могут содержать звуковое сопровождение, видеофрагменты и интерактивные элементы. В настоящее время Flash-анимация превратилась в мощную технологию, особенностями которой являются: векторная графика; реализация нескольких видов анимации; импорт и экспорт векторных и растровых изображений, аудио и видео фрагментов; поддержка интерактивных элементов интерфейса; встроенный язык программирования. С помощью этой технологии создаются рекламные ролики, фильмы, мультимедийные приложения, модели, интерактивные Webстраницы и даже игры. Благодаря исключительно малому размеру они широко распространены в сети Интернет.
Процесс разработки анимации в среде Flash состоит в следующем. Сначала создается исходный документ (файл с расширением fla). Этот документ можно просматривать и редактировать в редакторе Flash. Затем он преобразуется в swf файл, который уже можно просмотреть в Flash-проигрывателе и Web-браузере. Этот процесс называют публикацией фильма. Кроме того, можно экспортировать результаты работы в файлы других форматов, напр., avi, mov, анимированный gif.
Основной инструмент при работе с анимацией - шкала времени. На ней отображается информация о слоях и кадрах: тип кадров, их содержимое, наличие звуков и действий (рис.3.34). Ячейки сетки на шкале времени соответствуют кадрам. Выделенный красным цветом указатель (или маркер кадра)указывает на кадр, содержимое которого отображается на рабочей области.
| пустой |
| ключевой |
| кадр |
| указатель |
| ( |
| маркер |
| ) |
| кадра |
| Рис |
| .3.34 |
| пустые |
| кадры |
| слои |
| заполненный |
| ключевой |
| кадр |
выбор режима калькирования
Пустые кадры не окрашены. Ключевые кадры обозначаются кружками (заполненные – черными, а незаполненные – белыми). Неизменяемые промежуточные кадры, которые дублируют ключевые, окрашены серым цветом. Сиреневая или зеленая подсветка говорит о том, что кадры сгенерированы автоматически.
Любая анимация состоит из последовательности кадров (frames). Кадры создаются вручную или генерируются автоматически. Важнейшее понятие анимации - ключевые кадры (keyframes) — это кадры, которые не изменяются при просмотре фильма, а используется в качестве опорных для генерации промежуточных кадров.
Различают два вида автоматической анимации, которым соответствуют два способа генерации промежуточных кадров: кадры, построенные путем изменения формы фигур (shape tween) и кадры, построенные путем изменения положения и трансформации экземпляров символов (motion tween).
Покадровая анимация
Покадровая анимация (мультипликация) реализуется последовательностью ключевых кадров, каждый из которых содержит новое или измененное вручную изображение (фазу анимации).
Пример 1. Создать мультипликацию, состоящую из четырех кадров (рис.3.35а)
Рис.3.35а 
| Рис |
| .3.35 |
| б |
кадры 1 2 3 4
• Находясь в кадре 1 единственного слоя, возьмем инструмент Овал. На панели Набор цветов подберем радиальную градиентную заливку и нарисуем исходное изображение. Кистью дорисуем детали (рис.3.35а-1). Первый ключевой кадр готов.
• Продублируем его содержимое еще на три кадра. Для этого трехкратным нажатием клавиши F6 или командой Insert → Keyframe (Вставка → Ключевой кадр) вставим три ключевых кадра с заполнением (рис.3.35б). Перемещая мышью указатель кадра по шкале времени, убедимся, что во всех четырех кадрах будет одинаковый рисунок. Дублирование кадров можно выполнить и так: выделить четыре кадра при нажатой клавише Shift и превратить их в ключевые с заполнением нажатием клавиши F6.
• В кадрах 2 и 4 с помощью инструментов выделения трансформируем изображение в соответствии с рисунком 3.35а.
• Просмотрим последовательность кадров в статике (перемещая мышью указатель кадров по шкале времени) и динамике (нажатием клавиши Enter). Для тестирования созданной анимации удобен режим многократной демонстрации, который вызывается с помощью меню Control → Test Movie или клавиш Ctrl + Enter.
• Сохраним результаты работы под именем mult.fla (исходный flash-документ).
Опубликуем созданную мультипликацию в формате swf, т.е. сохраним flashфильм под именем mult.swf. Публикация фильма осуществляется с помощью меню File → Publish (Файл → Опубликовать). Форматы и параметры файлов устанавливаются в окне Publish Setting (Установки публикации) (рис.3.36).
Рис.3.36. 
Полезный совет! Если исходный flash-документ уже сохранен в формате fla,
то тестирование приводит к его автоматическому сохранению в формате swf в той же папке.
Пример 2. Создать мультипликацию из трех кадров: шары на елке переливаются разными цветами (рис 37)
Рис.3.37 а) 
| г |
| ) |
б) в)
• Находясь в кадре 1 единственного слоя, нарисуем елку, подобрав подходящий стиль обводки. Назовем слой “елка”. Заблокируем его.
• Добавим еще слой, назвав его “шары”. Нарисуем шар с заливкой радиальным градиентом. Выделим его и нажатием клавиши F8 преобразуем в символ типа Графика (Graphic), присвоив имя “шар”.
• Развесим шары на елке, перетаскивая экземпляры символа на слой “шары” и устанавливая их цвет и размер в соответствии с рисунком 37 а.
• Продублируем содержимое первого кадра в обоих слоях, вставив два ключевых кадра с заполнением (рис.3.37 г).
• В кадрах 2 и 3 с помощью панели свойств изменим цвет шаров (рис.37 б, в).
• Просмотрим последовательность кадров в статике.
• Сохраним результаты работы под именем elka.fla. Протестируем анимацию.
| * Пример. Увеличить длительность фаз созданной анимации вставкой промежуточных кадров. |
tD b250ZW50X1R5cGVzXS54bWxQSwECLQAUAAYACAAAACEAOP0h/9YAAACUAQAACwAAAAAAAAAAAAAA AAAvAQAAX3JlbHMvLnJlbHNQSwECLQAUAAYACAAAACEA4o2dWXoWAAAhhAAADgAAAAAAAAAAAAAA AAAuAgAAZHJzL2Uyb0RvYy54bWxQSwECLQAUAAYACAAAACEA/lDhcNwAAAAFAQAADwAAAAAAAAAA AAAAAADUGAAAZHJzL2Rvd25yZXYueG1sUEsFBgAAAAAEAAQA8wAAAN0ZAAAAAA== ">
| • |
Длительность увеличится в три раза (рис.3.37 д).
| ? |
1. Какую анимацию называют покадровой?
2. Какие кадры называют ключевыми?
3. Для чего и как дублируют ключевые кадры?
Упражнения
Создайте покадровые анимации (мультипликации) по предложенным образцам:
1). Светофор (4 кадра: желтый, зеленый, желтый, красный свет)
2). Развевающийся вымпел (один слой, 3 кадра, заливка линейным градиентом)
3) Моргающий кот (4 кадра, усы расположены на отдельном слое)
Физкультминутка.
1) Сложить руки в замок, обхватить ими затылок, направить локти вперед. Подтянуть голову к локтям, не сопротивляясь, растягивать шейный отдел позвоночника. Тянуть 10-15 секунд.
2)нарисовать глазами стереометрические фигуры (пирамиду, призму, конус, цилиндр).
Закрепления изученного материала.
Предложит учащимся выполнить Задание №8-10(см. Приложение).