Вы находитесь на странице: 1из 127

МИНИСТЕРСТВО ОБРАЗОВАНИЯ РЕСПУБЛИКИ БЕЛАРУСЬ

БЕЛОРУССКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ


ФАКУЛЬТЕТ СОЦИОКУЛЬТУРНЫХ КОММУНИКАЦИЙ
Кафедра информационных технологий

С.В. ЦАРИК
ADOBE EDGE ANIMATE.
ОСНОВЫ РАБОТЫ
Учебные материалы
по дисциплине «Программное обеспечение интерактивных
приложений» для студентов, обучающихся по специальности
1-31 03 37 «Прикладная информатика (по направлениям)»

Минск, 2015
УДК
ББК
Ц 18
Автор
доцент кафедры информационных технологий
факультета социокультурных коммуникаций
Белорусского государственного университета
к.т.н. С.В. Царик

Рецензент

Рекомендовано
Советом факультета социокультурных коммуникаций БГУ

Царик, С.В. Программное обеспечение интерактивных приложений: учебные


материалы для студентов, обуч. по спец. 1 – 31 03 37 «Прикладная информатика (по
направлениям)» / С.В. Царик. – Минск: БГУ, 2015. – 127 с.
Пособие содержит учебный материал по основам работы в программе Adobe
Edge Animate для создания графики, анимации и интерактивного контента для веб-
сайтов, цифровых публикаций с использованием HTML, JavaScript и CSS.
Адресуется студентам специальности «Прикладная информатика»
факультета социокультурных коммуникаций БГУ. Может быть использована в
процессе подготовки студентами других специальностей, будущими веб-дизайнерам,
дизайнерам интерактивного контента и веб-разработчикам.

УДК
ББК
© С.В. Царик

2
Содержание
ВВЕДЕНИЕ...........................................................................................................................5
СТРАНИЦА ПРИВЕТСТВИЯ ПРОГРАММЫ ADOBE EDGE ANIMATE ....................6
Действия с файлами .........................................................................................................6
Информационные и справочные ресурсы......................................................................8
Горячие клавиши............................................................................................................12
ПРОЕКТ ADOBE EDGE ANIMATE.................................................................................18
Создание нового проекта...............................................................................................18
Структура проекта..........................................................................................................19
Шаблоны .........................................................................................................................20
ИНТЕРФЕЙС ПРОГРАММЫ ADOBE EDGE ANIMATE .............................................23
Панели .............................................................................................................................23
Управление панелями ....................................................................................................25
Рабочее пространство ....................................................................................................28
МАНИПУЛИРОВАНИЕ ОБЪЕКТАМИ..........................................................................31
Сцена (Stage) ................................................................................................................ 31
Панель инструментов (Tools) ........................................................................................34
Создание объектов .........................................................................................................35
Прямоугольник (Rectangle Tool)...................................................................................36
Инструмент Selection (Выделение)...............................................................................37
Выделение объектов ..................................................................................................38
Перемещение объектов .............................................................................................40
Трансформирование объектов..................................................................................40
Инструмент Transform (Трансформация).....................................................................41
Изменение размеров...................................................................................................42
Вращение.....................................................................................................................43
Центр вращения.........................................................................................................45
Наклон .........................................................................................................................45
Панель свойств (Properties) ...........................................................................................46
Система координат ..................................................................................................49
Перемещение ..............................................................................................................50

3
Изменение размеров...................................................................................................51
Зеркальное отображение..........................................................................................53
Вращение.....................................................................................................................54
Центр вращения.........................................................................................................55
Наклон .........................................................................................................................56
СВОЙСТВА ГЕОМЕТРИЧЕСКИХ ПРИМИТИВОВ .....................................................59
Свиток Corners (Углы) ...................................................................................................61
Одна степень свободы...............................................................................................63
Четыре степени свободы..........................................................................................66
Восемь степеней свободы .........................................................................................68
Свиток Color (Цвет) .......................................................................................................72
Background Color (Цвет заливки) .............................................................................72
Gradient (Градиент)...................................................................................................75
Линейная градиентная заливка ........................................................................................78

Радиальная градиентная заливка .....................................................................................81

Пользовательская градиентная заливка ............................................................................83

Border (Граница).........................................................................................................85
ТЕКСТ .................................................................................................................................86
Форматирование текстовых блоков..............................................................................87
Редактирование текстовых блоков ...............................................................................90
СРЕДСТВА КОНТРОЛЯ ПОСТРОЕНИЙ.......................................................................94
Направляющие ...............................................................................................................94
Интеллектуальные направляющие ...............................................................................97
Выравнивание...............................................................................................................100
Распределение ..............................................................................................................102
ОБЪЕКТЫ, ГРУППЫ, СИМВОЛЫ ...............................................................................107
Панель Elements (Элементы).......................................................................................107
Группы и символы .......................................................................................................112
Импорт изображений ...................................................................................................117
ЗАКЛЮЧЕНИЕ ................................................................................................................119
ЛИТЕРАТУРА ............................................................................................................. 120
_

4
Введение
HTML5 — это открытая платформа для создания веб-приложений, активно
использующая аудио, видео, сложную графику, анимацию и многое другое. Толчком
развитию платформы дала политика Apple, руководство которой отказалось от Flash-
графики в своих устройствах. С учетом рыночной доли использующих iOS
мобильных устройств и масштаба распространения Flash такое решение значительно
изменило рынок.
Активный переход на HTML5 породил всплеск интереса к соответствующему
программному обеспечению. Компания Adobe, учитывая особенности целевой
аудитории, отнюдь не стремящейся погружаться в программирование, деятельно
участвовала в процессе разработки редактора Edge Animate, который позволил
создавать сложную анимацию, не уступающую Flash, но средствами HTML5. В
Adobe подчеркивали, что Edge Animate не призван стать заменой Flash — у каждой
технологии остается своя ниша.
Edge Animate предоставляет удобный пользовательский интерфейс для задания
параметров анимации через каскадные стили (CSS). Поскольку все современные
браузеры для воспроизведения CSS-анимации используют GPU (графический
сопроцессор), это снижает нагрузку на центральный процессор и дает существенный
выигрыш производительности, позволяя создавать сложный и насыщенный
динамикой контент.
По сравнению с Flash в Edge Animate неизменными остались структура меню,
элементы пользовательского интерфейса и сам подход. Работа в редакторе построена
по тому же принципу, что и в Adobe Flash: на временной панели отображаются
ключевые кадры анимации каждого объекта. Существует масса библиотечных
заготовок. Например, плавный въезд/выезд, вращение, отскок и т.п. Для удобства у
каждого ключевого кадра сразу же отображаются координаты объекта,
поддерживается внедрение собственно javascript-кода.
Таким образом, Adobe Edge Animate (An) — это новая программа для создания
графики, анимации и интерактивного контента для веб-сайтов с использованием
HTML, JavaScript и CSS. Edge Animate доступен, прост в использовании и обладает
мощным потенциалом. Edge Animate идеален для использования веб-дизайнерами,
дизайнерами интерактивного контента и веб-разработчиками, которые хотят
добавить энергии и привлекательности своим сайтам.
В Edge Animate можно создавать композиции с нуля, используя инструменты для
рисования и работы с текстом, а также импортированную веб-графику.

5
Страница приветствия программы
Adobe Edge Animate
При запуске программа Adobe Edge Animate CC открывается в стандартном виде
окна приложения Windows со страницей приветствия (рис. 1).

Рис. 1. Окно программы Adobe Edge Animate CC со страницей приветствия

Основными элементами окна Adobe Edge Animate CC являются:


Заголовок окна с тремя кнопками управления размером окна, расположенными
справа: Закрыть, Развернуть, Свернуть.
Строка меню (Menu Bar). Каждое меню содержит множество дополнительных
команд, которые открывают подменю, выводят на экран окна диалога или
выполняют конкретные команды.
Рабочая область, разделенная по вертикали на две части: слева команды по
работе с файлами, справа информационные и справочные материалы.

Действия с файлами
Рассмотрим левую часть рабочей области страницы приветствия окна программы
(рис. 1). Здесь находятся команды для начала работы с файлами: Open File… (Открыть
файл…), Create New (Создать новый), Create from Template (Шаблон).
Для того чтобы начать работать с файлом можно выполнить одно из действий
используя список команд по работе с файлами:

6
Open File… (Открыть файл…) — открыть диалоговое окно Open (Открыть) (рис.
2), позволяющее выбрать существующий файл и открыть его.

СОВЕТ
Для того чтобы открыть существующий файл можно также воспользоваться
командой меню File Open… (Файл Открыть…) или воспользоваться комбинацией
горячих клавиш Ctrl + O.

Create New (Создать новый) — создать пустой документ формата HTML.


Create from Template (Шаблон) – открыть диалоговое окно Templates (Шаблоны)
(рис. 13), позволяющее выбрать подходящий для вашего документа шаблон.
Recent Files (Недавние файлы) — содержит список имен файлов, которые недавно
открывались в программе Adobe Edge Animate CC.
Поскольку программа Adobe Edge Animate CC используется для создания веб-
страниц, то диалоговое окно Open (Открыть) (рис. 2) позволяет выбрать в одном из
форматов HTML-документов (html, htm) существующий файл и открыть его.

Рис. 2. Окно диалога Open (Открыть)

Программа Adobe Edge Animate CC так же создает файл описания документа в одном
из своих форматов Edge Animate File (.an или .edge), который так же можно открыть
для работы.
Пункт меню File (Файл) так же содержит команды для работы с файлами:
File New (Файл Новый) — создает новый пустой документ формата HTML.

7
File Open… (Файл Открыть…) — открывает окно диалога Open (Открыть) (рис.
2) для выбора и открытия существующего файла в одном из форматов: .html,
.htm, .an или .edge.
File Create from template… (Файл Шаблон…) — открыть диалоговое окно
Templates (Шаблоны) (рис. 13), позволяющее выбрать подходящий для создания
нового документа шаблон.
File Exit (Файл Выход) — закрывает окно приложения программы Adobe Edge
Animate CC.

Информационные и справочные ресурсы


Рассмотрим правую часть рабочей области страницы приветствия окна программы
(рис. 1). Правая часть рабочей области окна программы Adobe Edge Animate CC при
запуске содержит информационные и справочные материалы, содержащиеся в
следующих четырех разделах:
What’s New (Что нового) — раздел содержит информацию о последнем релизе
программы и тех возможностях, которые были добавлены. Для более детального
ознакомления существует гиперссылка Read more here или Read the full Edge
Animate release notes, открывающая в окне браузера веб-страницу обучения и
поддержки Learn & Support по работе с продуктами компании Adobe
(https://helpx.adobe.com/edge-animate/release-note/cc-version-2014.html).
Getting Started (Начало работы) — раздел содержит галерею из одиннадцати
уроков, обучающих базовым действиям работы в программе Adobe Edge Animate
CC. Каждый урок содержит пошаговую иллюстрированную инструкцию и
необходимый материал для успешного освоения основ работы в программе.
Resources (Ресурсы) — раздел содержит список Интернет-ресурсов компании
Adobe посвященных урокам, обучению и общению.
Quiet (Без информации) представляет собой пустой раздел и может быть
использован в тех случаях, когда вы хотите, чтобы при открытии программы
Adobe Edge Animate CC рабочая область не содержала никакой дополнительной
информации за исключением левой части, содержащей команды по работе с
файлами.
Таким образом, если вы выберите один из разделов вначале при открытии
программы Adobe Edge Animate CC, то в следующий раз, при запуске программы,
окно программы Adobe Edge Animate CC будет выглядеть с учетом выбранного в
последний раз раздела.
Рассмотрим содержимое разделов Getting Started (Начало работы) и Resources
(Ресурсы) подробнее.
Раздел Getting Started (Начало работы) содержит следующие уроки (рис. 3):
Quick Start (Быстрый старт) — урок знакомит с программой Adobe Edge Animate
CC за два шага.

8
Create (Создать) — урок посвящен основам работы с такими объектами
программы Adobe Edge Animate CC как геометрические формы, текст и
изображения.
Animate I (Анимация 1) — в уроке рассказывается про использование анимации с
помощью ключевых кадров.
Animate II (Анимация 2) — урок продолжает знакомить с возможностями
автоматизации анимации.
Responsive Layout (Адаптивный дизайн) — урок содержит информацию о том, как
сделать так, чтобы элементы композиции веб-страницы автоматически
перестраивались в зависимости от размеров окна браузера.
Motion Paths (Пути движения) — урок продолжает знакомить с возможностями
организации анимации по сложным траекториям.
Audio (Аудио) — в уроке рассматриваются возможности встраивания звуковых и
музыкальных файлов.
Video (Видео) — урок содержит информацию о возможностях добавления и
способах организации управления видео файлами.
Sprite Sheets (Спрайты изображений) — урок знакомит с созданием анимации с
помощью спрайтов изображений.
Extend (Расширение) — урок представляет собой краткий экскурс, посвященный
основам интерактивности и организации взаимодействия с пользователем.
Reuse (Повторное использование) — урок знакомит с возможностями создания
объектов в виде символов для многократного повторного использования.

9
Рис. 3. Окно программы Adobe Edge Animate CC с выбранным информационно-справочным
материалом раздела Getting Started (Начало работы)

Приведенный список уроков раздела Getting Started (Начало работы) охватывает все
базовые умения и навыки, которые необходимы для практического ознакомления с
принципами и методами работы в программе Adobe Edge Animate CC.
Для получения дополнительной и новейшей информации о возможностях
программы, обучению работе в программе, профессионального общения со
специалистами и пользователями программы рекомендуется использовать
официальные ресурсы компании Adobe.
Раздел Resources (Ресурсы) содержит следующий список гиперссылок на
официальные информационно-справочные ресурсы компании Adobe (рис. 4):
Edge Animate Help and Tutorials (Справка и Уроки) — веб-ресурс
(https://helpx.adobe.com/edge-animate.html), посвященный поддержке и обучению
программе Adobe Edge Animate CC.
Learn Edge Animate on Adobe TV (Канал Интернет-телевидения компании Adobe) —
веб-ресурс (https://helpx.adobe.com/edge-animate/tutorials.html), посвященный
обучению работе в программе Adobe Edge Animate CC.
Get Answer from Community (Форум сообщества пользователей) — веб-форум
(https://forums.adobe.com/community/edge_animate) пользователей программы
Adobe Edge Animate CC.
View and download samples (Примеры работ) — галерея
(http://html.adobe.com/edge/animate/showcase.html) проектов, созданных с
помощью программы Adobe Edge Animate CC. Имеется возможность
просмотреть готовые работы и скачать их исходный кодом.

10
Edge Animate JavaScript API (Разработка веб-приложений) — веб-ресурс
(http://www.adobe.com/devnet-docs/edgeanimate/api/current/index.html) посвящен
программному интерфейсу для установки веб-приложений и для управления
коллекцией установленных веб-приложений на стороне клиента.
Adobe Add-Ons (Дополнения) — коллекция дополнений, шаблонов к продуктам
компании Adobe.

Рис. 4. Окно программы Adobe Edge Animate CC с выбранным информационно-справочным


материалом раздела Resources (Ресурсы)

11
Горячие клавиши
В пункте меню Edit (Правка) в окне страницы приветствия программы Adobe Edge
Animate CC (рис. 1) содержится команда Keyboard Shortcuts… (Горячие клавиши…).
Выполнение команды Edit Keyboard Shortcuts… (Правка Горячие клавиши…)
приводит к открытию диалогового окна Keyboard Shortcuts (Горячие клавиши) (рис. 5).

Рис. 5. Окно Keyboard Shortcuts (Горячие клавиши)

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


команды (Command):
Edit (Правка) — повторяет пункт меню Edit (Правка) и содержит список команд
редактирования, копирования, вставки.
File (Файл) — содержит список команд по работе с файлами: создать, открыть,
закрыть и т.д. из пункта меню File (Файл).
Help (Справка) — содержит только две команды: About Edge Animate (О программе
Edge Animate) и Change Language (Выбрать язык), которые выводят окно диалога
с информацией о текущей версии программы и окно диалога со списком
возможных языковых локализаций интерфейса.
Modify (Модифицировать) — содержит список команд по группированию,
упорядочиванию и выстраиванию объектов, расположенных на сцене и
повторяют команды пункта меню Modify (Модифицировать).
Stage (Сцена) — содержит список команд по перемещению выбранных объектов
на сцене влево, вправо, вверх, вниз.
Template (Шаблон) — содержит две команды: CreateNewCompFrom (Создать новую
композицию из выделенных объектов) и Save As (Сохранить как).
Timeline (Шкала времени) — содержит список команд по созданию ключевых
кадров практически для всех параметров объектов, которые могут быть
использованы в программе Adobe Edge Animate.

12
СОВЕТ
Удобство назначения и использования горячих клавиш из списка Timeline (Шкала
времени) состоит в том, что это позволяет сильно сэкономить время и не распылять
внимание на поиски, например, требуемого параметра для ключевого кадра на
панелях программы. Достаточно выбрать объект на сцене и нажать комбинацию
клавиш для создания у требуемого параметра объекта ключевого кадра.

Tool (Инструмент) — содержит список инструментов Tools (Панели


инструментов) и горячие клавиши для их быстрого выбора.
Transport (Воспроизведение) — содержит команды управления проигрыванием
анимации на шкале времени.
View (Вид) — содержит список команд по настройке масштаба отображения
сцены, линеек, направляющих и других вспомогательных средств из пункта
меню View (Вид).
Window (Окно) — повторяет пункт меню Window (Окно) и содержит список
команд управления внешним видом и элементами окна приложения программы
Adobe Edge Animate.
Workspace (Рабочая область) — содержит команды по созданию, удалению и
восстановлению рабочей области окна программы Adobe Edge Animate.
Таким образом, окно диалога Keyboard Shortcuts (Горячие клавиши) (рис. 5) содержит
полный список команд позволяющих организовать оперативное выполнение
действий с помощью клавишных комбинаций быстрого вызова. Большинство команд
уже имеют клавишные комбинации быстрого вызова (Shortcut), которые совпадают с
сокращенными клавиатурными командами для общепринятых действий в любых
других программах, например, команде Copy (Копировать) соответствует
клавиатурная комбинация Ctrl+C.

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

Для того чтобы задать клавишную комбинацию быстрого вызова необходимо:


1. Выбрать в списке команд требуемую группу и развернуть содержимое группы,
щелкнув на пиктограмме в виде треугольника направленного вершиной вправо
(рис. 5) и затем щелкнуть на названии требуемой команды (рис. 6).
2. Щелкнуть на кнопке Add (Добавить) (рис. 6), расположенной под списком команд
справа внизу.
3. Нажать на клавиатуре желаемую клавишную комбинацию быстрого вызова.
В результате сокращенная комбинация команд будет записана в строке справа от
выбранной команды в столбец Shortcut (Сокращенная клавиатурная команда) (рис. 6).

13
Рис. 6. Окно Keyboard Shortcuts (Горячие клавиши) и пример задания сокращенной
клавиатурной комбинации (Ctrl+Shift+=) для команды Align Horizontal Center (Выстроить
горизонтально посередине)

Если вдруг заданная клавишная комбинация уже назначена другой команде, то об


этом будет выведено сообщение-предупреждение «The shortcut Shortcut was already in
use for command Command. It has been removed from that command» («Данная клавишная
комбинация быстрого вызова уже использовалась для следующей команды и
приводится название команды. Клавишная комбинация быстрого вызова удалена для
указанной команды») (рис. 7).
Например, если попытаться задать клавишную комбинацию быстрого вызова Ctrl+C
для команды Align Horizontal Center (Выстроить горизонтально посередине) из группы
команд Modify (Модифицировать), то в окне диалога Keyboard Shortcuts (Горячие
клавиши) будет выведено сообщение-предупреждение «The shortcut «Ctrl+C» was already
in use for command «Edit > Copy». It has been removed from that command» («Данная
клавишная комбинация быстрого вызова «Ctrl+C» уже использовалась для команды
«Edit > Copy». Клавишная комбинация быстрого вызова удалена для указанной
команды») (рис. 7).

14
Рис. 7. Окно Keyboard Shortcuts (Горячие клавиши) и пример сообщения-предупреждения при
попытке задания сокращенной клавиатурной комбинации (Ctrl+C) для команды Align
Horizontal Center (Выстроить горизонтально посередине)

В результате клавишная комбинация быстрого вызова «Ctrl+C» будет удалена для


команды «Edit > Copy» и назначена для команды «Modify > Align Horizontal Center».
Для того чтобы посмотреть и убедится с какой командой возник конфликт нужно
щелкнуть на кнопке Go To Conflict (Перейти к конфликту) (рис. 7). В результате
перехода в окне Keyboard Shortcuts (Горячие клавиши) в списке команд отобразится
конфликтная команда.
Таким образом, можно убедиться, что клавишная комбинация быстрого вызова
больше не используется предыдущей командой. Если вы не согласны с такими
изменениями, то нажмите кнопку Undo (Отмена) (рис. 7), и повторите действия по
назначению сокращенной клавиатурной команды.
Для того чтобы удалить клавишную комбинацию быстрого вызова команды
необходимо выбрать команду в списке команд и нажать Remove All (Удалить) или
щелкнуть на пиктограмме крестика , расположенного в строке команды справа от
сокращенной клавиатурной комбинации столбца Shortcut (Сокращенная клавиатурная
команда) (рис. 7).

СОВЕТ
Если вы удалили случайно по ошибке нужную клавиатурную комбинацию
быстрого вызова, то немедленно щелкните по кнопке Undo (Отменить). Действие
Undo (Отменить) возвращает последнее изменение, добавление или удаление
клавишной комбинации быстрого вызова.

Для того чтобы восстановить клавишные комбинации быстрого вызова, которые


были назначены командам в программе Adobe Edge Animate по умолчанию,
необходимо в окне диалога Keyboard Shortcuts (Горячие клавиши) из выпадающего
списка Keyboard Layout Presets (Наборы сокращенных клавиатурных команд) выбрать
вариант Default Set (read-only) (Стандартный набор (только чтение)) (рис. 8).

15
Рис. 8. Окно Keyboard Shortcuts (Горячие клавиши) и пример выбора набора Default Set (read-
only) (Стандартный набор (только чтение)) клавишных комбинаций быстрого вызова

Для того чтобы сохранить созданный персональный набор сокращенных


клавиатурных команд необходимо:
1. Щелкнуть на кнопке Save the current shortcut set under a new name (Сохранить
текущий набор комбинаций клавиш под новым именем) (рис. 8).
2. В открывшемся окне диалога Save Keyboard Layout Preset (Сохранение набора
комбинаций клавиш) в текстовом поле Preset Name (Название набора) ввести имя
для персонального набора сокращенных клавиатурных команд (рис. 9).
3. Подтвердить создание и сохранение набора щелчком на кнопке Save (Сохранить)
(рис. 9).

Рис. 9. Окно Save Keyboard Layout Preset (Сохранение набора комбинаций клавиш)

В результате набор комбинаций клавиш будет сохранен в .XML файл с именем


MyShortcuts.xml. Например, для операционной системы Windows 7, местом хранения
будет каталог
Учетная запись\Roaming\Adobe\Edge Animate\4.0.0\Shortcuts\.
Для того чтобы загрузить персональный набор сокращенных клавиатурных команд
необходимо в окне диалога Keyboard Shortcuts (Горячие клавиши) из выпадающего
списка Keyboard Layout Presets (Наборы сокращенных клавиатурных команд) выбрать
требуемый вариант (рис. 8).
Для того чтобы удалить персональный набор сокращенных клавиатурных команд
необходимо выполнить следующие действия:

16
1. Выбрать из выпадающего списка Keyboard Layout Presets (Наборы сокращенных
клавиатурных команд) требуемый вариант, щелкнув на его названии мышкой.
2. Щелкнуть на кнопке Delete the current keyboard shortcut set (Удалить текущий
набор комбинаций клавиш) (рис. 9).
3. В открывшемся окне диалога Edge Animate с сообщением-предупреждением «Are
you sure you want to delete the current shortcut set? This cannot be undone.» («Вы уверены,
что хотите удалить текущий набор комбинаций клавиш? Это действие нельзя
будет отменить.») щелкнуть на кнопке Yes (Да) для подтверждения намерения
удалить выбранный набор комбинаций клавиш (рис. 10).

Рис. 10. Окно диалога Edge Animate с сообщением-предупреждением

В заключение хочется обратить внимание на кнопку Copy To Clipboard (Копировать в


буфер) окна диалога Keyboard Shortcuts (Горячие клавиши) (рис. 8), которая позволяет
получить полный список команд и их сокращенных клавиатурных комбинаций в
виде текстового документа. Щелкнув на кнопке Copy To Clipboard (Копировать в
буфер) мышью, список команд с их клавишными комбинациями быстрого доступа
будут скопированы в буфер обмена данными операционной системы, откуда эту
информацию можно вставить в любой текстовый редактор, например, в Блокнот
(Notepad). Список Default Set (Стандартный набор) сокращенных клавиатурных
команд представлен в Приложении.

17
Проект Adobe Edge Animate
Adobe Edge Animate является инновационным инструментом, который предоставляет
среду разработки для создания насыщенного, анимированного и интерактивного
контента для веб. Проекты, создаваемые в программе Adobe Edge Animate
основываются на современных веб стандартах использующих HTML5, CSS3 и
JavaScript.

Создание нового проекта


При запуске программы Adobe Edge Animate первым появляется экран приветствия,
подробно описанный ранее. В левой части экрана находится набор команд по
созданию и открытию файлов (рис. 1): Open File… (Открыть файл…), Create New
(Создать новый).
Для того чтобы создать новый файл, проект Adobe Edge Animate щелкните
указателем мыши на пиктограмме Create New (Создать новый) (рис. 1).
В результате будет создан новый HTML документ Untitled.html (рис. 11).

Рис. 11. Окно программы Adobe Edge Animate с новым Untitled.html пустым HTML
документом

СОВЕТ
Новый пустой документ формата HTML можно создать командой меню File New
(Файл Новый) или воспользоваться комбинацией горячих клавиш Ctrl + N.

18
Структура проекта
Поскольку программа Adobe Edge Animate для создания проектов использует
возможности HTML5, CSS3 и JavaScript, то и итоговый проект представляет собой
набор различных файлов (рис. 12).

Рис. 12. Пример структуры файлов и папок для одного проекта, созданного в Adobe Edge
Animate

На рисунке 2.1 приведен пример иллюстрирующий структуру файлов и папок


проекта, созданного в программе Adobe Edge Animate. Исходный файл с
расширением .AN используется непосредственно программой Adobe Edge Animate и
не нужен для открытия проекта в веб-браузере. Основным файлом проекта является
файл с расширением .HTML. Этот файл содержит исходный HTML код с тэгами для
загрузки сцены и ссылкой на JavaScript файл _edgePreload.js. Обычно проект
содержит как минимум три JavaScript файла: _edge.js, _edgeActions.js и
_edgePreload.js.
Файл _edge.js управляет всеми элементами и символами проекта, их структурой,
связями и частями. Этот файл также управляет внешними изображениями и
шрифтами. В файле используется JSON нотация для описания внутренней структуры
композиции.
Файл _edgeActions.js представляет собой JavaScript файл со всеми действиями
(actions), используемыми в проекте.
Файл _edgePreload.js отвечает за процесс загрузки, когда HTML-файл открыт в веб-
браузере. Этот файл координирует процесс загрузки и то, что будет отображаться в
окне веб-браузера, пока HTML-файл не загрузит весь необходимый контент.
Папка edge_icludes включает в себя, так называемую среду выполнения Adobe Edge
Animate композиции, и содержит весь необходимый код и API для запуска

19
композиции и содержит обычно как минимум два файла: edge.4.0.0.min.js и
jquery-2.0.3.min.js.
Папка images используется для организации хранения изображений, которые
являются по отношению к HTML файлу внешними изображениями и загружаются в
окно веб-браузера.

Шаблоны
Для того чтобы создать новый документ можно воспользоваться готовыми
шаблонами для этого щелкните на Create from Template (Шаблон) (рис. 1). В результате
откроется диалоговое окно Templates (Шаблоны) (рис. 13).

Рис. 13. Окно диалога Templates (Шаблоны)

СОВЕТ
Для того чтобы открыть диалоговое окно Templates (Шаблоны) (рис. 13) можно
воспользоваться командой меню File Create from template… (Файл Шаблон…).

По умолчанию программа Adobe Edge Animate CC предоставляет всего лишь один


вариант шаблона оформления HTML-документа.
Для того чтобы выбрать вариант шаблона оформления HTML-документа
необходимо:

20
1. Щелкнуть указателем мыши на его названии или графической миниатюре
изображения шаблона в окне Templates (Шаблоны) (рис. 13).
2. Для завершения выбора щелкнуть на кнопке Open (Открыть).
В результате будет создан новый HTML-документ на основе выбранного варианта
оформления шаблона.
Для того чтобы загрузить существующий файл-шаблон необходимо:
1. Щелкнуть на кнопке Import (Импорт).
2. В открывшемся диалоговом окне Import Template (Импорт шаблона) выбрать
существующий файл шаблона Edge Animate Template (.antmpl) (рис. 14).
3. Щелкнуть на кнопке Open (Открыть).

Рис. 14. Окно диалога Import Template (Импорт шаблона)

Компания Adobe поддерживает онлайн сервис Adobe Add-ons дополнений для своих
продуктов (https://creative.adobe.com/addons). Возможные варианты файлов-шаблонов
Adobe Edge Animate для бесплатного и платного скачивания доступны по ссылке
Browse Templates Online (Обзор шаблонов онлайн) в диалоговом окне Templates
(Шаблоны) (рис. 13). Щелчок на ссылке приведет к открытию в окне Интернет-
обозревателя веб-страницы (https://creative.adobe.com/addons?pp=EDAN&ppv=4.0) со
списком в виде галереи вариантов файлов-шаблонов (рис. 15).
Таким образом, хочется отметить, поскольку результатом создания проекта в
программе Adobe Edge Animate и последующего его сохранение является структура
файлов и папок (рис. 12), необходимо обратить особое внимание на организацию
хранения проектов. Проекты Adobe Edge Animate следует хранить в отдельных
каталогах, чтобы не возникло путаницы в рабочих файлах проекта и папках, которые
носят одинаковые названия для различных проектов.

21
Рис. 15. Веб-страница онлайн сервиса дополнений Adobe Add-ons

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

22
Интерфейс программы Adobe Edge
Animate
Окно программы Adobe Edge Animate представляет собой стандартное окно
приложения Windows с пустой сценой HTML документа в центре. Основными
элементами окна программы Adobe Edge Animate являются (рис. 16):
строка заголовок с тремя кнопками управления размером окна, расположенными
справа: Minimize (Свернуть), Restore Down (Свернуть в окно)/Maximize (Развернуть),
Close (Закрыть);
строка меню (Menu Bar), каждое меню содержит множество пунктов, которые
открывают подменю, выводят на экран диалоговые окна или выполняют
конкретные команды;
панель инструментов (Tools) для создания, выбора и трансформирования
объектов, управления отображением содержимого (контента) сцены в окне
программы;
панели Library (Библиотека), Properties (Свойства), Elements (Элементы) для
отображения и управления объектами, используемыми в проекте;
панель Timeline (Шкала времени) для отображения и управления анимационными
эффектами объектов.

Панели
Если какая-либо панель отсутствует в окне программы Adobe Edge Animate, то для ее
отображения следует выполнить следующие действия:
1. В строке меню выбрать пункт меню Window (Окно), щелкнув на нем мышью.
2. В раскрывшемся списке выбрать название требуемой панели, переведя на него
указатель и щелкнуть мышью.
Выполнение этих действий приведет к установке напротив названия панели флажка и
появления выбранной панели в окне программы Adobe Edge Animate.
Чтобы спрятать панель, выполните такие действия:
1. В строке меню выберите пункт меню Window (Окно).
2. В списке панелей инструментов выберите требуемое название с установленным
флажком, переведите на него указатель и щелкните мышью.
Выбор панели приведет к снятию соответствующего флажка и исчезновению панели
из окна программы Adobe Edge Animate.
Таким образом, для того чтобы настроить интерфейс программы Adobe Edge
Animate, отобразить или скрыть те или иные панели необходимо воспользоваться
пунктом меню Window (Окно) окна программы Adobe Edge Animate.
Кроме перечисленных панелей, используя пункт меню Window (Окно) можно
отобразить в окне программы Adobe Edge Animate следующие панели:

23
Lessons (Уроки) — панель содержит одиннадцать уроков, обучающих базовым
действиям и работе в программе Adobe Edge Animate CC. Каждый урок содержит
пошаговую иллюстрированную инструкцию и необходимый материал для
успешного освоения основ работы в программе. Данная панель повторяет раздел
Getting Started (Начало работы) окна приветствия при запуске программы Adobe
Edge Animate CC (рис. 3).
Code (Редактор кода) — панель содержит код для всей композиции Adobe Edge
Animate как сгенерированный автоматически средой Adobe Edge Animate, так и
написанный вручную.
Окно программы Adobe Edge Animate со всеми панелями может выглядеть,
например, как на рисунке 16.

Рис. 16. Окно программы Adobe Edge Animate со всеми возможными панелями

Для успешной работы необходим следующий минимальный набор панелей (рис. 11):
панель инструментов (Tools);
панель Library (Библиотека);
панель Properties (Свойства);
панель Elements (Элементы);
панель Timeline (Шкала времени).

24
Управление панелями
Управлять отображением панелей можно как с помощью пункта меню Window (Окно),
так и с помощью кнопки вызова меню панели расположенной справа в строке
названия панели. Щелчок на ней приводит к открытию меню со списком возможных
команд по работе с панелью (рис. 17).

Рис. 17. Пример кнопки вызова меню панели

Меню панели содержит следующие команды:


Undock Panel (Отстыковать панель) — действие отстыковывает текущую панель
от рабочей области и представляет панель в виде независимого плавающего окна
приложения Windows. На рис. 16 в таком виде представлена панель Code
(Редактор кода).
Undock Frame (Отстыковать группу) — действие аналогичное предыдущему,
только отстыковывает текущую группу панелей от рабочей области и
представляет группу панелей в виде независимого плавающего окна приложения
Windows.

ПРИМЕЧАНИЕ
После того как отстыковали группу панелей или панель от рабочей области, панель
отображается в виде плавающего окна приложения Windows, с которым можно
производить стандартные действия по перемещению и изменению его размеров.

Close Panel (Закрыть панель) — действие закрывает текущую панель и приводит к


закрытию панели в окне программы Adobe Edge Animate. Данное действие
равносильно команде скрыть панель, когда в строке меню выбирается пункт
меню Window (Окно) и в списке панелей инструментов снимается флажок с
названия панели.

СОВЕТ
Закрыть панель также можно, щелкнув указателем мыши на кнопке в виде крестика
Close (Закрыть), расположенной справа от названия панели.

ПРИМЕЧАНИЕ
Чтобы отобразить панель в окне программы Adobe Edge Animate необходимо
в строке меню выберите пункт меню Window (Окно), щелкнув на нем мышью, и
затем в раскрывшемся списке выбрать название требуемой панели, переведя на него
указатель и щелкнув мышью.

25
Close Frame (Закрыть группу) — действие закрывает текущую группу со всеми
панелями, находящимися в ней. Например, наа рис. 16 панели Library
(Библиотека) и Properties (Свойства) объединены в группы. В результате
указанное действие Close Frame (Закрыть группу) для данной группы панелей
приведет к одновременному закрытию двух панелей.
Maximize Frame (Развернуть группу) — действие разворачивает во все окно
приложения Adobe Edge Animate текущую группу со всеми панелями,
находящимися в ней. Для того чтобы вернуть палитры или группы палитр в
исходный размер необходимо выполнить действие Restore Frame Size
(Восстановить размер группы), в которое превращается действие Maximize Frame
(Развернуть группу) в списке действий меню панели.
Схема разделения рабочей области окна приложения Adobe Edge Animate
представлена на рисунке 18.

Рис. 18. Схема разделения рабочей области окна приложения Adobe Edge Animate

Рабочая область разделена на шесть частей (рис. 18):


Title (Заголовок).
Top (Верх).
Right (Правая часть).
Bottom (Низ).
Left (Левая часть).
Center (Центр).

26
Аналогичным образом делится и пространство панелей. Данные области
используются для позиционирования, пристыковывания панелей относительно
рабочей области и друг друга.
Для того чтобы переместить, пристыковать панель необходимо выполнить такие
действия:
1. Расположить указатель мыши в виде стрелки на заголовке, имени панели,
которую необходимо переместить.
2. Нажать основную клавишу мыши и, не отпуская ее, переместить указатель мыши
в требуемую область. Во время перемещения панель будет оставаться на месте,
указатель мыши примет вид черной стрелки с маленькой пиктограммой
панели справа внизу от стрелки.
3. Когда требуемая принимаемая область сцены или другой панели подсветиться в
виде затененного выделения, отпустите клавишу мыши (рис. 19).
В результате перемещаемая панель будет пристыкована к выбранной части рабочей
области, группы панелей или панели.

Рис. 19. Пример перемещения и пристыковывания панели Library (Библиотека) слева рабочей
области сцены (stage)

ВНИМАНИЕ
Если переместить панель в центральную часть рабочей области, то панель займет
все пространство окна приложения Adobe Edge Animate.

Для того чтобы организовать панели в группу, панель нужно переместить в область
Title (Заголовок) другой панели. В результате будет создана группа панелей. Панели
будут скомпонованы таким образом, что отображаться будет только активная панель,

27
остальные панели группы будут доступны по ярлыкам – названиям панелей (рис. 20).
Переход между панелями осуществляется с помощью наведения указателя мыши на
название панели и щелчка на названии панели мышью.

Рис. 20. Пример группы панелей

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


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

Рабочее пространство
Взаимное расположение панелей и рабочей области в окне программы Adobe Edge
Animate называется рабочее пространство (workspace). Рабочее пространство может
быть сохранено в XML-файл.
Для того чтобы сохранить рабочее пространство необходимо выполнить следующие
действия:
1. В строке меню выберите пункт меню Window (Окно), щелкнув на нем мышью.
2. Выберите в открывшемся списке раздел Workspace (Рабочее пространство),
переведя на него указатель мыши.
3. В открывшемся списке рабочих пространств выберите команду New Workplace…
(Новое рабочее пространство…), переведя на нее указатель мыши и щелкнув
мышью.
4. В открывшемся диалоговом окне New Workplace (Новое рабочее пространство) в
текстовое поле Name (Имя) введите название нового рабочего пространства (рис.
21).
5. Щелкните мышью на кнопке OK.

Рис. 21. Окно диалога New Workspace (Новое рабочее пространство)

СОВЕТ
Давайте понятные названия рабочим пространствам и в последующем вам не
придется долго вспоминать, что это за рабочее пространство.

28
После сохранения, рабочее пространство будет доступно в списке рабочих
пространств меню Window Workspace (Окно Рабочее пространство). Физически
рабочее пространство сохраняется в виде XML-файла описания, например, для
операционной системы Windows 7 в каталоге
Учетная запись\AppData\Roaming\Adobe\Edge Animate\4.0.0\Saved
WorkSpaces\. Всем XML-файлам даются схожие имена UserWorkspace#.xml, где #
— порядковый номер рабочего пространства в списке рабочих пространств меню
Window Workspace (Окно Рабочее пространство). Например, для первого рабочего
пространства Default (По умолчанию) имя файла UserWorkspace1.xml.
Для того чтобы загрузить рабочее пространство необходимо выполнить следующие
действия:
1. В строке меню выбрать пункт меню Window (Окно).
2. Перевести указатель мыши на пункт подменю Workspace (Рабочее пространство).
3. В открывшемся списке рабочих пространств выбрать требуемое название
рабочего пространства, перевести на него указатель и щелкнуть мышью.
В результате будет загружено выбранное рабочее пространство — рабочая область и
панели расположатся в окне программы Adobe Edge Animate надлежащим образом.
Если спустя некоторое время то или иное рабочее пространство больше не нужно, то
его можно удалить.

ВНИМАНИЕ
Удалить можно любое рабочее пространство, кроме текущего рабочего
пространства. Если необходимо удалить текущее рабочее пространство, то сначала
нужно выбрать, сделать активным любое другое рабочее пространство.

Для того чтобы удалить рабочее пространство необходимо:


1. В строке меню выбрать пункт меню Window (Окно).
2. Выбрать пункт подменю Workspace (Рабочее пространство), переведя на него
указатель мыши.
3. В списке действий выбрать Delete Workspace… (Удалить рабочее пространство…),
переведя на него указатель и щелкнуть мышью.
4. В открывшемся окне диалога Delete Workspace (Удаление рабочего пространства)
в выпадающем меню Name (Имя) выбрать название рабочего пространства,
которое необходимо удалить, переведя на него указатель мыши и щелкнув
мышью (рис. 22).
5. Подтвердить удаление выбранного пространства, щелкнув указателем мыши на
кнопке OK.

29
Рис. 22. Окно диалога Delete Workspace (Удаление рабочего пространства)

Работая в программе Adobe Edge Animate в том или ином рабочем пространстве,
иногда необходимо реорганизовать на некоторое время расположение панелей для
удобства работы в данный момент времени. В результате расположение панелей для
текущего рабочего пространства будет изменено.
Для того чтобы вернуться к первоначальному, сохраненному варианту расположения
панелей необходимо выполнить такие действия:
1. В строке меню выбрать пункт меню Window (Окно).
2. Выбрать пункт подменю Workspace (Рабочее пространство).
3. В списке действий выбрать Reset Workspace… (Восстановить рабочее
пространство…), переведя на него указатель и щелкнув мышью.
4. В открывшемся окне диалога Reset Workspace (Восстановление рабочего
пространства) будет выведено предупреждение «Are you sure you want to reset
Workspace to its original layout?» («Вы действительно уверены, что хотите
восстановить рабочее пространство в исходную схему расположения?»).
Подтвердите действие, щелкнув указателем мыши на кнопке Yes (Да) (рис. 23).

Рис. 23. Окно диалога Reset Workspace (Восстановление рабочего пространства) с сообщением
предупреждением «Are you sure you want to reset Workspace to its original layout?» («Вы
действительно уверены, что хотите восстановить рабочее пространство в исходную схему
расположения?»)

В результате расположение панелей вернется к исходному сохраненному состоянию


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

30
Манипулирование объектами
После запуска программы Adobe Edge Animate и выбора на странице экрана
приветствия команды Create New (Создать новый), будет создан новый HTML-
документ Untitled.html. Для удобства работы организуем рабочее пространство
следующим образом. Отобразим на экране минимальный набор панелей (рис. 24):
панель инструментов (Tools);
панель Properties (Свойства).

ПРИМЕЧАНИЕ
Для отображения и скрытия панелей используйте пункт меню Window (Окно)
программы Adobe Edge Animate.

Рис. 24. Окно программы Adobe Edge Animate с созданным новым HTML-документом

Поскольку программой Adobe Edge Animate использует возможности HTML5, CSS3


и JavaScript, то и итоговый проект представляет собой набор различных файлов (рис.
12). Чтобы не возникло путаницы в рабочих файлах проекта и папках, создадим
новую папку, например, с именем «MyFirstEAproject», в которую сохраним проект
Adobe Edge Animate под именем «myfirsteaproject.html» с помощью команды меню
File Save (Файл Сохранить).

Сцена (Stage)
Рассмотрим панель Properties (Свойства), позволяющую установить параметры сцены
(stage), которые являются параметрами Edge Animate композиции (рис. 24).

31
Основными параметрами сцены (stage) являются (рис. 24):
Width (Ширина) — ширина композиции. Позволяет задать размер Edge Animate
композиции по ширине в пикселях (px) или в относительных единицах,
процентах (%) размера окна браузера.
Height (Высота) — высота композиции. Задает размер Edge Animate композиции
по высоте в пикселях (px) или в относительных единицах, процентах (%) размера
окна браузера.
Background Color (Цвет фона) — цвет фона композиции. Устанавливает цвет для
Edge Animate композиции согласно одной из трех цветовых моделей: RGBa, Hex,
HSLa. Для того чтобы задать требуемый цвет фона композиции достаточно
навести указатель мыши на цветную миниатюру в виде квадрата со
скругленными углами, образец текущего цвета фона страницы, и щелкнуть на
нем мышью. В результате на экране отобразится палитра цвета (рис. 25).

Рис. 25. Палитра цвета

32
Палитра цвета содержит три движка: Hue (Цветовой тон), Lighteness (Яркость) и Alpha
(Непрозрачность). Палитра цвета также содержит большое цветовое поле Saturation
and brightness (Насыщенность и яркость), которое располагается в центральной и
левой частях палитры.
Первый вертикальный движок в виде цветового спектра — это цветовой тон (Hue),
используется для выбора требуемого цветового тона. Второй вертикальный движок в
виде градиента от белого вверху, цветового тона и черного внизу цветов — это
яркость (Lighteness), позволяет задать цветовой оттенок путем разбела или затенения
выбранного цвета. Третий вертикальный бегунок в виде цвето-прозрачного градиента
— это величина прозрачности для выбранного цвета (Alpha). Большое квадратное
поле слева Saturation and brightness (Насыщенность и яркость) используется для выбора
цветового оттенка.
Для того чтобы выбрать требуемый параметр цветового тона (Hue), яркости
(Lighteness), непрозрачности (Alpha) необходимо поместить указатель мыши в область
движка (вертикальной полосы) и щелкнуть клавишей мыши. Числовое значение
выбранного цвета отобразится в текстовом поле Color (Цвет) в одной из трех
цветовых моделей: RGBa, Hex, HSLa.
Когда вы выбираете новый цвет, он отображается в левой части индикатора выбора
цвета, а текущий цвет (Original color) отображается справа.
В верхней части палитры цвета, справа от индикатора выбора цвета находятся ячейки
Color swatches (Каталог цвета) в которые можно сохранить 13 цветов. Каталог цветов
удобно использовать для хранения палитры цветов, используемых в дизайне вашего
проекта.
Для того чтобы добавить цвет в цветовую палитру необходимо выполнить такие
действия:
1. Выбрать требуемый цвет с помощью движков и цветового поля.
2. Щелкнуть указателем мыши на кнопке , чтобы добавить в каталог цветов.
В результате выбранный цвет будет добавлен в Color swatches (Каталог цвета) и в
последующем с помощью щелчка указателем мыши на ячейке с требуемым цветом
можно использовать цвет в работе.
На панели Properties (Свойства) доступны также следующие параметры сцены (stage),
которые являются параметрами Edge Animate композиции (рис. 24):
Overflow (Переполнение) — определяет один из четырех вариантов: visible, hidden,
scroll, auto отображения контента Edge Animate композиции при выходе его за
пределы композиции, заданные шириной (Width) и высотой (Height) сцены.
Значение visible — разрешает отображать контент Edge Animate композиции,
если размер содержимого выходит за пределы ширины и/или высоты
композиции. Значение hidden — скрывает все содержимое Edge Animate
композиции, которое выходит за пределы ширины и/или высоты композиции.
Значение scroll — включает обязательное отображение вертикальной и
горизонтальной полос прокрутки в окне браузера для отображаемой Edge
Animate композиции независимо от того размер контента больше или меньше
ширины и/или высоты композиции. Значение auto — позволяет динамически

33
отслеживать размер Edge Animate композиции и контента и по необходимости,
если по ширине и/или высоте не хватает пространства сцены для отображения
содержимого Edge Animate композиции, отображаются полосы прокрутки.
Composition Class — идентификатор Edge Animate композиции. Представляет
собой уникальное имя.

СОВЕТ
Идентификатор Edge Animate композиции представляющее собой уникальное имя и
автоматически генерируется программой Adobe Edge Animate, которое стоит
оставлять без изменений.

Center Page — позиционирование Edge Animate композиции в окне браузера.


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

Панель инструментов (Tools)


Панель инструментов (Tools) содержит инструменты для создания и
манипулирования объектами, а так же для просмотра содержимого сцены (рис. 26).

Рис. 26. Панель инструментов (Tools)

Инструменты предназначены для выполнения следующих действий.


Группа инструментов для манипулирования объектами:
Selection Tool (Выделение) — позволяет выделять и перемещать объекты на
сцене.
Transform Tool (Трансформация) — используется для манипулирования:
масштабирует, вращает, искажает объект.
Clipping Tool (Маска) — используется для сокрытия части объекта.
Группа инструментов для создания объектов:
Rectangle Tool (Прямоугольник) — используется для создания объектов в
виде прямоугольников и квадратов.

34
Rounded Rectangle Tool (Прямоугольник со скругленными углами) —
используется для создания объектов-прямоугольников, квадратов со
скругленными углами.
Ellipse Tool (Эллипс) — используется для создания объектов в виде овалов и
кругов.
Text Tool (Текст) — используется для создания надписей и фрагментов
текста.
Группа инструментов для просмотра сцены:
Hand Tool (Рука) — используется для прокрутки содержимого сцены.
Содержимое сцены можно также пролистывать вверх-вниз, влево-вправо с
помощью полос прокрутки: вертикальной расположенной у правого края сцены и
горизонтальной расположенной у нижнего края сцены.
Zoom Tool (Масштаб) — используется для масштабирования содержимого
сцены, а именно увеличения масштаба отображаемого контента Edge Animate
композиции на сцене в окне программы Adobe Edge Animate. Для
масштабирования: увеличения или уменьшения масштаба отображаемого
контента Edge Animate композиции на сцене можно воспользоваться счетчиком
— текстовым полем цифрового значения масштаба, расположенным в
левом нижнем углу панели Stage (Сцена) (рис. 24).

СОВЕТ
Для быстрого автоматического центрирования содержимого сцены в пределах
текущего окна программы Adobe Edge Animate используется кнопка Center the
stage (Центрировать сцену).

Для увеличения и уменьшения масштаба можно использовать стандартные


комбинации горячих клавиш и — для увеличения масштаба, и —
для уменьшения масштаба.

Создание объектов
Для создания геометрических объектов в программе Adobe Edge Animate
используются следующие инструменты: Rectangle (Прямоугольник), Rounded Rectangle
(Прямоугольник со скругленными углами), Ellipse (Эллипс).
Чтобы активизировать инструмент, выполните следующие действия:
1. Переместите указатель мыши на кнопку инструмента.
2. Щелкните клавишей мыши.
Выбор инструментов для создания геометрических объектов сопровождается
изменением вида указателя мыши на перекрестие, а также графическим
представлением кнопки инструмента в нажатом состоянии на панели инструментов.

35
ВНИМАНИЕ
Наиболее распространенной ошибкой при активации инструментов является
действие мышью, когда пользователь, выбрав требуемый инструмент указателем
мыши, нажимает клавишу мыши и пытается «вытащить» инструмент на рабочую
область сцены, не отпуская клавишу.

Чтобы воспользоваться данными инструментами для создания геометрических


объектов, выполните следующие действия:
1. Выберите на панели инструментов требуемый инструмент, щелкнув на нем
указателем мыши.
2. Переведите указатель в виде перекрестия на рабочую область сцены, нажмите
клавишу мыши и, не отпуская ее, протащите мышь. При этом будет создан
геометрический объект.
3. Закончите создание геометрического объекта, отпустив клавишу мыши.

ПРИМЕЧАНИЕ
Если при создании геометрических объектов удерживать на клавиатуре нажатой
клавишу Shift, то итоговая фигура будет представлять собой равностороннюю
геометрическую фигуру: квадрат, круг.

ВНИМАНИЕ
После выполнения построения происходит автоматическое переключение на
инструмент Selection Tool (Выделение). Поэтому для повторного использования
инструмента его необходимо активировать снова.

Прямоугольник (Rectangle Tool)


Для того чтобы по строить прямоугольник или квадрат, выполните следующие
действия:
1. Активизируйте инструмент Rectangle (Прямоугольник), выбрав его на панели
инструментов (Tools).
2. Переведите указатель мыши в виде перекрестия на рабочую область сцены,
нажмите клавишу мыши и, не отпуская ее, протащите мышь. При этом будет
создаваться объект — прямоугольник.

СОВЕТ
Пока клавиша мыши нажата, можно двигать мышью и изменять размер объекта —
прямоугольника.

3. Закончите создание прямоугольника, отпустив клавишу мыши (рис. 27).

36
Рис. 27. Результат построения геометрической фигуры с помощью инструмента Rectangle
(Прямоугольник)

ПРИМЕЧАНИЕ
Если при создании прямоугольника удерживать на клавиатуре нажатой клавишу
Shift, то итоговая фигура будет представлять собой квадрат.

После построения прямоугольника, выбранный инструмент автоматически


переключается на инструмент Selection Tool (Выделение). Для повторного
использования инструмента его необходимо активировать снова.

Инструмент Selection (Выделение)


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

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

Таким образом, комбинирование трансформационных искажений с параметрами


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

Выделение объектов
Действия, связанные с трансформационными искажениями прямоугольника можно
производить, например, с помощью инструмента Selection (Выделение).
С помощью инструмента Selection (Выделение) можно выполнять следующие
манипуляции над объектами:
выделять,
перемещать,
трансформировать путем изменения размера.
Чтобы выделить отдельный объект с помощью инструмента Selection (Выделение),
выполните следующие действия:
1. Выберите инструмент Selection (Выделение).
2. Наведите указатель мыши на объект, который необходимо выделить.

ПРИМЕЧАНИЕ
При наведении на объект, указатель мыши принимает вид перекрестия в виде
четырехнаправленной стрелки .

38
3. Не отводя указатель мыши от объекта, выполните щелчок клавишей мыши.
В результате выделения объекта вокруг него появится габаритная рамка голубого
цвета, обозначенная восемью управляющими маркерами (квадратами) в углах и на
серединах сторон и центром, отмеченным голубым квадратом (рис. 29).

Рис. 29. Пример выделенного объекта и варианты внешнего виды указателя мыши при
выбранном инструменте Select Tool (Выделение)

СОВЕТ
Чтобы снять выделение с объекта, достаточно щелкнуть клавишей мыши, когда
указатель в виде стрелки находится над свободной от объектов части рабочей
области сцены.

Чтобы воспользоваться инструментом Selection (Выделение) для выделения


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

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

СОВЕТ
Чтобы снять выделение с объекта, входящего в группу выделенных объектов,
необходимо при нажатой на клавиатуре клавише Shift подвести указатель мыши к
требуемому объекту и щелкнуть на нем клавишей мыши.

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

ПРИМЕЧАНИЕ
Выделенный объект или группу объектов можно удалить, нажав на клавиатуре
клавишу Delete.

Перемещение объектов
Выделенные объекты или группы объектов в окне программе Adobe Edge Animate
можно перемещать.
Чтобы переместить объект с помощью мыши, необходимо действовать следующим
образом:
1. Выделить требуемый объект, группу объектов или поместить указатель мыши
над объектом, выделенной группой объектов.
2. Когда указатель мыши примет вид четырехнаправленной стрелки , нажать
клавишу мыши и, удерживая ее, перетащить объект, группу объектов.
3. Закончить перемещение объекта, группы объектов освобождением клавиши
мыши.

Трансформирование объектов
Расположение указателя мыши на том или ином маркере габаритной рамки приводит
к тому, что указатель мыши принимает вид горизонтальной , вертикальной или
одной из диагональных или двунаправленных стрелок. Стрелки указателя
мыши указывают разрешенные направления трансформирования объекта.
Маркеры габаритной рамки, расположенные на серединах сторон позволяют
трансформировать объект только по ширине или высоте. Маркеры габаритной рамки,
расположенные в углах позволяют трансформировать объект одновременно по
ширине и/или высоте.
Чтобы выполнить трансформирование объекта путем изменения его размера,
необходимо выполнить такие действия:
1. Выделить требуемый объект.
2. Навести указатель мыши на один из маркеров (квадратов) в углах или на
серединах сторон габаритной рамки голубого цвета.

40
3. Когда указатель мыши примет вид двунаправленной стрелки (рис. 29), нажать
клавишу мыши и, не отпуская ее, перетащить маркер. При этом габаритная рамка
изменится, а вместе с ней изменится и размер объекта.
4. Закончить изменение геометрического размера объекта, отпустив клавишу
мыши.

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

Инструмент Transform (Трансформация)


Больше возможностей по трансформационным искажениям предоставляет
инструмент Transform (Трансформация). Действия, связанные с трансформационными
искажениями и закруглению углов прямоугольника, лучше всего производить,
активизировав инструмент Transform (Трансформация) .
Инструмент Transform (Трансформация) позволяет над всеми объектами или группами
объектов в программе Adobe Edge Animate производить следующие
трансформационные искажения:
перемещение;
масштабирование;
поворот;
наклон.
Все виды трансформационных искажений можно выполнять как свободным
движением руки с помощью мыши, так и точно, путем указания числовых значений
параметров конкретного искажения.
Для того чтобы начать пользоваться инструментом Transform (Трансформация)
необходимо:
1. Выбрать инструмента Transform (Трансформация) на панели инструментов
(Tools).
2. Выделить объект или группу объектов для трансформационных искажений.
При выбранном инструменте Transform Tool (Трансформация), после выделения
объекта (группы объектов) вокруг выделенного объекта (группы объектов)
появляется габаритная рамка черного цвета, обозначенная восемью управляющими
маркерами (квадратами) в углах и на серединах сторон, прицелом-перекрестием в
центре , четырьмя ромбиками черного цвета в углах (рис. 30).

41
Рис. 30. Пример выделенного объекта и варианты внешнего виды маркеров и указателя мыши
при выбранном инструменте Transform Tool (Трансформация)

Изменение размеров
Геометрические размеры объекта можно изменять, как и в случае для инструмента
Selection (Выделение) с помощью маркеров габаритной рамки в виде
прямоугольников, располагающихся в углах и на серединах сторон. Только для
инструмента Transform (Трансформация) эти маркеры выглядят в виде черных
квадратов.
Чтобы с помощью мыши изменить геометрические размеры объекта (группы
объектов), необходимо выполнить такие действия:
1. Выделить требуемый объект (группу объектов) с помощью инструмента
Transform Tool (Трансформация).
2. Навести указатель мыши на один из маркеров габаритной рамки в виде черного
квадрата (рис. 30).
3. Когда указатель мыши примет вид двунаправленной стрелки, нажать клавишу
мыши и, удерживая ее, перетащить маркер. При этом размер габаритной рамки
изменится.

42
4. Закончить изменение геометрического размера объекта (группы объектов),
отпустив клавишу мыши.
Расположение указателя мыши на том или ином маркере габаритной рамки приводит
к тому, что указатель принимает вид горизонтальной , вертикальной или одной
из диагональных или двунаправленных стрелок. Стрелки указателя мыши
указывают разрешенные направления трансформирования объекта. Все
трансформационные изменения габаритных размеров происходят относительно
центра трансформации объекта (origin).

СОВЕТ
Если во время перемещения одного из четырех угловых маркеров габаритной рамки
нажать и удерживать на клавиатуре клавишу Shift, то объект (группа объектов)
будет трансформироваться пропорционально относительно центра объекта
(рис. 31).

Рис. 31. Пример пропорционального относительно центра трансформации увеличения объекта


за угловой маркер габаритной рамки при нажатой на клавиатуре клавише Shift

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

43
габаритной рамки. Вращение происходит вокруг маркера центра трансформации, в
данном случае центра вращения (рис. 30).
Чтобы повернуть объект (группу) объектов с помощью мыши, необходимо
выполнить следующие действия:
1. Выделить требуемый объект (группу объектов) с помощью инструмента
Transform Tool (Трансформация).
2. Расположить указатель мыши вблизи одного из четырех угловых маркеров с
внешней стороны габаритной рамки.
3. Когда указатель мыши примет вид указателя с закрученной стрелкой , нажать
клавишу мыши и, удерживая ее, произвести дугообразное движение мышью,
поворачивая объект (группу объектов) (рис. 32).
4. Закончить поворот, отпустив клавишу мыши.

ВНИМАНИЕ
Вращение объекта происходит вокруг центра трансформации — центра вращения
(рис. 32).

Рис. 32. Пример поворота объекта относительно центра трансформации (вращения)

44
Центр вращения
По умолчанию центр трансформации совпадет с центром габаритной рамки объекта.
Однако положение центра трансформации, следовательно, и центра вращения можно
изменить, изменив его положение.
Чтобы изменить положение центра вращения объекта (группы объектов) с помощью
мыши, нужно выполнить такие действия:
1. Выделить требуемый объект (группу объектов) с помощью инструмента
Transform (Трансформация).
2. Расположить указатель мыши на маркере центра вращения.

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


отпуская ее, переместить центр вращения.
4. Закончить перемещение центра вращения освобождением клавиши мыши.

Наклон
Одним из видов трансформационных искажений является наклон (skew). Наклон, или
скос, представляет собой параллельное смещение противоположных сторон
габаритной рамки относительно центра трансформации.
Смещением горизонтальных или вертикальных сторон друг относительно друга
можно получить различные варианты объектов (рис. 28). В каком бы направлении ни
производился наклон, стороны, лежащие напротив друг друга, параллельно
смещаются, как бы скользя. Объект можно наклонить свободным движением руки с
помощью мыши.
Чтобы наклонить объект (группу объектов) с помощью мыши, необходимо
выполнить следующие действия:
1. Выделить требуемый объект (группу объектов) с помощью инструмента
Transform (Трансформация).
2. Расположить указатель мыши вблизи границы габаритной рамки с внешней
стороны.
3. Когда указатель мыши примет вид стрелок направленных в противоположные
стороны , нажать клавишу мыши и, не отпуская ее, исказить объект в одном
из указанных стрелками направлений (рис. 33).
4. Закончить искажение освобождением клавиши мыши.

45
Рис. 33. Пример горизонтального наклона (skew) объекта относительно центра трансформации

Таким образом, в программе Adobe Edge Animate над всеми объектами или группами
объектов можно производить следующие трансформационные искажения:
перемещение;
масштабирование;
поворот;
наклон.
Все трансформационные искажения можно выполнять свободным движением мыши
с помощью инструмента Transform Tool (Трансформация) используя маркеры
габаритной рамки. Трансформационные искажения так же можно выполнять точно,
путем указания числовых значений параметров настроек конкретного искажения.
Числовые значения параметров трансформационных искажений указывают на панели
свойств (Properties) объекта.

Панель свойств (Properties)


Панель Properties (Свойства) позволяет задавать параметры настроек для выделенных
объектов или группы объектов. Числовые значения настроек трансформационных
искажений задаются соответствующими полями параметров выделенного объекта.
Основные настройки объектов сосредоточены в свитках панели Properties (Свойства).
Свитки — сгруппированные по определенным признакам настройки, имеющие

46
заголовок во всю ширину свитка и кнопку «треугольник». Заголовок каждого свитка
содержит кнопку «треугольник вправо» или «треугольник вниз» в зависимости
от того, развернут свиток или свернут (свернутому свитку соответствует кнопка
«Развернуть свиток», а развернутому свитку — кнопка «Свернуть свиток»).
Щелчок на соответствующей кнопке «треугольнике» свитка разворачивает или
сворачивает его.
Для выполнения трансформационных искажений используются настройки
параметров следующих свитков: Position and Size (Положение и размер) и Transform
(Трансформирование) (рис. 34).

Рис. 34. Расположение свитков Position and Size (Положение и размер) и Transform
(Трансформирование) на панели Properties (Свойства)

Свиток Position and Size (Положение и размер) содержит параметры для


позиционирования объекта на сцене и задания размера объекта:
Left (Координата X) — горизонтальное смещение объекта относительно левого
верхнего угла сцены (stage);
Top (Координата Y) — вертикальное смещение объекта относительно левого
верхнего угла сцены (stage);
Width (Ширина) — размер объекта по горизонтали;
Height (Высота) — размер объекта по вертикали.

47
Рис. 35. Параметры свитка Position and Size (Положение и размер) панели Properties (Свойства)

Для настройки трансформационных искажений масштаба, поворота, наклона и


изменения положения центра трансформирования используется свиток Transform
(Трансформирование) (рис. 36).

Рис. 36. Параметры свитка Transform (Трансформирование) панели Properties (Свойства)

48
Свиток Transform (Трансформирование) содержит параметры:
ScaleX — задает масштабный коэффициент изменения размера объекта по
ширине.
ScaleY — задает масштабный коэффициент изменения размера объекта по
высоте.

ПРИМЕЧАНИЕ
Масштабный коэффициент удобно использовать в тех случаях, когда размер
объекта необходимо изменить в разы. Например, если размер объекта необходимо
увеличить в 2 раза, то проще задать масштабный коэффициент 200%, чем
рассчитывать новое значение размера объекта (ширину и/или высоту) путем
умножения текущего значения на два. Если размер объекта необходимо уменьшить
в два раза, то достаточно задать масштабный коэффициент равный 50%.

SkewX (Наклон вдоль ширины) — величина угла наклона вдоль ширины объекта
(по горизонтали).
SkewY (Наклон вдоль высоты) — величина угла наклона вдоль высоты объекта
(по вертикали).
OriginX (Координата X центра трансформации) — положение центра
трансформирования по горизонтальной оси X.
OriginY (Координата Y центра трансформации) — положение центра
трансформирования по вертикальной оси Y.
Rotate (Вращение) — числовое значение угла поворота объекта. Положительные
значения угла поворота вращают объект по часовой стрелке, отрицательные
значения — против часовой стрелки.

ПРИМЕЧАНИЕ
Вращение объекта происходит вокруг центра вращения, задаваемого
расположением центра трансформации.

Система координат
При перемещении объекта (или группы объектов) внутри рабочей области сцены
используется система координат, состоящая из двух взаимно перпендикулярных осей
— X и Y. Ось X ориентирована горизонтально (слева направо), а ось Y —
вертикально (сверху вниз) (рис. 37).
Начало отсчета системы координат XY совпадает с верхним левым углом сцены. Для
указания местоположения любого объекта на рабочей области сцены применяются
две координаты.
Первая координата — x — определяет положение объекта по горизонтали
относительно левого края рабочей области сцены, а вторая координата — y — задает
положение объекта относительно ее верхнего края. За точку привязки объекта к
системе координат XY по умолчанию принимается левый верхний угол
умозрительно построенного габаритного прямоугольника, описанного вокруг
выделенного объекта (группы объектов) (рис. 37).

49
Рис. 37. Система координат на сцене (stage)

Точку привязки объекта к системе координат XY можно поменять с помощью


переключателя, расположенного в свитке Position and Size (Положение и размер) на
один их вариантов (рис. 35):
Relative to top and left (Относительно левого верхнего угла) — задает в качестве
точки привязки объекта к системе координат XY левый верхний угол
умозрительного габаритного прямоугольника. Данный вариант используется по
умолчанию.
Relative to top and right (Относительно правого верхнего угла) — задает в качестве
точки привязки объекта к системе координат XY правый верхний угол
умозрительного габаритного прямоугольника.
Relative to bottom and right (Относительно правого нижнего угла) — задает в
качестве точки привязки объекта к системе координат XY правый нижний угол
умозрительного габаритного прямоугольника.
Relative to bottom and left (Относительно левого нижнего угла) — задает в качестве
точки привязки объекта к системе координат XY левый нижний угол
умозрительного габаритного прямоугольника.

Перемещение
При выделении объекта (группы объектов) на панели Properties (Свойства)
отображаются параметры настроек. В свитке Position and Size (Положение и размер)
два параметра Left (Координата X) и Top (Координата Y) отображают координаты
положения объекта на сцене (рис. 37).
Чтобы точно переместить объект (группу объектов) путем указания числовых
значений координат x и y, необходимо выполнить такие действия:
1. Выделить требуемый объект (группу объектов).

50
2. Подвести указатель мыши к требуемому полю со значением Координаты X (Left)
или Координаты Y (Top) объекта в свитке Position and Size (Положение и размер)
панели Properties (Свойства).
3. Когда указатель мыши примет вид указующего перста со стрелками влево и
вправо , щелкнуть клавишей мыши.
4. Удалить прежнее числовое значение и ввести с клавиатуры новое.
5. Закончить ввод значения нажатием на клавиатуре клавиши Enter.

ПРИМЕЧАНИЕ
Если при наведении указателя мыши на требуемое поле со значением координаты,
когда указатель мыши принимает вид (указующий перст со стрелками влево и
вправо), нажать клавишу мыши и, не отпуская ее, выполнить движение мышью
влево или вправо, то можно уменьшить или увеличить текущее значение
координаты свободным движением мыши. Заканчивается изменение после
остановки мыши и освобождения клавиши мыши.

Изменение размеров
Геометрические размеры объекта можно изменить точно путем указания значений
ширины и высоты.
Чтобы точно изменить геометрический размер объекта (группы объектов) путем
задания числовых значений, следует выполнить такие действия:
1. Выделить нужный объект (группу объектов).
2. На панели Properties (Свойства) в свитке Position and Size (Положение и размер)
подвести указатель мыши к требуемому полю со значением ширины Width
(Ширина) или высоты Height (Высота).
3. Когда указатель мыши примет вид , щелкнуть клавишей мыши.
4. Удалить прежнее числовое значение и ввести с клавиатуры новое.
5. Закончить ввод значения нажатием на клавиатуре клавиши Enter.

ПРИМЕЧАНИЕ
Если при наведении указателя мыши на требуемое поле со значением размера
объекта, когда указатель мыши принимает вид указующего перста со стрелками
влево и вправо, нажать клавишу мыши и, не отпуская ее, выполнить движение
мышью влево или вправо, то можно уменьшить или увеличить текущее значение
ширины или высоты свободным движением мыши. Заканчивается изменение после
остановки мыши и освобождения клавиши мыши.

Возможны ситуации, когда при изменении ширины объекта автоматически


изменяется и его высота, или наоборот. При этом любое изменение одного параметра
влечет за собой изменение второго так, что пропорции объекта сохраняются. В этом
случае необходимо обратить внимание на состояние кнопки блокировки,
выполненной в виде «цепи», — Link Width and Height (Связать ширину и высоту) (рис.
38). В состоянии когда «цепь» целая — это значит, что изменение одного размера

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

Рис. 38. Пример выключенной и включенной блокировки Link Width and Height (Связать
ширину и высоту)

Кроме точного указания значений ширины и высоты объекта, для изменения


размеров объекта можно воспользоваться относительным масштабированием с
помощью значений масштабных коэффициентов ScaleX (Масштаб по ширине) и
ScaleY (Масштаб по высоте), расположенных на панели Properties (Свойства) в свитке
Transform (Трансформирование) (рис. 36).
Чтобы изменить геометрические размеры объекта (группы объектов) путем задания
числовых значений масштабных коэффициентов, следует выполнить следующие
действия:
1. Выделить нужный объект (группу объектов).
2. На панели Properties (Свойства) в свитке Transform (Трансформирование) подвести
указатель мыши к требуемому полю со значением масштабногокоэффициента
ScaleX или ScaleY.
3. Когда указатель мыши примет вид , щелкнуть клавишей мыши.
4. Удалить прежнее числовое значение и ввести с клавиатуры новое.
5. Закончить ввод значения нажатием на клавиатуре клавиши Enter.
Возможны ситуации, когда при изменении одного из масштабных коэффициентов
объекта автоматически изменяется его второй масштабный коэффициент, или
наоборот. При этом любое изменение одного параметра влечет за собой изменение
второго так, что пропорции объекта сохраняются. В этом случае необходимо
обратить внимание на состояние кнопки блокировки, выполненной в виде «цепи», —
Link Scale (Связать масштаб) (рис. 36). В состоянии когда «цепь» целая — это
значит, что изменение одного размера приводит к изменению другого так, что

52
пропорции объекта будут сохраняться. В состоянии кнопки «цепь разорвана»
изменение одного размера объекта не будет приводить к каким-либо изменениям
другого.
Масштабный коэффициент удобно использовать в тех случаях, когда размер объекта
необходимо изменить в разы. Например, если размер объекта необходимо увеличить
в 2 раза, то проще задать масштабный коэффициент 200%, чем рассчитывать новое
значение размера объекта (ширину и/или высоту) путем умножения текущего
значения на два. Если размер объекта необходимо уменьшить в два раза, то
достаточно задать масштабный коэффициент равный 50%.
Таблица 1. Значения масштабных коэффициентов и результата трансформационных искажений
Значение масштабного коэффициента, % Результат
10 Меньше в 10 раз
20 Меньше в 5 раз
25 Меньше в 4 раза
50 Меньше в 2 раза
100 Оригинальный размер
150 Больше в 1,5 раза
200 Больше в 2 раза
300 Больше в 3 раза

Зеркальное отображение
Существует два вида зеркального отображения: горизонтальное и вертикальное. При
горизонтальном отображении левая половина объекта становится правой (как при
переворачивании книжной страницы) (рис. 39).
Вертикальное зеркальное отображение можно сравнить с отрывным настенным
календарем, когда страницы перелистываются снизу вверх, то есть верхняя половина
объекта становится нижней (рис. 39).

Рис. 39. Примеры горизонтального зеркального отображения (слева) и вертикального


зеркального отображения (справа)

Специальный инструмент, команда или параметр настройки для данного действия в


программе Adobe Edge Animate отсутствует.

53
Чтобы зеркально отобразить объект, можно воспользоваться масштабными
коэффициентами:
Для горизонтального отображения используйте масштабный коэффициент
изменения объекта по ширине (ScaleX) со значением параметра равным
минус 100%.
Для вертикального отображения используйте масштабный коэффициент
изменения объекта по высоте (ScaleY) со значением параметра равным
минус 100%.

ВНИМАНИЕ
При выполнении зеркального отображения объекта обратите внимание, чтобы
кнопка блокировки Link Scale (Связать масштаб), выполненная в виде «цепи», была в
состоянии «цепь разорвана» . Это необходимо для непропорционального
трансформационного искажения объекта.

Вращение
Объект можно вращать путем указания числового угла поворота. Данный способ
вращения объекта (группы объектов) заключается в точном указании угла поворота
(Rotate) и направления вращения: по часовой стрелке или против часовой стрелки.
Вращение является частью трансформационных искажений объекта (группы
объекта). Поле параметра Rotate (Вращение) находится на панели Properties (Свойства)
в свитке Transform (Трансформирование) (рис. 36).
Чтобы точно, путем указания числового значения угла, повернуть объект (группу
объектов), следует выполнить следующие действия:
1. Выделить требуемый объект (группу объектов).
2. На панели Properties (Свойства) в свитке Transform (Трансформирование) подвести
указатель мыши к требуемому полю со значением угла поворота (Rotate).
3. Когда указатель мыши примет вид , щелкнуть клавишей мыши.
4. Удалить прежнее числовое значение и ввести с клавиатуры новое.
5. Закончить ввод значения нажатием на клавиатуре клавиши Enter.

ПРИМЕЧАНИЕ
Если при наведении указателя мыши на требуемое поле со значением угла
поворота, когда указатель мыши принимает вид указующего перста со стрелками
влево и вправо, нажать клавишу мыши и, не отпуская ее, выполнить движение
мышью влево или вправо, то можно уменьшить или увеличить текущее значение
угла поворота свободным движением мыши. Заканчивается изменение после
остановки мыши и освобождения клавиши мыши.

Положительные значения угла поворота (Rotate) вращают объект по часовой стрелке,


отрицательные значения — против часовой стрелки (рис. 40).

54
Рис. 40. Влияние знака на направление вращения (Rotate): положительные значения угла
поворота (слева) и отрицательные значения угла поворота (справа)

Полный оборот составляет 360°. Если ввести значение 720°, то объект повернется два
раза. Внешне на сцене положение объекта при 0°, 360° и 720° выглядят одинаково —
объект кажется неподвижным и остается на своем месте и какой-либо поворот
отсутствует.

ВНИМАНИЕ
В данном случае рассматривается статичная сцена, т.е. сцена без анимации. Во
время анимации значение угла поворота будет приводить к вращению объекта на
заданный угол поворота (Rotate).

Таблица 2. Значение углов поворота и результата вращения

Значение угла поворота, ° Результат


90 Поворот на четверть
180 Поворот на половину
270 Поворот на три четверти
360 Полный поворот

Центр вращения
По умолчанию центр трансформации (Origin) является центром вращения и совпадает
с центром габаритной рамки объекта. Однако положение центра вращения можно
изменить, переместив его в требуемое место.
Чтобы точно, путем указания числовых значений координат x и y, изменить
положение центра вращения объекта, необходимо действовать следующим образом:
1. Выделить требуемый объект.
2. На панели Properties (Свойства) в свитке Transform (Трансформирование) подвести
указатель мыши к требуемому полю со значением координаты OriginX или OriginY
центра трансформации (вращения) (Origin).
3. Когда указатель мыши примет вид , щелкнуть клавишей мыши.

55
4. Удалить прежнее числовое значение и ввести с клавиатуры новое.
5. Закончить ввод значения нажатием клавиши Enter на клавиатуре.

ПРИМЕЧАНИЕ
Если при наведении указателя мыши на требуемое поле со значением координаты
центра трансформации (вращения), когда указатель мыши принимает вид
указующего перста со стрелками влево и вправо, нажать клавишу мыши и, не
отпуская ее, выполнить движение мышью влево или вправо, то можно уменьшить
или увеличить текущее значение координаты центра трансформации (вращения)
свободным движением мыши. Заканчивается изменение после остановки мыши и
освобождения клавиши мыши.

Наклон
Для точного искажения объекта в виде наклона можно использовать величину угла
наклона на панели Properties (Свойства) в свитке Transform (Трансформирование),
параметры наклона по горизонтали (SkewX) и по вертикали (SkewY) (рис. 36).
Чтобы точно, путем указания числового значения угла наклона, исказить объект
(группу объектов), следует выполнить такие действия.
1. Выделить требуемый объект (группу объектов).
2. На панели Properties (Свойства) в свитке Transform (Трансформирование) подвести
указатель мыши к требуемому полю со значением величины угла наклона SkewX
или SkewY.
3. Когда указатель мыши примет вид , щелкнуть клавишей мыши.
4. Удалить прежнее числовое значение и ввести с клавиатуры новое.
5. Закончить ввод значения нажатием клавиши Enter на клавиатуре.
Значение угла наклона можно задать как положительным, так и отрицательным
числом. Знак указывает направление наклона (рис. 41).

Рис. 41. Влияние знака угла наклона на направление скоса и примеры трансформационных
искажений объекта с различными значениями угла наклона

56
Следует отметить, что в большинстве случаев при данном деформационном
искажении объекта значение угла наклона не превышает 45°, поскольку значения
близкие к углу 90°, приводят к превращению объекта в бесконечную горизонтальную
или вертикальную прямую линию (рис. 41). Поэтому разработчики программы Adobe
Edge Animate ограничили величины изменения наклона диапазоном от -89° и до 89°.
По умолчанию центр трансформации (Origin) является центром, относительно
которого происходит параллельный сдвиг противолежащих сторон объекта. Однако
положение центра трансформации можно изменить, переместив его в нужное место.
В результате можно получить требуемый результат сдвига объекта (рис. 42).

Рис. 42. Пример трансформационного искажения наклона объекта (а) без изменения
расположения Origin (Центра трансформации) (б) и с измененным расположением Origin
(Центра трансформации) в левом нижнем углу прямоугольника (в)

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


прямоугольника (рис. 42, а) на 30° вдоль горизонтального направления
(SkewX=30°). По умолчанию центр трансформации располагается в центре
габаритной рамки объекта и имеет координаты OriginX=50% и OriginY=50%. В
результате наклона по горизонтали верхняя и нижняя стороны прямоугольника
движутся параллельно друг другу в противоположные стороны по горизонтали
относительно центра трансформации. Подобное движение похоже на рычаг с точкой
крепления в центре трансформации. Если сместить точку крепления рычага,
например, в левый нижний угол прямоугольника, то нижняя сторона прямоугольника
в результате наклона на 30° останется неподвижной. В результате сместив сначала
Origin (Центр трансформации) в координаты OriginX=0% и OriginY=100% и применив

57
затем наклон по горизонтали SkewX=30°, можно получить результат, как показано на
рисунке (рис. 42, в).
Таким образом, мы рассмотрели различные виды трансформационных искажений,
которые в программе Adobe Edge Animate можно выполнять над всеми объектами
или группами объектов. Еще раз перечислим эти искажения:
перемещение,
масштабирование,
вращение,
наклон,
зеркальное отображение.

ВНИМАНИЕ
Помните, что действия, связанные с трансформационными искажениями, можно
производить только после того, как объект (или группа объектов) выбран.

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


точно, путем указания числовых значений параметров конкретного искажения.
В первом случае для того, чтобы исказить объект, используются маркеры габаритной
рамки (см. рис. 29 — 33). Числовые значения параметров трансформационных
искажений указывают на панели Properties (Свойства) в свитках: Position and Size
(Положение и размер) и Transform (Трансформирование) (см. рис. 35, 36).

ПРИМЕЧАНИЕ
Если по каким-то причинам панель свойств (Properties) отсутствует на экране, то ее
можно отобразить, выполнив команду меню Window Properties (Окно Свойства).

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


можно производить как активизированным инструментом Selection Tool (Выделение),
так и активизированным инструментом Transform Tool (Трансформация).
Для выделения нескольких объектов, группы объектов используйте нажатую на
клавиатуре клавишу Shift. Чтобы удалить объект (объекты), следует выделить его и
нажать на клавиатуре клавишу Delete.

58
Свойства геометрических примитивов
С помощью панели инструментов (Tools), которая содержит инструменты для
создания объектов, можно создать следующие геометрические примитивы (рис. 43):
Rectangle (Прямоугольник).
Rounded Rectangle (Прямоугольник со скругленными углами).
Ellipse (Эллипс).
Text (Текст).

Рис. 43. Примеры объектов: геометрических примитивов и текста

Каждый из перечисленных объектов обладает параметрами настроек, которые можно


изменять с помощью панели свойств (Properties) путем задания числовых значений
параметров. Основные настройки объектов сосредоточены в свитках панели Properties
(Свойства).
Сгруппированные по определенным признакам настройки образуют свитки и имеют
заголовок во всю ширину свитка и кнопку «треугольник». Заголовок каждого свитка
содержит кнопку «треугольник вправо» или «треугольник вниз» в зависимости
от того, развернут свиток или свернут (свернутому свитку соответствует кнопка
«Развернуть свиток», а развернутому свитку — кнопка «Свернуть свиток»).
Щелчок на соответствующей кнопке «треугольнике» свитка разворачивает или
сворачивает его (рис. 44).

59
Рис. 44. Панель свойств (Properties) для геометрических примитивов

Панель Properties (Свойства) позволяет задавать параметры настроек, определяющие


внешний вид и расположение объектов на сцене (Stage).
Числовые значения настроек задаются соответствующими полями параметров для
выделенного объекта:
Свиток Position and Size (Положение и размер) содержит параметры для
расположения объекта на сцене (Stage), задания размера объекта, точки привязки
объекта к системе координат XY сцены.
Свиток Color (Цвет) содержит параметры для настройки цвета заливки объекта,
стиля заливки, а так же цвета, типа и толщины контура обводки объекта.
Свиток Transform (Трансформирование) содержит параметры для коэффициента
масштабирования объекта по ширине и высоте, наклона вдоль ширины и высоты,
угла вращения, координат положения центра трансформирования.
Свиток Corners (Углы) содержит параметры для настройки закругления углов.
Если посмотреть на рисунок (рис. 43), то можно заметить, что объекты
геометрические примитивы: прямоугольник (Rectangle), прямоугольник со
скругленными углами (Rounded Rectangle) и эллипс (Ellipse) в некотором приближении
представляют собой один и тот же объект потому, что имеют одинаковые параметры
настроек (рис. 45).

60
Рис. 45. Панель свойств (Properties) для объектов: прямоугольник (Rectangle), прямоугольник
со скругленными углами (Rounded Rectangle) и эллипс (Ellipse)

Из рисунка (рис. 45) видно, что геометрические и трансформационные параметры


трех геометрических примитивов объектов: прямоугольник, прямоугольник со
скругленными углами и эллипс одинаковые. Отличаются объекты только
параметрами настроек свитка Corners (Углы). Для прямоугольника (Rectangle)
значение параметра Radius (Радиус) закругления углов равно 0px. Для
прямоугольника со скругленными углами (Rounded Rectangle) значение параметра
Radius (Радиус) закругления углов равно 25px. Для эллипса (Ellipse) значение
параметра Radius (Радиус) закругления углов составляет 50%.
Таким образом, три геометрических примитива: прямоугольник, прямоугольник со
скругленными углами и эллипс представляют собой по сути один объект и в
зависимости от значения настроек параметров закругления углов могут выглядеть
по-разному.

Свиток Corners (Углы)


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

61
Рис. 46. Пример фигур, полученных из квадрата путем задания различных параметров
закругления углов

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

Рис. 47. Свиток Corners (Углы) для объектов геометрических примитивов

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


цифрами 1, 4 и 8. Значение цифр на кнопках указывает на степень свободы

62
управляющих контрольных точек, задающих закругление углов. Если нажата
кнопка со значением «1», то все углы закругляются одновременно на одинаковое
значение. Если нажата кнопка со значением «4», то каждый угол имеет
индивидуальное значение кругового закругления. Если нажата кнопка со
значением «8», то каждый угол имеет индивидуальное значение эллиптического
закругления.
Диаграмма радиусов закругления углов (Border Radii diagram) состоит из четырех
кнопок индикаторов закругления углов, которые в отжатом состоянии имеют вид
пиктограммы закругленного угла, например, для левого верхнего угла , а в
нажатом состоянии – вид прямого угла, например, для левого верхнего угла ,
что означает блокировку закругления угла (рис. 48). В зависимости от цифровой
нажатой кнопки контроля радиусов закругления углов, диаграмма может
содержать либо только одно единственное текстовое поле для настройки
параметра закругления всех углов (рис. 49), либо четыре текстовых поля
индивидуальной настройки параметров закругления углов (рис. 52), или восемь
текстовых полей настройки параметров закругления углов (рис. 54).

Рис. 48. Пример блокировки закругления угла

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


пикселях (px) или относительные единицы в процентах (%)
Рассмотрим использование свитка Corners (Углы) при различных степенях свободы
управляющих контрольных точек, задающих закругление углов.

Одна степень свободы


После построения все геометрические примитивы: прямоугольник (Rectangle),
прямоугольник со скругленными углами (Rounded Rectangle) и эллипс (Ellipse) имеют
одну степень свободы управляющих контрольных точек и отличаются только
параметрами настроек закругления углов свитка Corners (Углы) (рис. 45). Например,
для прямоугольника (Rectangle) значение параметра Radius (Радиус) закругления углов

63
равно 0px. Для прямоугольника со скругленными углами (Rounded Rectangle) значение
параметра Radius (Радиус) закругления углов равно 25px. Для эллипса (Ellipse)
значение параметра Radius (Радиус) закругления углов составляет 50%.
Рассмотрим построение квадратов с одной степенью свободы управляющих
контрольных точек и различными значениями закругления углов (рис. 49). Построим
восемь одинаковых квадратов (Rectangle) с размерами:
Width (Ширина) = 100px.
Height (Высота) = 100px.
Выбрана кнопка «1» контроля радиусов закругления углов.
Для верхней строки из четырех квадратов установлены единицы измерения пиксели
(px) и заданы параметры настроек закругления углов, как показано на рисунке (рис.
49), соответственно.
Для нижней строки из четырех квадратов установлены единицы измерения проценты
(%) и заданы параметры настроек закругления углов, как показано на рисунке (рис.
49), соответственно.
Если значение параметра закругления углов изменяется в диапазоне от 0px (0%) и до
50px (50%) в результате получается квадраты со скругленными углами. При
параметрах закругления 50px (50%) квадрат (в данном случае размером 100px по
ширине и 100px по высоте) превращается в круг. Дальнейшее увеличение радиуса
закругления углов (Border Radii) не приводит к каким-либо визуальным изменениям
объекта.

64
Рис. 49. Пример построения квадратов с одной степенью свободы управляющих контрольных
точек и различными значениями закругления углов

Таким образом, для того чтобы превратить квадрат в круг достаточно задать
значение радиуса закругления углов (Border Radii) равным половине длины стороны
квадрата в пикселях или 50% в относительных единицах. Меньшие значения радиуса
закругления углов (Border Radii) позволяют получать объекты со скругленными
углами.
Пример построения прямоугольников с одной степенью свободы управляющих
контрольных точек и различными значениями закругление углов представлен на
рисунке (рис. 50).
Для верхней строки из четырех прямоугольников размером 100px по ширине и 200px
по высоте установлены единицы измерения пиксели (px) и заданы параметры
настроек закругления углов, как показано на рисунке (рис. 50), соответственно.
Для нижней строки из двух прямоугольников размером 200px по ширине и 100px по
высоте установлены единицы измерения проценты (%) и заданы параметры настроек
закругления углов, как показано на рисунке (рис. 50), соответственно.

65
Рис. 50. Пример построения прямоугольников с одной степенью свободы управляющих
контрольных точек и различными значениями закругления углов

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


радиуса закругления углов (Border Radii) равным 50% в относительных единицах.
Меньшие значения радиуса закругления углов (Border Radii) позволяют получать
объекты только со скругленными углами. Любые значения радиуса закругления
углов (Border Radii) в пикселях преобразует прямоугольник в объект со скругленными
углами. При значении радиуса закругления углов (Border Radii) равном или больше
половины меньшей стороны (размера) прямоугольника у объекта полностью
закругляются только меньшие стороны прямоугольника, после чего любое
увеличение значения не приводит к превращению прямоугольника в эллипс.

Четыре степени свободы


Рассмотрим построение квадратов с четырьмя степенями свободы управляющих
контрольных точек и различными значениями закругления углов (рис. 51).
Построим восемь одинаковых квадратов (Rectangle) с параметрами:
Width (Ширина) = 100px.
Height (Высота) = 100px.
Выбрана кнопка «4» контроля радиусов закругления углов.
Для верхней строки из четырех квадратов установлены единицы измерения пиксели
(px) и заданы параметры настроек закругления углов, как показано на рисунке (рис.
51), соответственно.

66
Для нижней строки из четырех квадратов установлены единицы измерения проценты
(%) и заданы параметры настроек закругления углов, как показано на рисунке (рис.
51), соответственно.

Рис. 51. Пример построения квадратов с четырьмя степенями свободы управляющих


контрольных точек и различными значениями закругления углов

Если значение параметра закругления угла изменяется в диапазоне от 0px (0%) и до


50px (50%) в результате получается закругленным данный угол. Дальнейшее
увеличение радиуса закругления углов (Border Radii) не приводит ни к каким
визуальным изменениям данного угла объекта.
Пример построения прямоугольников с четырьмя степенями свободы управляющих
контрольных точек и различными значениями закругления углов представлен на
рисунке (рис. 52).

67
Рис. 52. Пример построения прямоугольников с четырьмя степенями свободы управляющих
контрольных точек и различными значениями закругления углов

Если значение параметра закруглений углов изменяется в диапазоне от 0px (0%) и до


половины размера объекта (50%), то в результате получается прямоугольник с
закругленными углами. Дальнейшее увеличение радиуса закругления углов (Border
Radii) приводит к каким-то визуальным изменениям объекта. Объект начинает быть
похожим на пластилиновую массу, когда смяли с одной стороны, то обязательно с
другой стороны что-то изменится, так и со значениями закругления углов, если
задать величины больше геометрических размеров объекта в пикселях или более
100%, то не всегда можно предсказать итоговую фигуру.

Восемь степеней свободы


Для того чтобы понять что такое восемь степеней свободы для четырех углов,
рассмотрим в качестве примера квадрат:
Width (Ширина) = 100px.
Height (Высота) = 100px.
Выбрана кнопка «8» контроля радиусов закругления углов.
Для выполнения трансформационных искажений над объектами используется
инструмент Transform (Трансформация), после выделения объекта, в данном
случае квадрата, вокруг объекта появляется габаритная рамка черного цвета с

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

Рис. 53. Пример использования маркеров закругления углов

Для того чтобы воспользоваться маркером закругления угла необходимо выполнить


такие действия:
1. Выбрать инструмент Transform (Трансформация).
2. Выделить объект, чтобы отобразились маркеры закругления углов.

3. Навести указатель мыши на требуемый маркер закругления угла , нажать


клавишу мыши и, удерживая ее, перетащить маркер. При этом соответствующий
угол закруглится.
4. Закончить изменение закругления угла, отпустив клавишу мыши.
В результате перемещения маркера закругления угла появятся вспомогательные
вертикальная и горизонтальная пунктирные линии, которые соответствуют радиусам
закругления углов (Border Radii) в свитке Corners (Углы) на панели Properties (Свойства)
(рис. 54).

69
Рис. 54. Соответствие радиусов закругления углов (Border Radii) и визуального результата
трансформирования объекта

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


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

ПРИМЕЧАНИЕ
Для того чтобы закруглить только один угол необходимо нажать и удерживать на
клавиатуре клавишу Ctrl и перемещать маркер закругления выбранного угла
указателем мыши (рис. 55).

70
Рис. 55. Пример трансформации прямоугольника путем задания различных параметров
закругления углов

На практике использование инструмента Transform Tool (Трансформация) и


маркеров закругления углов является наиболее удобным визуальным средствам для
трансформационных искажений, закруглению углов. Тем не менее, можно
использовать текстовые поля для настройки параметров закругления углов.
Чтобы изменить значение настройки закругления угла путем задания числового
значения, следует выполнить такие действия:
1. Выделить нужный объект.
2. На панели Properties (Свойства) в свитке Corners (Углы) подвести указатель мыши
к требуемому полю со значением закругления угла.
3. Когда указатель мыши примет вид , щелкнуть клавишей мыши.
4. Удалить прежнее числовое значение и ввести с клавиатуры новое.
5. Закончить ввод значения нажатием на клавиатуре клавиши Enter.

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

Таким образом, используя свиток Corners (Углы) для объектов геометрических


примитивов: прямоугольник (Rectangle), прямоугольник со скругленными углами

71
(Rounded Rectangle) и эллипс (Ellipse) — можно устанавливать с помощью трех кнопок
контроля радиусов закругления углов «1», «4» или «8» требуемую степень свободы
управляющих контрольных точек и задавать параметры закругления углов
свободным движением мыши, используя маркеры закругления углов у
выделенного объекта при выбранном инструменте Transform (Трансформация),
либо путем ввода числовых значений в соответствующие текстовые поля для
настройки параметров закругления углов.

Свиток Color (Цвет)


Геометрические примитивы представляют собой замкнутые объекты, которые в
общем виде состоят из внутренней части называемой заливкой и контура
определенного цвета, толщины и штриха представляющего собой границу объекта.
Для настройки цветовых параметров объектов используется свиток Color (Цвет) на
панели Properties (Свойства) (рис. 56).

Рис. 56. Свиток Color (Цвет) панели Properties (Свойства)

Свиток Color (Цвет) панели Properties (Свойства) геометрического примитива


содержит следующие параметры настройки объекта:
Background Color (Цвет заливки) — цвет однородной заливки объекта
геометрического примитива.
Gradient (Градиент) — позволяет настроить градиентную заливку для создания
цветового перехода.

Background Color (Цвет заливки)


Параметр Background Color (Цвет заливки) свитка Color (Цвет) панели Properties
(Свойства) позволяет установить цвет однородной заливки геометрической фигуры
согласно одной из трех цветовых моделей: RGBa, Hex, HSLa.

72
Для того чтобы задать требуемый цвет однородной заливки, выполните следующие
действия:
1. Выделите требуемый объект, геометрический примитив на сцене.
2. Наведите указатель мыши на панели Properties (Свойства) в свитке Color (Цвет) на
цветную миниатюру в виде квадрата со скругленными углами Background Color
(Цвет заливки), отображающей образец текущего цвета однородной заливки
(рис. 56), и щелкнуть клавишей мыши.
В результате на экране отобразится палитра цвета (рис. 57).

Рис. 57. Палитра цвета однородной заливки

Палитра цвета содержит три движка: Hue (Цветовой тон), Lighteness (Яркость) и Alpha
(Непрозрачность). Палитра цвета также содержит большое цветовое поле Saturation
and brightness (Насыщенность и яркость), которое располагается в левой части
палитры.

73
Первый вертикальный движок в виде радуги — это цветовой тон (Hue), используется
для выбора требуемого цветового тона. Второй вертикальный движок в виде
градиента от белого вверху, цветового тона посередине и черного внизу цветов —
это яркость (Lighteness), позволяет задать цветовой оттенок путем разбела или
затенения выбранного цвета. Третий вертикальный бегунок в виде цвето-прозрачного
градиента — это величина прозрачности для выбранного цвета (Alpha). Большое
квадратное поле слева Saturation and brightness (Насыщенность и яркость) используется
для выбора цветового оттенка.
Для того чтобы выбрать требуемый параметр цветового тона (Hue), яркости
(Lighteness), непрозрачности (Alpha) необходимо поместить указатель мыши в области
движка и щелкнуть клавишей мыши. Числовое значение выбранного цвета
отобразится в текстовом поле Color (Цвет) в одной из трех цветовых моделей: RGBa,
Hex, HSLa.
Когда новый цвет выбран, он отображается в левой части индикатора выбора цвета, а
текущий цвет (Original color) перемещается вправо.
В верхней части палитры цвета, справа от индикатора выбора цвета находятся ячейки
Color swatches (Каталог цвета) в которые можно сохранить 13 цветов. Каталог цветов
удобно использовать для хранения палитры цветов, используемых в дизайне вашего
проекта.
Для того чтобы добавить цвет в цветовую палитру необходимо выполнить такие
действия:
1. Выбрать требуемый цвет с помощью движков и цветового поля.
2. Щелкнуть указателем мыши на кнопке , чтобы добавить в каталог цветов.
В результате выбранный цвет будет добавлен в Color swatches (Каталог цвета) и в
последующем с помощью щелчка указателем мыши на ячейке с требуемым цветом
можно использовать цвет в работе.

74
Gradient (Градиент)
Градиентная заливка используется для создания постепенного перехода между двумя
или несколькими цветами заливки внутри замкнутого контура объекта
геометрического примитива (рис. 58).

Рис. 58. Примеры градиентной заливки геометрических примитивов

Для того чтобы применить градиентную заливку, выполните следующие действия:


1. Выделите требуемый объект геометрический примитив на сцене.
2. Наведите указатель мыши на панели Properties (Свойства) в свитке Color (Цвет) на
цветную миниатюру в виде квадрата со скругленными углами Gradient
(Градиент), отображающей образец текущей градиентной заливки (рис. 56), и
щелкнуть клавишей мыши.
В результате на экране отобразится палитра Градиент (Gradient) (рис. 59).

75
Рис. 59. Палитра Градиент (Gradient)

Палитра градиентной заливки состоит из двух частей содержащих параметры


настройки градиента и параметры выбора промежуточного цвета для градиентной
заливки. Параметры выбора цвета перехода для градиентной заливки полностью
повторяют параметры палитры для однородной заливки (рис. 57) и содержат
следующие элементы:
Движки настройки цветового тона и прозрачности: Hue (Цветовой тон), Lighteness
(Яркость) и Alpha (Непрозрачность).
Цветовое поле Saturation and brightness (Насыщенность и яркость) для выбора
цветового оттенка.
Текстовое поле Color (Цвет) для отображения числового значения выбранного
цвета в одной из цветовых моделей.
Переключатели выбора цветовой модели: RGBa, Hex, HSLa.
Каталог цветов (Color swatches).
Действия по настройке промежуточного цвета для градиентной заливки с помощью
палитры цвета подробно описаны выше в пункте Background Color (Цвет заливки).
Здесь рассмотрим более подробно параметры настройки градиента, которые
содержат следующие элементы (рис. 60).

76
Рис. 60. Параметры настройки градиента панели Gradient (Градиент)

Переключатели выбора типа градиента (Gradient Type): none — нет градиента, linear
— линейный градиент, radial — радиальный градиент, позволяют задать один из
вариантов градиентной заливки. Линейная градиентная заливка (linear) используется
для создания перехода цвета по прямой линии. Радиальная градиентная заливка
(radial) используется для создания сферических переходов между цветами.
Вертикальный шаблон цветовой растяжки градиента с маркерами промежуточных
цветов (Color Stop) позволяет управлять внешним видом выбранного типа градиента.
По умолчанию используется два маркера цвета, расположенных на
противоположных краях шаблона цветовой растяжки, между которыми происходит
переход цвета.
Использование параметра Gradient Angle (Наклон направляющей) позволяет задать
направление растяжки цветового перехода. По умолчанию наклон направляющей
(Gradient Angle) равен 270°, что полностью совпадает с шаблоном цветовой растяжки.
Набор из шести ячеек каталога градиентов (Gradient Swatches) удобно использовать
для хранения и быстрого доступа к шаблонам градиентов. Для того чтобы добавить
шаблон градиента в каталог градиентов (Gradient Swatches) необходимо щелкнуть
указателем мыши на кнопке Добавить в каталог градиентов.

77
Линейная градиентная заливка
Линейную градиентную заливку используют для создания перехода цвета по прямой
линии (рис. 61).

Рис. 61. Примеры линейной (linear) градиентной заливки

Данный тип заливки обладает следующими параметрами (рис. 62):


Linear gradient angle (Наклон направляющей) — задает направление растяжки
цветового перехода.
Color stops (Граничные маркеры цветов) — определяют цвета для перехода
цветовой растяжки и шаблон цветовой растяжки.

78
Рис. 62. Примеры линейной градиентной заливки с различными значениями параметров
наклона направляющей (Linear gradient angle) и положением граничных маркеров цвета на
шаблоне цветовой растяжки

Положение граничных маркеров цветов (Color stops) на шаблоне цветовой растяжки


изменяется путем перетаскивания маркера с помощью мыши. По умолчанию
маркеры граничных цветов располагаются на краях шаблона цветовой растяжки,
верхний маркер — положение 0%, нижний маркер — 100%. В результате размер
цветового перехода составляет 100% от геометрического размера выбранного
объекта вдоль направления заданного наклоном направляющей (Linear gradient angle)
(рис. 63).

79
Рис. 63. Примеры линейной градиентной заливки с цветовым переходом, составляющим 100%
от геометрического размера выбранного объекта вдоль направления заданного наклоном
направляющей (Linear gradient angle)

Наклон направляющей (Linear gradient angle) задается в градусах (degree) и


отсчитывается от горизонтального направления оси X против часовой стрелки (рис.
64).

Рис. 64. Примеры линейной градиентной заливки с различными значениями наклона


направляющей (Linear gradient angle)

Изменение взаимного расположения граничных маркеров цветов (Color stops) на


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

80
Рис. 65. Примеры линейной градиентной заливки с различными размерами цветового перехода
в зависимости от взаимного расположения граничных маркеров цветов (Color stops)

Таким образом, варьируя цвета, значение наклона направляющей (Linear gradient


angle), взаимное расположение маркеров цветов (Color stops) на шаблоне цветовой
растяжки можно задавать различную линейную (linear) градиентную заливку
объектов геометрических примитивов.

Радиальная градиентная заливка


Тип радиальная (radial) градиентная заливка используется для создания сферических
цветовых переходов (рис. 66).

Рис. 66. Примеры радиальной (radial) градиентной заливки

Данный тип заливки обладает следующими параметрами (рис. 67):

81
Рис. 67. Параметры настройки радиального (radial) градиента

Относительные координаты X и Y расположения центра радиального градиента:


Radial gradient horizontal center (Центр радиального градиента по горизонтали) и
Radial gradient vertical center (Центр радиального градиента по вертикали),
соответственно (рис. 68).
Color stops (Граничные маркеры цветов) — определяют цвета для перехода
цветовой растяжки и шаблон цветовой растяжки.

Рис. 68. Примеры радиального (radial) градиента с различными относительными координатами


X и Y расположения центра радиального градиента

82
Относительные координаты X и Y расположения центра радиального градиента: Radial
gradient horizontal center (Центр радиального градиента по горизонтали) и Radial gradient
vertical center (Центр радиального градиента по вертикали), отсчитываются по
умолчанию относительно левого верхнего угла габаритной рамки объекта.
Таким образом, варьируя цвета, значения относительных координат X и Y
расположения центра радиального градиента, взаимное расположение маркеров
цветов (Color stops) на шаблоне цветовой растяжки можно получать требуемую
радиальную (radial) градиентную заливку объектов, геометрических примитивов.

Пользовательская градиентная заливка


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

Рис. 69. Примеры пользовательской градиентной заливки

Шаблон цветовой растяжки для любой из выбранных типов градиентной заливки —


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

83
Рис. 70. Шаблон цветовой растяжки для пользовательского градиента с дополнительными
промежуточными маркерами цветов

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


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

84
Border (Граница)
Border (Граница) представляет собой контур геометрического примитива и имеет
следующие параметры (рис. 56):
Border Color (Цвет контура) — позволяет задать цвет контура геометрического
примитива с помощью палитры цвета, аналогичной палитре для заливки (рис.
57).
Border Style (Стиль контура) — представляет собой ниспадающее меню с
четырьмя вариантами визуального стилевого оформления стиля штриха контура
(рис. 56): none — контур отсутствует, solid — контур представляет собой
сплошную линию, dashed — контур состоит из штрихов, dotted — контур состоит
из пунктиров (точек) (рис. 71).
Border Thickness (Толщина контура) — текстовое поле (рис. 56) для указания
толщины штриха линии контура в пикселях (px).

Рис. 71. Примеры объектов с различными параметрами настройки стилевого и визуального


оформления контуров (border)

Таким образом, используя настройки свитка Color (Цвет) панели Properties (Свойства)
можно настраивать стилевое и визуальное оформление геометрических примитивов,
которые представляют собой замкнутые объекты и состоят из внутренней части —
заливки, которая может быть как однородной, так и градиентной, и контура —
границы фигуры определенного цвета, толщины и штриха.

85
Текст
Кроме инструментов для создания геометрических примитивов: прямоугольников
(Rectangle), прямоугольников со скругленными углами (Rounded Rectangle), эллипсов
(Ellipse) программа Adobe Edge Animate позволяет добавлять текст в текущий проект.
Для того чтобы добавить текстовый блок на сцену, необходимо выполнить
следующие действия:
1. Выбрать инструмент Text Tool (Текст) на панели инструментов.
2. Перевести указатель мыши в виде перекрестия в рабочую область сцены (stage),
щелкнуть клавишей мыши.
3. Ввести требуемый текст. В результате вокруг созданного текста появиться
габаритная рамка голубого цвета.

СОВЕТ
При добавлении текстового блока простым щелчком клавишей мыши создается
текстовый блок бесконечной ширины.

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

При работе с текстом немаловажную роль играет шрифт (font). Шрифт (font)
включает в себя гарнитуру, кегль и начертание символов. Гарнитура (typeface) — это
набор букв, цифр, символов и знаков препинания сходного рисунка. Гарнитуры со
специфическими свойствами объединяются в своеобразные группы — семейства
шрифтов (font family).
Поскольку программой Adobe Edge Animate для создания проектов используются
возможности HTML5, CSS3 и JavaScript и итоговый проект, обычно, отображается в
окне браузера пользователя, то желательно использовать такие шрифты, которые
являются стандартными и, предположительно, должны находиться на компьютере
каждого пользователя.
Наиболее распространенными гарнитурами шрифтов, используемыми для создания
HTML-документов, являются (рис. 72):
шрифты с засечками (serif): Times, Times New Roman, Georgia, MS Serif;
шрифты без засечек, рубленные (sans-serif): Arial, Verdana, Helvetica, Trebuchet
MS, Tahoma;
моноширинные шрифты, когда все символы имеют одинаковую ширину
(monospace): Courier, Courier New, Lucida Console.

86
Рис. 72. Примеры шрифтового оформления текста

Форматирование текстовых блоков


После того как текстовый блок был создан и выделен, в свитке Text (Текст) панели
Properties (Свойства) становятся доступными параметры форматирование текстового
блока (рис. 73).

Рис. 73. Пример параметров форматирования свитка Text (Текст) панели Properties (Свойства)
для выделенного текстового блока

Рассмотрим параметры форматирования текстового блока доступные на панели


Properties (Свойства) в свитке Text (Текст) (рис. 73):
Font Family (Гарнитура) — гарнитура шрифта — ниспадающий список из
наиболее распространенных гарнитур шрифтов, используемых для создания
HTML-документов.
Font Size (Размер) — размер символов шрифта в пикселях (px).

87
Font Color (Цвет) — цвет символов шрифта позволяет задать цвет символов
согласно одной из трех цветовых моделей: RGBa, Hex, HSLa с помощью палитры
цвета (рис. 25).
Font Weight (Насыщенность) — устанавливает насыщенность шрифта. Значение
устанавливается от 100 до 900 с шагом 100. Сверхсветлое начертание, которое
может отобразить браузер, имеет значение 100, а сверхжирное — 900.
Нормальное начертание шрифта (которое установлено по умолчанию)
эквивалентно 400, стандартный полужирный текст — значению 700.
Font Style, Decoration, Transform (Стиль, Оформление, Видоизменение) — пять
кнопок для видоизменения стилевого оформления символов шрифта.
Font Style (Стиль) определяет начертание шрифта как курсивное или
наклонное. Когда для текста установлено курсивное или наклонное
начертание, браузер обращается к системе для поиска подходящего шрифта.
Если заданный шрифт не найден, браузер использует специальный алгоритм
для имитации нужного вида текста.
Text Decoration (Оформление) добавляет оформление текста в виде
подчеркивания текста.
Text Transform (Видоизменение) управляет преобразованием букв текста в
заглавные (uppercase), прописные символы (lowercase) или задает первый
символ (букву) каждого слова в предложении заглавным (capitalize), а
остальные символы свой вид не меняют.
Text Align (Выравнивание) — определяет взаимное расположение строк внутри
большого блока текста. Горизонтальное выравнивание текста в пределах
текстового блока может быть оформлено одним из четырех способов (рис. 74):
Left (По левому краю) — выравнивание текста по левому краю. В этом случае
строки текста выравнивается по левому краю, а правый край располагается
«лесенкой».
Center (По центру) — выравнивание текста по центру. Текст помещается по
центру горизонтали окна браузера или контейнера, где расположен
текстовый блок.
Right (По правому краю) — выравнивание текста по правому краю. В этом
случае строки текста равняются по правому краю, а левый остается
«рваным».
Justify (По ширине) — выравнивание по ширине, что означает одновременное
выравнивание по левому и правому краю. Чтобы произвести это действие
браузер в этом случае добавляет пробелы между словами.

88
Рис. 74. Пример форматирования текстового блока

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


в свитке Text (Текст) панели Properties (Свойства). Для того чтобы отобразить
дополнительные параметры форматирования межбуквенного расстояния, ширины
пробела, междустрочного интервала и отступа первой строки абзаца необходимо
щелкнуть клавишей мыши на пиктограмме расположенной в левом нижнем углу
свитка Text (Текст) (рис. 73).
В результате в свитке Text (Текст) откроются дополнительные параметры
форматирования (рис. 73):
Letter Spacing (Интервал) — определяет интервал между символами в пределах
элемента. Браузеры обычно устанавливают расстояние между символами, исходя
из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы
изменить это значение, применяется данное свойство.
Line Height (Интерлиньяж) — устанавливает интерлиньяж (межстрочный
интервал) текста, отсчет ведется от базовой линии шрифта. При обычных
обстоятельствах расстояние между строками зависит от вида и размера шрифта и
определяется браузером автоматически.
Word Spacing (Ширина пробела) — устанавливает интервал между словами. Если
для текста задано выравнивание через Text Align (Выравнивание) со значением
Justify (По ширине), то интервал между словами будет установлен

89
принудительно, но не меньше значения, указанного через Word Spacing (Ширина
пробела).
Text Indent (Отступ) — устанавливает величину отступа только первой строки для
текущего абзаца в блоке текста. Воздействия на все остальные строки текущего
абзаца и остального текста блока не оказывается.

Рис. 75. Пример форматирования текстового блока

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


форматирования текста. Чтобы отформатировать текстовый блок, его необходимо
предварительно выделить. Затем воспользоваться параметрами свитка Text (Текст) на
панели Properties (Свойства) (рис. 73).

Редактирование текстовых блоков


Для редактирования содержимого текстового блока можно выполнить одно из
следующих действий:
Выбрать инструмент Text (Текст) на панели инструментов, навести указатель
мыши на текстовый блок, и щелкнуть клавишей мыши на текстовом блоке.
Выбрать инструмент Selection (Выделение) или Transform
(Трансформация) на панели инструментов, навести указатель мыши на
текстовый блок и дважды щелкнуть клавишей мыши на текстовом блоке.

90
В результате выполнения вышеописанных действий текстовый блок выделится
габаритной рамкой голубого цвета и в тексте появится курсор текста (вертикально
мигающая черточка). Дальнейшие действия, которые можно выполнять с элементами
текста — перемещение, набор, удаление и вставка элементов текста выполняются как
обычно при работе с текстом.
При работе с текстовым блоком может возникнуть ситуация когда необходимо
изменить ширину колонки, т.е. ширину габаритной рамки текстового блока.
Для того чтобы изменить ширину текстового блока необходимо изменить ширину
габаритной рамки голубого цвета, выполнив следующие действия:
1. Выбрать инструмент Selection (Выделение) на панели инструментов.
2. Щелкнуть клавишей мыши на текстовом блоке для того, чтобы выделить его. В
результате вокруг текстового блока отобразится габаритная рамка голубого
цвета.
3. Расположить указатель мыши на одном из прямоугольников, маркеров
габаритной рамки (рис. 29).
4. Когда указатель мыши примет вид двунаправленной стрелки (рис. 29), нажать
клавишу мыши и, не отпуская, перетащить маркер. При этом габаритная рамка
голубого цвета изменится, а вместе с ней и перестроится текст текстового блока
так, в пределах ширины габаритной рамки текстового блока (рис. 76).
5. Закончить изменение ширины текстового блока, отпустив клавишу мыши.

91
Рис. 76. Пример перестроения текста при изменении габаритной рамки голубого цвета
текстового блока

ВНИМАНИЕ
Изменение габаритной рамки голубого цвета производится только при выбранном
инструменте Selection Tool (Выбор). В результате изменения габаритной рамки
голубого цвета с помощью инструмента Selection Tool (Выбор) изменяется размер,
ширина контейнера текстового блока, что приводить к перераспределению,
перестановке слов, автоматическому переносу по строкам в пределах ширины
габаритного контейнера текстового блока.

Поскольку текст такой же объект, как и геометрические примитивы, то с блоком


текста можно выполнять трансформационные искажения: перемещать,
масштабировать, поворачивать, наклонять. Все виды трансформационных искажений
можно выполнять как свободным движением руки с помощью мыши, выбрав при
этом инструмент Transform Tool (Трансформация) на панели инструментов, так и
точно, путем указания числовых значений параметров конкретного искажения в
свитке Transform (Трансформация) или Position and Size (Положение и размер) на
панели Properties (Свойства) (рис. 77).

92
Рис. 77. Примеры трансформационных искажений текстовых блоков

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


объекты, которые можно форматировать путем настройки параметров с помощью
свитка Text (Текст) и трансформировать с помощью задания настроек
трансформационных искажений в свитке Transform (Трансформация). Поскольку
любой шрифт, состоящий из набора символов, является художественно завершенным
объектом, то все действия, связанные с его видоизменением, лучше производить с
помощью свитка Text (Текст) путем изменения настроек параметров форматирования.
Не следует произвольно изменять ширину или высоту такого объекта с помощью
свободного трансформирования с помощью инструмента Transform Tool
(Трансформация).

93
Средства контроля построений
Любая композиция представляет собой множество объектов расположенных на сцене
(stage). Расположение объектов можно задавать точно, указывая их координаты x и y
в свитке Position and Size (Положение и размер) на панели Properties (Свойства) или
свободным движением с помощью мыши. Использование вспомогательных средств
контроля для расположения объектов на сцене в программе Adobe Edge Animate
позволяет облегчить работу при взаимном размещении, позиционировании объектов
друг относительно друга на сцене (stage).
Вспомогательными средствами контроля позиционирования объектов на сцене
(stage) в программе Adobe Edge Animate являются:
Rulers and Guides (Линейки и направляющие).
Smart Guides (Интеллектуальные направляющие).
Для активации и возможности использования, а так же для отключения
вспомогательных средств контроля построения и расположения объектов на сцене в
программе Adobe Edge Animate существует пункт меню View (Вид) (рис. 78).

Рис. 78. Команды меню View (Вид) окна программы Adobe Edge Animate

Направляющие
Направляющие (Guides) представляют собой линии, которые могут быть размещены
в любом месте рабочей области сцены (stage). Существует два типа направляющих:
горизонтальные и вертикальные. С направляющими можно работать как с объектами,
их можно добавлять, перемещать и удалять. Однако в отличие от объектов
направляющие представляют собой средства контроля построений и не
отображаются на экране при просмотре в браузере итогового проекта. Активизация

94
направляющих приводит к тому, что при перемещении или при построении объектов
они «прилипают» к направляющим или точкам пересечения направляющих.
Для создания направляющих (Guides) используются линейки (Rulers), которые
располагаются сверху и слева от рабочей области сцены (рис. 79).

Рис. 79. Горизонтальные и вертикальные линейки и внешние виды указателя мыши при его
расположении на линейках и перемещении направляющих

ПРИМЕЧАНИЕ
Если линейки отсутствуют, выполните команду меню View Rules
(Вид Линейки).

Чтобы создать горизонтальную или вертикальную направляющую, необходимо


выполнить такие действия:
1. Активизировать инструмент Selection (Выделение).
2. Навести указатель мыши на горизонтальную или вертикальную линейку.
3. Нажать клавишу мыши и, не отпуская ее, переместить мышь в сторону сцены
(stage) вниз или вправо, «вытягивая» горизонтальную или вертикальную
направляющую, соответственно.
4. Отпустить клавишу мыши, закончить перемещение.
Направляющие представляют собой однопиксельные сплошные линии пурпурного,
ярко-розового цвета (маджента), с которыми можно производить следующие
действия:
перемещение;
удаление;

95
блокировка.

СОВЕТ
Все вышеперечисленные действия с направляющими (Guides) следует выполнять
при активном инструменте Selection Tool (Выделение) или Transform Tool
(Трансформация).

Чтобы изменить положение направляющей с помощью мыши, необходимо


выполнить следующие действия:
1. Выбрать инструмент Selection (Выделение).
2. Навести указатель мыши на требуемую направляющую.
3. Когда указатель мыши примет вид или , нажать основную клавишу мыши
и, не отпуская ее, перетащить направляющую.
4. Отпустить клавишу мыши, закончить перемещение.

ВНИМАНИЕ
Если направляющие не «берутся» указателем мыши, проверьте, не «заморожены»
ли они. Выполните команду меню View Lock Guides (Вид Блокировка
направляющих). При этом в меню не должен быть установлен флажок.

Чтобы удалить направляющую, необходимо выполнить такие действия:


1. Выбрать инструмент Selection (Выделение).
2. Навести указатель мыши на требуемую направляющую.
3. Когда указатель мыши примет вид или , нажать основную клавишу мыши
и, не отпуская ее, перетащить направляющую на соответствующую линейку.
4. Отпустить клавишу мыши, когда указатель мыши будет на линейке.
В результате направляющая будет удалена с рабочей области сцены (stage).
При работе с объектами на сцене, особенно когда объектов на сцене много, можно
случайно переместить направляющую, поскольку и направляющие и объекты могут
быть перемещены с помощью инструмента Selection Tool (Выделение) или
инструмента Transform Tool (Трансформация).
Для того чтобы «заморозить» перемещение направляющих, выполните команду
меню View Lock Guides (Вид Блокировка направляющих). При этом в меню должен
быть установлен флажок напротив Lock Guides (Блокировка направляющих).
Для того чтобы снять блокировку направляющих и позволить перемещать
направляющие необходимо снять флажок напротив команды Lock Guides (Блокировка
направляющих), для чего выполните действие из пункта меню View Lock Guides
(Вид Блокировка направляющих) повторно.
Чтобы активизировать привязку объектов к направляющим, необходимо выполнить
команду меню View Snap to Guides (Вид Привязка к направляющим). При этом в
меню установится соответствующий флажок.

96
Чтобы отключить привязку объектов к направляющим, необходимо повторно
выполнить команду View Snap to Guides (Вид Привязка к направляющим), сняв
соответствующий флажок.

Интеллектуальные направляющие
Интеллектуальные направляющие (Smart Guides) позволяют установить привязку
перемещаемого или создаваемого объекта к различным объектам, расположенным на
сцене или к самой сцене. Следует отметить пользу интеллектуальных направляющих
(Smart Guides) при создании и перемещении объектов на сцене.
Чтобы использовать интеллектуальные направляющие и привязку к ним, необходимо
проверить наличие флажка напротив команды Smart Guides (Интеллектуальные
направляющие) в пункте меню View (Вид) (рис. 78).
Если флажок отсутствует, то для того чтобы активизировать интеллектуальные
направляющие (Smart Guides) и привязку к ним, необходимо выполнить команду
меню View Smart Guides (Вид Интеллектуальные направляющие). Это приведет к
установке соответствующего флажка.
Чтобы отключить интеллектуальные направляющие (Smart Guides) и привязку к ним,
необходимо повторно выполнить данную команду, тем самым сняв флажок.
Интеллектуальные направляющие (Smart Guides) в виде однопиксельных сплошных
линий пурпурного, ярко-розового цвета (маджента) автоматически появляются при
перемещении объекта на сцене в следующих случаях, когда:
центр объекта пересекает вертикальную или горизонтальную серединные линии
сцены (рис. 80);
соответствующие стороны габаритного контейнера объекта пересекает
вертикальную или горизонтальную серединные линии сцены;
центр объекта пересекает вертикальные или горизонтальные границы сцены;
соответствующие стороны габаритного контейнера объекта пересекают
вертикальные или горизонтальные границы сцены (рис. 80).

97
Рис. 80. Пример интеллектуальных направляющих (Smart Guides) при перемещении объекта

Таким образом, при перетаскивании объектов и достижении границ или серединных


линий сцены центром или границами габаритной рамки объекта появляются
интеллектуальных направляющих (Smart Guides).
Если на сцене присутствует несколько объектов, то при перетаскивании объекта
интеллектуальные направляющие (Smart Guides) начинают появляться в тех случаях,
когда (рис. 81):
центр объекта пересекает вертикальную или горизонтальную серединные линии
другого объекта;
соответствующая сторона габаритного контейнера объекта пересекает
вертикальную или горизонтальную серединные линии другого объекта;
центр объекта пересекает вертикальные или горизонтальные границы
габаритного контейнера другого объекта;
соответствующие стороны габаритного контейнера объекта пересекают
вертикальные или горизонтальные границы габаритного контейнера другого
объекта.

98
Рис. 81. Пример интеллектуальных направляющих (Smart Guides) при перемещении объекта
относительно расположенного рядом другого объекта

Таким образом, при перетаскивании объектов и достижении границ габаритных


контейнеров или серединных линий других объектов границами габаритной рамки
или серединными линиями перетаскиваемого объекта появляются интеллектуальных
направляющих (Smart Guides) (рис. 81).
Хочется отметить, что если на сцене находится много рядом расположенных
объектов, то из-за «леса» интеллектуальных направляющих можно не разглядеть
требуемой линии для привязки. В этом случае необходимо временно скрыть
отображение «посторонних» объектов с помощью панели Elements (Элементы),
выполнить перемещение с привязкой к интеллектуальным направляющим нужного
объекта, после чего включить отображение остальных объектов.

99
Выравнивание
При выравнивании объекты выстраиваются относительно границ или центров
габаритных рамок. Объекты выравниваются в пределах пространства выделения
определяемого общей габаритной рамкой всех выделенных объектов (рис. 82).

Рис. 82. Пример границы пространства выделения нескольких объектов

Для быстрого выравнивания нескольких объектов относительно центра или границ


габаритных рамок отдельных объектов следует использовать команды выравнивания
объектов доступных в подменю Modify Align (Модифицирование Выравнивание):
Left (Выровнять по левому краю);
Horizontal Center (Выровнять центры по горизонтали);
Right (Выровнять по правому краю);
Top (Выровнять по верхнему краю);
Vertical Center (Выровнять центры по вертикали);
Bottom (Выровнять по нижнему краю).
При выравнивании объекты единообразно выстраиваются в соответствии с
заданными параметрами: по горизонтали (рис. 83) или по вертикали (рис. 84).

100
Рис. 83. Пример выравнивания объектов по горизонтали

Рис. 84. Пример выравнивания объектов по вертикали

Для того чтобы выровнять два и более объектов, выполните следующие действия:
1. Выберите инструмент Selection (Выделение) или Transform
(Трансформация).

101
2. Выделите объекты для выравнивания.
3. Выполните выравнивание объектов, выбрав команду меню Modify Align
(Модифицирование Выравнивание) и требуемый вариант выравнивания (рис.
85).

Рис. 85. Команды меню Modify Align (Модифицирование Выравнивание)

ПРИМЕЧАНИЕ
Для того чтобы выделить несколько объектов нажмите на клавиатуре клавишу
и, удерживая ее нажатой, щелкайте мышью на объектах, которые
необходимо выделить для выравнивания. Если какой-то объект был выделен
случайно при нажатой клавише Shift, повторный щелчок мышью на уже
выделенном объекте, снимает выделение с объекта и исключает его из общей
группы выделенных объектов для выравнивания.

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

102
Рис. 86. Пример граничных объектов пространства выделения

Для распределения нескольких объектов путем их размещения на сцене с


соблюдением равенства расстояний между граничными маркерами или центрами их
габаритных рамок следует использовать команды распределения объектов доступные
в меню Modify Distribute (Модифицирование Распределение):
Left (Влево) — расстояния между левыми сторонами (крайними левыми
маркерами) габаритных рамок объектов устанавливаются одинаковыми;
Horizontal Center (Горизонтальный центр) — расстояния между центрами
габаритных рамок объектов по горизонтали становятся равными;
Right (Вправо) — расстояния между правыми сторонами (крайними правыми
маркерами) габаритных рамок объектов устанавливаются одинаковыми;
Horizontal Space (Горизонтальная дистанция) — выравниваются промежутки
между габаритными рамками объектов по горизонтали;
Top (Верх) — расстояния между верхними сторонами (крайними верхними
маркерами) габаритных рамок объектов становятся одинаковыми;
Vertical Center (Вертикальный центр) — устанавливаются равные расстояния
между центрами габаритных рамок объектов по вертикали;
Bottom (Низ) — расстояния между нижними сторонами (крайними нижними
маркерами) габаритных рамок объектов становятся одинаковыми;

103
Vertical Space (Вертикальная дистанция) — выравниваются промежутки между
габаритными рамками объектов по вертикали.
При распределении объекты располагаются на одинаковом расстоянии друг от друга
по горизонтали (рис. 87) и/или по вертикали (рис. 88) в соответствии с указанными
сторонами или центрами габаритных рамок объектов.

Рис. 87. Пример распределения объектов по горизонтали

104
Рис. 88. Пример распределения объектов по вертикали

Чтобы распределить три и более объекта, выполните такие действия:


1. Выберите инструмент Selection (Выделение) или Transform
(Трансформация).
2. Выделите объекты.
3. Выполните команду меню Modify Distribute (Модифицирование Распределение)
и требуемый вариант распределения (рис. 89).

105
Рис. 89. Команды меню Modify Distribute (Модифицирование Распределение)

ВНИМАНИЕ
Команды распределения объектов работают только в том случае, если выделено три
и больше объектов.

ПРИМЕЧАНИЕ
Для того чтобы выделить несколько объектов нажмите на клавиатуре клавишу
и, удерживая ее нажатой, щелкайте мышью на объектах, которые
необходимо выделить для выравнивания. Если какой-то объект был выделен
случайно, при нажатой клавише Shift повторный щелчок мышью на уже
выделенном объекте, снимает выделение с объекта и исключает его из общей
группы выделенных объектов для выравнивания.

Таким образом, объекты можно распределить в пределах области выделения. При


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

106
Объекты, группы, символы
Любая Edge Animate композиция представляет собой набор отдельных объектов,
располагающихся друг относительно друга не только с помощью указания координат
x и y, но и на разных уровнях в рамках сцены (stage). Можно организовать
расположение объектов таким образом, чтобы одни объекты располагались над
другими объектами для формирования законченной цельной картинки (рис. 90).

Рис. 90. Пример Edge Animate композиции

Панель Elements (Элементы)


Объекты, располагающиеся на верхних уровнях, закрывают объекты,
размещающиеся на нижних уровнях. Контроль над расположением объектов по
уровням осуществляется с помощью панели Elements (Элементы) (рис. 91).

107
Рис. 91. Иерархия расположения объектов на сцене

Таким образом, порядок представления объектов в списке объектов панели Elements


(Элементы) определяет иерархию расположения объектов на сцене по уровням.
Объекты, размещенные в начале списка, являются объектами более высокого уровня,
чем объекты, размещенные в конце списка и, соответственно, закрывают собой все
нижележащие объекты на сцене.
Порядок расположения объектов на сцене можно изменять как с помощью панели
Elements (Элементы), так и с помощью команды меню Modify Arrange
(Модифицирование Расположение).
Для того чтобы изменить порядок расположения объекта относительно объектов,
находящихся на сцене, необходимо выполнить следующие действия:
1. Выделить требуемый объект на сцене или в списке объектов на панели Elements
(Элементы).

2. Расположить указатель мыши на имени выделенного объекта в списке имен


объектов панели Elements (Элементы).
3. Нажать основную клавишу мыши и, не отпуская ее, перетащть выделенный
объект вверх или вниз по списку объектов панели Elements (Элементы).

ПРИМЕЧАНИЕ

Указатель мыши во время перетаскивания примет вид .

4. Достигнув требуемого уровня (возможные позиции подсвечиваются сплошной


черной горизонтальной линией (рис. 92)), отпустить клавишу мыши.

108
Рис. 92. Пример перемещение объекта в списке объектов панели Elements (Элементы)

В результате выполнения описанных действий у выбранного объекта будет изменен


порядок положения объекта относительно остальных объектов, находящихся на
сцене.
Другой способ изменения порядка расположения объектов на сцене — это с
помощью команды меню Modify Arrange (Модифицирование Расположение).
Для того чтобы изменить с помощью команды меню порядок расположения объекта
относительно объектов, находящихся на сцене, необходимо выполнить такие
действия:
1. Выделите требуемый объект на сцене или в списке объектов на панели Elements
(Элементы).
2. Измените порядок расположения выбранного объекта, выбрав команду меню
Modify Arrange (Модифицирование Расположение) и требуемый вариант
перемещения (рис. 93).

109
Рис. 93. Команды меню Modify Arrange (Модифицирование Расположение)

Команда меню Modify Arrange (Модифицирование Расположение) содержит


следующие варианты изменения порядка расположения выбранного объекта
относительно объектов, находящихся на сцене:
Bring to Front (Выше всех) — расположить выбранный объект первым, выше всех,
относительно объектов на сцене;
Bring Forward (На позицию вверх) — изменить позицию выбранного объекта в
расположении на уровень вверх относительно объектов на сцене;
Send Backward (На позицию вниз) — изменить позицию выбранного объекта в
расположении на уровень вниз относительно объектов на сцене;
Send to Back (Ниже всех) — расположит выбранный объект последним, ниже
всех, относительно объектов на сцене.

ВНИМАНИЕ
Здесь хочется обратить внимание на удобство использования горячих клавиш,
позволяющих выполнять действия по изменению порядка расположения
выбранного объекта, относительно объектов, находящихся на сцене (таб. 3).

Таблица 3. Сочетания горячих клавиш для изменения положения выбранного объекта


Действие Сочетание клавиш
Bring to Front (Выше всех) Ctrl+Shift+]
Bring Forward (На позицию вверх) Ctrl+]
Send Backward (На позицию вниз) Ctrl+[
Send to Back (Ниже всех) Ctrl+Shift+[

110
Кроме действий, связанных с изменением порядка расположения объектов
находящихся на сцене, панель Elements (Элементы) позволяет задавать следующие
свойства объектам (рис. 94):
Set Element Visibility (Видимость элемента) — по умолчанию все объекты,
элементы Edge Animate композиции отображаются на экране, о чем
свидетельствует пиктограмма в виде «глаза» , располагающаяся в начале
строки имени элемента (рис. 94). Если навести указатель мыши на пиктограмму в
виде «глаза» и щелкнуть клавишей мыши, то пиктограмма заменится на вид
«точки» и элемент, объект не будет отображаться на экране. Повторный
щелчок на пиктограмме «точке» приводит к отображению элемента, объекта.

ВНИМАНИЕ
Сокрытие элемента, объекта не приводит к удалению объекта из Edge Animate
композиции. Объект скрывается, например, для того чтобы выполнить какие-
нибудь действия над другими объектами, доступ к которым перекрывается
расположением данного объекта.

Lock Element (Блокировка элемента) — по умолчанию все объекты, элементы Edge


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

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

Рис. 94. Свойства объектов панели Elements (Элементы)

Таким образов, панель Elements (Элементы) позволяет управлять иерархическим


порядком расположения объектов друг относительно друга, чтобы одни объекты

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

Группы и символы
Отдельные объекты могут являться частями, составными элементами более сложного
объекта, например, группы. Применение действия по группировке дает возможность
связать отдельные элементы сложного объекта между собой, чтобы в последующем
можно было производить перемещение, вращение и трансформирование сложного
объекта как единого целого. Возможно создание вложенных групп, когда
сгруппированные объекты являются частью другой группы.
Действие по группировке является полностью обратимым. Это значит, что
существует возможность восстановления или извлечения исходных объектов,
участвующих в создании сложного графического изображения. Обратное действие —
разгруппировка — снимает связывание и открывает доступ к отдельным объектам и
их первоначальным параметрам.
Чтобы сгруппировать объекты, необходимо выполнить следующие действия:
1. Выделить объекты.
2. Выполнить команду меню Modify Group Elements
(Модифицирование Группировать) (рис. 95).
В результате вокруг выделенных объектов отобразится одна общая габаритная рамка
(рис. 95).

Рис. 95. Команды меню Modify Group Elements (Модифицирование Группировать)

112
Отдельные объекты, входящие в состав группы, можно редактировать и удалять из
группы.
Чтобы выделить отдельный объект, щелкните на требуемом объекте, входящем в
состав группы, удерживая нажатой на клавиатуре клавишу Ctrl. В результате вокруг
объекта появится габаритная рамка. Используя маркеры габаритной рамки можно
выполнять вращение и трансформирование, перемещать объект, изменяя
расположение относительно объектов группы, а также с помощью панели Properties
(Свойства) изменять настройки параметров выделенного объекта.

Рис. 96. Выделенный объект, входящий в состав группы

Для того чтобы выделить отдельный объект, входящий в состав группы, можно так
же воспользоваться панелью Elements (Элементы) (рис. 96).
Чтобы разгруппировать объекты, входящие в состав группы, необходимо выполнить
следующие действия:
1. Выделить группу.
2. Выполнить команду меню Modify Ungroup Elements
(Модифицирование Разгруппировать) (рис. 95).
3. Щелкнуть в свободной части сцены, чтобы снять выделение с
разгруппированных объектов.
После того как объекты разгруппированы, их можно выбирать по отдельности и
производить требуемые редакторские изменения.
Таким образом, результатом группировки объектов является группа — набор
объектов, представляющих собой единое целое для выполнения действий, связанных
с перемещением, трансформированием, вращением. Объекты, входящие в состав
группы можно редактировать по отдельности. Поскольку действие по группировке

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

Рис. 97. Пример многократно используемого символа

В символ могут быть превращены отдельные объекты, несколько выделенных


объектов, группа объектов или их комбинации (рис. 98).
Для того чтобы создать символ, выполните следующие действия:
1. Выделите объекты и/или группы.
2. Выполните команду меню Modify Convert to Symbol…
(Модифицирование Конвертировать в символ…) (рис. 98).
3. В открывшемся окне Create Symbol (Создание символа) (рис. 98) дайте имя
символу в поле Symbol Name (Имя символа) и щелкните на кнопке OK.

114
Рис. 98. Команды меню Modify Convert to Symbol… (Модифицирование Конвертировать в
символ…) и диалоговое окно Create Symbol (Создание символа)

В результате выполнения действия Modify Convert to Symbol…


(Модифицирование Конвертировать в символ…) все выделенные объекты и/или
группы объектов будут превращены в отдельный уникальный элемент. Оригинал
символа будет помещен в Библиотеку (Library), а на сцене будут использоваться
экземпляры символа (рис. 97).
Возможно создание вложенных символов, когда одни символы являются частью
другого символа.
Действие по созданию символа, в отличие от действия по созданию группы, является
полностью необратимым. Это значит, что не существует возможность
восстановления или извлечения исходных объектов, участвующих в создании
символа. Однако существует возможность редактирования отдельных объектов,
входящих в состав символа.
Для того чтобы редактировать содержимое символа, выполните следующие
действия:
1. На панели Library (Библиотека) в свитке Symbols (Символы) на строке с именем
символа, который необходимо редактировать, щелкните правой
(дополнительной) клавишей мыши для вызова контекстного меню (рис. 99).
2. В появившемся контекстном меню выберите команду Edit (Редактировать) (рис.
99).

115
Рис. 99. Команда редактирования содержимого символа

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


редактирования символа и на панели Elements (Элементы) отобразится структура
символа, состоящего из объектов и/или групп объектов (рис. 100).

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

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


изолированно от объектов сцены, т.е. все изменения выполняются только для
данного символа.
Для того чтобы закончить редактирование символа и вернуться на сцену (stage)
щелкните на команде Stage (Сцена) слева в строке над горизонтальной линейкой
(рис. 100).
Результат редактирования символа автоматически приведет к изменению всех
экземпляров этого символа, которые многократно используются на сцене. Это одно
из удобств использования символов (symbol).
Таким образом, метод группировки и создание символов можно использовать для
построения сложных элементов из простых объектов.

116
Импорт изображений
Кроме геометрических примитивов, которые можно создавать с помощью панели
инструментов, программа Adobe Edge Animate предоставляет возможность
импортировать файлы графических изображений векторного (SVG File) и растрового
(PNG File, GIF File и JPG File) форматов. Поскольку программа Adobe Edge Animate
для создания проектов использует возможности HTML5, CSS3 и JavaScript, то копии
оригиналов импортируемых фалов графических изображений программой
автоматически помещаются в папку images (рис. 12). Папка images используется для
организации хранения изображений, которые являются по отношению к HTML
файлу проекта внешними изображениями и загружаются в окно веб-браузера.
Для того чтобы импортировать файлы графических изображений, выполните
следующие действия:
1. Выполнить команду меню File Import… (Файл Импортирование…).
2. В открывшемся окне Import (Импортирование) выберите необходимые файлы
графических изображений и щелкните на кнопке Open (Открыть) (рис. 101).

Рис. 101. Окно диалога Import (Импортирование)

ВНИМАНИЕ
Программа Adobe Edge Animate предоставляет возможность импортирования
файлов графических изображений только SVG-файлов векторного и PNG, GIF и
JPG-файлов растрового форматов.

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


размещены в папке images (рис. 12) текущего проекта композиции Edge Animate на
что указывает список изображений в свитке Images (Изображения) на панели Library
(Библиотека) (рис. 102).

117
Рис. 102. Результат импортирования файлов графических изображений

Экземпляры файлов графических изображений будут размещены на сцене (stage) на


что указывает список объектов на панели Elements (Элементы) (рис. 102).
Поскольку файлы графических изображений физически хранятся в паке images
текущего проекта композиции Edge Animate, то в свитке Images (Изображения) на
панели Library (Библиотека) представлены лишь ссылки на файлы графических
изображений. По этим ссылкам файлы графических изображений загружаются на
сцену (stage) для работы и в последующем загружаются в HTML-документ при
открытии его в окне браузера.
Таким образом, файлы графических изображений являются внешними файлами и
могут быть редактированы графическими редакторами. После редактирования и
сохранения в папку images файлы графических изображений автоматически будут
обновлены в проекте композиции Edge Animate и соответственно в HTML-документе
при открытии его в окне браузера.

118
Заключение
В заключении еще раз хочется обратить на основные моменты и особенности работы
в программе Adobe Edge Animate.
Edge Animate позволяет веб-дизайнерам создавать интерактивную HTML-анимацию
для веб-страниц, цифровых публикаций, мультимедийных рекламных материалов как
для настольных компьютеров, так и для браузеров мобильных устройств.
Поскольку программа Adobe Edge Animate для создания проектов использует
возможности HTML5, CSS3 и JavaScript, то и итоговый проект представляет собой
набор различных файлов и папок, поэтому необходимо обратить особое внимание на
организацию хранения проектов. Проекты Adobe Edge Animate следует хранить в
отдельных каталогах, чтобы не возникло путаницы в рабочих файлах проекта и
папках, которые носят одинаковые названия для различных проектов. Прежде чем
создавать новый проект в программе Adobe Edge Animate, создайте, сначала, для него
каталог, в который будет сохранен проект Adobe Edge Animate со всеми своими
фалами и папками.
Окно программы Adobe Edge Animate представляет собой стандартное окно
приложения Windows. Интерфейс программы Adobe Edge Animate представляет
собой набор панелей, которые можно отображать, скрывать, перемещать,
компоновать в группы. Схемы расположения панелей можно организовывать в
рабочие пространства, которые можно сохранять и загружать для удобства
выполнения тех или иных действий в программе Adobe Edge Animate.
Рассмотренный в пособие набор инструментов (объектов) в Edge Animate на первый
взгляд невелик — это прямоугольник (в т.ч. с закругленными углами), эллипс, текст.
Но учитывая то, что каждый из этих объектов имеет множество настроек, а также то,
что с объектом можно производить множество различных трансформаций, то в итоге
можно создать сложные объекты для анимации.
Все трансформационные искажения можно выполнять как свободным движением
мыши, так и точно, путем указания числовых значений параметров настроек
конкретного искажения.
Кроме геометрических примитивов, которые можно создавать с помощью панели
инструментов, программа Adobe Edge Animate предоставляет возможность
импортировать файлы графических изображений векторного (SVG File) и растрового
(PNG, GIF, JPG Files) форматов. Возможность импортирования в Adobe Edge Animate
звуковых файлов (AAC, MP3, WAV, OGG Files) и видео (MP4 File) позволяет
создавать мультимедийные проекты, электронные публикации.
Использование данного пособия и встроенных в программу уроков, обучающих
базовым действиям, представляют вместе пошаговые иллюстрированные инструкции
и необходимый материал для успешного освоения основ работы в программе Adobe
Edge Animate.
В следующих пособиях будут рассмотрены возможности создания анимации и
интерактивности в программе Adobe Edge Animate.

119
Литература
1. Adobe Edge Animate CC Help. – Adobe Press, 2014. – 138 p.
2. Grover, C. Adobe Edge Animate Preview 7: The Missing Manual / C. Grover. –
O’Reilly, 2012. – 281 p.
3. Grover, C. Adobe Edge Animate: The Missing Manual / C. Grover. – O’Reilly, 2013. –
304 p.
4. Grover, C. Adobe Edge Preview 5: The Missing Manual / C. Grover. – O’Reilly, 2012.
– 224 p.
5. Maivald, J. Creating HTML5 Animations with Adobe Edge Animate // InDesign
Magazine, N50. – 2012. – P. 37-46.
6. Green, T. Foundation Adobe Edge Animate for HTML5, CSS3, and JavaScript
Development / T. Green, M. Clawson. – friendsofED, 2012. – 384 p.
7. Rohde, M. Adobe Edge Animate CC For Dummies / M. Rohde. – Wiley, 2013. –
387 p.
8. Widjaja, S. Adobe Edge animate : using Web standards to create interactive websites /
S. Widjaja. – O’Reilly, 2014. – 233 p.
9. Labrecque, J. Learning Adobe Edge Animate / J. Labrecque. – Packt, 2012. – 369 p.
10. Labrecque, J. Adobe Edge Quickstart Guide / J. Labrecque. – Packt, 2012. – 136 p.
Adobe Edge Animate Classroom in a Book. – Adobe Press, 2013. – 281 p.

120
Приложение
Таблица П.1. Список Default Set (Стандартный набор) Keyboard Shortcuts (Cокращенных
клавиатурных команд)
Command (Команда) Shortcut (Сокращенная Примечание
клавиатурная команда)
Edit
Copy Ctrl+C
Cut Ctrl+X
Delete Backspace, Del
Duplicate Ctrl+D
Keyboard Shortcuts Alt+K
Paste Ctrl+V
Paste Actions
Paste All Ctrl+Alt+V
Paste Inverted Shift+Alt+V
Paste Transitions from Ctrl+Shift+V
Location
Paste Transitions to Location
Redo Ctrl+Shift+Z
Reset All Warning Dialogs
Select All Ctrl+A
Transform
Undo Ctrl+Z
File
Clear Recent Files List
Close Ctrl+W
Close All Ctrl+Alt+W
Exit Ctrl+Q
Import Ctrl+I
ImportSpriteSheet
New Ctrl+N
Open Ctrl+O
Preview in Browser Ctrl+Enter, Ctrl+Return
Publish Ctrl+Alt+S
Publish Settings
Revert
Save Ctrl+S

121
Таблица П.1. (продолжение) Список Default Set (Стандартный набор) Keyboard Shortcuts
(Cокращенных клавиатурных команд)
Command (Команда) Shortcut (Сокращенная Примечание
клавиатурная команда)
Save As Ctrl+Shift+S
Help
About Edge Animate
Change Language
Modify
Align Bottom
Align Horizontal Center
Align Left
Align Right
Align Top
Align Vertical Center
Bring Forward Ctrl+]
Bring to Front Ctrl+Shift+]
Convert to Symbol Ctrl+Y
Distribute Bottom
Distribute Horizontal Center
Distribute Horizontal Space
Distribute Left
Distribute Right
Distribute Top
Distribute Vertical Center
Distribute Vertical Space
Edit Symbol
Group Elements Ctrl+G
Send Backward Ctrl+[
Send to Back Ctrl+Shift+[
Ungroup Elements Ctrl+Shift+G
Stage
Nudge Down Down Arrow
Nudge Down 10px Shift+Down Arrow
Nudge Left Left Arrow
Nudge Left 10px Shift+Left Arrow
Nudge Right Right Arrow
Nudge Right 10px Shift+Right Arrow
Nudge Up Up Arrow
Nudge Up 10px Shift+Up Arrow

122
Таблица П.1. (продолжение) Список Default Set (Стандартный набор) Keyboard Shortcuts
(Cокращенных клавиатурных команд)
Command (Команда) Shortcut (Сокращенная Примечание
клавиатурная команда)
Template
CreateNewCompFrom
SaveAs
Timeline
Add Background Color
Keyframe
Add Background Position
Keyframe
Add Background Size
Keyframe
Add Blur Filter Keyframe
Add Border Color Keyframe
Add Border Width Keyframe
Add Bottom Keyframe
Add Bottom Left Radius
Keyframe
Add Bottom Right Radius
Keyframe
Add Box Shadow Blur Radius
Keyframe
Add Box Shadow Color
Keyframe
Add Box Shadow Offset (h)
Keyframe
Add Box Shadow Offset (v)
Keyframe
Add Box Shadow Spread
Keyframe
Add Clip Keyframe
Add Contrast Filter Keyframe
Add Display Keyframe
Add Drop Shadow Filter Blur
Keyframe
Add Drop Shadow Filter Color
Keyframe
Add Drop Shadow Filter Offset
(h) Keyframe
Add Drop Shadow Filter Offset
(v) Keyframe
Add Font Size Keyframe

123
Таблица П.1. (продолжение) Список Default Set (Стандартный набор) Keyboard Shortcuts
(Cокращенных клавиатурных команд)
Command (Команда) Shortcut (Сокращенная Примечание
клавиатурная команда)
Add Gradient Keyframe
Add Grayscale Filter Keyframe
Add Height Keyframe
Add Hue Rotate Filter
Keyframe
Add Invert Filter Keyframe
Add Left Keyframe
Add Letter Spacing Keyframe
Add Line Height Keyframe
Add Location Keyframe
Add Opacity Keyframe
Add Right Keyframe
Add Rotate Keyframe
Add Saturate Filter Keyframe
Add Scale (x) Keyframe
Add Scale (y) Keyframe
Add Sepia Filter Keyframe
Add Skew (x) Keyframe
Add Skew(y) Keyframe
Add Text Color Keyframe
Add Text Indent Keyframe
Add Text Shadow Blur Radius
Keyframe
Add Text Shadow Color
Keyframe
Add Text Shadow Offset (h)
Keyframe
Add Text Shadow Offset (v)
Keyframe
Add Top Keyframe
Add Top Left Radius Keyframe
Add Top Right Radius
Keyframe
Add Transform Origin
Keyframe
Add Translate (x) Keyframe
Add Translate (y) Keyframe
Add Volume Keyframe

124
Таблица П.1. (продолжение) Список Default Set (Стандартный набор) Keyboard
Shortcuts (Cокращенных клавиатурных команд)
Command (Команда) Shortcut (Сокращенная Примечание
клавиатурная команда)
Add Width Keyframe
Add Word Spacing Keyframe
Auto-Keyframe Mode K
Auto-Transition Mode X
Create Transitions From Ctrl+Shift+T
Keyframes
Expand/Collapse All Ctrl+Shift+Num ., Ctrl+Shift+.
Expand/Collapse Selected Ctrl+Num ., Ctrl+.
Flip Playhead and Pin Shift+P
Grid 0.1 second
Grid 0.25 second
Grid 0.5 second
Grid 1 second
Grid 15 fps
Grid 24 fps
Grid 30 fps
Insert Label Ctrl+L
Insert Time
Insert Trigger Ctrl+T
Invert Transitions
Keyframe Faster
Keyframe Faster Extend
Keyframe Slower
Keyframe Slower Extend
Remove Transitions Shift+Backspace, Shift+Del
Show Grid
Snap to Grid
Snap to Keyframes, Labels,
Triggers
Snap to Playhead
Snapping Alt+;
Toggle Pin P
Zoom Timeline In Horizontally Num +, =
Zoom Timeline Out Num -, -
Horizontally
Zoom Timeline to Fit \
Horizontally

125
Таблица П.1. (продолжение) Список Default Set (Стандартный набор) Keyboard
Shortcuts (Cокращенных клавиатурных команд)
Command (Команда) Shortcut (Сокращенная Примечание
клавиатурная команда)
Tool
Clipping C
Ellipse O
Hand H
Rectangle M
Rounded Rectangle R
Selection V
Text T
Transform Q
Zoom Z
Transport
Go to End End
Go to Next Keyframe Ctrl+Right Arrow
Go to Previous Keyframe Ctrl+Left Arrow
Go to Start Home
MuteAudio Ctrl+M
Play/Stop Space
Return Enter, Return
View
Down-level Stage
Enable Smart Guides Ctrl+U
Guides Ctrl+;
Lock Guides Shift+Alt+;
Preloader Stage
Rulers Ctrl+R
Snap to Guides Ctrl+Shift+;
Stage Hints Shift+H
Zoom In Stage Ctrl+Num +, Ctrl+=
Zoom Out Stage Ctrl+Num -, Ctrl+-
Zoom Stage Actual Size Ctrl+Num 1, Ctrl+1
Window
AdobeAddOns
Code Ctrl+E
Elements
Lessons
Library

126
Таблица П.1. (продолжение) Список Default Set (Стандартный набор) Keyboard
Shortcuts (Cокращенных клавиатурных команд)
Command (Команда) Shortcut (Сокращенная Примечание
клавиатурная команда)
Maximize Frame `
Next Open Composition Ctrl+`
Previous Open Composition Ctrl+Shift+`
Properties
Timeline
Tools
Workspace
Delete Workspace
New Workspace
Restore Workspace

127