УРОК 10. АНИМАЦИЯ В AFTER EFFECTSУРОК 10. АНИМАЦИЯ В after effects ......

УРОК 10. АНИМАЦИЯ В AFTER EFFECTS

UI/UX ДИЗАЙН

Виды и примеры анимации для веб и мобильных устройств 3

Прелоадеры сайтов 11

Основной функционал After Effects 22

Основной функционал Principle 44

Виды и примеры анимации для Веб и мобильных устройстВ3 Виды и примеры анимации для Веб и мобильных устройстВ

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

Но с ростом скоростей подключения, улучшени-ем пропускной способности и развитием браузеров, анимация стала фундаментом интерактива.

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

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

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

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

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

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

Рисунок 1

Виды и примеры анимации для Веб и мобильных устройстВ4

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

К этому виду анимации можно также отнести скольжение боковых панелей на странице, увеличе-ние вкладок или всплывающих уведомлений (рис. 2).

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

Польза такой анимации была очевидна еще на ранних этапах развития пользовательских интер-фейсов. Курсор мыши в первых ОС превращался в песочные часы. Это было сигналом к тому, что ком-пьютер не завис. Еще один пример – анимация пере-летающих документов из одной папки в другую (при копировании или скачивании файлов) (рис. 3).

Рисунок 2

Рисунок 3


Интересный видом анимации является Storytelling-анимация. Многие сайты содержат анимацию, кото-рая рассказывает пользователю историю при взаи-модействии с ней. К примеру, при скролле страницы перед пользователем «собирается» продукт, или по-являются анимированные персонажи, которые сле-дят за действиями на экране (рис. 4).

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

Рисунок 4


Необычная анимация способна произвести впе-чатление на пользователя. Хороший пример – стра-ница девайса Mac Pro на сайте компании Apple. Пользователю при прокрутке показывают, что нахо-дится внутри системного блока (рис. 5).

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

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

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

Также можно добавлять анимации, которые за-пускаются только после того, как пользователь со-вершит какое-либо действие, например, наведет указатель на какой-то маленький элемент. Хорошим примером может послужить сайт Siaperitivos (рис. 6).

Рисунок 5

Рисунок 6

https://www.apple.com/mac-pro/http://www.siaperitivos.com/en/home/https://www.apple.com/mac-pro/http://www.siaperitivos.com/en/home/


Анимация также достаточно распространена для рекламы. Если дизайнер хочет привлечь внима-ние к рекламе, анимация – отличный способ. Но дан-ный тип интерактива обладает той же проблемой, что и декоративный: он отвлекает пользователя от просмотра основного контента страницы (рис. 7).

В целом, существует 8 функций анимации в со-временном веб-дизайне:1. Привлечьвнимание.

Общепринято считать, что движение привлекает внимание. Если большая часть веб-сайта статична, глаз будет автоматически фокусироваться на движе-ние. Эту особенность можно использовать, чтобы на-правлять внимание пользователей. Анимация рабо-тает хорошо, когда нужно оповестить пользователей о новых сообщениях или функциях на странице. В ка-честве примера можно привести всплывающие окна онлайн-поддержки (рис. 8).

Рисунок 7

Рисунок 8


2. Научить.Предположим, что в приложении пользователь

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

Рисунок 10 Рисунок 9

Анимированные визуальные эффекты могут обучать эффективней, чем текст или статические изо-бражения. Наиболее эффективна анимация hover. Если объект меняет свои свойства при наведении, это сигнализирует о его интерактивности и возможности взаимодействия. Когда пользователь не уверен в ин-терактивности объекта, он наводит на него курсор, чтобы убедиться (рис. 10).


3. Сделатьсменуэкранаплавной.Анимации перехода добавляют плавности смене

экранов. Раздражающий эффект резких переходов может навредить UX, поэтому лучше сгладить такие переходы анимацией (рис. 11).

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

4. Сделатьплавнымскроллингстраницы.Без эффектов анимации прокрутка бы никогда

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

Плавные переходы создают иллюзию единого экрана, соответственно, скроллинг становится бо-лее удобным и менее раздражающим. Например, как на сайте Beoplay (рис. 12).

Рисунок 11

Рисунок 12

https://www.beoplay.com/en/landingpages/portraits#Introhttps://www.beoplay.com/en/landingpages/portraits#Intro


5. Отвлечьотпроцессазагрузки.Долгая загрузка – значительный минус веб-

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

6. Развлечьпользователей.Наконец, анимацию можно использовать в ее

оригинальной форме – для развлечения. Один из вариантов такой анимации – интерак-

тивные фоны, где перемещение курсора сдвигает все изображение. Эти небольшие триггер-эффекты позволяют пользователям взаимодействовать с сай-том, придавая ему игровую направленность. Такой вариант неплохо реализован на сайте Trainrobber (рис. 14).

Рисунок 13

Рисунок 14

http://www.trainrobber.com/http://www.trainrobber.com/

11 прелоадеры сайтоВ

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

С помощью прелоадеров можно скрасить ожи-дание пользователей во время обработки операций сервера.

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

Рассмотрим некоторые характеристики эффек-тивного прелоадера.1. Прелоадерыдолжныбытьпростымииин-

тересными.Пользователи лучше воспринимают и запоми-

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

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

местить в прелоадер все: анимацию, графику, зву-ковые эффекты и т. д. Однако, это не имеет смысла.

Более того, прелоадеры должны быстро воспроизво-дится даже при низких скоростях интернета. Для это-го стоит оптимизировать контент прелоадера.3. Прелоадерыдолжныбытьуникальными.

Обычные прелоадеры (например, вращающие-ся круги) достаточно удобны в применении. Простая форма и графика – лучший для восприятия вариант. Но не стоит забывать о добавлении уникальности в прелоадер. Он должен отражать основной посыл компании и соответствовать ее стилю. Например, Google и Apple хорошо зарекомендовали себя фир-менной идентичностью.4. Показателизагрузки.

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

Рисунок 15

прелоадеры сайтоВ12

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

Существует множество причин использования прелоадеров на сайтах.

Самой распространенной причиной является вы-игрывание времени для загрузки сайта (рис. 16).

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

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

Рисунок 16

Рисунок 17


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

Прелоадеры более привлекательны и интересны, чем простая загрузка браузера (рис. 18).

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

Прелоадеры также создают приятное первое впечатление (рис. 19).

Анимация загрузки – первый элемент, который пользователь видит на странице. Если дизайнер создал качественный сайт, то стоит также прило-жить немного усилий и создать столь же качествен-ный прелоадер. Именно интересная загрузка может сформировать приятное и запоминающееся первое впечатление. Это особенно важно для сайтов-порт-фолио (графических дизайнеров, иллюстраторов, фотографов, дизайнерских студий, gamedev студий и т. д.).

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

Рисунок 18

Рисунок 19


Рассмотрим примеры сайтов с качественными и интересными прелоадерами.1. Pashant Sani.

Интересный прелоадер размещен на сайте веб-дизайнера Pashant Sani (рис. 20). В данном случае в качестве предварительного загрузчика использу-ются стилизованные инициалы автора. Они будто прорисовываются несколькими цветами, после этого превращаясь в логотип сайта. Подобные прелоаде-ры – не редкость для сайтов портфолио, и данный ва-риант – хороший тому пример.

2. Creative Cruise.Сайт Creative Cruise был создан для того, чтобы

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

Рисунок 20

Рисунок 21

https://prashantsani.com/http://creativecruise.nl/https://prashantsani.com/http://creativecruise.nl/


3. Open Continents.Это веб-сайт, созданный для кинематографиче-

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

4. Kokopako.Это сайт-портфолио дизайнера и арт-директора

Clement Pavageau. В прелоадер хорошо интегриро-ваны личные данные владельца, «‘87» – это не только обратный отсчет до конечной загрузки, но и отсылка к году, важному для создателя (рис. 23).

Рисунок 22

Рисунок 23

http://www.opencontinents.com/http://kokopako.fr/profilehttp://www.opencontinents.com/http://kokopako.fr/profile


5. McWhopper.Данный веб-сайт был создан для продажи специ-

ального предложения от McDonald's и Burger King. Его прелоадер представляет собой анимированный под-прыгивающий бургер, который дает возможность уви-деть все ингредиенты, скрашивая ожидание загрузки (рис. 24).

Рисунок 24

http://mcwhopper.com/http://mcwhopper.com/


Стоит также выделить несколько других каче-ственных прелоадеров. 1. LoaderView – цветной скользящий квадрат-

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

2. DotsLoaderView построен на анимации под-прыгивающих черных шариков, которые появля-ются из ниоткуда, а затем исчезают (рис. 26).

Рисунок 25

Рисунок 26


3. Simple Preloader – хороший пример прелоа-дера, который напоминает вращающееся коле-со лотереи. Такие прелоадеры можно сделать интерактивными, чтобы усилить элемент взаимо-действия пользователя с анимацией (рис. 27).

4. Bird Preloader сочетает в себе простые гео-

метрические фигуры, которые напоминают пти-цу. Такая анимация хорошо подходит для сайтов зоозащитных организаций, зоопарков или веб-сайтов для детей (рис. 28).

Рисунок 27

Рисунок 28


5. LittlePin Spinner. Прелоадеры с анимацией геоточки хорошо подходят для сайтов и прило-жений о путешествиях и онлайн-карт. Подобные анимированные элементы могут сделать загруз-ку более привлекательной и интересной (рис. 29).

6. NoHalftimeLoadersPetrick– увлекательная анимация со спортивными мячами. Такой прело-адер может идеально дополнить спортивный ин-тернет-магазин или сайт о спортивных событиях (рис. 30).

Рисунок 29

Рисунок 30


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

8. Cooper loader – прелоадер в форме знака бесконечности, который плавно движется. Такая анимация загрузки с минималистичным дизайном применима практически везде (рис. 32).

Рисунок 31

Рисунок 32


9. Ping-PongLoader – интересный анимирован-ный прелоадер в виде игры пинг-понг. Анимация подогревает интерес пользователей к сайту (рис. 33).

10.SurveyPlanet app Loader – интересный пре-

лоадер с планетой и вращающейся вокруг нее ракетой. Такая анимация загрузки – хорошее ре-шение для различных глобальных компаний и ор-ганизаций (рис. 34).

Рисунок 33

Рисунок 34

22 осноВной ФунКционал AFTER EFFECTS

After Effects – специализированная программа ком-пании Adobe, предназначенная для создания слож-ных анимационных композиций и спецэффектов.

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

Чтобы скачать и установить AfterEffects, необ-ходимо зайти на официальный сайт Adobe, на стра-ницу выбранной программы. Здесь можно купить пол-ную лицензионную версию, либо скачать пробный триал (рис. 35).

Скачиваем архив в любую удобную директорию на компьютере (рис. 36).

Рисунок 35

Рисунок 36

https://www.adobe.com/products/aftereffects.html?promoid=KFMVM&s_cid=70114000002CfGJAA0&s_iid=70114000002ChdJAAShttps://www.adobe.com/products/aftereffects.html?promoid=KFMVM&s_cid=70114000002CfGJAA0&s_iid=70114000002ChdJAAShttps://www.adobe.com/products/aftereffects.html?promoid=KFMVM&s_cid=70114000002CfGJAA0&s_iid=70114000002ChdJAAS

осноВной ФунКционал AFTER EFFECTS23

Распаковываем папку и двойным кликом запуска-ем файл установщика setup.exe (рис. 37).

В результате начнется установка приложения Adobe Creative Cloud (рис. 38).

Рисунок 37

Рисунок 38


После завершения данного процесса откроется окно Creative Cloud. Здесь нужно ввести данные учет-ной записи Adobe и кликнуть Sing In (рис. 39).

Далее принимаем условия лицензионного согла-шения и кликаем Continue (рис. 40).



Откроется список всех триальных продуктов Adobe, доступных для скачивания. Выбираем After Effect и нажимаем на кнопку Try (рис. 41).

Ожидаем завершения установки программы. По-сле этого следует кликнуть Start Trial, чтобы запустить пробную версию After Effect (рис. 42).



Запустится окно инициализации (рис. 43).На рисунке 44 изображено, как будет выглядеть

программа при первом запуске.

Рисунок 43

Рисунок 44


Любые окна интерфейса можно смещать, вклю-чать и выключать, настраивая внешний вид под соб-ственные потребности (рис. 45).

Чтобы вернуться к исходному расположению окон, следует нажать кнопку Standard на верхней па-нели инструментов (рис. 46).

Рисунок 45

Рисунок 46


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

Рисунок 47

Рисунок 48

Рисунок 49

Для начала работы с программой нужно создать новый проект: меню File > New > New Project. При пер-вом запуске After Effects, он открывается по умолча-нию (рис. 48).

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


Чтобы добавить файлы в проект, следует кликнуть ПКМ в области окна Project и щелкнуть Import > File. Исходники также можно напрямую перетащить из папки в программу (рис. 50).

В результате сформируется список добавленных объектов (рис. 51).

Чтобы было удобней ориентироваться, можно по-местить файлы в папки. Это поможет четко структури-ровать проект (рис. 52).

Рисунок 50



Чтобы начать работу над конкретным роли-ком, нужно создать композицию. Для этого кликаем по кнопке New Composition в центре рабочей обла-сти, либо открываем Composition > New composition (хоткей Ctrl + N) (рис. 53).

В результате откроется окно с предваритель-ными настройками разрабатываемого проекта. Здесь задается разрешение файла (к примеру, 1920 × 1080 px), частота кадров в секунду – Frame Rate, и продолжительность ролика – Duration, кото-рая измеряется в секундах или в количестве кадров (рис. 54). Рисунок 53

Рисунок 54


Нажимаем кнопку OK и получаем пустую компо-зицию (Comp1) (рис. 55).

В центральном окне формируется проект (рис. 56).

Рисунок 55

Рисунок 56


Чтобы поместить любые файлы в композицию, достаточно перетащить их из панели Project в стек слоев на панели Timeline. Принцип наложения слоев такой же, как и в программе Photoshop: каждый но-вый объект в сцене автоматически добавляется на от-дельный слой, который помещается поверх остальных (рис. 57).

Слои также можно блокировать, либо включать/выключать их видимость (рис. 58).

Рисунок 57

Рисунок 58


Дополнительные настройки скрыты под иконками в правом нижнем углу панели Timeline (рис. 59).

Если деактивировать все три иконки, можно ос-вободить больше места для дорожек анимации. Это очень удобно при работе на маленьком мониторе (например, на ноутбуке) (рис. 60).

Рисунок 59

Рисунок 60


С помощью хоткея F4 можно переключаться меж-ду разными видами настроек (рис. 61-62).

Аналогичную функцию выполняет кнопка Toggle Switches/Modes внизу панели (рис. 63).

Рисунок 61

Рисунок 62

Рисунок 63

Рисунок 61-62


Принцип анимирования прост: программа After Effects позволяет динамически менять любые физи-ческие параметры объектов во времени. Чтобы рас-крыть список простейших анимаций, которые можно по умолчанию применить к любому объекту, следует кликнуть по стрелке слева от названия слоя. В под-меню Transform задается местоположение файла в пространстве сцены (Position), его масштаб (Scale), поворот (Rotation) и степень прозрачности (Opacity). Опция Anchor Point отвечает за положение «якорной» точки объекта, относительно которой проводится анимация (рис. 64).

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

Стоит также отметить, что каждый параметр ани-мации обладает собственной временной шкалой (рис. 65).

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

Рисунок 64

Рисунок 65

Рисунок 66


Также в программе существует цветовая иден-тификация слоев, в зависимости от их содержания. К примеру, композиции по умолчанию отмечаются бежевым цветом, футажи – зеленым, векторные фигу-ры и пути – синим (рис. 67).

Этот параметр можно оперативно менять с по-мощью специальных окошек слева от названия слоя (рис. 68). Рисунок 67

Рисунок 68


К каждому слою можно применить дополнитель-ные эффекты. Список доступных пресетов можно най-ти на панели Effects & Presets справа от рабочей об-ласти. Данная панель по умолчанию всегда открыта (рис. 69).

Аналогичный список находится в меню Effects на верхней панели (рис. 70).

Каждый эффект обладает собственным набором параметров, которые также анимируются. Его на-стройки отображаются на панели Project. Кроме того, эффекты и пресеты можно накладывать друг на друга для создания более интересной анимации (рис. 71).

Рисунок 69

Рисунок 70

Рисунок 71


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

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

Готовую анимацию можно просмотреть в рабо-чей области, нажав на клавишу Space. Но прежде чем проиграть ролик, программа должна скопиро-вать его в память компьютера. Поэтому при первом запуске видео может отображаться дискретно. Это будет особенно заметно, если компьютер облада-ет недостаточным объемом памяти, поскольку зеле-ная полоса над дорожками анимации не заполнится (рис. 74).

Рисунок 72

Рисунок 73

Рисунок 74


После того как анимация настроена, нужно вы-вести проект в демонстрационный файл. Для этого открываем меню Composition и выбираем команду Add to Render Queue (Добавить в очередь рендера), хоткей Ctrl + M (рис. 75).

Рисунок 75

Рисунок 76

Рисунок 77

Внизу откроется окно со списком текущих ренде-ров (рис. 76).

Первая строка (Render Setting) отвечает за базо-вые настройки (рис. 77).

Если кликнуть по данной надписи, откроется до-полнительное окно (рис. 78).


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

В строке Output Module настраиваются формат и цветовая схема создаваемого ролика (рис. 79-80).


Рисунок 80

Рисунок 79-80


В строке Output To нужно указать путь, куда будет сохранен готовый файл (рис. 81).

Нужно убедиться, что композиция, которую нуж-но отрендерить, отмечена галочкой. Она будет вклю-чена по умолчанию, если в очереди находится только один файл. После этого следует нажать кнопку Render (рис. 82).

Готовый видеоролик можно просмотреть в стан-дартном плеере, либо залить на YouTube. Скорость рендера зависит от сложности и продолжительности проекта, а также количества использованных эффек-тов.

Другой метод рендеринга предполагает нали-чие дополнительного ПО – программы Adobe Media Encoder, которую нужно установить отдельно. Это обусловлено тем, что в более поздних версиях After Effects из списка стандартных видеоформатов было исключено несколько наиболее популярных (напри-мер, MPEG-4 – H.264).

Чтобы воспользоваться Adobe Media Encoder, открываем меню Composition > Add to Adobe Media Encoder Queue (рис. 83).

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

Рисунок 81

Рисунок 82

Рисунок 83


Все важные настройки интерфейса находятся в меню Edit – Preferences – General. Хоткей для бы-строго вызова – Ctrl + Alt + ; (рис. 84).

Откроется дополнительное окно со списком па-раметров (рис. 85).

Как и в любой другой программе, настройки After Effects можно сбросить к исходному состоянию. Для этого нужно закрыть программу, нажать клави-ши Ctrl + Alt + Shift, и запустить программу снова. При этом появится предупреждение с вопросом, дей-ствительно ли нужно удалить все существующие на-стройки (рис. 86).

Рисунок 84

Рисунок 85


Нажимаем OK. В итоге откроется обычная версия After Effects

со сброшенными настройками. Любые изменения в положении окон или оформлении интерфейса бу-дут удалены.

Один из важнейших параметров, который следу-ет настроить перед началом работы, – автосохра-нение. В последних версиях программы эта функция по умолчанию активна. Интервал сохранения лучше задать в пределах 10-15 минут, количество резервных копий – не более 5, чтобы не перегружать компью-тер. Здесь же прописывается путь для сохраняемых файлов. Лучший вариант – держать бекапы в той же папке, что и основной проект (рис. 87).

Рисунок 86

Рисунок 87

44 осноВной ФунКционал PRINCIPLE

Principle позволяет создавать интерактивные про-тотипы.

С его помощью можно реализовать скроллинг и навигацию на различных устройствах (рис. 88).

Триальную версию данной программу можно ска-чать с официального сайта Principle (рис. 89).

Сохраняем скачанный архив в любой удобной папке на компьютере и распаковываем файл (рис. 90).

Запускаем Principle. Появится окно регистрации, в котором можно ввести серийный номер продукта. Здесь же, в правом нижнем углу находится кнопка Continue Trial, которая позволит ознакомиться с проб-ной версией программы в течение 14 дней. Кликаем по ней, чтобы открыть Principle (рис. 91).

Рисунок 88

Рисунок 89

Рисунок 90

Рисунок 91

http://principleformac.com/http://principleformac.com/

осноВной ФунКционал PRINCIPLE45

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

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

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

Рисунок 92

Рисунок 93


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

ствия (рис. 94).2. После – триггер, при котором будет происходить

анимация (рис. 95).3. Задается вид элемента после выполнения тригге-

ра (рис. 96).

Рисунок 94



Созданные анимации доступны в окне предпро-смотра. Однако, анимации обладают некоторыми особенностями, например, все анимации длятся 0,5 с. При необходимости, длительность и плавность можно поменять (рис. 97).

Анимации переходов создаются с помощью ком-поновки и установки необходимых триггеров на объ-екты.

Рисунок 97


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

Рисунок 98

Все права на охраняемые авторским правом фото-, аудио- и видеопроизведения, фрагменты которых использованы в материале, принадлежат их законным владель-цам. Фрагменты произведений используются в иллюстративных целях в объёме, оправданном поставленной задачей, в рамках учебного процесса и в учебных целях, в соответствии со ст. 1274 ч. 4 ГК РФ и ст. 21 и 23 Закона Украины «Про авторське право і суміжні права». Объём и способ цитируемых произведений соответствует принятым нормам, не наносит ущерба нормальному использованию объектов авторского права и не ущемляет законные интересы автора и правообладателей. Цитируемые фрагменты произведений на момент использования не могут быть заменены альтернативными, не охраняемыми авторским правом аналогами, и как таковые соответствуют критериям добросовестного использования и честного использования.

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

Ответственность за несанкционированное копирование и коммерческое использо-вание материалов определяется действующим законодательством Украины.

© Компьютерная Академия ШАГ www itstep org

UI/UX ДИЗАЙН

УРОК 10 АНИМАЦИЯ В AFTER EFFECTS

http://www.itstep.org/

Button 9: Button 10: Button 19: Button 11: Button 12: Button 13: Button 14: Button 15: Button 16: Button 17: Button 18:

УРОК 10. АНИМАЦИЯ В AFTER EFFECTSУРОК 10. АНИМАЦИЯ В after effects ......

Documents

Transcript of УРОК 10. АНИМАЦИЯ В AFTER EFFECTSУРОК 10. АНИМАЦИЯ В after effects ......