Основы программы Adobe Animate

ДЕПАРТАМЕНТ ОБРАЗОВАНИЯ И НАУКИ города МОСКВЫ

ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ПРОФЕССИОНАЛЬНОЕ

ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ города МОСКВЫ

«МОСКОВСКИЙ ИЗДАТЕЛЬСКО-ПОЛИГРАФИЧЕСКИЙ

КОЛЛЕДЖ имени ИВАНА ФЕДОРОВА»

Основы программы  

Adobe Animate

Курс лекций

для студентов специальностей
 54.02.01 Дизайн (по отраслям), 
55.02.02 Анимация (по видам)

Москва

2020

УДК 7.021.23
ББК 85с
 
О75

Составитель М. А. Дорощенко

Основы программы Adobe Animate : курс лекций : [для студентов специальностей 54.02.01 Дизайн 
(по отраслям), 55.02.02 Анимация (по видам)] / сост. Марина Александровна Дорощенко. – Москва : ГБПОУ 
МИПК им. И. Федорова, 2020. – 56 с.

УДК 7.021.23
ББК 85с

О75

ОГЛАВЛЕНИЕ

Введение   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .4

Базовые установки проекта  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .5
Изучение окна Adobe Animate   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .6
Создание графики  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .8

Кривые Безье . Техника рисования и редактирования кривых Безье  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .9

Выделение объектов  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .10
Вспомогательные элементы  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .11

Выравнивание с привязкой   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .12

Работа с цветом в Adobe Animate  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .14
Инструменты для работы с цветом   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .16

Создание градиентов  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .17

Преобразование объектов   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .18
Работа с группами, символами и экземплярами  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .20

Создание групп  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .20
Упорядочивание нескольких групп  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .20
Открытие панели Library (Библиотека)  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .21
Создание символов .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .22
Выбор точки регистрации  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .23
Использование символов графики  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .23
Использование символов кнопки  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .24
Использование символов фрагмента ролика  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .25
Создание экземпляров  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .26
Преобразование экземпляров  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .27

Работа с текстом  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .29

Создание классического статического текста  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .29
Создание классического динамического и вводимого текста  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .30

Импортирование графики  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .31

Векторная и растровая графика  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .31

Создание покадровой анимации  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .33

Создание простой покадровой анимации  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .34

Анимация движения  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .36

Применение наборов настроек движения  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .37
Создание анимации движения  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .38

Использование классической анимации движения  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .40

Изменение частоты кадров  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .41

Работа с анимацией формы  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .43

Использование анимации формы  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .43
Использование инверсной кинематики  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  . 44

Создание масок  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .48
Работа со звуком  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .50
Инструменты Adobe Animate   .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .53

Список источников  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .  .55

ВВЕДЕНИЕ 

Adobe Animate (более раннее название — Macromedia Flash), или просто Flash, — это мульти
медийная платформа компании Adobe для создания веб-приложений или мультимедийных презентаций . Мультимедийная платформа Flash используется для создания рекламных баннеров, 
анимации, игр, а также для воспроизведения видео- и аудиозаписей на веб-страницах .

Animate — одновременно мощное по функционалу и простое в использовании средство 

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

Разработка технологии Flash была начата компанией FutureWave, которая создала пакет ани
мации FutureSplash Animator . В 1996 году компания FutureWave была приобретена компанией 
Macromedia, а FutureSplash Animator была переименована в Flash . В свою очередь, в 2005 году 
компания Macromedia была поглощена Adobe и технология Macromedia Flash стала официально 
называться Adobe Animate .

Свою популярность и признание Flash приобрела после того, как корпорация Macromedia 

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

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

Прежде всего технология Flash предназначена для создания анимации . Для создания непод
вижной графики существуют Adobe Photoshop, Adobe Illustrator, Adobe Freehand, Adobe Fireworks 
и другие программы .

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

БАЗОВЫЕ УСТАНОВКИ ПРОЕКТА

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

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

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

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

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

Программа состоит из двух частей . Первая является средой редактирования, в которой созда
ется приложение, имеющее расширение  .fla . Вторая часть — это проигрыватель, который обрабатывает, отображает и воспроизводит приложение, записанное в виде SWF-файлов (Small Web 
File — небольшой веб-файл) .

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

При первом запуске Animate вне зависимости от версии на экране появляется стартовое меню, 

разделенное на несколько категорий: Open Recent Files (Открыть ранее созданные документы), 
Learn (Cправка), Create New (Cоздать новый) .

Рис . 1 . Окно-приветствие Adobe Animate

ИЗУЧЕНИЕ ОКНА ADOBE ANIMATE 

При запуске Animate появляется окно программы, состоящее из нескольких окон с динамич
ным размером, которые можно использовать для создания контента . Среди них — Timeline (Временная шкала), рабочая область, Properties (Свойства) и другие панели .

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

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

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

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

Окно документа отображает открытые документы Animate, включает в себя временную 

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

Временная шкала организует медиаэлементы и управляет ими в пределах линейной шкалы 

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

Рабочая область — это видимая часть ролика, в которой пользователь определяет, 

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

Рис . 2 . Элементы окна Adobe Animate