Модуль № 1 Тема модуля: Основные виды анимации в среде Macromedia Flash. Покадровая анимация. Анимация формы. Цели модуля: Учебные – закреплять знания, полученные ранее при изучении принципов создания изображений в Macromedia Flash, формировать умения и навыки по созданию анимации в среде Flash. Воспитательные – воспитывать внимание, культуру поведения и общения, а также эстетичные вкусы учащихся; учить тому, что компьютер – это, прежде всего, инструмент для работы, созидания и самовыражения. Развивающие – развивать творческие способности и познавательные интересы учащихся; повышать компетентность учащихся в сфере информационных технологий и прикладного программного обеспечения; способствовать заинтересованности учащихся профессиями, связанными с компьютерной графикой, анимацией, дизайном. Оборудование: Техническое обеспечение – Мультимедийный проектор, интерактивная доска (экран), рабочее место учителя, оборудованное ПК с возможностью подключения проектора, рабочие места учащихся, оборудованные ПК с возможностью работы по локальной сети. Программное обеспечение – Операционная система Windows XP SP2, драйвера и утилиты для компонентов ПК и периферийных устройств, прикладное программное обеспечение Macromedia Flash 8, Flash Player (Internet Explorer); готовые flashролики и flash-документы с примерами анимации. Тип модуля: содержательно-поисковый 16 Компетенции учащихся на модуле: Основные понятия Основные знания Основные умения - flash-документ; - временная шкала; - слой; - сцена; - flash-ролик. - анимация; - покадровая анимация; - сценарий ActionScript - уметь работать с ППО "Macromedia Flash 8"; - иметь навыки создания статистических изображений. Основные этапы модуля: I. Организация начала занятия II. Подготовка к основному этапу занятия III. Усвоение новых знаний и способов действий IV. Закрепление знаний и способов действий V. Подведение итогов занятия VI. Информация о домашнем задании (5 мин.) (5 мин.) (50 мин.) (20 мин.) (5 мин.) (5 мин.) Ход модуля: Этап 1. Организация начала занятия Учитель: напоминает о том, что на предыдущих занятиях учащиеся с помощью инструментов рисования создавали статические изображения, а также обрабатывали импортированную во Flash графику, но задача Flash – заставить объекты двигаться (ожить); сообщает учащимся тему и цели урока; просит повторить основные изученные понятия, связанные с технологией Macromedia Flash, а также правила техники безопасности и поведения в компьютерном классе. Учащиеся: записывают тему урока в тетрадь; рассказывают правила техники безопасности при работе в компьютерном классе; просматривают конспекты предыдущих уроков. Формы обучения на данном этапе: беседа Методы обучения на данном этапе: метод проектов 17 Средства обучения на данном этапе: ППО " Macromedia Flash 8, Flash Player (Internet Explorer)" Этап 2. Подготовка к основному этапу занятия Учитель: задает вопросы относительно понятий, которыми ученик должен свободно оперировать перед началом изучения темы "Анимация в среде Macromedia Flash", таких как: flash-документ, временная шкала, обычный и ключевой кадр, слой, сцена, символ, экземпляр, flash-ролик (клип). Учащиеся: отвечают на поставленные вопросы: при определении какоголибо понятия учащиеся могут проводить ассоциации с элементами обычного художественного фильма, а также в обязательном порядке указывают основные особенности таких понятий, как ключевой кадр, ключевой пустой кадр, символ и экземпляр. Формы обучения на данном этапе: лекция Методы обучения на данном этапе: метод проектов Средства обучения на данном этапе: ППО " Macromedia Flash 8, Flash Player (Internet Explorer)" Этап 3. Усвоение новых знаний и способов действий Учитель: дает понятие основных видов анимации в среде Macromedia Flash. Покадровая анимация – это такой тип анимации, когда в каждом отдельном ключевом кадре прорисовываются ключевые (измененные) состояния объекта. Таким образом, покадровая анимация представляет собой классическую анимацию. Она позволяет более точно воспроизводить любое изменение. Это единственный способ организовать смену абсолютно независимых изображений. В то же время, покадровую анимацию сложно и долго модифицировать. Особенно, если это не дискретный набор изображений, а связанная анимация. Приходится модифицировать все кадры. Покадровая анимация занимает достаточно большой объем, так как приходится хранить информацию о каждом кадре. Анимация трансформации формы (морфинг) – вид анимации, при котором один графический объект мультфильма (ролика) должен плавно видоизменяться в другой. Вы задаете только начальную и 18 конечную формы (вид объекта), а промежуточные кадры будут заполнены автоматически. Очень простой с технической точки зрения вид анимации, но с его помощью невозможно создать сложные события. Анимация трансформации движения представляет собой такой тип анимации, при котором вы задаете только начальное и конечное положения объекта, его размеры, время движения, траекторию и другие дополнительные параметры, а все его промежуточные состояния система просчитывает самостоятельно. Также прост в реализации, но неудобен при создании сложных мультипликаций. Программная анимация. Поведение объекта описывается с помощью сценария ActionScript. Используется, прежде всего, в играх и интерактивных элементах, а также в мультипликациях, основой которых является случайность. Учащиеся: записываю за учителем определения основных видов анимации, используемых при работе с Macromedia Flash. Учитель: обращает внимание учащихся на то, что с программной анимацией они будут работать только после более подробного и глубокого изучения встроенного во Flash языка программирования ActionScript. Учитель: приступает к демонстрации процесса создания покадровой анимации, на примере листочка, который перемещается из одной точки экрана в другую с поворотом вокруг своей оси. При прорисовке обращает внимание на то, что изменения положения листика происходит именно в ключевых кадрах. 19 Рисунок 1 – Первый ключевой кадр анимации Рисунок 2 – Второй кадр анимации 20 Второй кадр создадим перетаскиванием и трансформацией первого. Затем щелкнем правой кнопкой мыши по соседнему кадру и вставим еще один ключевой кадр, используя команду Insert Keyframe. В результате в этом кадре появится копия листочка; переместим ее вниз (пользуясь инструментом Arrow) и повернем, используя соответствующий инструмент панели или команду Modify — Transform — Free Transform. Повторим процедуру таким образом, чтобы в 6-м кадре лист занимал конечное положение (рис. 3). Рисунок 3 – Последний кадр анимации Далее запускаем файл в режиме просмотра (тестирования), воспользовавшись командой Control — Test Movie или сочетанием клавиш Ctrl+Enter. Учащиеся: внимательно следят за действиями учителя, делают пометки в тетради по своему усмотрению и под диктовку, задают вопросы. 21 Учитель: показывает более сложный пример покадровой анимации на следующем примере: Рисунок 4 – Пример сложной покадровой анимации Особое внимание следует обратить на то, что каждый, являющийся независимой частью общей композиции прорисовывается на отдельном слое (рис. 5). При этом, чтобы при обработке изображения одного слоя не мешали объекты, расположенные на других слоях, следует воспользоваться командой Show/Hide Layer. 22 Рисунок 5 – Пример сложной покадровой анимации Учащиеся: внимательно следят за действиями учителя, делают пометки в тетради по своему усмотрению и под диктовку, задают вопросы. Учитель: приступает к рассмотрению примера, показывающего анимацию формы, в котором яблоко будет превращаться в грушу. Для начала следует нарисовать замкнутый контур с заливкой в форме яблока, как показано на рис. 6. Рисунок 6 – Контур с радиальной заливкой Затем щелкните на имени слоя нарисованного объекта (в данном случае имя слоя по умолчанию принято Layer 1) – слой станет выделенным (рис. 7), а внизу в панели Properties появится окошко Tween (Анимация), в котором нужно выбрать пункт Shape (Форма). 23 Рисунок 7 – Выбор нужного вида автоматической анимации Теперь добавим конечный кадр – пусть формоизменение будет происходить за 30 кадров. Вставьте ключевой кадр в 30-й кадр и поместите там замкнутый контур в форме груши (рис. 8). Обратите внимание, что в нашем примере начальный и последний кадр отличаются не только формой контура, но и цветом заливки. Рисунок 8 – Результирующая форма После того как мы определили конечный кадр трансформации, на панели Timeline промежуток от первого до 30-го кадра окрасился в светло-зеленый цвет, а внутри этого промежутка протянулась 24 стрелка, что свидетельствует о создании анимации. Обратите внимание: если линия анимации пунктирная, то следует воспользоваться командой контекстного меню кадра Remove Tween, находясь на начальном кадре анимации. Рассмотрим дополнительные параметры в панели Properties для данного вида анимации. Рисунок 9 – Дополнительные параметры "шейпинга" Параметр Ease (Ослабление) позволяет замедлять или ускорять анимацию. Величина этого параметра может изменяться от - 100 до + 100. Если вы зададите отрицательный ease, то скорость анимации будет увеличиваться. И наоборот, если ease будет положительным, анимация будет замедляться. Параметр Blend (Смесь), определяет алгоритм перехода: Distributive (Распределяющий, общий), при котором промежуточные фигуры будут более гладкими и Angular (Угловатый), при котором фигуры будут угловатыми. Учащиеся: внимательно следят за действиями учителя, делают пометки в тетради, задают вопросы, один из которых должен коснуться того, что при анимации яблоко с точки зрения формы не совсем правильно переходит в грушу, то есть можно ли самостоятельно сохранить некоторую логику морфинга и указать программе, какие области должны наследоваться. Учитель: рассказывает о контрольных точеках (shape hints, дословно – подсказки для форм) на примере созданной анимациитрансформации "яблоко-груша". Выделим первый ключевой кадр и выполним команду Modify — Shape — Add shape hint или Ctrl+Shift+H., в результате выполнения которой на фигуре 25 появится начальный хинт в виде красного кружка с буквой «а». Передвинем хинт в верхнюю точку веточки (рис. 10). Рисунок 10 – Процесс установки хинта Перейдя на последний ключевой кадр, вы обнаружите, что внутри контура результирующей фигуры появится конечный хинт в виде зеленого кружка с буквой «a». Передвиньте хинт в точку, которая должна соответствовать первой отмеченной точке (рис. 11). После того как вы выставите на кривую хинт в последнем кадре, в первом кадре хинт поменяет свой цвет с красного на желтый – это означает, что установлено соответствие между хинтами. Повторим процесс, добавляя новые хинты (рис. 12). Для получения наилучших результатов следует размещать хинты против часовой стрелки, начиная с левого верхнего угла фигуры. 26 Рисунок 11 – Результирующий кадр с точкой перехода хинта Рисунок 12 – Положение хинтов в результирующей фигуре В результате получим фильм с более естественной трансформацией. В примере нам хватило всего 3 хинтов, однако программа позволяет одновременно использовать до 27 хинтов. Сделать хинты видимыми или невидимыми можно по команде View — Show Shape Hints. Удалить все контрольные точки можно с помощью Modify — Shape — Remove All Hints. Удалить единственную точку можно, нажав на ней правую кнопку мыши, и в контекстном меню выбрав Remove Hint. Далее рассматривается пример анимации формы, при которой медведь превращается в зайца (рис. 14). При этом помимо 27 анимации формы и контрольных точек рассматривается режим кальки – Onion Skin (рис. 13). Onion Skin (Калька), Onion Skin Outlines (Контуры на кальке) и кнопка Modify Onion Markers (Изменить маркеры кальки). Чтобы соседние кадры не мешали редактированию текущего кадра, можно включить режим, в котором соседние кадры будут видны только в виде контуров – кнопка Onion Skin Outlines (Контуры на кальке). Щелкнув на кнопке Edit Multiple Frames (Редактировать несколько кадров), вы сможете не только видеть одновременно несколько кадров, но и редактировать их. Все кадры показываются совершенно одинаково, в цвете. Заблокированные слои в режиме кальки не видны. Поэтому чтобы при просмотре или редактировании вам не мешали лишние объекты, заблокируйте слои, на которых они находятся. Щелчок на кнопке Modify Onion Markers (Изменить маркеры кальки) вызывает меню, управляющее настройкой маркеров. Команда Always Show Markers (Всегда показывать маркеры) включает показ маркеров кальки даже в том случае, если ни один из режимов кальки не включен. Выбрав команду Anchor Onion (Закрепить кальку), вы заблокируете кальку в заданном состоянии. При перемещении головки воспроизведения маркеры не будут перемещаться вместе с ней, а останутся на месте. В этом же меню можно быстро задать ширину диапазона 5 и 11 кадров, выбрав, соответственно, команду Onion 2 (Калька 2) или Onion 5 (Калька 5). Команда Onion All (Калькировать все) будет показывать одновременно все кадры фильма. Рисунок 13 – Калькирование 28 Рисунок 14 – Анимация формы с калькирование Учащиеся: внимательно следят за действиями учителя, делают записи в тетради по своему усмотрению и под диктовку, задают вопросы. Формы обучения на данном этапе: компьютерный эксперимент Методы обучения на данном этапе: метод проектов Средства обучения на данном этапе: ППО " Macromedia Flash 8, Flash Player (Internet Explorer)" Этап 3. Закрепление знаний и способов действий Учитель: предлагает самостоятельно создать 2 flash-документа, один из которых будет содержать покадровую анимацию, а другой – анимацию формы, и протестировать их, создав ролики. При этом учащиеся могут попробовать выполнить рассмотренные на уроке примеры. Также в качестве покадровой анимации можно использовать заготовку готового цветка, только доработать документ таким образом, чтобы цветок превратился в цветокхищник и съел пролетающую над ним бабочку. Можно предложить сделать настенные часы или будильник с двумя стрелками, которые вращаются показывая время. Или каждый ученик может придумать свой сюжет и реализовать его с помощью последовательности ключевых кадров. В качестве анимации формы учащиеся также могут повторить примеры. Можно предложить сделать видоизменение различных 29 геометрических фигур, чтобы получилось что-то похожее на заставку "Метаморфозы" Windows. Либо учащиеся придумывают и реализовывают свою идею. Для удобства и доступности следует открыть сетевой доступ к папке с примерами урока. Необходимо обратить особое внимание на желательность использования при анимации символов и экземпляров. Учащиеся: практикуются, выполняя задания на компьютерах в среде Macromedia Flash, задают вопросы. Этап 4. Подведение итогов занятия Учитель: напоминает тему и учебные цели урока; просит учащихся назвать основные виды анимации, а также особенности тех видов анимации, которые были рассмотрены на уроке. Учащиеся: внимательно слушают учителя, отвечают на вопросы. Этап 5. Информация о домашнем задании 1. Выучить конспект (записи в тетради). 2. Создайте ролик, в котором будет показано, как из яйца рождается цыплёнок, либо придумайте свой сюжет для покадровой анимации. 3. Проиллюстрируйте пословицу «Сделать из мухи слона» или другой сюжет для трансформации формы. Литература Для учителя: 1. Гурский Д. А., Гурский Ю. А. Flash 8 и ActionScript. Библиотека пользователя (+CD). – СПб.: Питер, 2006. 2. Рейнхардт Р., Дауд С. Macromedia Flash 8. Библия пользователя. – М.: Диалектика, 2006. 3. Альберт Д., Альберт Е. Самоучитель Macromedia Flash Professional 8. – СПб.: BHV, 2006. Для учащихся: 1. Слепченко О. Macromedia Flash Professional 8 на примерах. – СПб.: BHV, 2006. 2. Финкельштейн Э., Лит Г. Macromedia Flash 8 для "чайников". – М.: Диалектика, 2006. 3. Бурлаков М. В. Macromedia Flash 8. Самоучитель. – М.: Диалектика, 2006. 4. Дунаев В. В. Самоучитель Flash MX 2004. – СПб.: Питер, 2005. 30