Тема занятия: Создание анимационного ролика в программе AdobeFlash
Цели занятия: изучить технологии изготовления анимационного ролика.
Время: 10 час
Вопросы (задачи):
1. Построить рекламную видеозаставку длительностью до 20 секунд.
Теоретические сведения. Программа AdobeFlash (до 2005 года MacromediaFlash) благодаря своей простоте и доступности сейчас стала самым популярным средством создания двухмерной анимации. Она очень удобна для создания рисованных анимационных фильмов – в нескольких килобайтах можно уместить небольшой, но полноценный мультфильм. Главной областью применения Flash служит Интернет. Для разработчиков Web-страниц не существует лучшего средства создания анимации в сети. Все популярные браузеры стремятся поддерживать последние версии Flash. К тому же программа предоставляет возможности по воплощению идей, не связанных с анимацией – на основе Flash-технологий можно создавать полноценные Web-сайты. Помимо Интернета, Flash используют и в других целях: для создания различного рода презентаций, рекламных материалов, обучающих программ и другой продукции, распространяемой на CD или средствами телевидения. Flash – это прежде всего редактор двухмерной векторной анимации. Основу его составляют векторные изображения, состоящие из различных линий, из которых составляются объекты – контуры, снабженные заливками и другими атрибутами. Анимация достигается различным путем, в простейшем случае – изменением характеристик объектов во времени в так называемых ключевых кадрах. Промежуточные кадры могут произвольно вставляться между ключевыми. Положение в каждом из промежуточных кадров рассчитывается как экстраполяция между ключевыми кадрами. Как и всякая развитая программа, AdobeFlash способна также включать в себя объекты другой природы, в частности растровые изображения и звук, компонуя их в единый Flash клип. Но возможности редактирования растровой графики и звука сравнительно невелики, для их предварительной подготовки лучше использовать более специализированные средства.
2. Методика выполнения. В данной работе предлагается создать из готовых элементов рисованный звуковой мультфильм на основе одной из песен В.С. Высоцкого.
1. Рабочий стол и инструменты Flash
Откройте программу Flash и загрузите файл РаботаFlash10. Сверху расположены строка меню и главная панель инструментов, они соответствуют стандартам Windows. Слева расположена панель инструментов для редактирования графики, набор инструментов также обычен для графических программ. При последующем изложении команды и инструменты, которые встречаются в других графических программах, например, таких как CorelDraw и Photoshop, подробно рассматриваться не будут. Основное внимание будет уделено тому, что характерно для MacromediaFlash как редактора анимации. В центре расположена Рабочая область (WorkArea), в которой создается графика. При запуске программы в окне создается стандартная сцена размером 550х400 пикселей, о чем можно прочитать в окне Properties. Новым элементом является Временная шкала, Timeline (справа вверху), она предназначена для покадрового монтажа фильма. Благодаря хорошо продуманному и удобному интерфейсу с этим инструментом можно быстро освоиться. Левая часть временной шкалы позволяет создавать и удалять новые слои, содержащие статичное изображение, анимацию или кнопки.
В левом нижнем углу расположены команды создания нового слоя (см. рисунок). Для каждого слоя отведена своя горизонталь, и каждый движещийся, изменяющийся объект обычно помещают в отдельном слое. В принципе, возможно в один слой поместить несколько движений, или сделать движение на фоне неподвижного фона. Но это неудобно и., сложно, могут возникать разнообразные помехи. Надежнее для каждого движущегося объекта создавать отдельный слой, а в нижний слой поместить неподвижный фон. После названия, в каждом слое расположены две точки и квадратик. С помощью левой точки можно сделать выделенный слой невидимым, что помогает редактировать другие, видимые слои. С помощью средней точки можно сделать слой защищенным от изменений, что страхует от невнимательности. Квадратик позволяет просматривать все объекты слоя в виде контуров, эта функция полезна при сложных, многослойных движениях: оставляем закрашенным только редактируемый слой, чтобы он четко был виден среди контуров.
Правая часть временной шкалы содержит хронометрическую линейку, предназначенную для покадрового монтажа фильма. По хронометрической линейке отмеряют необходимое количество кадров (frames) для каждого слоя. Для каждого движения устанавливают необходимое число кадров. По умолчанию скорость прокрутки ролика составляет 12 кадров в секунду (framepersecond, fps), но ее можно менять в широких пределах. Для кинофильмов установлен стандарт 24 кадра в секунду, для телевидения – 25 кадров в секунду. Более высокую скорость устанавливать ни к чему, она человеком не воспринимается. При создании анимационных эффектов надо помнить о том, что 12 кадров при просмотре займут всего 1 секунду, а эффекты, занимающие доли секунды, для зрителя будут слабо заметны, или вообще не будут фиксироваться. Во Flash существуют кадры двух типов: ключевые (Keyframes) и обычные (Frames). Ключевые кадры независимы друг от друга, в них задается определенная фаза движения. В обычных кадрах идет перемещение между позициями, занимаемыми объектом в начальном и конечном ключевом кадрах. В MacromediaFlash существуют разные способы анимировать что-либо.
1. Покадровая анимация, она полностью составляется из ключевых кадров, все изменения создаются вручную. Используется в тех случаях, когда автоматика к хорошим результатам не приводит.
2. Анимация движения. В этом случае задаете только начальный и конечный ключевые кадры, а промежуточные Flash просчитывает автоматически. По умолчанию реализуется прямолинейное равномерное движение, но можно задать ускорение/замедление, движение по траектории. Под движением понимается не только перемещение с пространстве, но и любое изменение от начального до конечного ключевых положений. Например, изменение цвета или размеров объекта.
3. Анимация формы - происходит постепенное превращение фигуры одной формы в фигуру другой формы. Деформация может сопровождаться перемещением объекта, изменением его цвета и размеров. Анимация формы – сложный и неоднозначный процесс, в зависимости от заданных условий она может протекать по-разному. К тому же имеется ряд ограничений на виды объектов и процессов, для которых возможна анимация формы. Поскольку в программе Flash часто приходится вставлять различные кадры, полезно запомнить три основные командs вставки, которые можно задать, щелкнув по кадру правой кнопкой мыши или с клавиатуры. InsertFrame (F5) вставляет обычный кадр; InsertKeyframe (F6) вставляет в отмеченную позицию ключевой кадр и копирует в него содержимое текущего кадра; InsertBlankKeyframe (F7) вставляет в отмеченную позицию пустой ключевой кадр.
При вставке какого-либо кадра время от него до предыдущего ключевого кадра заполняется обычными кадрами. Ключевые кадры обозначаются небольшим кружком внутри рамки, заключительный кадр в цепочке обычных кадров обозначается маленьким белым прямоугольником. Непустые кадры закрашиваются, пустые остаются белыми. Ошибочные команды во Flash, как и везде, можно удалить Ctrl + Z. Но ошибочно созданные кадры таким образом не удаляются. Для удаления надо поставить курсор справа от созданных кадров (на белое поле), выделить с помощью мыши и нажатой Shift черным цветом удаляемую область, после чего в меню правой кнопки выполнить RemoveFrames. На экране имеется еще несколько важных диалоговых окон, щелчок по линейке с названием окна раскрывает его. Раскройте и закройте несколько окон. Их можно также раскрыть в меню Окна (Windows), где собраны все диалоговые окна.
2. Создание, просмотр, удаление анимации Образец того ролика, который нужно сделать, приведен в файле Образец.swf. Исходный файл ролика делается в формате.fla, а для просмотра его на экране и для встраивания в HTML окружение ролик переводят в формат.swf. Этот формат позволяет просмотреть ролик на любом компьютере, имеющем браузер (InternetExplorer, Mozilla, Opera и др.).
2.1. Двойным щелчком откройте для просмотра файл Образец.swf. Остановить просмотр в нужном месте можно командой Control → StepForward. Передвигаться по кадрам удобно, нажимая на клавиатуре Ctrl + → или Ctrl + ←.
2.2. Теперь вернемся к Flash, откройте программу. В окне выбора режима работы нажмите значок CreateNewFlashDocument (Создать новый Документ Флэш). В документе на хронометрической линейке создан один слой с единственным кадром. Ниже находится прямоугольник, соответствующий кадру анимации. Щелкнув по нему и раскрыв вкладку Properties (Свойства), можно познакомиться с параметрами кадра, заданными по умолчанию. При желании их можно изменить.
2.3. Покрасим кадр в синий цвет. Сначала в разделе Цвета выберите Цвет линии (StrokeColor), нажмите на черный треугольник, открывающий палитру, и выберите какой-либо пурпурный цвет. Тот же цвет выберите в палитре Цвет заливки (FillColor); 16-ричные цифры в обеих палитрах должны быть одинаковыми. После чего инструментом (Прямоугольник) RectangleTool (R) постройте прямоугольник на все белое поле, поле приобретет выбранный цвет. Имеются также возможности для создания различных градиентных заливок.
В панели ColorMixer, в окне Type можно выбрать линейную или радиальную заливку. В нижней части окна смешения цвета изображен сам градиент, выше располагаются бегунки выбора цвета. Цвет можно выбрать после двойного щелчка по бегунку, область его распространения изменяется перемещением бегунка. Число цветов можно увеличить, поставив курсор выше градиента. Если при этом появился знак +, то после щелчка мышью получим еще один бегунок. Лишние цвета можно удалить, нажав Ctrl и поставив курсор на ненужный бегунок. Если при этом появится знак «ножницы», то после щелчка мышью ненужный бегунок удалится.
2.4. Создайте градиент: более темный в центре (поскольку там будут надписи), более светлый – по краям. Перенести градиент на прямоугольник можно, щелкнув инструментом заливки PaintBucketTool (K) по нужному месту экрана. Мы создали первый ключевой кадр.
2.5. Перейдите на 70-й кадр, щелкните по нему, он станет по цвету таким же, как первый. Нажмите InsertKeyframe – получается анимация из 70 кадров, с неподвижным фоном. 1 и 70 кадры – ключевые, они маркированы черным кружком, кадры со 2 по 69 – обычные. Чтобы увидеть весь диапазон, можно изменить масштаб кнопкой, расположенной после нумерации кадров.
2.6. Просмотр анимации. Проверьте действие анимации, поставив курсор на 1-й кадр и нажав Enter. Прекратить движение можно, нажав Esc. Можно перейти на нужный кадр, щелкнув по нему. Остановите движение обоими способами, этот навык понадобиться в дальнейшем.
2.7. Потренируемся в удалении ненужных кадров. Удалите кадры с 70 по 51, выделив их мышкой при нажатом Shift, после чего примените RemoveFrames. 50-й кадр сделайте последним ключевым (InsertKeyframe). 2.8. Теперь введем между ключевыми еще несколько кадров. При нажатом Shift выделите любых 5 промежуточных кадров, затем примените InsertFrame. Анимация удлинится на 5 кадров. 3. Создание титров к фильму
3.1. Переименуйте имеющийся слой: сделайте двойной щелчок на имени слоя и наберите Фон. Заблокируйте слой, превратив центральную точку в «замочек». Теперь для надписи создайте новый слой, кнопкой Добавьте слой (InsertLayer). Дайте ему имя, например, Надпись1.
3.2. В меню Текст (Text) выберите параметры надписей: Шрифт (Font) → ArialCYR (кириллица); Размер (Size) → 36; Стиль (Style) → Bold. С помощью палитры FillColor выберите цвет текста. Он должен быть контрастным по отношению к фону, например красно-коричневый. 3.3. Поставьте указатель на 4-й кадр этого слоя, сделайте его ключевым (InsertKeyframe или F6), после чего инструментом Текст: TextTool (Т). в левой части сцены, примерно на середине по высоте напишите: По мотивам:. Создадим анимацию движения.
3.4. Перейдите на 15 кадр, нажмите F6, надпись перенесите в верхнюю часть сцены, посередине. Для переноса надо поставить курсор на рамку надписи до появления знака. После этого надпись можно нести мышкой в любое место.
3.5. Вернитесь на 4-й кадр, в меню правой кнопки (контекстном меню) мыши нажмите CreateMotionTween (создайте движение в промежутке). При этом серая полоска между ключевыми кадрами 4-м и 15-м приобретет голубой оттенок со стрелкой вправо. При просмотре надпись будет равномерно перемещаться с 4 по 15 кадр, и далее до конца анимации она останется неизменной. Заблокируйте слой. Теперь создадим анимацию с ускорением. В реальном мире большинство движений начинаются не сразу, а с постепенным разгоном от неподвижности до максимальной скорости. И заканчиваются тоже постепенным замедлением. Учет этого фактора придает персонажам больше достоверности, реализма. Хотя увеличивает и без того немалый объем работ по созданию анимации.
3.6. Создайте новый слой, дайте ему имя, перейдите на 8-й кадр этого слоя, сделайте его ключевым. После этого инструментом Текст в верхнем правом углу сцены наберите: В.С. Высоцкий, например, зеленым цветом.
3.7. Аналогично предыдущей анимации, перейдите на 24-й кадр, сделайте его ключевым. Переместите надпись чуть повыше центра сцены, после чего вернитесь на 8-й кадр и нажмите CreateMotionTween. Пока получилась анимация с равномерным движением, такая же, как предыдущая.
3.8. А теперь перейдите на 16-й кадр и сделайте его ключевым. После чего раскройте окно Propeties (Свойства), и в окошке Ease, щелкнув по значку, бегунком выставьте 100 out. Этим мы задаем замедленное движение с 16-й по 24-й кадр. Далее надо с 8-го по 16-й кадр создать ускоренное движение: на 8-м кадре в том же окошке выставьте -100 in. При просмотре движение надписи будет неравномерным. Еще один способ, придающий реализм – движение по траектории. Далеко не все объекты должны двигаться прямолинейно. Для создания движения по траектории нужно создать нетолько слой, где движется объект, но еще один специальный слой, в котором будет нарисована траектория движения. А затем совместить объект с траекторией его движения.
3.9. Создайте новый слой, дайте ему имя. После чего нажмите расположенную правее кнопку AddMotionGuide (Добавить проводник движения). Появится еще один слой с надписью Guide: Layer 4 и рисунком траектории.
3.10. Перейдите на слой Guide: Layer 4, сделайте первый кадр ключевым, затем включите инструмент Перо:, PenTool (P), он рисует кривые Безье. Нарисуйте из нескольких кривых Безье нечто вроде спирали, начинающейся в нижней левой части сцены, а заканчивающейся выше и по центру (но так, чтобы в конце движения третья надпись не наложилась на надпись В.С. Высоцкий). Для корректировки спирали пользуйтесь инструментом Подвыбор:, SubselectionTool (A). Нажав его, можно изменять кривизну линий и передвигать узловые точки. Скопируйте кривую (CopyFrame), перейдите на последний кадр ролика и распространите ее на все кадры (PasteFrame).
3.11. Перейдите на слой третьей надписи, слелайте 12-й кадр ключевым и, вблизи от начала траектории, 48 кеглем, курсивом, белым цветом создайте надпись: «Песня о друге». Теперь надо совместить объект с его траекторией. Сделать это довольно непросто. Сначала инструментом Выбор:, SelectionTool (V) надо пододвинуть центр надписи максимально близко к началу траектории. Затем поставив курсор на конец кривой, когда он примет вид: (с прямым углом), совместить конец кривой с центром надписи, которая будет обозначена белым кружком..
3.12. Далее перейдите на 32-й кадр и сделайте его ключевым. Пододвиньте центр надписи максимально близко к концу кривой, затем совместите конец кривой с центром надписи, как описано выше.
3.13. Просмотрите сделанное и, если движения по траектории не получилось, сделайте все заново, стерев содержимое обоих слоев, как описано в пункте 2.7., и затем повторив действия п. 3.10 –
3.12. Анимацию портит то, что траектория видна, сделать ее незаметной нельзя. Но при публикации в формате.swf траектория движения не будет видна. При анимации может меняться и цвет объекта. Но для этого нужно применять анимацию формы. С текстом анимацию формы провести нельзя, но можно поменять цвет фона.
3.14. Перейдите в фоновый слой и включите последний кадр. Включите панель Color, отобразятся цвета созданной вами градиентной заливки (возможно, для отображения придется снять защиту слоя).
3.15. Сделайте двойной щелчок по одному из бегунков, и поменяйте оттенок цвета с пурпурного на синий. То же проделайте и с цветами других бегунков. Получился совсем другой фон.
3.16. Вернитесь на первый кадр, раскройте панель Properties, и в окошке Tween (Промежуток) поставьте Shape (Форма). Просмотрите созданное, цвет фона должен постепенно меняться.
4. Добавление звука В принципе, то, что до сих пор сделано – сделано методически неправильно. Этот флэш-ролик создается на основе песни, с обязательным присутствием звука. А для любого видеоматериала действует правило: изображение должно подстраиваться под звук, а не звук под изображение. Продолжительность сцен должна определяться естественным звучанием музыки, тем более диалогов. Подстраивать звук под изображение неудобно, сложно, а то и вредно – нарушатся мелодия и ритм.
4.1. Создайте новый слой, назовите его Звук, слой лучше сделать верхним. Сделайте первый кадр слоя ключевым и импортируйте в него имеющийся звук. Для этого надо найти звуковой файл ВысоцОДруге и мышкой перетащить его ярлык на первый кадр звукового слоя.
4.2. Перейдите на последний кадр и сделайте его ключевым. Вернитесь на первый кадр, и на вкладке Properties в окне Sound: вместо None поставьте ВысоцОДруге. В слое на всех кадрах появляется кривая воспроизведения звука, а просмотр ролика сопровождается песней.
4.3. При просмотре оказывается, что звук продолжается и после окончания анимации. Для того чтобы звук прекращался вместе с анимацией, в конечном кадре звукового слоя раскройте вкладку Properties, и в окошке синхронизации (Sync) выберите Stream, это режим сращивания с анимацией.
4.4. Для прочтения и усвоения движущихся титров требуется определенное время, пусть это будет 8 секунд. Скорость флэш-анимации 12 кадр/сек, значит, на титры требуется 8х12=96 кадров. На титры удобно оставить начальный проигрыш, где нет голоса. Но он занимает меньшее время, около 4 секунд. Значит, сначала надо демонстрировать титры без звука, а потом с начальным проигрышем, до появления голоса.
4.5. Перенесите начало звучания на 48-й кадр. Вырежьте первый кадр звукового слоя, нажав в режиме правой кнопки CutFrames, затем вставьте его на 48-й кадр (PasteFrames). А кадры с 1-го по 47-й звукового слоя надо выделить (при нажатом Shift) и очистить (команда ClearFrames).
4.6. Далее надо распространить количество промежуточных кадров со звуком вплоть до появления голоса. Выделите все промежуточные кадры после 48-го, во всех слоях и выполните InsertFrame. Число промежуточных кадров удвоилось. Повторите эту операцию вплоть до появления голоса Высоцкого. Для определения четкой границы появления голоса в конце придется число промежуточных кадров уменьшать (RemoveFrames). Обратите внимание, насколько увеличился размер файла после добавления звука. Из-за увеличения размеров в Интернете часто бывает нереально создать полноценное музыкальное сопровождение.
5. Рисование во флэш Flash – векторый редактор, в котором создаваемые объекты хранятся в векторной форме. Однако это своеобразная векторная графика. Все что мы рисуем, на экране представляется в растровой форме. Но как только мы отпускаем кнопку мыши, рисунок становится векторным: все заливки и отдельные линии становятся самостоятельными объектами. Это приводит к последствиям, довольно неожиданным для тех, кто работал в чисто векторной графике, например в CorelDraw. Заливка фигуры отделяется от ее контура – они перемещаются и деформируются независимо друг от друга. Часть объекта, попавшая под другой объект, перестает существовать. Если мы верхний объект передвинем, под ним оказывается пустота! Контуры тоже разбиваются на отдельные линии. Это разбиение происходит при изломе контура и при пересечении с другим контуром. Такие особенности не случайны. То, что нарисовано в одном слое, всегда или неподвижно, или двигается как единое целое. Так зачем для единой картинки создавать еще слои в слое? А независимый объект надо рисовать в отдельном слое. Или создавать для этого клип, о чем будет сказано далее. Более того, если осознать эту особенность Flash, то рисование становится быстрее, чем в классическом векторном редакторе. Потому, что не надо тратить время на работу с узловыми точками: их создание, слияние, перетаскивание и пр. Можно просто рисовать, удаляя все ненужное, и не заниматься геометрическими построениями. Создадим рисунок комнаты, похожий на приведенный в образце.
5.1. Перейдите на последний кадр фонового слоя и следующий за ним кадр сделайте ключевым. Очистите этот кадр (Delete). Раскройте вкладку Properties, и в окне Tween: поставьте None.
5.2. Сначала создадим пол и две стены. Включите инструмент (R), RectangleTool (Прямоугольник) выберите цвет контура – черный, а заливку – цвета пола, постройте прямоугольник на всю нижнюю часть сцены. Затем, пользуясь инструментом (Q), FreeTransform (Свободная трансформация) с опцией Distort, придайте ему нужную форму. При появлении лишних линий их надо стирать. Аналогично постройте фронтальную и боковую стены, дверь с ручкой. Если контуры раздела исчезают, восстановите их инструментом (N), LineTool (Линия). При необходимости для раскраски одинаковых объектов можно использовать инструмент (I) EyedropperTool (Пипетка). Его же, в сочетании с заливкой надо использовать для удаления «белых пятен», остающихся после перемещений и трансформаций.
5.3. Свойства линий (как и других объектов) можно менять. Инструментом постройте шнур лампы, после чего, раскрыв вкладку Properties, измените толщину линии. В списке Cap: поставьте None, тогда линия будет обрезаться по узловой точке. Если рисунок надо увеличить – пользуйтесь окном масштабирования в правом верхнем углу над хронометрической линейкой.
5.4. Можно строить и более сложные фигуры. Сделайте абажур лампы, примерно такой же, как на рисунке. Вместо прямоугольника включите инструмент PolyStarTool (Многоугольник Звезда), в Properties поставьте нужный цвет и толщину линии, в Opttions поставьте число сторон – (NumberofSides) – 3 и постройте треугольник. Стороны любой фигуры можно искривлять.
5.5. Включите, после чего подведите курсор к боковой стороне треугольника так, чтобы он принял форму: (с дугой) и превратите прямые линии в кривые. Но это можно сделать только после того, как вы щелкнете по другим объектам и снова вернетесь к треугольнику. То есть растровый рисунок замените набором векторных объектов. Основание треугольника измените, включив опцию Envelope.
5.6. Далее построим один «луч от лампы» в виде треугольника с очень маленьким основанием. Сделайте копии луча (Ctrl + D), поверните и расположите лучи вокруг лампы. Вращать лучше, переместив центр вращения к основанию, а небольшие передвижения делать не мышкой, а стрелками клавиатуры. При нажатом Shift можно одновременно выделять несколько объектов и работать с ними, как с единым целым. Сложные предметы рисовать прямо на сцене неудобно: можно испортить объекты, находящиеся под рисуемым предметом. Технология Flash обладает одной полезной опцией: в сцену можно вставлять заранее созданные клипы, обладающие собственным именем. Один и тот же клип можно вставлять в разные сцены, в одну сцену также можно вставлять неограниченное число клипов. Клипы бывают трех видов: Graphic – в виде неподвижного рисунка; Movieclip– анимированный объект; Button – кнопка. Пока познакомимся с клипами самого простого вида: статичными рисунками. Создадим в виде клипов вешалку с одеждой и обувь. Окно для создания нового клипа вызывается командой Insert (Вставка) → NewSymbol (Новый символ). Клипы хранятся в библиотеке: Window (Окно) → Library (Библиотека). Но скорее всего, в ходе работы вы уже создавали клипы, не подозревая об этом, и окно библиотеки клипов у вас уже открыто. Тогда новый клип можно создавать с помощью значка NewSymbol, расположенного в нижней части окна библиотеки. Сцена клипа обладает теми же базовыми свойствами, что и основная сцена: здесь можно создавать слои, анимацию, пользоваться всеми инструментами.
5.7. Создадим вешалку. Вызовите окно создания клипа, назовите его (например, Вешалка), в списке Type (Тип) выберите Graphic и командой OK перейдите в сцену клипа. Саму вешалку можно построить из трех прямоугольников с применением операций сдвига. Далее на свободном месте делаем крючок из линий и кружка, копируем его и размещаем крючки на местах. Левый край вешалки можно произвольно оборвать, он выходит за пределы сцены.
5.8. Возвратитесь в основную сцену, нажав Scene 1 выше хронометрической линейки. Вставьте клип в кадр; это делается перетаскиванием из библиотеки значка клипа в кадр. Клип можно отредактировать в кадре как единое целое, изменив его положение, размер, форму. Левый край, выступающий за пределы сцены, при просмотре виден не будет. Далее будем применять не инструменты построения линий, а инструменты рисования, такие как Карандаш: PenTool (Р), Кисть: Brush (B), Ластик: Eraser (E). Они обладают многими интересными, необычными опциями.
5.9. Создайте клип для висящего на вешалке плаща. Выберите с инструментом Straighten (Выпрямление) и нарисуйте черный контур плаща. Неудавшиеся линии стирайте ластиком в режиме EraseNormal (Нормальное стирание), возможно, это придется делать многократно. Затем в Инструменте Кисть выберите нужный цвет плаща и, в режиме PaintFill закрасьте то, что очерчено контуром. В этом режиме заливка будет автоматически ставиться под контур. То, что вышло за пределы контура, можно легко удалить ластиком в режиме EraseFills (Стирание заливки).
5.10. Проделайте аналогичные операции для создания клипа висящей на вешалке куртки. Только вместо выберите опцию Smooth (Сглаживание). Разница очевидна. Перенесите в сцену сначала куртку, потом плащ и разместите их на вешалке. Возможно, придется подредактировать их в своих клипах и снова перенести.
5.11. Можно получить объект, не содержащий линий, если из линий создать контур, сделать заливку, потом линии стереть. Обратная операция – создание контура вокруг заливки делается инструментом IncBottle (S). Сотрите контур абажура. А в вешалке и одежде стереть контур не удастся – это можно сделать только в соответствующих клипах.
5.12. Создайте клип и нарисуйте в нем ботинок. Сразу, тем более мышью нужные контуры создать трудно. Но, то место, которое вышло неудачно всегда можно подправить. Во-первых, изменяя кривизну линии, когда курсор принимает форму. Во-вторых, выделяя с помощью Shift несколько линий, после чего их можно перемещать, масштабировать, сдвигать и т.д. Командой Ctrl+D создайте копию ботинка. Получается два правых (или левых) ботинка. Выхода из этой ситуации может быть два: либо изменить носки ботинок, либо поставить их так, чтобы их идентичность была бы незаметна. Сделайте это, после чего перенесите созданное в сцену и отредактируйте.
5.13. Проделйте аналогичные операции для создания тапок. Во Flash с помощью команды File → Import можно импортировать готовые изображения различных форматов: растровых, векторных, PostScript и других. Эта же команда позволяет импортировать звук и видео. Импорт можно осуществлять как в библиотеку, так и непосредственно в кадр.
5.14. Импортируйте во фрейм (File → Import → ImporttoStage) из папки, указанной преподавателем, файлы ЖенВЦвете.wmf и МужВЦвете.wmf, после чего фигуры женщины и мужчины расставьте по местам и увеличьте до нужного размера. Увеличение надо делать сразу, пока сгруппированы объекты, из которых состоят эти фигуры.
5.15. Сцену с комнатой надо демонстрировать до момента, находящегося между словами песни «плох он или хорош» и «парня в горы тяни, рискни» (где-то в районе 280-300 кадров). Так же, как описано в пункте 4.6, несколько раз поставьте промежуточные кадры в фоновый слой, чтобы картинка кончалась где-нибудь в конце проигрыша. В конце демонстрации поставьте курсор на кадр фонового слоя и сделайте его ключевым (InsertKeyframe). Фон должен растянуться до требуемого времени.
6. Создание анимации формы В этом виде анимации происходит постепенный переход фигуры одной формы в фигуру другой формы. Одновременно могут изменяться размеры, положение, цвет. Возможность деформации объектов является сильным инструментом в арсенале аниматора. Но на анимацию формы имеется ряд ограничений. Она не работает: с растровой графикой; с текстом; с группами объектов – нельзя деформировать сгруппированные объекты; с клипами – деформировать можно только статичный объект. Анимация формы реализуется так же, как и анимация движения, только в окошке Properties → Tween надо выбрать не Motions, а Shape. Цвет кадров с анимацией движения серо-голубой, а с анимацией формы – зеленый. Добавим в созданный статичный рисунок следующую анимацию: сначала от фигуры мужчины «отделится» восклицательный знак, а потом он превратится в знак вопросительный. Чтобы не усложнять хронометрическую линейку, новых слоев создавать не будем, для деформаций используем слой, расположенный над фоновым.
6.1. Для начала создадим «пустое пространство», отделяющее старое наполнение от нового. Поставьте курсор в указанном слое на кадр, следующий за титрами, и сделайте этот кадр ключевым. Появится надпись По мотивам, сотрите ее. Далее, через 15-20 кадров создайте еще один ключевой кадр. Между двумя ключевыми кадрами появится белая полоса ничем не заполненных кадров.
6.2. Следующий кадр сделайте ключевым и в нем бесцветным карандашом обрисуйте контур мужчины. Сначала выберите инструмент Карандаш, в окне Strokecolor установите серый цвет контура: #999999. Такой же серый цвет установите в окне Fillcolor. Чтобы контур и заливка стали бесцветными, надо в окнах Strokecolor и Fillcolor щелкнуть по значку, правее Alpha, и поставить бегунок Alpha на нуль. Для улучшения качества обводки на вкладке Properties поставьте бегунок Smoothing (сглаживание) на 100. Полного соответствия добиваться не обязательно, но, все же, постарайтесь обвести фигуру точнее.
6.3. Переместитесь примерно на 30 кадров, создайте ключевой кадр. Далее на вкладке Properties в окне Tween поставьте Shape, на хронометрической линейке появится зеленый участок со стрелкой, указывающий на анимацию формы. Хотя пока никаких изменений не произошло.
6.4. Изменим свойства последнего ключевого кадра. С помощью инструмента Выбор: переместим невидимый контур фигуры в положение между мужчиной и женщиной и выше их. Для этого обязательно надо заблокировать фоновый слой, поставив на него «замочек» - иначе будут перемещаться детали фона.
6.5. Сделайте в последнем кадре контур видимым. Для этого в окнах Strokecolor и Fillcolor поставьте Alpha 100. Просмотрите анимацию: от мужчины должен отделяться его серый «двойник» и перемещаться влево и вверх.
6.6. Сделаем двойника на секунду неподвижным, чтобы он был зафиксирован сознанием. Отсчитайте 12-15 кадров и создайте ключевой кадр. На хронометрической линейке тоже появилась анимация формы, но во время этой «анимации» ничего не происходит. Теперь сделаем настоящую деформацию: превратим наше «привидение» в восклицательный знак.
6.7. Переместитесь на 40-45 кадров, сделайте ключевой кадр, в котором надо создать восклицательный знак. Сначала уберите в последнем кадре серую фигуру. Поскольку текст деформации не подлежит, восклицательный знак надо создавать вручную.
6.8. Включите инструмент Прямоугольник:, затем в самом низу панели инструментов включите окно SetCornerRadius (Задайте радиус угла), поставьте радиус 12. Нарисуйте верхнюю «палку» восклицательного знака (!), затем включите инструмент Свободная трансформация:, далее в самом низу Distort (Искажать) и сделайте верхнюю часть пошире, нижнюю –уже.
6.9. В заключение инструментом OvalTool сделайте нижнюю точку восклицательного знака. Просмотрите созданную деформацию. Скорее всего, она протекает довольно странно, не так, как хотелось бы. Для исправления такой сложной деформации нужны точки подсказки. Эти точки ставят в начальном и конечном ключевых кадрах. Они обозначаются буквами латинского алфавита: a, b, c, d и так далее, вплоть до z. Буквы ставят по часовой стрелке. Смысл точек подсказки в том, что место, обозначенное точкой (например, a) в начальном ключевом кадре деформации, должно придти в место, обозначенное той же точкой (a) в конечном ключевом кадре. А если в конечном и начальном кадрах точки поставить в другие места, то деформация пойдет другим путем. Промежуточные фазы могут быть совершенно разными, в том числе нежелательными. Анимация формы – капризный процесс. Часто требуется экспериментировать, рассмотреть различные варианты, чтобы анимация пошла нужным путем.
6.10. Для исправления перейдите на кадр начала анимации, после чего выведите точки подсказки, включая в меню команды Modify → Shape → AddShapeHint. В центре фигуры появляется точка a, передвиньте ее в верхнюю часть фигуры. Наведите курсор на точку, в меню правой кнопки нажмите AddHint, появляется точка b. Найдите для нее место, по часовой стрелке от a. Аналогичным образом получите еще 3 точки и оконтурьте ими фигуру, располагая точки, друг за другом по часовой стрелке.
6.11. Перейдите на конечный файл, там уже имеются точки подсказки, сложенные друг на друга, последняя сверху. Оконтурьте ими восклицательный знак (без кружка). Маловероятно, что простое введение точек приведет к хорошей анимации. Поэкспериментируйте с расположением точек, просмотрите промежуточные кадры, чтобы добиться плавного перехода одной фигуры в другую.
6.12. Сделаем восклицательный знак на секунду неподвижным так же, как в п. 6.6. сделали неподвижной фигуру.
6.13. Теперь будем деформировать восклицательный знак в вопросительный. Переместитесь вперед еще на 20-30 кадров, создайте ключевой кадр и скопируйте туда восклицательный знак. Затем выберите инструмент Подвыбор, кликните мышью по верхней части вопросительного знака, она выделяется без точки. Кнопкой Delete удалите ее и кистью постарайтесь нарисовать ровный вопросительный знак. Вернитесь назад на те же 20-30 кадров и в ключевом кадре на вкладке Properties поставьте анимацию формы. Просмотрите переход восклицательного знака в впросительный, при необходимости откорректируйте его.
6.14. Далее вопросительный знак должен оставаться неизменным до конца демонстрации комнаты. Для этого надо просто создать ключевой кадр, совпадающий по времени с последним кадром комнаты.
6.15. В заключение просмотрите созданную анимацию формы вместе со звуком, при необходимости внесите корректировки.
7. Импорт гор и альпиниста Для следующей, довольно сложной сцены будем пользоваться образцами, созданными ранее и хранящимися в библиотеке AdobeFlash.
7.1. После окончания показа комнаты в слое Фон создайте пустой ключевой фрейм (InsertBlankKeyframe), и импортируйте в него из библиотеки файл Горы1. Для этого надо раскрыть Window → Library, найти там значок нужного файла и мышкой перенести его в кадр (не забудте снять запрет на редактирование фонового слоя).
7.2. Эта картинка больше сцены; в панели Properties можно посмотреть ее размер: 867 пикселей по длине (W) и 533 по высоте (H). Сделаем так, чтобы горы перемещалисьв кадре, как при медленном движении видеокамеры. Сначала совместите левый нижний угол картинки с левым нижним углом сцены так, чтобы белые края сцены были не видны.
7.3. Панорама гор должна будет иллюстрировать весь следующий куплет песни, примерно до 480 кадра. Командами InsertFrame и RemoveFrames, как описано в п. 4.6, распространите звук до конца куплета. Перейдите на конец куплета, нажмите F6, распространив горный пейзаж на все это время, после чего совместите верхний правый угол картинки с верхним правым углом сцены и сделайте анимацию движения (CreateMotionTween). В результате горы будут перемещаться. Программа Flash обладает одной уникальной особенностью: здесь можно сформировать сложный анимационный процесс с несколькими временными диаграммами, вложенными друг в друга. Таким способом удобно создать походку персонажа – в движение человека вперед и вверх как целого вложить изменения положения частей тела друг относительно друга. Сложную анимацию рассмотрим на примере поднимающихся в гору альпинистов. Один из них уже готов – в вашу задачу входит вставить его в панораму гор.
7.4. Создайте новый слой и в нем – ключевой кадр, совпадающий по времени с началом показа гор. Импортируйте туда клип АльпинГотовый, для этого это название в списке клипов мышкой перенести на экран. Клип надо уменьшить до нужного размера инструментом в режиме Scale 7.5. Создайте ключевой кадр в слое альпиниста, совпадающий с окончанием показа гор. В него также поместите уменьшенный клип АльпинГотовый, сделайте анимацию движения и просмотрите движение альпиниста.
8. Создание идущего альпиниста Программа Flash позволяет создавать сложные клипы-символы, состоящие из нескольких простых объектов. Соберем человека-альпиниста из нескольких деталей.
8.1. Создайте окно для нового клипа (Insert → NewSymbol), назовите его, например, Альпин1. В библиотеке есть папка Человек 1, в ней находятся составные части, из которых можно собрать шагающего альпиниста. Таких частей всего 10, то есть придется создавать много новых слоев. В окне клипа создайте 9 новых слоев на каждую из частей тела альпиниста. Кроме плечо (л.); левое плечо при ходьбе в профиль будет не видно.
8.2. Переименуйте созданные слои, проще всего это сделать через буфер обмена. Двойным щелчком выделяйте название в библиотеке, копируйте его в буфер и заменяйте название слоя. Последовательность слоев должна быть следующей: сверху – части правой руки, затем голова и тело, ниже части правой ноги, еще ниже части левой ноги, в самом низу – локоть левой руки. Перенесите детали из библиотеки, каждая деталь должна располагаться в своем слое. Для последующей сборки потребуются масштабы 200 и 400. Часто аниматоры применяют для своих персонажей походку с двойным подскоком, изображенную на рисунке. У нашего персонажа исходное положение соответствует этапу А21. Кроме рисунка, надо за образец брать движения уже созданного альпиниста, просматривая ролик в.swf.
8.3. Пользуясь инструментами ArrowTool (выделения) V и FreeTransformTool (трансформации) Q соберите альпиниста. При необходимости части тела надо уменьшать/увеличивать до нужного размера.
8.4. Приведите части тела альпиниста в положение А21. При повороте ног и рук надо сначала в режиме смещать центр вращения в верхнюю часть вращаемой части тела (бедра, локтя и пр). Для ускорения работы вместо InsertKeyframe можно применять F6, вместо FreeTrensformTool – Q, вместо SelectionTool – V. Объекты можно точно перемещать с помощью стрелок клавиатуры.
8.5. Перейдем в режим просмотра объектов в виде контуров, нажав на верхнем заголовке хронометрической линейки квадратик. Так будет удобнее с ними работать. При необходимости можно в соответствующем слое опять нажать цветной, содержимое слоя приобретет заливку. Для более точного контроля движений можно ввести сетку: View → Grid → ShowGrid. Может возникнуть следующее неудобство: полученную сложную анимацию в формате.fla нельзя просмотреть ни в сцене, ни где-нибудь еще. Во всех окнах будут демонстрироваться только простые клипы. А результат их совмещения можно увидеть, только создав ролик в формате.swf (File → PublishSettings), который редактированию не подлежит. То есть надо будет создавать временные ролики и, глядя на них, вносить во.fla необходимые коррективы.
8.6. Сначала переведем фигуру из положения А21 в А1, отведя на это 8 кадров. В первом слое ставим курсор на 8 кадр и создаем ключевой кадр (InsertKeyframe). При этом 1 ключевой кадр распространяется до 7-го. Повторяем операцию для всех слоев.
8.7. Выпрямим согнутую правую ногу. В 8 кадре в слое 1БедроЛев инструментом FreeTrensformTool вращаем правое бедро, предварительно переместив вверх центр вращения. Возвратитесь на 1 кадр, также переместите центр вращения и выполните CreateMotionTween. В результате с 1 по 7 кадр происходит заданное перемещение.
8.8. Далее задаем перемещение нижней части ноги. Сначала мы ее переместим до совмещения с нижней частью бедра. Затем, переместив центр вращения в 1 и 8 кадрах, в 8-м кадре повернем голень, чтобы нога была прямой. Сделайте CreateMotionTween и посмотрите результат. Если нижняя часть ноги двигается независимо от верхней, отрывается от колена, а на 8 кадре вновь с ним соединится, то, значит, плавного движения у вас не получилось. В этом случае придется делать покадровую анимацию: каждый кадр делать ключевым, и в нем немного вращать и перемещать голень, не отрывая ее от колена.
8.9. Аналогично сделайте движение правой ноги. Здесь бедро тоже надо вращать, хотя и меньше, и немного опускать. А голень чуть вращать по часовой стрелке, не отрывая ее от колена. Просмотрите сделанное, устраните недочеты, если они есть.
8.10. При нажатом Shift на 8 кадре выделите сразу два слоя: Тело и Голова, опустите их в соответствии с движением ног. После этого на 1 кадре тоже совместно выделите эти слои и примените CreateMotionTween.
8.11. Теперь зададим движение рук. На 1-м кадре правая рука должна быть почти прямой, чуть согнутой в локте. На 8-м кадре верхнюю часть руки отводим назад, присоединяем локоть. Правый локоть на 1-м кадре тоже близок к вертикальному, на 8-м вращается против часовой стрелки, выступает вперед.
8.12. Переходим в позицию А5. Сначала, аналогично п. 8.6., создаем 16-е ключевые кадры во всех слоях. В них руки опускаем вниз, ноги сгибаем так, как показано в А5. Голову и тело еще чуть-чуть опускаем. Далее создаем анимацию движения, смотрим, устраняем недочеты. Переходим в позицию А9. Эта позиция симметрична исходной: здесь поднята левая нога, а в исходной правая; руки тоже находятся в противоположных фазах. Поэтому можно скопировать содержимое 1 кадра в 24-й, а затем поменять местами ноги и руки.
8.13. При нажатом Shift выделите все слои и затем клавишей F7, создайте сразу во всех слоях пустые ключевые кадры. А вот скопировать сразу все слои из одного кадра в другой не удастся, перенесите все объекты с 1 кадра в 24 по отдельности. Включите режим просмотра в виде контуров.
8.14. Далее надо поменять местами правые и левые части рук и ног. Опишем поцедуру обмена на примере правого и левого локтей. Сначала один из них поставьте в режим заливки. Потом помощью Ctrl+D создайте копии левого и правого локтя, копию левого локтя совместите с оригиналом правого, а копию правого – с оригиналом левого. Теперь надо удалить оригиналы, оставив копии, и тогда правый и левый локти поменяются местами. Для того, чтобы удалить правый локоть, поставьте на линейке времени запрет на редактирование левого локтя, и тогда при выделении и применении Delete удалится оригинал правого локтя, а копия левого останется. Аналогично удалите оригинал левого локтя. Проверьте правильность проделанной операции. Присоедините правую руку к правому локтю.
8.15. Поменяйте в 24 кадре левую и правую части ног точно так же, как описано в 8.14 для локтей.
8.16. Внимательно посмотрите полученный шаг не только в режиме непрерывной анимации, но и кадр за кадром. Скорее всего вы увидите различного рода ошибки. Устраните их, с целью создания плавных, непрерывных движений.
8.17. Позиция А15 симметрична А1. Скопируйте на 32-й кадр слои с 8-го кадра, а затем аналогичным образом поменяйте руки и ноги. Опять внимательно посмотрите созданное, чтобы все движения были в нужную сторону, а части ног/рук не перепутаны.
8.18. Позиция А5 симметрична А17. Скопируйте на 40-й кадр слои с 16-го кадра, а затем аналогичным образом поменяйте руки и ноги. И здесь внимательно посмотрите созданное.
8.19. Наконец 48-й кадр должен быть идентичен 1-му. Скопируйте все слои первого кадра на 48-й – и создание идущего человека закончено.
8.20. А теперь аналогично п. 7.4 и 7.5., вставьте в панораму гор созданного вами человека. Скорее всего, его походка будет далека от идеальной. Совершенствовать движения человека можно долго, по крайней мере, до состояния Альпин Готовый. Хотя его походка тоже нуждается в улучшении, главным образом необходимы движения ступней. То есть надо добавлять два слоя для ботинок. Основными направлениями совершенствования походки можно считать следующие: Носок опорной ноги должен оставаться на месте, в то время как остальные части тела движутся вперед. Поскольку горы у нас движутся – это означает, что носок опорной ноги в клипе реально должен немного двигаться назад и вниз. Это можно реализовать отслеживая движения голени по сетке. Одновременно потребуется поворачивать бедра. Может быть, надо будет создавать новые ключевые кадры, а также сокращать какие-то фазы движения, как это делалось в образце. Надо устранить все возникшие дефекты в положении голеней и бедер относительно друг друга.
8.21. С помощью этих, а также любых других действий исправьте походку созданного персонажа. В сцене ничего делать не надо, изменения клипа вставляются в нее автоматически.
9. Публикация Анимационный ролик создается в формате.fla, это внутренний формат программы AdobeFlash. При отсутствии этой программы воспроизведение невозможно. Для просмотра ролика практически на любой аппаратуре его чаще всего переводят в формат.swf, Формат.swf предназначен только для просмотра, внесение изменений в нем не предусмотрено. С.swf работают все современные браузеры; практически в любом компьютере имеется браузер, который и обеспечит просмотр. Существуют и другие возможности для публикации.
9.1. Раскройте окно File → PublishSettings, где можно установить режимы публикации. На вкладке Formats показаны режимы: HTML для создания файла окружения, куда можно встроить ролик (если его надо разместить в Сети, а другого файла html нет); форматы, создающие последовательность статичных кадров (GIF, JPEG, PNG); Несколько других анимационных форматов. Отключите все режимы кроме Flash.
9.2. В окне File → PublishSettings перейдите на вкладку Flash; здесь можно выбрать параметры звука. В строке AudioStream нажмите кнопку Set, выберите режим Disable (без звука). Нажмите кнопку Publish, и посмотрите, какой размер занимает ваша анимация. Убедитесь в отсутствии звука, включив просмотр.
9.3. Далее выберите режим Raw, он оставит звук в неприкосновенности, без сжатия. Сделайте публикацию и посмотрите размер файла, он будет на порядок больше. Значит, размер созданного файла.swf будет определяться главным образом звуковой дорожкой. Прослушайте звук максимально возможного качества.
9.4. Теперь выберите сжатие MP3. Размер файла.swf будет небольшим, но качество звука – неудовлетворительным. Выбор режима ADPCM будет компромиссным: наблюдается снижение размера файла при приемлемом качестве звучания; оставьте его.
9.4. В ходе просмотра swf-ролика уберите циклический режим: Control → Loop, покажите созданное преподавателю. *** Описанные действия позволили построить лишь малую часть ролика, причем в сцене с горами должно быть как минимум трое альпинистов и все должны идти. Создание походки относится к числу сложных анимационных задач, в чем можно было убедиться. А дальше в соответствии с сюжетом один из «парней» должен показать себя «не ах» и отправиться вниз. А двое других, преодолев все трудности, дойти до вершины и быть очень довольными этим. Что-то подобное создано в ролике 123.FLA, хотя эта анимация не вписана в музыкальное сопровождение и должна быть примерно в 2 раза длиннее. Желающие могут попробовать сделать собственное окончание. Таким образом, даже с появлением компьютера анимация, мультипликация осталась весьма трудоемкой задачей.
Источник: http://5fan.ru/wievjob.php?id=50126
