Создание анимации движения автомобиля

Урок Анимация автомобиля

В этом уроке художник-аниматор Максим Петрик расскажет как работать с анимацией типа “Classik Tweene”. Как экспортировать изображения, оптимизировать его качество. Вы узнаете как работать с символами в анимации, что из себя представляют символы в анимации, и зачем они нужны. Так же Вы научитесь анимации вращения, анимации движения и анимации деформации символов при помощи анимации типа “Classik Tweene”

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

Итак, с чего начнём. Запомните, поскольку в реальности, если вы хотите заработать, у вас будет заказчик. А у него есть свои представления – “что такое красиво, вкусно, и как это есть”, поэтому художнику приходят на помощь референсы. Кто не знает – это набор картинок, фотографий зарисовок… и прочего. Что объясняет в каком стиле, цветовой гамме, что и как рисовать (всегда их требуйте, чтоб не было разногласий, или подбирайте сами но утверждайте у заказчика). Итак, подбираем референсы. Допустим вот эту тачку

теперь откроем любой растровый графический пакет и немного по варганим =). Я использую, как вы помните, Krita и стараюсь рисовать при размере картинки не менее 2048×1536 pix. Так получаются четче линии. И еще, чтоб рука не дрожала – не налегайте на кофе =). В программе Krita есть замечательная функция рисовать сглажеными линиями, так что если у вас чуть дрогнула рука при обводке, ничего страшного. Но это, я наверное расскажу как нибудь в следующий раз.

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

получится как то вот так. Можно было бы нарисовать машину в векторе во Flash, но это мы сделаем в отдельной статье. Тут я хочу показать вот что. Дальше сохраняем машину как PNG, кузов отдельно, колесо отдельно.

Глава 2. Привет Flash.

Отрываем Flash, создаем файл. Да, еще я пользуюсь английской версией Flash, просто мне так удобней. Если вы выучите «горячие клавиши», то в принципе, язык интерфейса мешать не будет. В русском языке в панелях названия переведены более длинными фразами, и это как то отвлекает. Разница только в этом.

теперь подстроим параметры сцены, жмем правой кнопочкой по сцене и выбираем “Document Properties”

изменим разрешение на 800х600. В этом окне можно также настроить частоту кадров – сейчас она выставлена как 24.00; фон заливки – сейчас он белый, но себе поставлю серый; автосохранение – поставите галочку, будет сохраняться каждые 10 минут, но можно поставить время любое.

Продолжим. Перетаскиваем наши png на сцену.

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

Ну так вот, если вы перетащили два объекта сразу , то они помещаются на один слой, но чтоб их анимировать нужно разбить их по слоям. Сделать это можно двумя способами. Первый это нажать кнопку создания слоя, выделить колесо, вырезать (либо через использование правой кнопки мыши, либо комбинацией Ctrl+X,и вставить на слой ниже Ctrl+V. Второй способ – выделить оба объекта, нажать ПКМ (правую кнопку мыши) выбрать “Distribute to Layers”.

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

Получилось так, что объект “колесо” лежит слоем выше и перекрывает “кузов”.

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

Продолжим путешествие =). Следует обратить внимание вот на что, если вы используете растровые объекты, то Flash сжимает их по установленным в умолчании параметрам сжатия, и картинка может пикселится

чтобы этого избежать, нужно сделать вот так – выберите меню библиотеки “Library”,в ней на объекте нажмите ПКМ и откройте свойства “Propetries”

выберите PNG и поставите галочку на сглаживание, получится вот так.

Глава3. Ну давай уже анимировать!

Большинство анимаций во Flash осуществляются над символами. Символы можно помещать друг в друга, то есть есть дочерние и материнские символы. Каждый дочерний “символ” может быть материнским. Что это значит? Это значит что теоретически их может быть бесконечно, на практике в какой то момент начнутся баги. Надеюсь вы поняли, что я тут накрутил? Если не поняли – не ломайте себе мозг, продолжим, позже всё поймёте. Итак, самый простой способ “завернуть” объект (в данном случае наши картинки) это – ПКМ выделить объект на сцене

и выбрать “Convert to Simbol”.

Вводим имя и сохраняем. Другой способ на выделенный объект использовать “F8”. В результате у нас в библиотеке помимо наших картинок появятся и символы, в которые обернуты картинки, то есть картинки как бы внутри символа.

Другими словами “символ”- это “Мама”, а PNG – это дочка.

Воооот =) и тут мы возьмём и завернём”символ”нашего колеса, еще в один “символ” (символ анимации). Выделяем на сцене колесо, которое уже не PNG – “колесо”, а “символ” “колесо”, и жмём “F8”. Именуем “символ” как “вращение колеса” (может получиться так, что один слой перекрывает другой, но вы можете на панели “timeline” поставить замок или сделать прозрачным мешающий слой) соответствующий этому названию “символ” появится в библиотеке

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

Далее. придадим символу вращение. Использовать будем в этом уроке анимацию типа “Classik Tweene”. Для этого на слое «timeline» поставите курсор на отметку 20 (это 20 кадр) и нажмите “F6”. Так вы поставили первую контрольную точку.

Теперь ПКМ нажмите между двумя контрольными точками и выберите “Create Classic Tweene”.

эта область выделится синим с указанием стрелочки, которая обозначает автоматическое движение от “кадра 1” к “кадру 20”

придадим вращение. Теперь поставив курсор на область анимации между двумя контрольными точками, переходим в меню «Properties»

и в разделе “Rotate” выбираем “CCW” – это вращение против часовой стрелки. “Вуаля”, если вы нажмёте “CTRL+ENTER”увидите как чудесно вращается ваше колесо =).

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

теперь скопируйте колесо и подставте его на место второго колеса. Заметьте, что переднее колесо должно быть чуть меньше заднего. Поэтому, нажмите “Q” и удерживая “Shift”за уголочек маштабируйте до нужного размера. Получится так

и если вы нажмёте волшебную комбинацию “CTRL+ENTER”, то увидите что оба колеса вращаются. А вот если вы теперь еще и кузову придадите небольшое движение вверх-вниз. То вообще будет хорошо. Для этого, “символ” кузова на сцене завернём еще раз в “символ” “анимация кузова”, двойным щелчком войдём внутрь символа.

На слое ”timeline”кузова с помощью кнопки “F6” создадимдве контрольные точки на 30-м и 60=м кадрах. Создадим анимацию между точками с помощью ПКМ, используем “Create Classic Tweene”. Поставив курсор на “timeline” на 30 кадр, с помощью стрелочки “вверх” на клавиатуре, или мышкой. Чуть поднимем кузов выше – мы тем самым придадим ему анимацию движения вверх до 30-го кадра, и вниз обратно к прежнему положению до 60-го кадра. И снова волшебная комбинация “CTRL+ENTER”. И наш спорт кар уже сностно едет. А можно еще создать на “Timeline”слое, слойниже колес, нарисовать там тень. Сделаем это так, выйдем из символа “анимации кузова”

с помощью кнопки создадим слой на “timeline”, в инструментах выберем рисование прямоугольника с закруглёнными краями, в настройках выберем цвет и радиус закругления

теперь обернём эту фому в “символ” чтобы получилось так

дальше “символ” тени обернём в” символ” “анимации тени”, и войдём внутрь. С помощью кнопки “F6” поставим две контрольные точки на 30-м и 60-м кадре. Удерживая “Shift” выделяем области между контрольными точками.

правой кнопкой мыши жмём, и создаём “Create Classic Tweene”. После этого, область на “timeline” должна выделиться в синий цвет. Так мы повторили действие создания анимации колеса, но вместо ”вращения”сделаем ”изменение формы”.

устанавливаем курсор на 30-й кадр, нажимаете “Q” и уменьшаете “символ” тени чуть-чуть по ширине, придавая ей тем самым движение ”деформации сужения”до 30-го кадра и возврат к первому положению к 60-му кадру.

жмём “CTRL+ENTER”и смотрим результат.

И завершающая стадия, машина должна выезжать из-за кадра и уезжать за кадр. Для этого нужно вернуться снова на “Scene”, выделить теперь уже все элементы машины. Это: колёса, кузов и тень. Обернуть все эти элементы в “символ” кнопочкой “F8”,назовём его “машина едет”.

Обратите внимание, поскольку мы объединили все символы в “символ” “машина едет”, этот “символ” поместился на позицию самого высокого символа на “timtline”. Ну так вот,

теперь ставим контрольные точки на 60-й и 120-й кадр, и создаем уже знакомую нам анимацию “Create Classic Tweene”. Только теперь, на первом кадре, мы машину уводим за правый край экрана, а на 120-м за левый край.

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

На этом примере Вы ознакомились: как экспортировать изображения, оптимизировать его качество, создавать символы и структуру из дочерних и материнских «символов», анимацию вращения, анимацию движения, и анимацию деформации символов при помощи анимации типа “Classik Tweene”

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

Исходник и образец анимации будет на сайте издания . Всем до встречи

Источник статьи: http://multtov.net.ua/article/19_animatsiya_tachki.html

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

На этой странице

某些 Creative Cloud 应用程序、服务和功能在中国不可用。

Об анимации движения

Приступая к работе

Как и для большинства операций в Animate (раньше этот продукт назывался Flash Professional CC), для анимации не требуется ActionScript. Однако если необходимо, можно создать анимации с помощью ActionScript.

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

Рисование в рабочей области

Слои временной шкалы и порядок наложения объектов в одном или нескольких слоях

Перемещение и преобразование объектов в рабочей области и в инспекторе свойств

Использование временной шкалы , включая время жизни объекта и выбор объектов в определенные моменты времени. Основы изложены в разделе Кадры и ключевые кадры.

Символы и свойства символов. К анимируемым типам символов относятся фрагменты роликов, кнопки и графика. Анимацию движения также можно применить к тексту.

Вложенные символы. Экземпляры символов можно вкладывать в другие символы.

Необязательно: редактирование кривой Безье с использованием инструментов Выделение и Спецвыделение . Эти инструменты можно использовать для редактирования траекторий движения. Дополнительные сведения см. в разделе Редактирование анимации движения с помощью редактора движения.

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

Основные сведения об анимации движения

Анимация движения — это анимация, создаваемая заданием различных значений свойства объекта в разных кадрах. Animate вычисляет значения этого свойства для всех промежуточных кадров между этими двумя. Термин «Tween» происходит от выражения «in-between» («в промежутке»).

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

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

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

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

Термин «ключевой кадр» относится к кадру на временной шкале , в котором впервые в рабочей области появляется экземпляр символа. Отдельный термин «ключевой кадр свойства» относится к значению, определенному для свойства объекта в определенное время или в определенном кадре анимации движения.

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

Анимация движения — это эффективный и рациональный способ создавать движения и изменения во времени с сохранением минимального размера файла. В случае анимации движения в FLA-файле и опубликованном SWF-файле хранятся только значения ключевых кадров свойств.

Объекты и свойства, для которых возможна анимация движения

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

Положение по осям X и Y на плоскости

Положение по оси Z в трехмерном пространстве (только фрагменты роликов)

Вращение на плоскости (вокруг оси z)

Вращение вокруг осей X, Y и Z в трехмерном пространстве (только фрагменты роликов)

Для создания трехмерного движения в параметрах публикации требуется указать, что FLA-файл предназначен для ActionScript 3.0 и Flash Player 10 или более поздней версии. Adobe AIR также поддерживает трехмерное движение.

Наклон по осям X и Y

Масштаб по осям X и Y

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

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

Свойства фильтров (фильтры нельзя применять к графическим символам)

Различия между анимацией движения и классической анимацией

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

Вот несколько различий между анимацией движения и классической анимацией.

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

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

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

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

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

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

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

Чтобы выбрать отдельные кадры в диапазоне анимации движения, необходимо щелкнуть кадр правой кнопкой мыши (Windows) или с удержанием клавиши Command (Macintosh).

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

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

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

В качестве наборов настроек движения можно сохранять только анимацию движения.

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

Один слой может содержать несколько экземпляров анимации, но только одного типа (либо классической анимации, либо анимации движения).

Дополнительные ресурсы

Сведения об отличиях между классической анимацией и анимацией движения содержатся в следующих статьях.

Джен ДеХаан (Jen DeHaan) опубликовала информативную заметку о модели движения в Animate и различиях между классической анимацией и анимацией движения в своем блоге на сайте Flashthusiast.com.

Применение наборов настроек движения

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

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

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

Панель Наборы настроек движения также позволяет импортировать и экспортировать наборы настроек. Можно обмениваться наборами настроек со своими коллегами или воспользоваться наборами настроек, предоставленными членами сообщества дизайнеров Animate.

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

Наборы настроек движения могут содержать только анимацию движения. Классическую анимацию нельзя сохранить в качестве набора настроек движения.

Просмотр наборов настроек движения

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

Источник статьи: http://helpx.adobe.com/ru/animate/using/motion-tween-animation.html