Создание многослойного фильма с пошаговой анимацией в среде Flash CS3
Вступление. Чем уникальна flash-технология? Конечно, у нее масса преимуществ, она сделала Всемирную паутину более динамичной, более живой, интерактивной, позволила создавать красочные корпоративные презентации, рекламные ролики, баннеры и т.д. и т.п. Однако, на мой взгляд, все это не самое главное. А главное то, что благодаря данной технологии впервые создание анимации стало доступно не только избранным (профессионалам), но и миллионам любителей (Александр Прохоров www.compress.ru )
В школе, изучая тему «Обработка графической информации», мы рассматриваем такие аспекты, как создание растровых и векторных изображений. При создании растровых изображений проблем не возникает, так как в состав Windows входит графический редактор Paint. При работе с векторными изображениями возникали проблемы с программным обеспечением. Конечно, можно использовать векторный редактор, интегрированный в MS Word, но это не будет являться полноценной заменой. На данный момент многие школы получили пакет бесплатного программного обеспечения, в состав которого входит векторный графический редактор Adobe Flash CS3. Конечно, это мощное и гибкое средство разработки векторных изображений и создания профессиональной анимации, поэтому требует мощных компьютеров для своей работы. Если есть возможность, можно использовать более простую версию – Macromedia Flash MX или Macromedia Flash MX 2004. Так как количество часов, выделяемое на данную тему, ограничено, то для достижения хороших результатов необходимо не просто обучить детей пользоваться инструментами графического редактора, а научить общим принципам создания и обработки векторных изображений. Для этого необходимо провести параллели, где это можно, между растровым редактором Paint и векторным редактором Flash. По ходу изучения, необходимо указывать на общие черты и на отличительные особенности инструментов и приемы их использования. При изучении темы «Анимация во Flash», опираясь на умения строить растровые и векторные изображения, я предлагаю ученикам вместе со мной разработать несколько мини-проектов и завершить все контрольным проектом «Распространение растительности на Земле». При этом подвожу учащихся к решению задачи так, чтобы они сами выбрали, какие стандартные средства Flash можно использовать для получения подобной анимации. Создание многослойного фильма с пошаговой анимацией в среде Flash CS3 Цели: Научить учащихся • строить простейшую анимацию; • использовать слои для создания сложных роликов; Средства и оборудование: компьютер, графический векторный редактор Flash CS3. Первый урок можно начать с анимации, которую необходимо создать во время занятий. Это анимация растущего цветка. После показа можно задать наводящие вопросы учащимся. a. Что представляет собой рисованный мультипликационный фильм? b. Какие слои можно выделить в данной анимации (4 слоя)? Объяснение нового материала. Покадровая анимация состоит в том, что каждый кадр фильма рисуется отдельно, и они быстро сменяют друг друга. При частоте 24 кадра в секунду и выше человек воспринимает такие изменения как непрерывное движение. Кадры изображаются серыми прямоугольниками на временной шкале. Кадры бывают двух типов: • ключевые – в них происходит существенное изменение изображения; • промежуточные – в них изображение не меняется или строится программой автоматически. Ключевые кадры создаются нажатием клавиши F6 (содержит копию предыдущего ключевого кадра) или F7 (ничего не содержит – пустой ключевой кадр), а промежуточные – F5 (содержит в себе лишь ссылку на ближайший слева ключевой кадр). Кадры можно перемещать, копировать и удалять. Для перемещения надо выделить кадр щелчком и перетащить его в новое место на временной шкале. На старом месте остается обычный (промежуточный) кадр, то есть изображение будет скопировано из ближайшего слева ключевого кадра. Если при перетаскивании кадра удерживать клавишу Alt, кадр копируется в новое место (на это указывает знак «плюс» у курсора). Для удаления кадра надо выделить его, нажать правую кнопку мыши и выбрать команду Remove Frames (удалить кадры) из контекстного меню. Эти операции можно выполнять и с несколькими выделенными кадрами. Для выделения можно протащить через них мышку при нажатой левой кнопке. Щелчками при нажатой клавише Ctrl можно выделить «несоседние» кадры. Для работы с кадрами можно использовать специальный буфер обмена — команды Cut Frames (вырезать), Copy Frames (копировать) и Paste Frames (вставить) из контекстного меню. Работа за ПК. Перейдем непосредственно к построению анимации. В нашем фильме слои будут иметь одноименные названия с объектами, расположенными в них. Всего в фильме будет четыре слоя: два, содержащих статические картинки, и два – анимацию: солнца и цветка. В программе Flash, как и во многих других программах для работы с графикой, документ состоит из нескольких независимых слоев, на каждом из которых может быть отдельное изображение. Для работы со слоями служит палитра слева от временной шкалы: В нашем документе четыре слоя с именами цветок, солнце, трава и небо. Для того чтобы сменить имя, надо сделать двойной щелчок на имени слоя. Здесь самый нижний слой — это слой небо, выше него расположен трава, над ним –слой солнце и на самом верху — слой цветок. Порядок слоев можно менять, перетаскивая их мышкой. Активный слой, на котором идет рисование, выделен синим цветом и отмечен значком карандаша. Значки над палитрой имеют следующее значение: Щелчок по одному из этих значков позволяет установить (снять) эти режимы сразу у всех слоев. Если же надо применить режим к одному слою, следует щелкнуть на точке ниже соответствующего значка. На рисунке выше активным является слой трава, слой солнце заблокирован, а слой цветок невидим. Слой небо содержит в единственном ключевом кадре изображение прямоугольника голубого цвета. Это самый нижний слой. Слой трава содержит изображение эллипса с радиальной заливкой зеленого цвета. Слой цветок содержит пошаговую анимацию. Ее проще всего построить, используя серию ключевых кадров. Сначала создаем в первом кадре при помощи кисти зародыш цветка – это обычная точка зеленого цвета. Далее, нажимая клавишу F6 на временной шкале, создаем ключевой кадр полностью идентичный предыдущему. Дорисовываем росток цветка и формируем зачатки лепестков, и опять, используя клавишу F6, создаем новый ключевой кадр. Используем этот прием до тех пор, пока не получим конечный вариант цветка. Последним штрихом будет создание промежуточных кадров (клавиша F5) для задержки изображения перед новым циклом просмотра. Последовательность кадров анимация растущего цветка. Самостоятельная работа. Создать анимацию в слое «солнце». Слой солнце также содержит пошаговую анимацию. В ней необходимо изменять длину лучей солнца, что и создаст анимационный эффект. Достаточно сделать 3 кадра, а потом их скопировать и вставить. Главное преимущество, получаемое при использовании слоев, состоит в возможности создавать сложную анимацию со многими движущимися и неподвижными объектами. Вы уже должны были заметить, что у каждого слоя своя линейка кадров. Это означает, что в каждом слое можно создавать свою анимацию, которая не будет влиять на содержание других слоев. В качестве примера рассмотрим фильм, в котором гусеница заползает в цветок, цветок закрывается, а когда открывается, там находится бабочка. Для этого фильма будем использовать в качестве заготовки фильм, разработанный на предыдущих занятиях. Но в него придется внести изменения. Во-первых, необходимо ввести три новых слоя: • слой, содержащий гусеницу; • слой, содержащий бабочку; • слой, содержащий бутон. В фильме будет семь слоев. Слой гусеница содержит анимацию движущейся гусеницы вверх к бутону. Но 27 первых кадров данного слоя ни чего не содержат. Это сделано с целью, чтобы гусеница появилась после того, как цветок полностью раскроется. Как видно из рисунков, гусеница представляет собой набор кружков. Слой бутон будет содержать анимацию закрывающегося цветка, и будет создан на основе последних кадров слоя цветок. Необходимо скопировать восемь кадров (с 18 по 25, они на картинке выделены) и вставить их, после чего инвертировать в обратном порядке. А затем еще раз вставить скопированные кадры, что создаст эффект сначала закрывающегося цветка (после того как в него залезет гусеница) а затем снова раскрывающегося бутона цветка. В приведенной ниже таблице показаны только ключевые кадры. Самостоятельная работа. В качестве самостоятельной работы можно предложить учащимся добавить в данный фильм несколько дополнительных слоев. Например: • слой, содержащий тень цветка; • слой, содержащий движущиеся облака; • слой, содержащий поляну с растущей травой.
