Обработка изображений в графическом редакторе Adobe Flash CS3 Professional, создание анимации

Разделы: Информатика


Этот урок входит в систему уроков по информационным технологиям при изучении раздела “Компьютерная графика”.

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

Цели урока: усвоение умений самостоятельно в комплексе применять знания, умения и навыки, осуществлять их перенос в новые условия.

Обучающие цели. Закрепить практические умения и навыки работы с инструментами рисования и создания анимации в графическом редакторе Adobe Flash CS3 Professional . Изучить возможность автоматизации преобразования одного рисунка в другой – анимация формы с помощью программы Adobe Flash CS3 Professional.

Развивающие цели. Развитие памяти, внимания, самостоятельности при работе с программным продуктом. Повлиять на познавательную активность детей в сторону ее интенсификации. Развить важные качества личности детей – умение понять ту или иную задачу, наблюдательность, воображение, мышление.

Воспитывающие цели. Выработать у учащихся усидчивость, старательность в выполнении задания, требовательность к себе.

Тип урока: комбинированный (урок закрепления знаний, формирования умений и навыков, и изучения новых знаний).

Форма проведения урока. Комбинированная: практическая работа, объяснение нового с закреплением старого.

Метод обучения. Объяснительно-иллюстрированный метод и метод проблемного обучения (алгоритмический).

Методическое оснащение: карточки с алгоритмом действий.

Программное обеспечение: Windows XP, Adobe Flash CS3 Professional, PowerPoint.

Техническое оснащение: класс оборудованный ПК, проектор.

Литература:

  1. Л.Л. Босова. Информатика: Учебник для 5 класса. – М.: БИНОМ. Лаборатория знаний, 2004.
  2. С.И. Переверзев. Анимация в Macromedia Flash MX. - М.: БИНОМ. Лаборатория знаний, 2005. – (Практикум)

План урока

Детям на парты раздаются карточки-задания с алгоритмом действий для практической работы.

Ученики рассаживаются за парты, находящиеся в центре класса.

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

Приветствие.

Выслушать информацию об отсутствующих.

Объявить тему урока: Создание анимации формы - автоматизации преобразования одного рисунка в другой.

Ребята, сегодня мы продолжим работу по оживлению рисованных изображений.

С момента выхода первого мультфильма прошло более 60 лет, но популярность мультиков не только не угасает, а растет ускоренными темпами. Теперь мультики смотрят не только дети, но и взрослые. Зрителям нравятся веселье рисованные герои. Мультипликационные изображения нашли применения везде: на телевидении, в Интернете, в рекламе.

3 мин.

2. Актуализация знаний, умений и навыков, необходимых для творческого применения знаний.

Мультипликация от лат. multiplicatio — умножение, увеличение, возрастание, размножение. Вы на прошлых уроках попробовали создавать мультик.

Давайте вспомним какие замечательные мультики вы создали на прошлых уроках.

Демонстрация работ, выполненных на прошлых уроках. Круговорот. (Работа, выполненная в среде Adobe Flash CS3 Professional, находится в папке Приложение 1).

Для создания мультика нам понадобится большое количество неподвижных рисунков, изображающих последовательные фазы движения. И чем больше мы нарисуем промежуточных кадров, тем реальнее будет выглядеть наш оживший сюжет. Сколько кадров у этого мультика???

(Ответ. 95)

Так почему же умножение? (Ответ. Потому что, надо создать много похожих изображений. Чтобы было проще, нужно копировать изображение, а значит умножать).

Какие функциональные клавиши вы использовали для создания и копирования кадров.

И так кадры мультика прорисованы.

А компьютер и программа Adobe Flash CS3 Professional помогает нам создать из этих изображений анимацию – быстрая смена кадров создает иллюзию плавного движения. Напомните, как мне просмотреть мультик в отдельном окне?

(Ответ. Ctrl+Enter – запуск мультика в отдельном окне).

Демонстрация работы Репетиция жонглера. Сколько кадров??? (Работа, выполненная в среде Adobe Flash CS3 Professional, находится в папке Приложение 1).

(Ответ: 50)

Какие инструменты выделения и рисования использовались?

(Ответ. Инструменты рисования: Кисть, карандаш, ластик, цвет кисти, цвет карандаша, овал, линия. Инструменты выделения: черная и белая стрелочка).

Демонстрация работы. Покадровая анимация. Прорисовывается почти каждый кадр.

Снеговик. (Работа, выполненная в среде Adobe Flash CS3 Professional, находится в папке Приложение 1)

Сколько кадров у этого мультика??? (Ответ: 80)

В этой анимации какие инструменты выделения и редактирования графических объектов использовались?

(Ответ. Перемещение, копирование, удаление выделенных изображений. Инструмент Трансформатор.)

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

Работа по рисованию по кадрового мультика достаточно трудоемкая – нужно прорисовать каждый кадр. 5 мин.

Проблема. Как же можно упростить работу?

Нам на помощь опять приходит компьютер и “умная” программа Adobe Flash CS3 Professional.

Теперь не мы, а компьютер будет строить все промежуточные фазы движения и изменения формы.

Существуют разные способы автоматизации создания мультфильма:

  • Анимация формы
  • Анимация движения
  • Анимация по траектории.

Демонстрация. 2 мин.

3. Подготовка учащихся к усвоению новых знаний, умений и навыков и изучение нового материала.

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

!!! Внимание!!!

Вам нужно прорисовать только первый кадр анимации (объект в начальном состоянии) и последний кадр анимации (объект в конечном состоянии), а промежуточные кадры нарисует за вас компьютер.

Но для этого нужно применить новые возможности программы, которые вы еще не знаете.

У каждого есть карточка с алгоритмом действий для создания анимации формы.

Сейчас будем по очереди читать каждый пункт и следить за моими действиями на экране.

  1. В первом кадре вверху рабочего листа нарисовать объект – кружок желтого цвета. Контур убрать! Это будет первый ключевой кадр анимации.

  1. Создать последний кадр анимации. Для этого:
    Перейти на панель Time Line
    Щелкнуть мышкой на 40 кадре и нажать F7 (новый пустой ключевой кадр)
    Нарисуем в 40-м кадре прямоугольник красного цвета. Контур убрать!

  1. Щелкнуть мышкой на первый кадр. На панели Properties выбрать в списке Tween (тип анимации) Shape (форма). Для проверки: “промежуточные кадры” временной шкалы должны окрасится в салатовый цвет и прорисоваться стрелка, соединяющая начало и конец анимации.
  2. Показать детям промежуточные кадры, которые построил компьютер.

    img6.jpg (6983 bytes)

  3. Enter или Ctrl+Enter - просмотр мультика
  4. Продолжим, чтобы было интереснее. Теперь первый кадр это будет кадр 40. Здесь уже нарисован красный прямоугольник.
  5. Щелкнем мышкой на 80-м кадре и нажмем клавишу F7 (создать новый пустой ключевой кадр). Нарисуем пять кружков и зальем радужной заливкой. Контуры убрать.

  1. Вернуться на 40-й кадр, щелкнув на нем мышкой.
  2. Перейти на панель Properties и выбрать в списке Tween (тип анимации) Shape (форма).
  3. Щелкнуть на кадр 95 и нажать клавишу F6.
  4. Ctrl+Enter - просмотр мультика
  5. Далее создадим анимацию превращающую пять шариков в буковки для этого еще раз выполним алгоритм действий (1-4 пункты) для кадров от 95 до 150.

  1. Ctrl+Enter - просмотр мультика

Пример см. Приложение 2. 9 мин.

Небольшая разминка, прежде чем мы начнем работу на компьютере. Все встали, размяли кисти рук, шею, плечи, сели и выполнили гимнастику для глаз. (1-2 минуты).

4. Применение новых знаний и обобщенных знаний, умений и навыков в новых условиях.

Практическая работа за компьютером.

Практическая работа будет состоять из двух частей.

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

Далее мы вспоминаем вместе с детьми, что наступила весна. Зачитываю фрагмент стихотворения. Скоро будем отмечать первый праздник весны 8 марта. Поэтому в качестве второй работы попробуем создать “живую поздравительную открытку” для учителей, мам и бабушек. Демонстрация примерной работы. (Приложение 3)

Рассаживаемся за компьютеры. При выполнении второй части практической работы, те ребята которые сидят за компьютером по двое меняются местами.

Оказание необходимой помощи. 20 мин.

5. Первичная проверка, закрепление и самопроверка.

6. Подведение итогов занятия.

Выставление оценок. Комментарии.

Спасибо за работу! Похвалить удачные работы. 6 мин.

Карточки-задания с алгоритмом действий для практической работы.

Алгоритм действий:

  1. В первом кадре вверху рабочего листа нарисовать объект – кружок желтого цвета. Контур убрать! Это будет первый ключевой кадр анимации.
  2. Создать последний кадр анимации. Для этого:
    Перейти на панель Time Line
    Щелкнуть мышкой на 40 кадре и нажать F7 (новый пустой ключевой кадр)
    Нарисуем в 40-м кадре прямоугольник красного цвета. Контур убрать!
  1. Щелкнуть мышкой на первый кадр. На панели Properties выбрать в списке Tween (тип анимации) Shape (форма). Для проверки: “промежуточные кадры” временной шкалы должны окрасится в салатовый цвет и прорисоваться стрелка, соединяющая начало и конец анимации.
  2. Enter или Ctrl+Enter - просмотр мультика
  3. Продолжим. Теперь первый кадр это будет кадр 40. Здесь уже нарисован красный прямоугольник.
  4. Щелкнем мышкой на 80-м кадре и нажмем клавишу F7 (создать новый пустой ключевой кадр). Нарисуем пять кружков и зальем радужной заливкой. Контуры убрать!
  5. Вернуться на 40-й кадр, щелкнув на нем мышкой.
  6. Перейти на панель Properties и выбрать в списке Tween (тип анимации) Shape (форма).
  7. Щелкнуть на кадр 95 и нажать клавишу F6.
  8. Ctrl+Enter - просмотр мультика
  9. Далее создадим анимацию превращающую пять шариков в буковки (Flash) для этого:
    • На кадре 95 уже нарисованы пять радужных шариков.
    • Щелкнуть на 150-й кадр и нажать клавишу F7
    • Примерно на месте каждого шарика инструментом кисточка нарисовать буквы FLASF
    • Вернуться на 95 Перейти на панель Properties и выбрать в списке Tween Shape.

Функциональные клавиши для создания мультика

F5 – создать дублирующий кадр
F6 – создать ключевой кадр, который копирует рисунок предыдущего, ключевого кадра
F7 – создать пустой ключевой кадр
F8 – занести объект в динамическую библиотеку
Shift + F5 – удалить любой выделенный кадр или последовательность кадров (Remove Frames)
Ctrl+Enter – запуск мультика в отдельном окне

Примерные упражнения гимнастики для глаз.

Общее время 2-3 минуты.

  1. Упражнения для век. Положите кончики пальцев на виски. 10 раз быстро и легко мигните с максимальной скоростью.
  2. Перемещение взгляда с близкой точки на отдаленную, 6 раз.
  3. Массаж височного пространства. Кончики указательных пальцев разместите на височных точках. Начинайте стимулировать точки путем надавливания в течение 1 секунды; затем ослабляйте воздействие на 1 секунду, повторить 6 раз.
  4. Глубоко вздохните, зажмурив глаза как можно сильнее, повторить 6 раз.
  5. Расслабление глазных мышц. Закрыть ладонями глаза. Создать эффект темноты. Спокойно открывать и закрывать глаза, повторить 6 раз.

Приложение 1

Приложение 2

Приложение 3