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

Урок №17 (Как сделать тень)

Чтоб сделать тень в Adobe Animate нужно выделить слой с нарисованным символом, открыть вкладку “свойства” и в разделе “фильтры”, кликнуть на иконку с изображением плюсика, а во всплывшем контекстном меню выбрать пункт — тень.

Подробную инструкцию, как сделать тень в Adobe Animate смотрите в этом видео-уроке:

Закрепление материала урока:

• Тень в адобеа анимате можно добавить через интерфейс свойств слоя или кадра, выбрав соответствующий пункт во вкладке “фильтры”;
• Тень в адобе анимейт имеет следующие настройки – размытие, интенсивность, качество, угол, рассеивание и цвет;
• Для работы с тенью в Adobe Animate лучше использовать дублирующий слой. Это позволит сделать анимацию тени более реалистичной.
• Для создания идеально-ровного угла падения тени, рекомендуется использовать инструмент “выравнивание”, выставляя угол наклона (в градусах) вручную.

Урок №9 (как зациклить анимацию)

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

Закрепляем материал урока:

• Скрипт (gotoAndPlay) прописывается в ключевом кадре анимированного слоя, в нём указывается номер другого кадра, на который нужно сделать переход;
• Для корректной работы скрипта (gotoAndPlay), анимацию слоя следует преобразовать в покадровую;
• Для записи команды перехода на цыкал, нужно нажать клавишу F9 тем самым открыв окно действий и в нём прописать строчку (gotoAndPlay), а в скобках указать кадр, на который нужно сделать переход. Закрываем окно и жмём сочетание клавиш Alt+Enter, теперь анимация зациклена и будет непрерывно играть.
• Чтоб ограничить длительность анимации, например пятью секундами, откройте -“Файл/Экспорт/Экспорт видео”, установите галочку напротив “Остановить экспорт по истечению” и укажите время в секундах, установив значение — 5.

Скачать урок urok_9.fla

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

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

Смотрите Моушн Дизайн в 2022.

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

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-анимации, даже если для этого требуется больше времени и усилий.

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

Пример видеоинфографики

Компьютерная анимация

Компьютерная анимация — вид анимации, создаваемый при помощи компьютера. На сегодня она получила широкое применение, как в области развлечений, так и в производственной, научной и деловой сферах. Являясь производной от компьютерной графики, анимация наследует те же способы создания изображений: векторная графика, растровая графика, фрактальная графика, трехмерная графика (3D).
Хранение. Компьютерная анимация может храниться в универсальных графических файлах (например, в формате GIF) в виде набора независимых изображений, либо в специализированных файлах соответствующих пакетов анимации (3ds Max, Blender, Maya и т. п.) в виде текстур и отдельных элементов, либо в форматах, предназначенных для просмотра (FLIC (англ.)) и применения в играх (Bink). Также, анимация может сохраняться в форматах, предназначенных для хранения видео (например, MPEG-4).
Применение. Компьютерная анимация (последовательный показ слайд-шоу из заранее подготовленных графических файлов, а также компьютерная имитация движения с помощью изменения и перерисовки формы объектов или показа последовательных изображений с фазами движения, подготовленных заранее или порождаемых во время анимации) может применяться в компьютерных играх, мультимедийных приложениях (например, энциклопедиях), а также для «оживления» отдельных элементов оформления, например, веб-страниц и рекламы (анимированные баннеры). На веб-страницах анимация может формироваться средствами стилей (CSS) и скриптов (JavaScript) или модулями, созданными с помощью технологии Flash или её аналогов (флеш-анимация).

В настоящее время существует различные технологии создания анимации:

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

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

3. Спрайтовая анимация реализуется при помощи языка программирования.

4. Морфинг – преобразование одного объекта в другой за счет генерации заданного количества промежуточных кадров.

5. Цветовая анимация – при ней изменяется лишь цвет, а не положение объекта.

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

7. Захват движения (Motion Capture) – первое направление анимации, которое дает возможность передавать естественные, реалистичные движения в реальном времени. Датчики прикрепляются на живого актера в тех местах, которые будут приведены в соответствие с контрольными точками компьютерной модели для ввода и оцифровки движения. Координаты актера и его ориентация в пространстве передаются графической станции, и анимационные модели оживают.

Easy GIF Animator

Еще одна популярная программа в рунете (и не только) для создания анимированных изображений, но с меньшими функциональными возможностями, чем у Synfig Studio. Функционал Easy GIF Animator позволяет в очень сжатые сроки и с минимальными трудозатратами создавать с нуля и редактировать готовые гифки:

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

• Многофункциональный редактор кадров с таймлайном, позволяющий одновременно редактировать несколько кадров, перемещать и копировать их, устанавливать продолжительность показа одного кадра, извлекать кадры из импортированных GIF-изображений и т.д. Кстати, редактирование изображений осуществляется внутри редактора кадров.
• Наличие разнообразных шаблонов для анимации текста и изображений: движение, поворот, увеличение, плавное появление/исчезновение, выпадение за холст и т.п.
• Отдельные модули для создания анимированных кнопок и баннеров для сайта.
• Создание GIF-анимации из видео с возможностью установки продолжительности (начала и конца) преобразуемого куска видеоролика.
• Поддерживаемые форматы изображений: импорт и обработка — GIF, JPEG, PNG, BMP и ICO; сохранение — GIF, SWF и видеоформаты.

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

Но есть у программы один большой недостаток — она платная. С официального сайта предлагается скачать Easy GIF Animator с ограниченным количеством запусков (20), после чего придется приобретать лицензию.

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

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

Гиф анимация

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

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

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

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

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

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

Cinemagraphy

Если вы еще не слышали о cinemagraphy, то 100% сталкивались с ней в Интернете.

Пример Cinemagraphy анимации

Синемаграфия — это «живые картинки», но более сложные, чем анимированные GIF (у хорошо сделанной cinemagraphy не видно стыка начала и конца). Другими словами — это изящное сочетание статики и динамики.

Посмотрите эту видео подборку для лучшего понимания:

Подборка cinemagraphy

Изюминка сinemagraphy заключается в том, что на таких картинках есть одно, согласованное и сосредоточенное движение, которое рисует картину или рассказывает историю. 

Где используется Сinemagraphy?

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

Ролик должен быть не менее 3 секунд. Пролистывая ленту сработает автопуск и Instagram автоматом зациклит видео

Для Instagram нужно экспортировать синемаграфию в формате видео. Ролик должен быть не менее 3 секунд. Пролистывая ленту сработает автопуск и Instagram автоматом зациклит видео.

Для Facebook и ВКонтакте тоже нужно делать экспорт в видео.

Вот хороший пример cinemagraphy товара:

Анимации юбки привлекает взгляд

Если хотите сделать живые фото товаров в своем магазине:

1. Используйте софт по типу этого или Photoshop.
2. Разместите видео или GIFку в карточку товара, как простую фотографию.

Как сделать синемаграфию

Несколько базовых уроков создания cinemagraphy.

Как создать Cinemagraph в Photoshop

Создание синемаграфии с помощью приложения на мобильном (iOS)

Как создать Cinemagraph на Iphone

Анимэ

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

Что такое анимэ

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

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

Смотрите Лучшие Аниме 2018 года.

Анимэ сегодня — это процветающая индустрия в Японии, которая включает такие жанры как:

• детские мультфильмы;
• комедия и драма;
• фантастика;
• научная фантастика;
• экшн;
• спорт и история.

 …. и много других. Все это под разные целевые аудитории. Больше можно посмотреть здесь.

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

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

Prison School Anime

Flavors of Youth

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

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

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

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

Прообразы анимации

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

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

Настоящая анимация стала возможной после создания фотокамеры и проектора изобретателем Томом А. Едисоном.

Создать gif онлайн быстрее, чем оффлайн.

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

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

Какими программами следует пользоваться?

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

Adobe Photoshop

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

• Объединять изображения.
• Прорабатывать текстуры.
• Накладывать покадровую анимацию.
• Работать над дорисовкой.
• Создавать GIF-изображения.

Для работы с векторной 2D-графикой специалисты пользуются Adobe Illustrator. Иллюстратор отлично подходит для создания логотипов и фонов для последующего использования в анимациях.

Adobe Animate

Adobe Animate – незаменимая программа для проектирования 2D анимаций. Моушен-дизайнеры применяют этот софт для работы с векторной графикой. Здесь новички могут приобрести необходимые умения и создать свою первую двигающуюся картинку.

Пример анимации векторного персонажа в Adobe Animate

Adobe After Effects

Adobe After Effects – мощный пакет программ для создания анимированной графики, визуальных эффектов и видео монтажа. Одна из самых популярных программ для создания клипов, о которой говорят, что ее логика похожа на Adobe Photoshop. Ив принципе это понятно – разработчик один.

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

Пример эффекта двойной композиции с видео в After Effects

Пример совмещения видео и графики в After Effects

Пример работы с векторной графикой в After Effects для создания инфографики

Программы для 3d графики

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

• 3dsMax,
• Cinema 4D,
• Blender (бесплатное ПО, распространяемое по лицензии GNU)

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

Пример создания и анимирования системы волос в 3ds Max

Пример работы с системой частиц в Cinema4d

Пример 3d персонажа, созданного в Blender

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

1С и ODBC

ODBC (Open Database Connectivity) — это программный интерфейс, универсальное средство доступа к базам данных, разработанное для обмена между источниками (базами данных) разного типа. Данный интерфейс принято считать более низкоуровневым, чем библиотека ADOdb, однако причина эта кроется не в более низком качестве, но в том, что ODBC послужила своего рода фундаментом более поздней ADOdb – работу с последней поддерживают все типы баз, работающие и с первой.
В данной статье мы расскажем о том, как взаимодействуют ODBC и 1С, а точнее, поговорим о механизме 1С ВнешнийИсточникДанных и его использовании с вышеупомянутым интерфейсом.

Когда «оживили» слово мертвого языка

Первый раз термин «анимация» был употреблен во Франции в начале ХХ века, когда в этой стране вводился закон о создании ассоциаций.

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

Уже во второй половине этого века термин «анимация» начали использовать в нескольких значениях. Именно тогда впервые это понятие стало трактоваться как творческая деятельность по производству мультфильмов.

А в конце ХХ века анимация стала представлять отдельное направление культурного досуга.

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

Четыре способа поддержки анимации

Ожидания

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

Непрерывность

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

Повествование

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

Отношение

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

Программы GIF-анимации для Android

Gif Creator

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

Footej Camera

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

Gif Maker

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

GIF-Studio

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

• возможность извлечения изображения из видеоряда;
• редактирование GIF;
• применение фильтров (сепия, ЧБ, абстракция и другие);
• добавление стикеров и текста (удобно для составления гифок без звука).

Pixel Animator

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

Обучение

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

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

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

Magic Particles 3D

Год выхода: 2011. Это специализированный редактор спецэффектов. Пылающий текст, летящая комета, танец осенних листьев под порывами ветра, снежная вьюга и разноцветный туман, извивающиеся щупальца диковинных тварей, причудливые силуэты растений — все эти (и многие другие!) образы могут быть не только созданы в этой программе, но и вставлены в ваши фотографии и видеозаписи. Программа будет очень полезна не только любителям украсить домашнее фото и видео, но и дизайнерам. Украсить свадебное видео? Добавить новогодней свежести в ролик или баннер? Нет ничего проще! Программа настолько проста и удобна в использовании, что любой сможет создать спецэффекты мирового уровня всего за пару минут и несколько кликов мышки!

Урок №11 (кости)

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

Закрепляем тему урока:

• Инструмент “кости” связывает элементы анимации в единый каркас по средствам родитель – потомок;
• Соединение костей происходит путём перетаскивания контактных линий зажатой кнопкой мышки, от основного объекта;
• Движение, поворот и наклон костей можно ограничить в заданных пределах. Делается это в окне свойств инструмента “выделение”, применяя к соответствующей точке и отключая сочленение поворота. Там же расположена регулировка преобразования по осям X и Y.

Скачать урок urok_11.fla

Выводы

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

Если у вас есть профессиональные программы вроде Adobe Photoshop или Camtasia Studio, не забывайте, что в них вы можете создавать GIF практически любой сложности. Но не покупайте их, если собираетесь использовать только для этих целей, — получится дорого. В таком случае рекомендую выбрать другие инструменты, на освоение которых вы потратите гораздо меньше времени и сэкономите деньги. По личному опыту, в большинстве случаев достаточно простых функций бесплатных сервисов.