Вектор анимация в какой программе


2D анимация: способы создания и уроки

30 апреля 2012 | Опубликовано в статьюшечки | 8 Комментариев »

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

Для этой цели существует большое количество программного обеспечения (Photoshop, Illustator, Paint, Flash и т.п. ). Следовательно, анимация может быть как  векторной, так и растровой. Анимацию также можно создавать при помощи css3 и JQuery. Мы представляем вашему вниманию коллекцию уроков по созданию 2D анимации при помощи различных техник.

При помощи Photoshop

При помощи Photoshop можно создавать простейшие анимированные gif-изображения.

Смотрите видеоурок по созданию простейшей анимации при помощи Photoshop:

При помощи GIMP

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

Посетить урок

При помощи Paint

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

При помощи PowerPoint

При помощи Illustator

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

Посетить урок

При помощи Flash

Видеоурок по созданию простого мультфильма при помощи Adobe Flash

Смотрите также статьи:

При помощи TVPaint

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

При помощи Toon Boom

Toon Boom-целое  семейство программ для анимации, предназначенных как для любителя, так и для профессионала.

При помощи Anime Studio Pro

Anime Studio Pro-простая для освоения программа при помощи которой можно создавать вот такие мультфильмы:

При помощи JQuery

Урок по созданию анимации при помощи плагина jQuery.spritely

Посетить урок 

Урок по созданию движущегося мультяшного  робота при помощи JQuery

Посетить урок

При помощи css3

О том, как создать анимацию при помощи css3 читайте здесь. Ниже представлен пример анимации:

Смотрите здесь

При помощи Adobe Edge

Adobe Edge  позволяет быстро и легко создавать интерактивные элементы с помощью стандартов HTML5, CSS3 и JavaScript.

Смотрите видеоурок о том, как создать анимацию при помощи этой программы:

Примеры использования анимации в веб-дизайне

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

Quazar web design

Captain Dash

HMTL 5lab

Nathan Love Studio

Возможно, вас заинтересуют статьи:

 Автор-Дежурка



Редакторы векторной графики

Перейти к материалам

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

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

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

Инструменты для создания векторной графики

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

Чтобы помочь вам сделать правильный выбор, мы собрали лучшие редакторы в один архив, где к каждому материалу было добавлено подробное описание, скриншоты и видеоуроки. Здесь вы можете ознакомиться с отзывами пользователей, сравнить рейтинги и скачать подходящую программу для создания векторной графики через торрент или файлообменные сервисы (MEGA или Яндекс.Диск).

Adobe Illustrator CC

Версия: 2017 Язык интерфейса: Русский (Multi) Рейтинг: Профессиональный редактор векторной графики, считающийся лучшим в своей отрасли. Включает в себя колоссальный набор передовых возможностей для эффективной работы с изображениями. Добавил: Helix, 10-12-2016, 16:43 | Просмотров: 81 631

CorelDRAW X7

Версия: 17.3.0.722 Язык интерфейса: Русский Рейтинг: Универсальный графический редактор для профессиональной работы с цифровыми изображениями. Включает огромный набор инструментов создания и редактирования векторной и растровой графики. Станет лучшим помощником для уверенных пользователей. Добавил: Helix, 13-07-2015, 10:11 | Просмотров: 10 401

Inkscape

Версия: 0.91 Язык интерфейса: Русский Рейтинг: Бесплатный редактор векторной графики, завоевавший уважение тысяч профессиональных художников. Содержит внушительный набор инструментов, способных справиться с большинством поставленных задач. Добавил: Creator, 4-12-2016, 14:20 | Просмотров: 8 705

Synfig Studio

Версия: 1.2.0 Язык интерфейса: Русский Рейтинг: Программа для создания двухмерной векторной анимации отличного качества. Работает как с морфингом, так и с перекладной анимацией. Подходит для создания мультфильмов в условиях небольших любительских студий и ограниченных ресурсов. Добавил: Creator, 12-01-2017, 12:30 | Просмотров: 7 648

Adobe Photoshop

Версия: 2017.1.1 Язык интерфейса: Русский (Multi) Рейтинг: Комплекс инструментов, соединенных в одну программу, предназначенный для профессиональной обработки цифровой графики. Содержит набор продвинутых инструментов и функций, необходимых для реализации идей пользователя. Добавил: Revolt, 2-09-2017, 22:55 | Просмотров: 7 131

CorelDRAW Graphics Suite

Версия: 19.0.0.328 Язык интерфейса: Русский (Multi) Рейтинг: Профессиональный инструмент, используемый для обработки и создания графики с нуля. Данный программный пакет содержит в себе передовые инструменты, средства и функции, необходимые для работы с графическими проектами. Добавил: Revolt, 21-08-2017, 17:01 | Просмотров: 4 713

Adobe After Effects CC 2019

Версия: 16.1 Язык интерфейса: Русский (Multi) Рейтинг: Одна из лучших программ для видеомонтажа, создания анимации и всевозможных графических эффектов. Редактор обладает широким перечнем профессиональных инструментов для творчества любого масштаба. Добавил: Creator, 6-06-2019, 16:03 | Просмотров: 2 138

Pencil2D

Версия: 0.6.4 Язык интерфейса: Русский (Multi) Рейтинг: Совершенно бесплатный графический редактор, поддерживающий работу с векторной и растровой графикой. Программа разработана специально для создания двухмерной анимации. Добавил: Creator, 27-06-2019, 18:09 | Просмотров: 1 216

Создание анимаций в Illustrator

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

Сохранить объект как SWF-файл можно с помощью команды «Экспортировать» или Сохранить для Web и устройств. Вот преимущества каждого из этих способов:

Команда «Экспортировать» (SWF)

Обеспечивает наибольший контроль над анимацией и битовым сжатием.

Команда «Сохранить для Web и устройств»

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

При подготовке объекта к сохранению в формате SWF помните следующие рекомендации.

  • Чтобы файл был как можно меньше при использовании символов, применяйте эффекты к символу в палитре «Символы», а не к экземплярам символа в объекте.

  • Использование инструментов «Обесцвечивание символов» и «Стили символов» увеличит размер SWF-файлов, так как Illustrator должен создать копию каждого экземпляра символа для сохранения оформления.

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

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

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

  • Формат SWF поддерживает только скругленные концы и стыки. При экспорте в формат SWF скошенные или квадратные концы и стыки скругляются.

  • Залитый узором текст и обводки преобразуются в контуры и заливаются узором.

  • Хотя при экспорте в формат SWF текст сохраняет многие свои особенности, некоторая информация теряется. Если SWF-файл импортируется в Flash, интерлиньяж, кернинг и трекинг не сохраняются. Вместо этого текст разбивается на отдельные записи для имитации вида интерлиньяжа. Если затем SWF-файл проигрывается в Flash Player, оформление интерлиньяжа, кернинга и трекинга в файле сохраняется. Если нужно экспортировать текст как контуры, установите флажок «Экспортировать текст в кривых» в диалоговом окне «Параметры SWF» или преобразуйте текст в кривые перед экспортом в формат SWF, выбрав команду «Преобразовать в кривые».

Видеоролик с инструкциями по совместному использованию Flash и Illustrator см. по адресу www.adobe.com/go/lrvid4099_xp. Видеоролик об эффективном использовании символов в Illustrator и Flash см. по адресу www.adobe.com/go/vid0198_ru. Видеоролик с инструкциями по эффективному переносу текста между Illustrator и Flash см. по адресу www.adobe.com/go/vid0199.

В Illustrator есть много способов создания Flash-анимаций. Один из самых простых — это расположить каждый кадр анимации на отдельном слое Illustrator и при экспорте объекта выбрать параметр Все слои в SWF-фреймы.

Примечание.

Видеоролик с инструкцией по экспорту файлов SWF из Illustrator см. по адресу www.adobe.com/go/vid0214. Видеоролик с инструкцией по созданию содержимого для мобильных устройств в Illustrator см. по адресу www.adobe.com/go/vid0207_ru. Можно также обратиться в Adobe Studio по адресу (http://studio.adobe.com) за советами и учебниками по созданию Flash-анимаций.

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

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

  3. Слои должны располагаться в том порядке, в каком вы хотите их видеть в кадрах анимации.
  4. Выполните одно из следующих действий:
    • Выберите команду «Файл» > «Экспортировать», формат «Flash (SWF)» и нажмите «Экспорт». В диалоговом окне «Параметры SWF» выберите в списке «Экспортировать как» значение Слои AI в кадры SWF. Задайте дополнительные параметры анимации и нажмите кнопку «ОК».

    • Выберите «Файл» > Сохранить для Web и устройств. Выберите «SWF» из меню Оптимизированный формат файла. В меню «Тип экспорта» выберите команду Слои AI в кадры SWF. Задайте дополнительные параметры и нажмите кнопку «Сохранить».

Графический объект, созданный в приложении Illustrator, можно переместить в среду редактирования Flash или напрямую открыть в приложении Flash Player. Графические объекты можно копировать и вставлять, сохранять в формате SWF или экспортировать напрямую в приложение Flash. Кроме того, Illustrator обеспечивает поддержку динамического текста Flash и символов роликов. Видеоролик с инструкциями по совместному использованию Flash и Illustrator см. по адресу www.adobe.com/go/lrvid4099_xp.

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

Вставка графического объекта Illustrator

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

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

  • Контуры и фигуры

  • Масштаб

  • Толщина штрихов

  • Определения градиентов

  • Текст (включая шрифты OpenType)

  • Связанные изображения

  • Символы

  • Режимы наложения

Кроме того, Illustrator и Flash поддерживают следующие возможности при вставке графического объекта.

  • При выделении в графическом объекте Illustrator слоев верхнего уровня целиком и вставке их в приложение Flash сохраняются слои и их свойства (видимость и блокировка).

  • Цветовые форматы Illustrator, отличные от RGB (CMYK, градации серого и пользовательские форматы), преобразуются приложением Flash в формат RGB. Цвета RGB вставляются обычным образом.

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

  • Flash сохраняет маски Illustrator.

Экспорт SWF-файлов из приложения Illustrator

SWF-файлы, экспортируемые из приложения Illustrator, соответствуют по качеству и степени сжатия SWF-файлам, экспортируемым из приложения Flash.

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

Импорт файлов Illustrator в приложение Flash

Чтобы создать полный макет в приложении Illustrator, а затем импортировать его в приложение Flash за один шаг, можно сохранить графический объект в собственном формате Illustrator (AI) и импортировать его с высокой точностью в приложение Flash с помощью команд «Файл» > «Импортировать в рабочую область» или «Файл» > «Импортировать в библиотеку».

Если файл Illustrator содержит несколько монтажных областей, выберите монтажную область для импорта в диалоговом окне «Импорт» программы Flash и укажите настройки для каждого слоя в этой монтажной области. Все объекты в выбранной монтажной области импортируются в программу Flash как единый слой. При импорте другой монтажной области из того же файла AI объекты из этой монтажной области импортируются в программу Flash как новый слой.

При импорте графического объекта Illustrator в виде файлов AI, EPS или PDF приложение Flash сохраняет те же атрибуты, что и при вставке графических объектов Illustrator. Кроме того, если импортируемый файл Illustrator содержит слои, их можно импортировать одним из следующих способов.

  • Преобразовать слои Illustrator в слои Flash.

  • Преобразовать слои Illustrator в кадры Flash.

  • Преобразовать все слои Illustrator в один слой Flash.

Работа с символами в приложении Illustrator похожа на работу с символами в приложении Flash.

При создании символа в приложении Illustrator в диалоговом окне «Свойства символа» можно задать его имя и специфичные для приложения Flash параметры: тип символа ролика (это значение по умолчанию для символов Flash), местоположение в сетке регистрации Flash и направляющие 9-фрагментного масштабирования. Кроме того, многие комбинации клавиш, применяемые в приложениях Illustrator и Flash, совпадают (например, клавиша F8 используется для создания символа).

Редактирование символов в режиме изоляции

Дважды щелкните символ в приложении Illustrator, чтобы открыть его в режиме изоляции, упрощающем редактирование. В режиме изоляции допускается редактирование только данного экземпляра символа, все остальные объекты в монтажной области затенены и недоступны. После выхода из режима изоляции соответствующим образом обновляется символ в палитре «Символы» и все его экземпляры. Режим редактирования символов и панель «Библиотека» в приложении Flash работают аналогично.

С помощью палитры «Символы» или панели «Управление» можно легко назначать имена экземплярам символов, разрывать связи между экземплярами и символами, замещать экземпляр символа другим символом или создавать копию символа. Функции редактирования панели «Библиотека» в приложении Flash работают аналогично.

Статические и динамические текстовые объекты и объекты для ввода текста

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

В приложении Illustrator отдельные текстовые объекты могут быть статическими, динамическими или объектами для ввода текста. Динамические текстовые объекты в приложениях Illustrator и Flash имеют схожие свойства. Например, в обоих приложениях можно использовать кернинг, оказывающий влияние на все символы текстового блока, а не на отдельные символы; оба приложения одинаково производят сглаживание текста и поддерживают связь с внешним XML-файлом, содержащим текст.

Типы анимации в компьютерной графике

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

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

  • Традиционная анимация.
  • 2D векторная анимация.
  • 3D компьютерная анимация.
  • Графика движения.
  • Стоп моушен.

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

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

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

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

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

Это также называется генерируемые компьютером изображения (CGI). Они возникают, когда компьютерные аниматоры создают поток изображений, которые сводится воедино, чтобы сформировать анимацию. Объединение динамических и статических изображений выполняется с использованием компьютерной графики. Персонажи, созданные в 3D, в цифровом формате отображаются на экране, а затем объединяются с каркасом, что позволяет анимировать каждую модель по-разному.

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

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

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

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

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

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

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

Существует много форм стоп моушен анимации, включая Cut-Outs, Claymation and Puppets и другие. Но суть в том, что для создания анимации объекты, которые должны перемещаться, фотографируются последовательно много раз.

Данная публикация представляет собой перевод статьи «Types of Animation in Computer Graphics» , подготовленной дружной командой проекта Интернет-технологии.ру

Лучшие бесплатные программы для 2d анимации

Иванова Наталья | Обновлена 2019-02-07 | Дополнения, программы |

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

Их также объединяет еще одна общая черта – все они бесплатные (software).

  1. Pensil – эта программа не требует установки. Отлично работает на плтформах Windows, Mac OS X and Linux. pensil является альтернативой программе Toon Boom. В ней вы можете создавать рисованные образы мультипликационных героев и оживить их, превратив в 2d анимацию. Вы будете довольны набором векторных и растровых инструментов для обработки изображений и создании их с “нуля”. Рисуйте пером, кистью, создавайте фигуры при помощи “ломаной линии”. В нижней части программы вы увидите шкалу, здесь нужно создавать кадры вашей будущей 2d анимации. Дополнительные возможности:
    • импорт фона или рисуем вручную,
    • копировать и вставлять новый кадр с исходным изображением,
    • работа со слоями,
    • добавить аудио для экспорта в формате swf.

      Скачать Pensil  с официального сайта.

  • Synfig Studio – функционал этой программы позволяет создавать качественную 2d анимацию, наподобие той, которую вы видите в художественных фильмах. Не смотря на это, программа остается совершенно бесплатной. Особенности программы Synfig Studio:
    • множество функций, таких как наложение градиента, фильтры, геометрические фигуры, искажения, инструменты для создания фракталов и пр.
    • Поддержка векторных элементов.

    Платформы: Windows, Mac OS X and Linux.

    Скачать Synfig Studio

  • Tupi имеет простой интерфейс, так что даже 8-летний ребенок поймет как в ней работать. Здесь множество готовых объектов и элементов, из которых можно создавать собственные картинки и анимировать их. Tupi прекрасно работает с вектором. Платформа – только Linux!

    Скачать Tupi
  • Scratch – образовательная программа, она поможет детям обрести первые навыки создания анимации. Платформы – Windows, Mac OS X and Linux

    Скачать Scratch
  • На нашем Портале графики вы узнаете все о Photoshop и обо всем, что связано с дизайном. Все уроки имеют подробное описание и скриншоты, поэтому будут особенно полезны для начинающих дизайнеров. Вы познакомитесь и с другими программами графики и работой в них. Например, Gimp - отличный бесплатный редактор, в котором вы можете проводить полноценную обработку фото. Наша коллекция дополнений сделает вашу работу более легкой и приятной. Вы можете стать нашим соавтором и заработать. Добавляйте новости на сайт через удобную форму обратной связи, размещать дополнения фотошоп со ссылкой на файлообменники. Если вам понравились наш сайт, то не забудьте подписаться на рассылку или rss, поделиться с друзьями в социальных сетях или добавить в закладки!

    Урок 25Растровая и векторная анимация

    Главная | Информатика и информационно-коммуникационные технологии | Планирование уроков и материалы к урокам | 7 классы | Планирование уроков на учебный год (по учебнику Н.Д. Угриновича) | Растровая и векторная анимация

    § 3.3. Растровая и векторная анимация

    3.3. Растровая и векторная анимация

    Практическая работа 3.3. Задание 1

    Практическая работа 3.3. Задание 2

    Практическая работа 3.3. Задание 3

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

    Анимация. При работе с растровыми изображениями и векторными рисунками широко используется анимация, т. е. создание иллюзии движения объектов на экране монитора. Компьютерная анимация использует быструю смену кадров (как это делается в кино), которую глаз человека воспринимает как непрерывное движение. Чем большее количество кадров меняется за одну секунду (в кино в секунду сменяется 24 кадра), тем более полная иллюзия движения возникает у человека.

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

    Рис. 3.15. Последовательность кадров для создания анимации

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

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

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

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

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

    Например, для получения анимации, демонстрирующей вращение Земли вокруг своей оси (рис. 3.16), необходимо: 1) в растровом графическом редакторе создать последовательность растровых изображений фаз ее вращения; 2) в GIF-аниматоре собрать из этих изображений анимацию.

    Рис. 3.16. Последовательность кадров в GIF-анимации, демонстрирующей вращение Земли

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

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

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

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

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

    Рис. 3.17. Последовательность кадров flash-анимации преобразования синего квадрата в зеленый треугольник и красный круг

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

    Достоинством flash-анимации является небольшой информационный объем файлов, и поэтому flash-анимация широко используется на Web-сайтах в Интернете. Для разработки flash-анима- ции используются специализированные flash-редакторы (например, Adobe Flash), которые сохраняют анимационные файлы в специализированном формате FLA.

    * На рис. 3.17 синий, зеленый и красный цвета переданы оттенками серого.

    Контрольные вопросы

    1. Объясните технологию создания компьютерной анимации.

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

    3. Как можно ускорить или замедлить GIF-анимацию?

    4. В чем состоит различие между ключевыми и обычными кадрами flash-анимации?

    Cкачать материалы урока


    Смотрите также