Анимация движения. Способы создания движения во Flash. Автоматическая анимация движения объекта

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

Инвестируй 15 минут времени в новые знания вдохновляясь трендами индустрии.

«Лики войны»: Джайна . Смесь CG ART , 3D и спецэффектов позволяют создавать сравнительно бюджетные мини-истории для роликов Blizzard . CGI + 3D анимация. Социальное вирусное видео, которое вы могли пропустить. Written, Directed & Produced by Lubomir Arsov

Еще больше примеров современной анимации ждёт вас ниже…

Виды анимации

С момента появлениея простейшей анимации было придумано широкое разнообразие видов и стилей. Рассмотрим 5 основных видов :

• Традиционная анимация;
• 2D векторная анимация;
• 3D компьютерная анимация;
• Моушн графика;
• Кукольная анимация;

Традиционная анимация (2D, Cel, Hand Drawn)

Традиционная анимация , иногда называемая анимацией cel, является одной из старых форм анимации. В ней:

• аниматор рисует каждый кадр для создания последовательности движений;
• последовательные рисунки, быстро экспонированные один за другим, создают иллюзию движения.

Самый простой пример такой анимации - старые мультфильмы Диснея.

Мультфильм «Маугли»

Как создается традиционная анимация?

• аниматор готовит рабочее поле: прозрачный лист бумаги закрепляет на специального подсвечиваемого экрана;
• на лист бумаги цветным карандашом наносится рисунок;
• рисунок должен быть грубым и приблизительным. Таким он делается, чтобы увидеть, сколько кадров нужно создать для идеального движения персонажа;
• как только очистка и промежуточные чертежи будут завершены, производство переходит к съемке каждого отдельного кадра.

Как создавались анимационные ролики в 1938 году

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

Примеры современной традиционной анимации

Eluvium. Автор Стас Сантимов Are You Lost In The World Like Me? Автор Стив Катс

С чего начать?

Стартовать в профессии можно с изучения базовых

Преимуществом уроков является последовательное изучение процесса создания анимации по принципу - «от простого к сложному».

Также, для совершения первых шагов создания анимации необходимо освоить такие базовые программы как:

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

• Средний заработок аниматора на Западе равен $4250/мес;
• В наших краях - сильно по-разному (в студии, на фрилансе, на удалёнке — от $400 до $3500 в мес).

2D векторная анимация

Bojack Horseman (сериал на Netflix)

2D-анимация - это термин, используемый при обращении к традиционной рисованной анимации. Он также может относиться к компьютерным векторным анимациям, использующими методы традиционной.

Принцип 2D-анимации

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

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

Как научиться?

В то время как традиционная анимация требует, чтобы вы были хорошим художником, компьютерная - не совсем. 3D-анимация больше похожа конструктор, а не на рисование.

Технологии 3D-анимации имеют много общего со стоп моушн, поскольку соответствуют кадровому подходу. Но, в 3D реализация задач более управляема, поскольку находится в цифровом поле.

3D модель

Вместо рисования персонажа или создания его из глины в 3D-анимации объект создается в цифровой форме. Позже снабжаются «скелетом», который позволяет перемещать модели.

Анимация создается построением моделей на определенных ключевых кадрах, а после компьютер вычисляет и выполняет интерполяцию между этими кадрами для создания движения.

Ниже смотрите наглядный пример процесса создания 3D модели в программе Blender .

Примеры современной 3D анимации

Автор — ManvsMachine

Nike Air Max

Автор — PlatigeImage

Wonder Woman — Prologue | Making of

Профессия 3D-аниматора: с чего начать

Профессия высококонкурентная, поскольку эта анимация в основном для коммерческих целей.

Где можно работать моушн дизайнеру:

• В студиях
• На фрилансе
• Продавать шаблоны
• Создавать продукты обучения

Средняя зарплата моушн дизайнера на Западе достигает $5000/мес, у нас заработная плата специалиста стартует от $700/мес.

Stop motion (Кукольная анимация)

Стоп моушн - это остановка объекта после отснятого кадра и последовательное его перемещение для съемки нового фото и нового движения. При воспроизведении сделанных фото одно за другим, создаётся иллюзия движения. Так получается стоп моушн.

Этот приём похож на традиционную анимацию, но вместо рисунков аниматор использует реальные материалы.

Процесс работы над сериалом Robot Сhicken

Мне нравятся все формы анимации, но есть что-то уникальное и особенное в стоп моушн: оно более реальное. Но я думаю, что это тоже своего рода одинокая и темная вещь.

Тим Бертон

Эволюция Stop Motion

Анимация Stop-Motion использует объекты, сфотографированные в последовательности для создания иллюзии движения.

Пример Stop Motion анимации

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

Примеры современной кукольной анимации

Еще пример из Robot Chicken Автор — Bruna Berford

Профессия кукольного аниматора: с чего начать, сколько зарабатывает

Начинать движение в глубины профессии стоп-моушн дизайнера необходимо с освоения Dragonframe и iStopMotion

Профессия стоп-моушн дизайнера на рынке труда понемногу ожила. Стоп моушн сегодня - это недорогой метод, в котором легко показать хороший художественный вкус, и навыки терпения. Поэтому и дизайнеры зарабатывают неплохо:

• средний заработок на Западе — $3864/мес;
• у нас — от $1000/мес.

Типы анимации

Рассмотрим, какие существуют типы анимации.

Гиф анимация

GIF (с расширением файла, .gif) - это формат файла изображения, который анимируется путем объединения нескольких других изображений или кадров в один.

Пример GIF. (сконвертирован в mp4 для меньшего размера)

В отличие от формата JPEG (.jpg), GIF обычно используют алгоритм сжатия, называемый кодировкой LZW, который не ухудшает качество изображения и позволяет легко хранить файл в байтах.

Более подробно о том, что такое GIF можно прочитать на Википедии.

Примеры GIF-анимации

Примеры на любой вкус находятся на портале giphy.com

Как сделать GIF самостоятельно?

• Ранее мы уже писали о самом быстром .
• А вот еще один полезный урок по созданию гифок в Adobe After Effects .

Cinemagraphy

Так же ознакомитесь с мнением может ли Анимэ стать мейнстримом (на анг языке).

Примеры японской анимации

Prison School Anime Flavors of Youth

Как создается анимэ?

Процесс создания аниме состоит из нескольких этапов:

• поиск идеи анимации и персонажа;
• придумывание концепта (продумываются персонажи, основная сюжетная линия, делаются какие-то первые наброски);
• написание подробного сценария;
• рисование персонажей и фонов;
• примерная раскадровка;
• зарисовки или скетчи приводятся в цифровой вид.

Видео — Как создается анимэ

12 принципов создания анимации

1. Сжатие и разжатие

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

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

Важно : размер объекта не должен меняться в зависимости от того, сплющенный он или растянутый.

Первый принцип анимации

2. Подготовка к действию

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

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

Важно: без подготовки к любому действию все последующие шаги персонажа будут выглядеть нереалистично и неправдоподобно. Художник не может пропустить этот момент, поскольку зритель просто не поймет, что хочет сделать персонаж в следующие секунды, и смотреть такой ролик будет просто неинтересно.

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

Второй принцип анимации

3. Инсценировка

Цель этого принципа состоит в том, чтобы как можно более точно раскрыть творческий замысел автора.

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

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

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

Третий принцип анимации

4. Спонтанное действие и От позы к позе

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

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

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

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

Четвертый принцип анимации

5. Инерция и нахлест

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

Инерция и нахлест делают движения, тело и персонаж анимации более живыми.

В эту группу также входит такой принцип как оттяжка. Благодаря оттяжке при повороте головы персонажа его волосы или же щеки (как у бульдога) будут медленно и пружинисто двигаться за ней.

Пятый принцип анимации

6. Замедление движения в начале и конце

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

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

Важно: замедление используется не во всех случаях. Например, для того, чтобы показать движение пули замедление не нужно, а вот для движения пистолета во время выстрела - да.

Шестой принцип анимации

7. Дуги

Без учета движения персонажа по дуге возникают очевидные ошибки и они становятся слишком механическими.

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

Седьмой принцип анимации

8. Выразительные штрихи

Этот принцип часто путают с нахлестом, но это неправильно. Выразительные штрихи - это особенности движений персонажа, которые придают ему колорита.

Выразительные штрихи наделяют движения персонажа характером момента и настроением. Если персонаж злой, то при стуке в дверь вторая рука у него будет сжата в кулак. Может этот штрих не так и бросается в глаза, но он как нельзя лучше передает настоящие, реальные эмоции человека.

Художник, который придает значение таким мелким деталям, наделяет анимацию жизнью.

Восьмой принцип анимации

9. Частота кадров

От того, сколько кадров художник нарисовал между основными действиями зависит и общий характер анимации.

Меняя частоту кадров, аниматор может рассказать целых 10 историй. Если между основными кадрами поз много и они расположены близко друг к другу, то движения будут осуществляться очень медленно, а если кадров мало и они расположены на большом расстоянии друг от друга - движения будут очень быстрыми.

Стандартная частота кадров для кино равна 24 . Анимация также рисуется в один, два или три кадра.

Важно: чем чаще будут меняться кадры, там в более тщательной прорисовке они будут нуждаться.

Девятый принцип анимации

10. Гиперболизация

Принцип состоит в том, что почти каждое выражение лица, мимику и эмоцию необходимо сделать уникальной.

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

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

Оптимальную степень гиперболизации определить сложно. Поэтому сперва необходимо гиперболизировать задумку по максимуму, а затем адаптировать под ролик.

Десятый принцип анимации

11. Прорисовка

Рисовать по этому принципу нужно так, чтобы подать рисунок в рамках трехмерного пространства. Передавая массу, объем и равновесие персонажа.

Если нарисовать фигуру со всех сторон, то процесс анимации будет значительно упрощен.

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

Одиннадцатый принцип анимации

12. Харизматичность

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

Красота персонажа - это не обязательно харизматичность. Эта черта может выражаться в любой детали, быть заключенной в одном персонаже или же во всех героя ролика.

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

Двенадцатый принцип анимации

Тенденции (тренды) в анимации

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

• Смотрите .

Вот самые популярные из них:

3D в стиле ретро и винтаж

Cтиль 3D-анимации, который снова становится популярным - это ретрофутуризм. Это позволяет использовать фантастическую эстетику, о которой люди в конце 70-х и начале 80-х думали, что будущее может выглядеть именно так.

Техника: использование пышных световых эффектов и пиксельных цифровых элементов служит для создания местности и персонажей, в ретро мире.

Высококонтрасная Cel Animation

Это тенденция анимации, которая уже несколько лет находится на подъеме и используется некоторыми из ведущих компаний в мире, включая Nike, Nickelodeon, Disney, Cartoon Network и даже для игр Winter X.

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

Результат - забавная последовательность от которой трудно отвести взгляд.

Некоторые из лучших примеров взяты из Golden Wolf, компании по производству анимации, базирующейся в Лондоне.

Микс 2D и 3D

Тенденция, начавшаяся в последние годы и продолжающая нарастать, создает анимации, которые выглядят как сочетание 2D и 3D.

Вам не нужно далеко ходить, чтобы найти учебное пособие, в котором показано, как в итоге получить плоский 2D-взгляд, используя cel shader для рендеринга 3D.

Предоставляя 3D-объектам 2D-взгляд, аниматоры могут создавать выразительные, иллюстративные элементы, которые сразу привлекают внимание зрителя, обеспечивая четкую и красочную информацию.

Сверхсюрреализм

Если есть одна отличная анимационная тенденция, которая полностью использует силу изображений CGI, это стиль сюрреализм.

Эффект гипер-сюрреалистической анимации основан на объединении фотореалистичных элементов с фантастическими изображениями для создания сказочных миров и действий.

Есть такой пример анимации, как «The Dreamer» от Roof Studio для Honda, который привлекает зрителей к причудливому путешествию, поскольку реалистичное транспортное средство движется по диким местам.

Динамическая анимация функций в приложениях

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

Это включает в себя использование анимации для улучшения элементов навигации, подтверждения ввода пользователя, увеличения и уменьшения содержимого и т.д.

Возрождение 2D-анимации в маркетинге

В индустрии развлечений, таких как кино и видеоигры, 2D-анимация почти исчезла, когда появился 3D. С тех пор компании чувствовали, что нет лучшего способа увлечь аудиторию, игроков и потенциальных клиентов, чем с помощью 3D-анимации, даже если для этого требуется больше времени и усилий.

Анимацию движения (motion-tweened) также можно применять к экземплярам, группам или текстовым блокам, при этом Flash поддерживает расчет промежуточных кадров при перемещении, изменении размера, поворота и скоса объектов. Дополнительно можно изменять цвет экземпляров объектов или текста, применяя градиентную смену цветов или изменяя их прозрачность. Чтобы выполнить такие изменения для группы или текстового блока, их предварительно следует преобразовать в символы командой Insert > Convert to Symbol (Вставка > Преобразовать в символ). При этом преобразуемый объект становится экземпляром этого символа.

Создать анимацию движения можно двумя способами:

• Создать начальный и конечный ключевые кадры и для начального кадра установить значение Motion (Движение) в раскрывающемся списке Tweening (Расчет) на панели Frame (Кадр).
• Создать начальный ключевой кадр, затем выполнить команду Insert > Create Motion Tween (Вставка > Рассчитать движение) и переместить объект в новую позицию на сцене. При этом Flash автоматически создаст заключительный ключевой кадр.

Рис. 4.10. Результат расчета промежуточных кадров анимации

При каждом изменении положения ключевых кадров либо изменении их содержимого Flash автоматически рассчитывает промежуточные кадры.

Рассмотрим последовательность действий при создании анимации движения с помощью задания параметров на панели Frame (Кадр):

1. Выделяем имя слоя, чтобы сделать его текущим, и выделяем один из ключевых кадров слоя, где должна начаться анимация.
2. Создаем на рабочем столе экземпляр, группу или текстовый блок либо перетаскиваем экземпляр символа из окна библиотеки. Рисованный объект следует преобразовать в символ.
3. Создаем завершающий ключевой кадр, определяющий длину последовательности кадров.
4. Чтобы изменить экземпляр, группу или текстовый блок в последнем кадре, можно выполнить следующее: переместить их в новую позицию, изменить размер, угол поворота или скоса, изменить цвет экземпляра или текста.
5. Выполняем команду Window > Panels > Frame (Окно > Панели > Кадр), чтобы открыть панель Frame (Кадр). В раскрывающемся списке Tweening (Расчет) выбираем значение Motion (Движение).
6. При изменении размера объекта следует установить флажок Scale (Масштабировать).
7. Значение Easing (Плавность) задаем в диапазоне от -100 до 100, определяя тем самым скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные - быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.
8. Вращение можно задать выбором значения из раскрывающегося списка Rotate (Поворот). По умолчанию вращения нет. Значение CW соответствует вращению по часовой стрелке, a CCW - против, с указанием требуемого числа оборотов. Это вращение будет добавлено к повороту объекта, заданному на шаге 4.
9. Флажок Orient to Path
10. Флажок Synchronize
11. Snap (Привязка) фиксирует на ней анимируемый экземпляр.

Рис. 4.11. Выбор параметров анимации движения

Рассмотрим последовательность действий при создании анимации по команде Create Motion Tween (Рассчитать движение):

1. Выделяем пустой ключевой кадр и изображаем на рабочем столе объект или перетаскиваем на него экземпляр символа из окна библиотеки.
2. Выполняем команду Insert > Create Motion Tween (Вставка > Рассчитать движение). Изображенный на первом шаге объект будет автоматически преобразован в символ, которому присвоено имя tweenl. Последующим объектам будут присваиваться имена tween2, tween3 и т. д.
3. Щелчком указываем кадр, где должна завершиться анимация, и выполняем команду Insert > Frame (Вставка > Кадр).
4. Перемещаем объект, экземпляр или блок текста в желаемую позицию. Изменяем его размер и угол поворота, если это требуется. После всех изменений снимаем с объекта выделение. В конце последовательности кадров автоматически появляется ключевой кадр.
5. Выделяем конечный ключевой кадр последовательности и выполняем команду Window > Panels > Frame (Окно > Панели > Кадр). На открывшейся панели Frame (Кадр) автоматически должно появиться значение Motion (Движение).
6. Если был изменен размер, то следует установить флажок Scale (Масштабировать).
7. Значение Easing (Плавность) задается в диапазоне от -100 до 100, определяя скорость изменений во времени. Отрицательные значения соответствуют медленным изменениям вначале и быстрым в конце. Положительные - быстрым вначале и замедляющимся к концу анимации. По умолчанию скорость постоянна. Регулировка производится ползунком, открывающимся щелчком на стрелке.

1. Вращение задается выбором значения из раскрывающегося списка Rotate (Поворот). По умолчанию указывается значение Auto (Автоматически), определяемое поворотом объекта на шаге 4. Значение CW соответствует вращению по часовой стрелке, a CCW - против, с указанием требуемого числа оборотов. Это вращение будет добавлено к повороту, заданному на шаге 4.
2. Флажок Orient to Path (Ориентация на траекторию) устанавливается в случае, если задана криволинейная траектория движения.
3. Флажок Synchronize (Синхронизировать) позволяет синхронизировать число кадров анимации с числом экземпляров графики, если они различны.
4. При заданной траектории движения флажок Snap (Привязка) фиксирует на ней анимируемый экземпляр.

При создании мультипликации движения можно определить движение объекта по определенной траектории - по прямой линии, по ломанной кривой, состоящей из отрезков прямой линии, и по гладкой кривой линии.

Анимация движения по прямой

Пример 1:
См. Пример 2

Создадим движение самолета по прямой линии.

В монтажном кадре вставьте изображение самолета на левой стороне сцены. Векторное изображение самолета можно создать в Adobe Flash (см. Рисование ) или импортировать изображение, созданное на стороне (в формате.png с прозрачным фоном).

Выделите самолет на сцене. В контекстном меню самолета выбираем Преобразовать в символ (Convert to Sumbol). Выбираем графический тип символа.

В контекстном меню изображения выбираем Создать анимацию движения (Create Motion Tween). Программа автоматически создает 24 кадра для плавного изменения.
Перемещаем изображение на правую сторону сцены.
Можно настроить продолжительность анимации и другое - см. Работа с кадрами .

Анимация движения самолета по прямой создана, ее можно просмотреть, щелкнув по клавише Enter .

Из этого примера можно сделать такие выводы:

Длина любого нового участка изменения (tween span), который автоматически создается програмой, по умолчанию соответствует установленной скорости мультипликации. Если скорость мультипликации выбрана 24 кадра в сек., то будет по умолчанию создан участок изменения в 24 кадра (1 сек мультипликации). Если выбрана скорость 30 кадров в сек. - участок изменения по умолчанию составит 30 кадров.

Чтобы программа смогла создать плавное изменение, вставленный на сцену объект должен быть преобразован в символ. При этом объект может быть любым - созданный в Adobe Flash векторный рисунок, текст, импортированное растровое изображение и пр. Если Вы пытаетесь создать плавное изменение на несимволе, программа попросит Вас преобразовывать элемент в символ ().

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

Плавное изменение можно применить для изменения размеров/масштабирования, изменения цвета и применения фильтров.

Примечание: плавное изменение для эффектов фильтров применимо только к символам клипов и кнопок, не применимо к символам графики.

Примечания:
1. При создании классической анимации движения порядок действий иной - см. Создание классической анимации движения .
2. Создание движения объектов при покадровой мультипликации - см. Покадровая мультипликация
3. В нашем примере самолет двигался в пределах сцены. Но начальное положение самолета (или другого объекта) может быть вне сцены, при этом самолет может выскакивать "из-за кулис" (справа, слева, сверху. снизу). Точно также он может исчезать со сцены "за кулисами". В принципе, и начальное и конечное положение объекта может быть вне сцены, т.е. объект выскакивает "из-за кулис", показывает на сцене свои трюки и снова исчезает "за кулисами".

Анимации движения по кривой

Есть несколько способов создать движение объекта по кривой:

Способ 2
Вставьте на сцену красный квадрат
Создайте анимацию движения квадрата (см. Создание анимации движения)
В результате на сцене будет фигурировать наш квадрат и его путь движения (в виде линии с маркерами).

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



Использование этого метода простое: щелкайте по выбранному кадру на Шкале времени (у нас это 10, 20 и 30-й кадры) и соответственно перемещайте объект по сцене (не затрагивая при этом кривую пути) Программа автоматически создает ключевые кадры в выбранных кадрах.

Создание собственного пути движения

1. Вставляем на сцену рисунок самолета.

2. Преобразуем рисунок самолета в графический символ
3. Создаем новый слой под названием "Путь", на котором карандашом () рисуем траекторию движения самолета. Линия пути не должна быть замкнутой.

4. При необходимости сглаживаем линию пути, используя инструмент "Smooth" () внизу Панели инструментов .

5. Выделяем созданный путь и копируем его в буфер обмена. После этого сам путь можно удалить.

6. Возвращаемся в слой самолета. Выделяем самолет на сцене, в контекстном меню выбираем "Создать анимацию движения " (Create Motion Tween).

7. Выделяем самолет на сцене, в меню Правка (Edit) выбираем "Вставить" или "Вставить по месту" (Paste in Place).
К изображению самолета добавляется изображение пути движения.

8. Для просмотра ставим красный движок на 1-й кадр, щелкаем по клавише Enter .

Редактирование пути движения

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

Выберите инструмент свободного преобразования (Free Transform) на панели инструментов и щелкните по пути движения.
Маркеры преобразования появляются вокруг пути движения.

Можно изменять масштаб или повернуть путь движения. Можно создать кривизну пути, используя инструменты выбора и инструмент Преобразовать узловую точку (Convert Anchor Point) - этот инструмент скрыт под инструментом Перо (Pen) .

Нажимают на отправную точку и перемещают маркер начала выделения, который управляет искривлением пути.

3 Для коррекции пути выберите инструмент спецвыделения (Subselection) на панели инструментов.
4 Щелкните и перетащите маркер, чтобы редактировать кривую пути.
Примечание: путем движения можно также непосредственно управлять с инструментом выделения ().
Выберите инструмент выделения () и переместите его близко к пути движения. Значок кривой появляется рядом с Вашим курсором, указывающий, что Вы можете редактировать путь. Щелкните и перетащите путь движения, чтобы изменить искривление.

Можно выделить объект, щелкнуть по нему правой кнопкой мыши, в меню выбрать Создать анимацию движения . После этого передвигать движок по Временной шкале и синхронно передвигать объект по созданной кривой.

Примечание:
Если Вы своей дрожжащей рукой нарисовали слишком корявый путь и одновременно для движения по этому пути отвели слишком мало кадров, то программа не сможет выполнить задачу и повторить все изгибы пути.
В этом случае появится объявление:
"The curve must be simplified to fit the number of frames available in the current motion tween. Please choose one of the following methods"
Или: "Кривая должна быть упрощена, чтобы соответствовать числу кадров, доступных в текущей анимации движения. Пожалуйста выберите один из следующих методов..." и предлагается два варианта, первый из которых - упростить путь.

См. Дополнительно:
Создание собственного анимационного пути


Реверс направления движения

Чтобы объект двигался от конечной точки к начальной, в контекстном меню объекта выберите Траектория движения (Motion Path ) - Обратная траектория (Reverse Path).

См. также:

Ориентация объекта при движении

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

1 Щелкните по слою плавного изменения движения (motion tween) на Временной шкале (Графике времени). В нашем примере это слой "самолет".

2. Выделите путь движения, используя инструмент выделения ()

3. Правильно установите объект относительно пути движения в 1-и и последнем кадрах анимации.

4. В Инспекторе свойств выберите Ориентацию по траектории (Orient to path) в опции пути.

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

Программа автоматически добавляет ключевые кадры, разворачивая самолет по траектории.

Временная шкала будет выглядеть так:

Отметьте: Чтобы опция ориентации работала правильно, самолет в начальной позиции должен быть установлен правильно, т.е. его нос должен быть направлен вдоль пути движения.
Для этого используйте инструмент свободного преобразования , поворачивайте самолет, чтобы установить его правильно.

В зависимости от располагаемого времени, сюжета фильма и собственных художественных способностей вы можете выбрать один из двух способов «оживления» персонажей вашего фильма:

• покадровую анимацию (Frame-by-frame, «кадр за кадром»), когда каждый следующий кадр вы создаете собственными руками (либо импортируете из внешнего источника);
• автоматическую анимацию (tweened-анимацию), когда вы выстраиваете лишь ключевые кадры, а все промежуточные кадры Flash формирует самостоятельно.

Необходимо отметить, что оба механизма могут использоваться совместно, причем не только в рамках одного фильма, но и применительно к одному объекту. Например, более сложные в сюжетном плане фрагменты могут быть основаны на покадровой анимации, а фрагменты с «предсказуемым» развитием сюжета получены с помощью автоматической.

Такое объединение возможно благодаря использованию для каждого объекта единой оси времени, представленной в окне редактора временной диаграммой - - Time Line. Объединив на одной временной диаграмме «линии жизни» нескольких объектов, можно получить сцену, в которой участвуют несколько «персонажей».

Особенность применения автоматической анимации состоит в том, что с ее помощью можно анимировать только один объект на данном слое. Для создания сцены, в которой предполагается наличие нескольких анимированных объектов, требуется разместить каждый из них на отдельном слое (подробнее об использовании слоев см. следующую главу - «Слои»).

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

Вы можете создать фильм, в котором в течение часа один и тот же шар будет неподвижно лежать на столе. В этом случае все кадры фильма будут похожи друг на друга больше, чем однояйцевые близнецы, и зритель не сможет отличить ваш «мультик» от статичного изображения. С другой стороны, можно изготовить несколько замечательных кадров и... воспроизвести их в один и тот же момент времени. Результат будет прежним - зритель не сможет увидеть происходящее на сцене. Таким образом, основной принцип анимации - каждому моменту времени - свой кадр.

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

В любой Flash -фильм может быть добавлен текст. Подобно работе в обычных текстовых редакторах, для текста может быть установлен размер, шрифт, стиль, интервал, цвет и способ выравнивания. Вы можете трансформировать шрифт подобно другим объектам - поворачивать, масштабировать, наклонять. При этом сохраняется возможность редактирования его символов.

На основе фрагмента текста может быть создана гиперссылка.

Flash -фильм может содержать динамические текстовые поля, а также поля, редактируемые пользователем. Редактируемые поля в Flash-фильме имеют то же предназначение, что и текстовые поля, помещаемые в форму на Web-странице: с их помощью от пользователя может быть получена та или иная информация, подлежащая обработке на сервере или клиентским сценарием. И, наконец, в Flash MX вы можете создавать прокручиваемые многострочные текстовые области.

При необходимости текст может быть конвертирован в графический объект, и тогда с его символами разрешается работать как с отдельными графическими фигурами.

Покадровая анимация

Итак, для создания покадровой анимация требуется предварительно подготовить (или, по крайней мере, продумать) каждый кадр фильма. При этом необходимо учитывать следующее обстоятельство. Плавность перехода от одного кадра к другому и, соответственно, плавность и естественность движений персонажей зависят от того, насколько отличается следующий кадр от предыдущего (а не от скорости смены кадров, как иногда полагают). Другими словами, чем больше кадров содержит «мультик», тем ближе движения персонажей к естественным. Поэтому создание покадровой анимации является весьма кропотливым делом. Ее целесообразно применять в тех случаях, если объекты видоизменяются или взаимодействуют друг с другом каким-либо сложным образом.

Кроме того, покадровая анимация используется во Flash при описании поведения интерактивных элементов фильма, например, кнопок. Каждому состоянию кнопки соответствует определенный ключевой кадр на временной диаграмме. Основное отличие описания поведения кнопки от «обычной» анимации состоит в том, что состояние кнопки зависит не от времени, а от действий пользователя. Подробнее вопросы включения в фильм элементов управления рассмотрены в главе «Создание интерактивных фильмов».

Создание последовательности ключевых кадров

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

Элементы интерфейса временной диаграммы были рассмотрены в разделе «Организация пользовательского интерфейса» третьей главы (см. рис. 3.7). Теперь пришло время поговорить о том, какую роль играет каждый из этих элементов при создании «мультика».

Замечание

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

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

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

• количеством ключевых кадров (Keyframe);
• частотой смены кадров (во Flash она измеряется как число кадров, Показанных за одну секунду - frame per second, fps).

В общем случае оба эти параметра влияют на создаваемый визуальный эффект (на плавность или, наоборот, дискретность движений, «превращений» и т. д.). Но все же ведущая роль здесь принадлежит первому параметру, а также тому, насколько сильно последующий ключевой кадр отличается от предыдущего.

На временной диаграмме ключевые кадры изображаются серыми прямоугольничками с черной точкой внутри. При воспроизведении фильма считывающая головка перемещается от одного кадра к другому, отмечая текущий кадр. Чтобы увидеть изображение, связанное с конкретным кадром, необходимо щелкнуть мышью на значке этого кадра на временной диаграмме. На рис. 6.1 показаны в качестве примера два ключевых кадра (первый и последний) небольшого мультика «про часы», в котором один кадр отличается от другого положением минутной стрелки. Всего мультик содержит 6 кадров, частота смены кадров равна 2.

Рис. 6.1. Два кадра из мультика «про часы»

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

1. Шар в исходном положении.
2. Шар упал, но пока цел.
3. От шара откололся первый кусочек.
4. От шара откололся второй кусочек.
5. На столе лежит нечто, в предыдущей жизни бывшее шариком.

С учетом описанного сюжета, последовательность работы должна быть следующей:

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

Рис. 6.2. Изображения, соответствующие кадрам будущего фильма

1. Создайте новый файл фильма с «чистым» столом, щелкнув на кнопке New (Создать) основной панели инструментов Flash .
2. На временной диаграмме в ячейке первого кадра щелкните правой кнопкой мыши и в контекстном меню выберите команду Insert Keyframe (Вставить ключевой кадр).
3. Из окна, в котором создавались изображения шара, скопируйте первое изображение и поместите его где-нибудь в верхней части стола; при этом первый кадр на временной диаграмме будет помечен как ключевой (черной точкой), рис. 6.3.

Рис. 6.3. Вид окна Flash после создания первого кадра

1. Щелкните правой кнопкой мыши в ячейке второго кадра и в контекстном меню выберите команду Insert Keyframe; при этом кадр будет сразу помечен как ключевой, поскольку для него наследуется изображение из предыдущего кадра; воспользуйтесь им: переместите изображение шара в нижнюю часть стола.
2. Щелкните правой кнопкой мыши в ячейке третьего кадра и в контекстном меню вновь выберите команду Insert Keyframe; новый кадр также будет помечен как ключевой, и для него сохранится предыдущее изображение; вы можете либо отредактировать его, либо просто заменить нужным.
3. Создайте четвертый и пятый кадры, выбирая в контекстном меню команду Insert Keyframe и помещая на стол соответствующее изображение.

После выполнения завершающего шага окно Flash должно выглядеть примерно так, как показано на рис. 6.4.

Рис. 6.4. Вид окна Flash после создания завершающего кадра анимации

Собственно, на этом создание первого «мультика» закончено. Не забудьте только сохранить его на диске: он нам еще понадобится при изучении других видов анимации.

После завершения работы полезно проверить, все ли получилось так, как вы хотели.

Чтобы воспроизвести фильм, достаточно просто нажать клавишу (альтернативный вариант - выбрать в меню Control команду Play - «воспроизвести»). При этом считывающая головка панели временной диаграммы автоматически перемещается от текущего к последнему ключевому кадру. Вы можете принудительно выбрать любой кадр для просмотра, щелкнув в соответствующей ячейке временной диаграммы левой кнопкой мыши.

В рассмотренном нами примере изображения, составляющие содержание кадров, были созданы заранее, на столе другого фильма. Однако для большинства несложных фильмов удобнее создавать изображение кадра непосредственно на столе текущего фильма. Для этого необходимо:

1. Создать на временной диаграмме новый ключевой кадр.
2. Изменить свойства объектов, расположенных на столе (форму, положение и т. д.).

Редактирование анимации

В результате тестирования может оказаться, что созданный «мультик» не в полной мере соответствует авторскому замыслу, и требуется его подправить.

Как и при создании «мультика», при его редактировании удобнее всего работать с панелью временной диаграммы, а точнее -с контекстными меню этой панели.

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

Для каждого вида кадров временной диаграммы предусмотрено собственное контекстное меню. Например, существует контекстное меню ключевого кадра, контекстное меню «обычного» кадра (Frame), контекстное меню кадров tweened-анимации. Если на начальных этапах освоения у вас будут возникать трудности в определении типа кадра, то вы можете воспользоваться всплывающей подсказкой. Она появляется на экране при наведении указателя мыши на значок кадра (рис. 6.5).

Правда, при этом следует иметь в виду, что все кадры, не относящиеся к tweened-анимации, обозначаются в данном случае как Static (Статичные), что показано на рис. 6.5 справа.

Рис. 6.5. Всплывающие подсказки с указанием типа кадра

Flash предоставляет следующие возможности по редактированию анимированной последовательности:

• коррекция содержимого любого ключевого кадра;
• добавление ключевых кадров; новый кадр всегда вставляется только после завершающего кадра последовательности; можно добавлять ключевые кадры двух типов:
  • с наследуемым изображением - с помощью команды Insert Keyframe;
  • пустой кадр (без содержания) - с помощью команды Insert Blank Keyframe (Вставить пустой ключевой кадр);
• добавление простых (не ключевых) кадров; новый кадр может быть вставлен после любого ключевого кадра; в простейшем случае вставка простого кадра позволяет «продлить жизнь» предшествующему ключевому кадру; например, если в «мультике» с шаром добавить несколько простых кадров после второго ключевого кадра, то упавший шар некоторое время полежит, и только потом развалится; чтобы добавить простой кадр, следует щелкнуть правой кнопкой мыши на том ключевом кадре, после которого вы хотите поместить новый кадр, и выбрать в контекстном меню команду Insert Frame (Вставить кадр); простой кадр отображается на временной диаграмме светлым прямоугольником;
• преобразование ключевого кадра в простой; выполняется с помощью команды Clear Keyframe (Очистить ключевой кадр), входящей в контекстное меню; содержание «очищенного» ключевого кадра и всех простых кадров до последующего ключевого кадра заменяется на содержание кадра, предшествующего «очищенному» ключевому кадру;
• копирование одного или нескольких кадров; выполняется с помощью команд контекстного меню Copy Frames (Копировать кадры) и Paste Frames (Вставить кадры); вставку можно выполнять после любого ключевого кадра;
• перемещение одного или нескольких кадров; выполняется с помощью команд контекстного меню Cut Frames (Вырезать кадры) и Paste Frames; вставку можно выполнять после любого ключевого кадра;
• удаление одного или нескольких кадров; для удаления кадра следует щелкнуть на нем правой кнопкой мыши и выбрать в контекстном меню команду Remove Frames (Удалить кадры);
• изменение порядка следования кадров на обратный (реверс); для выполнения этой операции следует выбрать последовательность кадров (она должна начинаться и заканчиваться ключевым кадром) и в контекстном меню выбрать команду Reverse Frames (Развернуть кадры). Попробуйте, например, с помощью этой операции «восстановить» разбитый шар из рассмотренного выше примера.

Свойства отдельного кадра можно также изменить с помощью панели инспектора свойств кадра. Для любого «статичного» кадра (то есть кадра, не являющегося частью tweened-анимации), эта панель содержит один и тот же набор элементов (рис. 6.6):

• текстовое поле (Метка кадра), предназначенное для ввода имени (или метки) кадра; механизм меток, введенный в , позволяет реализовать навигацию между кадрами фильма, благодаря чему посетитель сайта может вернуться на тот или иной кадр; собственно механизм переходов реализуется в виде сценария на ActionScript; технология- создания сценария на ActionScript рассмотрена в одиннадцатой главе;
• раскрывающийся список Tween (Услужливый), который содержит перечень возможных способов использования tweened-анимации; таких способов три:
  • None (Никак) - tweened-анимация не используется;
  • Motion (Движение) - tweened-анимация движения;
  • Shape (Форма) - tweened-анимация трансформации объекта;
• раскрывающийся список Sound (Звук), позволяющий выбрать и связать с кадром звуковой символ; если ни с одним кадром фильма не связан звук, то список содержит единственный пункт - None (Никакой); об использовании в фильме звукового сопровождения рассказано в одиннадцатой главе; все остальные элементы, связанные с установкой параметров звука, становятся доступны только после назначения кадру звукового символа;
• кнопка без названия, но с длинным пояснением - Edit the action script for this object (Редактировать сценарий для этого объекта), щелчок на которой обеспечивает вызов панели редактора ActionScript.

Рис. 6.6. Инспектор свойств «статичного» кадра

Управление режимами просмотра кадров

Во многих случаях бывает удобно видеть на столе одновременно содержание всех ключевых кадров анимации. Flash обеспечивает несколько вариантов такого совмещения. Выбор варианта производится с помощью кнопок, расположенных у нижнего края панели временной диа!раммы (рис. 6.7):

• Onion Skin (Калька) - включение режима одновременного просмотра нескольких кадров; при этом активный кадр (на котором установлена считывающая головка) отображается полноцветным, а остальные - более блеклыми (рис. 6.8 а); по умолчанию одновременно отображаются три кадра: активный и два соседних; отображаемый диапазон помечается на шкале временной диаграммы специальными маркерами (см. рис. 8.7); маркеры являются интерактивными - перемещая их с помощью мыши, можно изменять границы диапазона; в этом режиме доступен для редактирования только активный кадр;

Рис. 6.7. Кнопки управления отображением кадров анимации

• Onion Skin Outlines (Контуры на кальке) - включение режима, при котором соседние с активным кадры представлены только контурами (рис. 6.8 б); в этом режиме также доступен для редактирования только активный кадр;
• Edit Multiple Frames (Правка нескольких кадров) - включение режима, при котором все видимые кадры доступны для редактирования; все кадры отображаются в полноцветном варианте (рис. 6.8 в);
• Modify Onion Markers (Изменить параметры маркеров) - щелчок на кнопке открывает меню, с помощью которого могут быть изменены параметры граничных маркеров (рис. 6.9):
  • Always Show Markers (Всегда показывать маркеры) - маркеры постоянно присутствуют на шкале временной диаграммы, независимо от того, включены ли кнопки управления просмотром;
  • Anchor Onion Marks (Привязать маркеры) - граничные маркеры блокируются в их текущей позиции; выбор этого варианта предотвращает перемещение маркеров при изменении активного кадра;
  • Onion 2 (Видны 2) - на столе отображаются по два соседних с активным кадра (справа и слева);
  • Onion 5 (Видны 5) - на столе отображаются по пять кадров справа и слева от активного кадра;
  • Onion All (Видны все) - на столе отображаются все кадры анимации.

Рис. 6.8. Эффект применения различных режимов просмотра кадров

Рис. 6.9. Меню с командами изменения параметров граничных маркеров

Замечание

Обратите внимание, что когда вы щелкаете мышью на значке ключевого кадра в панели временной диаграммы (и тем самым выбираете его), то на столе появляется картинка, соответствующая выбранному кадру. При этом все графические объекты, образующие кадр, также отображаются как выбранные.

Автоматическая анимация движения объекта

Flash может создавать два типа tweened-анимации:

• анимацию движения (motion tweening);
• анимацию трансформирования объекта (shape tweening).

Создание tweened-анимации движения

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

При создании анимации движения требуется установить для некоторого кадра такие атрибуты объекта, как позиция на столе, размер, угол поворота или наклона, и затем изменить значения этих атрибутов в другом кадре. Flash интерполирует значения изменяемых атрибутов для промежуточных кадров, создавая эффект последовательного перемещения или преобразования.

Вы можете создавать анимацию движения, используя один из двух методов:

• с помощью панели инспектора свойств кадра;
• с помощью команды Create Motion Tween (Создать анимацию движения).

Для описания обоих вариантов воспользуемся простейшим примером: предположим, что требуется «перекатить» шарик через стол слева направо.

Итак, для анимации движения шарика с помощью инспектора свойств кадра требуется выполнить следующие действия.

1. Убедитесь, что панель инспектора свойств присутствует на экране (ее формат на этом шаге значения не имеет). Если она закрыта, выберите в меню Window основного окна пункт Properties.
2. Включите инструмент Oval и нарисуйте шарик в левой части стола; обратите внимание, что первый кадр на временной диаграмме при этом стал помечен как ключевой.
3. Включите инструмент Arrow, выберите шарик и сгруппируйте (объедините в одно целое) контур и заливку шара с помощью команды Group, входящей в меню Modify основного окна Flash ; в результате шар окажется заключен в голубую выделяющую рамку.
4. Щелкните правой кнопкой мыши в ячейке того кадра на временной диаграмме, который вы хотите сделать последним кадром анимации (например, 10-й), и в контекстном меню выберите команду Insert Keyframe (Вставить ключевой кадр); в результате промежуток между первым и последним ключевыми кадрами будет заполнен одноцветными (светло-серыми) ячейками простых кадров, как показано на рис. 6.10.
5. Перетащите шар на новую позицию в правой части стола.
6. Щелкните левой кнопкой мыши в ячейке первого ключевого кадра; это приведет к одновременному выполнению двух действий: изображение шарика переместится на исходную позицию и изменится формат панели инспектора свойств: на ней будут представлены параметры выбранного (первого) кадра.
7. В панели инспектора свойств выберите в раскрывающемся списке Tween пункт Motion; при этом формат панели изменится, и на ней появятся элементы интерфейса, позволяющие установить параметры анимации; пока они нас не интересуют, значительно важнее изменения, произошедшие на временной диаграмме: первый и последний ключевые кадры теперь соединены стрелкой на сиреневом фоне (рис. 6.11). Это говорит о том, что создание анимации успешно завершено.

Рис. 6.10. Вид панели временной диаграммы после выполнения 4-го шага

Рис. 6.11. Вид панели временной диаграммы после завершения создания анимации

Если на панели временной диаграммы вместо стрелки появилась пунктирная линия, значит вы в чем-то ошиблись. Взгляните на панель инспектора свойств кадра: если там появилась кнопка с предупреждающим знаком (рис. 6.12), то Flash пытается сообщить вам об этом. Щелкните на этой кнопке, чтобы открыть окно с пояснениями по возникшей ситуации.

Рис. 6.12. Вид панели инспектора свойств кадра при наличии ошибки

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

Во многих случаях оказывается достаточным удалить лишний объект, чтобы Flash выполнил анимацию. Если этого не произошло, после исправления ошибки повторите процедуру создания tweened-анимации еще раз.

Для воспроизведения «мультика» используются те же средства, что и для покадровой анимации - можно просто нажать клавишу (предварительно лучше снять выделение с шарика, хотя это не обязательно).

Для анимации движения шарика с помощью команды Create Motion Tween требуется выполнить следующие действия (считаем, что шарик в первом кадре уже присутсвует).

1. Щелкните правой кнопкой в ячейке первого кадра и в контекстном меню выберите команду Create Motion Tween (Создать анимацию движения); при этом изображение шара будет автоматически преобразовано в графический символ с именем tweenl (визуальным признаком преобразования служит появление точки привязки в центре шара и выделяющей рамки).
2. Щелкните правой кнопкой в ячейке кадра, который вы хотите сделать последним в анимационной последовательности (например, 10-й) и в контекстном меню выберите команду Insert Frame (Вставить кадр); в результате между первым и последним кадрами появится пунктирная линия, как показано на рис. 6.14.
3. Переместите шар на новую позицию (в правую часть стола); при этом последний кадр анимации будет автоматически преобразован в ключевой (в ячейке появится черная точка), а пунктирная линия будет заменена линией со стрелкой (рис. 6.15).

Рис. 6.14. Вид панели временной диаграммы после выполнения команд Insert Frame

Рис. 6.15. Вид окна Flash после завершения создания анимации

Создание анимации на этом завершено. Если вы теперь взгляните на панель инспектора свойств кадра, то увидите, что в списке Tween выбран вариант Motion.

Замечание

Обратите внимание, что в результате создания tweened-анимации движения с помощью команды Create Motion Tween все кадры на временной диаграмме обозначены как tweened-анимированные, в то время как при использовании инспектора свойств последний кадр остался «просто ключевым» (см. рис. 6.11). Наличие такого ключевого кадра обеспечивает большую гибкость при последующем редактировании фильма.

Изменение параметров tweened-анимации движения

После того, как построите с помощью Flash tweened-анимацию, вы можете скорректировать те или иные ее параметры. Редактирование параметров анимации удобнее всего выполнять с помощью панели инспектора свойств кадра. При этом следует иметь в виду следующее обстоятельство. Несмотря на то, что на временной диаграмме все кадры tweened-анимации выглядят как одно целое, вы можете выбрать любой из них в отдельности, щелкнув мышью в соответствующей позиции временной диаграммы. В результате на столе появится изображение, относящееся к данному кадру, а на панели инспектора свойств - параметры этого кадра.

Прежде, чем перейти к описанию возможных способов редактирования «мультика», необходимо сделать одно важное замечание. Все стандартные операции трансформации объекта, которые выполняются с помощью инструментов панели Tools (например, наклон, изменение размера, преобразование круга в овал и т. п.) при создании автоматической анимации не рассматриваются во Flash

Итак, для кадра, входящего в tweened-анимацию движения, на панели инспектора свойств могут быть установлены следующие параметры (рис. 6.16):

• возможность масштабирования (уменьшения или увеличения) объекта; чтобы разрешить этот вариант автоматической анимации, следует установить флажок Scale (масштаб);

Рис. 6.16. Формат панели инспектора свойств для кадра tweened-анимации движения

• скорость изменений; по умолчанию изменения протекают с постоянной скоростью, однако вы можете управлять ею, изменяя значения параметра Easing (Замедление): отрицательные значения этого параметра (от -1 до -100) означают, что изменения будут постепенно ускоряться, а положительные" значения (от 1 до 100), наоборот, означают постепенное замедление изменений;
• возможность анимации вращения объекта; выбор, направления и длительности вращения выполняется с помощью раскрывающегося списка Rotate (Вращать) и расположенного рядом с ним текстового поля times (длительность); в списке Rotate имеются следующие варианты:
  • None (Без вращения) - анимация вращения не используется (вариант установлен по умолчанию);
  • Auto (Автоматическое вращение) - объект вращается в направлении, требующем наименьшего количество движения;
  • CW (Clockwise - по часовой стрелке) - объект вращается по часовой стрелке; число оборотов задается в поле times;
  • CCW (Counterclockwise - против часовой стрелки) - объект вращается против часовой стрелки; число оборотов задается в поле times;
• возможность задания нелинейной (произвольной) траектории движения объекта; обеспечивается установкой флажка Orient to Path (Указать маршрут); дополнительные параметры траектории корректируются с помощью флажков Sync (Synchronization - синхронизация) и Snap (Привязка); подробнее процедура описания маршрута движения объекта будет рассмотрена в следующей главе.

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

1. Щелкните правой кнопкой в ячейке последнего (10-го) кадра предыдущего участка анимации и в контекстном меню выберите команду Create Motion Tween.
2. Щелкните правой кнопкой в ячейке кадра, который вы хотите сделать последним в новой анимационной последовательности (например, 20-й), и в контекстном меню выберите команду Insert Keyrame; в результате между 10-м и 20-м кадрами появится линия со стрелкой (как показано на рис. 6.17), а щар останется заключен в выделяющую рамку.
3. Включите на панели Tools инструмент Free .Transform и уменьшите размер шара (можете заодно его и немного «сплющить;»).

Все. Процесс завершен. Осталось только протестировать результат, нажав клавишу .

Рис. 6.17. Вид временной диаграммы после создания второго отрезка анимированной последовательности

Совмещение покадровой и автоматической анимации

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

Поясним технику совмещения покадровой и автоматической анимации при описании поведения одного объекта на примере все того же шарика. Сюжет фильма достаточно прост: шарик катится через стол, затем падает и разбивается. Первая часть этой занимательной истории будет реализована на основе tweened-анимации, вторая --на основе покадровой. Собственно говоря, оба фрагмента были уже созданы нами ранее, и теперь остается только объединить их в один фильм.

Итак, чтобы получить фильм, совмещающий оба вида анимации, необходимо:

1. Описать движение шарика через-стол с помощью tweened-анимации (после выполнения этой процедуры окно временной диаграммы должно выглядеть так, как было показано на рис. 6.11).
2. Щелкнуть правой кнопкой в ячейке кадра, следующего за последним кадром tweened-анимации (для рассматриваемого примера- в ячейке 11-го кадра), и в контекстном меню выбрать команду Insert Keyrame; при этом в списке Tween инспектора свойств автоматически будет выбран пункт None (не использовать tweened-анимацию).
3. Переместить изображение шарика в нижнюю часть стола.
4. Создать остальные ключевые кадры покадровой анимации, как было описано в разделе «Покадровая анимация»; после создания завершающего кадра окно редактора должно выглядеть примерно так, как показано на рис. 6.18.

Рис. 6.18. Временная диаграмма фильма, совмещающего покадровую и tweened-анимацию

Замечание

Если фильм формируется на основе фильмов, созданных ранее, можно просто скопировать в новый фильм необходимые кадры с помощью команд Сору и Paste. При этом в новый фильм будет перенесено и содержание кадров. Если в копируемых кадрах используются символы, то они будут добавлены в библиотеку нового фильма.

В завершении приведем еще один небольшой пример, иллюстрирующий особенности применения tweened-анимации движения для текстовых блоков. В этом примере движения как такового нет - просто в качестве заключительного кадра анимации используется зеркальное отражение текста, полученное с помощью инструмента Free Transformation. А вот как выглядят промежуточные кадры, созданные Flash (рис. 6.19).

Рис. 6.19. Пример tweened-анимации движения для текстовых блоков

Автоматическая анимация трансформации объекта

Используя анимацию трансформации, вы можете создавать эффект плавного «перетекания» объекта из одной формы в другую. Причем результирующая форма может не иметь абсолютно ничего общего с исходной. Например, в электронной справочной системе Flash приведен пример «превращения»(рис. 6.20).

Рис. 6.20. Пример трансформации объекта

Еще раз повторим, что анимирование стандартных операций видоизменения объекта, которые выполняются с помощью инструментов панели Tools (наклон, изменение размера и т. п.) не рассматриваются во Flash как операции трансформации и могут быть добавлены в качестве «сопутствующих» изменений при создании анимации движения объекта.

Совет

Как правило, наилучший визуальный эффект Flash обеспечивает в том случае, если одновременно трансформируется не более одного объекта. Если же вам требуется одновременная трансформация нескольких объектов, то все они должны располагаться в одном слое.

Flash не может автоматически анимировать трансформацию символов, сгруппированных объектов, текстовых полей и растровых изображений. Чтобы сделать объекты этих типов доступными для автоматической трансформации, к ним требуется применить процедуру разбиения (Break Apart).

Создание tweened-анимации трансформации

Если вы решили включить в свой фильм tweened-анимацию трансформации, имейте в виду следующее обстоятельство. По умолчанию Flash пытается произвести переход от одной формы к другой «кратчайшим путем». Поэтому промежуточные кадры могут оказаться весьма неожиданными для вас. В качестве иллюстрации к сказанному ниже приведен рисунок (рис. 6.21), на котором показан промежуточный кадр трансформации уже знакомых вам «часов». Здесь с помощью tweened-анимации минутная стрелка пытается «переползти» с 12 на 6 «короткой дорогой».

В отличие от анимации движения, tweened-анимация трансформации может быть создана только одним способом - с помощью панели инспектора свойств кадра.

Для пояснения технологии создания такой анимации вернемся к примеру с «часами»: предположим, что требуется переместить минутную стрелку с «12» на «6».

При решении указанной задачи требуется выполнить следующие действия.

1. Убедитесь, что панель инспектора свойств присутствует на экране. Если она закрыта, выберите в меню Window основного окна пункт Properties.

Рис. 6.21. Пример промежуточного кадра при tweened анимации трансформации

1. Включите инструмент Oval и нарисуйте с его помощью все элементы «часов», показанные на рис. 6.21, слева.
2. Включите инструмент Arrow и выберите изображение, которое вы хотите трансформировать.
3. Щелкните правой кнопкой в ячейке того кадра, который вы хотите сделать последним в анимации (например, 10-й), и в контекстном меню выберите команду Insert Keyframe; в результате между первым и последним кадрами на временной диаграмме появится последовательность простых кадров серого цвета, как показано на рис. 6.22, вверху.
4. Замените на столе исходное изображение тем, в которое оно должно быть трансформировано; в рассматриваемом примере для этого достаточно с помощью инструмента Free Transform повернуть минутную стрелку и переместить на новую позицию.
5. Щелкните правой кнопкой в ячейке первого кадра анимации; это приведет к двум последствиям: на столе появится исходное изображение и изменится формат панели инспектора свойств.
6. В раскрывающемся списке Tween выберите вариант Shape (Форма); в результате первый и последний кадры анимации на временной диаграмме будут соединены стрелкой на светло-зеленом фоне (рис. 6.22, внизу); это говорит о том, что создание анимации успешно завершено.

Рис. 6.22. Вид временной диаграммы при анимировании трансформации объекта

Выбор пункта Shape в списке Tween приводит к изменению формата панели инспектора свойств. С ее помощью могут быть установлены следующие дополнительные параметры анимации трансформирования объекта (рис. 6.23):

• скорость изменений; по умолчанию изменения протекают с постоянной скоростью, однако вы можете управлять ею, изменяя значения параметра Ease (Замедление): отрицательные значения этого параметра (от -1 до -100) означают, что изменения будут постепенно ускоряться, а положительные значения (от 1 до 100), наоборот, означают постепенное замедление изменений;
• способ трансформации; он определяется значением, выбранным в списке Blend (Переход):
  • Distributive (Размазанный) - Flash создает анимацию, в которой промежуточные формы являются более сглаженными;
  • Angular (Угловатый) -- Flash создает анимацию, при которой в промежуточных формах сохраняются очевидные углы и прямые линии.

Рис. 6.23. Параметры анимации трансформирования объекта

Замечание

Обратите внимание, что для создания анимации трансформации объекта не требуется (более того - нельзя) выполнять группирование контура и заливки, равно как и других элементов изображения, подлежащих трансформированию. Достаточно все эти элементы просто выбрать с помощью инструмента Arrow.

Применение узловых точек формы

Для управления.более сложными изменениями формы используются так называемые узловые точки формы (shape hints), которые определяют, как фрагменты первоначальной формы будут перенесены в новую форму. Другими словами, узловые точки используются для идентификации тех точек исходной формы, взаимное расположение которых требуется сохранить. Наиболее характерный пример использования узловых точек - анимация мимики лица, при которой некоторые его части (глаза, в частности) не должны участвовать в трансформации. На рис. 8.24 показаны два варианта трансформации - без расстановки и с расстановкой узловых точек. Во втором варианте глаза трансформации не подвергаются.

Рис. 6.24. Пример трансформации без расстановки и с расстановкой узловых точек

Узловые точки обозначаются на изображении небольшими кружками с буквами. Буквы (от а до z) используются в качестве имен (идентификаторов) узловых точек. Каждой узловой точке на исходном изображении должна соответствовать точка с тем же именем на результирующем изображении. Всего для одной фигуры может быть использовано не более 26 узловых точек (по числу букв алфавита). Узловые точки на исходном изображении окрашены в желтый цвет, на результирующем - зеленым.

Для расстановки узловых точек требуется выполнить следующие действия:

1. Щелкните левой кнопкой мыши в ячейке кадра, соответствующего исходному изображению.
2. В меню Modify выберите каскадное меню Shape, а в нем - команду Add Shape Hint (Добавить узловую точку); в результате на изображении появится «заготовка» первой узловой точки -кружок красного цвета с буквой а.
3. Переместите его мышью на ту точку изображения, которую вы хотите пометить как узловую.
4. Щелкните левой кнопкой мыши в ячейке кадра, соответствующего результирующему изображению; на столе будет присутствовать красный кружок с той же буквой, что и в исходном кадре.
5. Переместите кружок в точку изображения, которая должна соответствовать отмеченной в исходном кадре; после перемещения кружок изменит цвет на зеленый.
6. Вернитесь на первый кадр анимированной последовательности и убедитесь, что цвет узловой точки изменился на желтый.
7. Если требуется продолжить расстановку узловых точек, повторите описанную процедуру для каждой из них.

Замечания

1. Расстановка узловых точек возможна только после создания tweened-анимации трансформации.
2. Расстановку узловых точек следует выполнять с помощью инструмента Arrow при включенном модификаторе Snap to Objects.

Совет

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

После расстановки узловых точек целесообразно провести тестовый запуск фильма и при необходимости скорректировать расстановку точек. Чтобы изменить положение узловой точки, достаточно просто перетащить ее на новое место (это можно сделать как на первом, так и на последнем кадре последовательности). Кроме того, всегда можно удалить лишние точки или добавить новые. После того, как результат вас удовлетворит, вы можете спрятать (скрыть) узловые точки. Перечисленные операции удобнее всего выполнять с помощью контекстного меню. Чтобы его открыть, следует щелкнуть на одной из узловых точек правой кнопкой мыши. Меню содержит четыре команды (рис. 6.25), из которых первые три доступны только для узловых точек исходного изображения:

• Add Hint (Добавить узловую точку) - при выполнении команды на столе появляется заготовка новой узловой точки;
• Remove Hint (Удалить узловую точку) - узловая точка, на которой вы щелкнули правой кнопкой мыши, открывая меню, будет удалена;
• Remove All Hints (Удалить все узловые точки) - удаление всех узловых точек;
• Show Hints (Показать узловые точки) - данный режим используется по умолчанию (рядом с именем команды стоит маркер); повторный ее выбор приводит к тому, что узловые точки станут невидимы; этот вариант следует использовать только после достижения требуемого результата, поскольку для возврата в режим показа узловых точек вам придется выбрать в меню Modify команду Add Shape Hint. необходимого количества.

Рис. 6.25. Контекстное меню узловой точки

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

Анимация движения – в ключевых кадрах рисуется начало и окончание движения, в простых кадрах делается постепенный переход от одной ключевой фазы к другой. По умолчанию соответствующей командой автоматически создается прямолинейное и равномерное движение того, что содержится в слое между двумя ключевыми кадрами. В старых версиях, Macromedia Flash, использовалась командаСоздать анимацию движения (Create Motion Tween) . В новых версиях, Adobe Flash, надо использовать команду Создать классическую анимацию движения .

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

Но есть и другие, специальные виды движения.

1. Движение по траектории. В старых версиях для того, чтобы задать движение не по прямой, надо было создавать новый специальный слой над слоем, с движущимся объектом. В этом слое любым способом (искривленной прямой, линией Безье, карандашом) рисовалась траектория движения. Далее определенными манипуляциями объект привязывался к траектории.

В Adobe Flash специальный слой создавать не надо, а надо применить команду Создать анимацию движения .Траекторию стало легче рисовать, ее можно дополнить рядом эффектов (например, вращением). При этом она легко делается невидимой.

2. Движение с ускорением/замедлением. Для создания неравномерного движения на вкладкеСвойства есть движок Замедление (Easing) . Этот параметр может меняться от -100 до +100. Отрицательному значению соответствует увеличение скорости к концу движения, положительному – замедление к концу движения.

Для оформления начала и конца движения надо во временном интервале создать еще 1 или 2 ключевых кадра и сделать в начале ускорение, а в конце замедление. Лучше поставить предельные значения: ±100, промежуточные обычно малоэффективны. А для высоких скоростей и ускорений требуется покадровая анимация.

Покадровая анимация – она состоит только из ключевых кадров, каждый кадр создается вручную. Очевидно, такой вид анимации имеет смысл вводить, если действие очень динамично, разнообразно.

Для увеличения времени демонстрации кадров можно между ключевыми ввести 1-3 простых, копирующих предыдущий ключевой. В этом случае анимация все равно останется покадровой, увеличится только время экспозиции кадра.

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

Анимация формы – происходит постепенный переход фигуры одной формы в фигуру другой формы. Одновременно могут изменяться размеры, местоположение, цвет.

Но на анимацию формы имеется много ограничений. Она не работает:

· с растровой графикой;

· с текстом;

· с группами объектов – нельзя деформировать сгруппированные объекты;

· с клипами – деформировать можно только статичный объект.

Анимация формы реализуется так же, как и анимация движения, только в окошке Properties → Tween надо выбрать не Motions , аShape (в новых версиях – Создать анимацию формы) . Цвет кадров с анимацией формы – зеленый.

В анимации формы важную роль играют точки подсказки. Их ставят в начальном и конечном ключевых кадрах. Они обозначаются буквами латинского алфавита: a, b, c, d и так далее. Всего может быть 26 точек подсказки, вплоть до z . Буквы ставят по часовой стрелке.

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

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