Бесплатные видео-уроки

Adobe Edge Animate

Создание графики, анимации и интерактивного контента для веб

  • бесплатно
  • перспективно
  • быстро
  • доступно

Выравнивание, распределение и ранжирование элементов в Edge Animate

Поговорка «Всему свое время и место» приходится как нельзя кстати, когда речь заходит об анимации. Если на сцене находится более одного элемента, то их «взаимоотношения» очень важны. Очень часто дизайнеры, создавая макеты используют специальную сетку. И когда элементы композиции: текст, графика и пр. выровнены по этой невидимой сетке, то это положительно влияет на ее (композиции) зрительное восприятие, а работа в целом работа выглядит более аккуратной и профессиональной.

Adobe Edge Animate предлагает Вам в помощь несколько инструментов для облегчения выравнивания, распределенияи ранжирования элементов на сцене.

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

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

Если Вы решите в какой-то момент, что эти направляющие Вас больше отвлекают, чем помогают, то Вы отключите их с помощью горячих клавиш Ctrl + U.

Кроме того, все процедуры по выравниванию элементов Вы можете делать через главное меню программы Modify → Align (Модификация → Выравнивание). Чтобы выравнивание заработало нужно выделить хотя бы два элемента. Кстати, одним из них может быть и сцена. Элементы можно выделять прямо на сцене, либо выбирая их в панели Elements. Перед тем как использовать эти команды — выделите все элементы, которые Вы хотите выровнять и затем выберите одну из следующих опций:

  • Modify → Align → Left
  • Modify → Align → Horizontal Center
  • Modify → Align → Right
  • Modify → Align → Top
  • Modify → Align → Vertical Center
  • Modify → Align → Bottom

Меню выравнивания элементов в Edge Animate

Для того чтобы разместить элементы на равных расстояниях друг от друга по горизонтали и вертикали используйте команду Modify → Distribute (Модификация → Распределение). При этом можно выбирать определенную часть элемента как опорную для предстоящего распределения. Вот предлагаемые команды в меню:

  • Modify → Distribute → Left
  • Modify → Distribute → Horizontal Center
  • Modify → Distribute → Right
  • Modify → Distribute → Top
  • Modify → Distribute → Vertical Center
  • Modify → Distribute → Bottom

Меню распределения элементов в Edge Animate

Линейки и направляющие

Вверху и слева сцены расположены линейки. Они помогают размещать элементы на сцене с большой точностью. При необходимости эти линейки можно спрятать, используя меню View → Rulers (Вид → Линейки) или горячие клавиши Ctrl + R. Линейки тянутся за пределы сцены, но на них есть маркеры, которые отмечают ее границы.

Сетка из направляющих

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

Если вспомогательная линия Вам больше не нужна, то ее можно удалить, перетащив снова на линейку. Чтобы случайно не нарушить точно настроенную систему из вспомогательных линий — воспользуйтесь командой View → Lock Guides (Вид → Зафиксировать направляющие). Это сделает невозможным их перемещение до тех пор пока Вы не снимите этот запрет командой View → Unlock Guides (Вид → Освободить направляющие).

Для облегчения работы по выравниванию используйте команду Snap to Guides (Прилипать к направляющим).

Понятно, что допускается создавать такое количество направляющих, какое Вам необходимо. Если их окажется слишком много и они начнут мешать общему восприятию композиции — отключайте-включайте их командой View → Guides (Вид → Направляющие) или с помощью горячих клавиш Ctrl + ;

Меню управления направляющими и линейками в Edge Animate

Ранжирование элементов

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

Если Вы знакомы с такой программой, как Photoshop, то Вам, наверняка, пришла в голову идея слоев. Фактически мы имеем дело с распределением объектов по оси Z. Чтобы лучше понять существующий порядок элементов на сцене достаточно взглянуть на панель Elements. Те элементы, которые находятся в верхней части списка — ближе к Вам. Если Вы захотите изменить этот порядок — просто перетяните элемент на нужную позицию в панели.

Кроме того Edge Animate предлагает несколько полезных команд и горячих клавиш для изменения порядка элементов:

  • Modify → Arrange → Bring to Front (Ctrl + Shift + ])
  • Modify → Arrange → Bring Forward (Ctrl + ])
  • Modify → Arrange → Send Backward (Ctrl + [)
  • Modify → Arrange → Send to Back (Ctrl + Shift + [)

Меню ранжирования элементов в Edge Animate


Комментарии.
 Boris
Сергей, вы про команду Distribute? Надо выделить минимум 3 элемента, тогда меню становится активным.
Отправлено 18.06.2013 10:20:00
 Влад
По поподробнее бы о Distribute.
Отправлено 19.03.2013 23:55:37
 Сергей
Они активны при выделении нужного количества объектов.
Отправлено 13.03.2013 22:30:46
 Сергей
В Вашем уроке инсрументы для выравнивания на скриншотах неактивны и ничего не сказано о том как их активировать (по крайней мере при беглом чтении статьи я ничего не нашёл).
Отправлено 04.02.2013 17:51:17
Добавьте комментарий
bbcode:
[br]  [b][/b]  [i][/i]  [u][/u]
[img]link image[/img]
[color=colour][/color]
[url]link[/url]
[url=link]title[/url]
 
* Введите проверочный код
* Поля с красной звездочкой необходимо заполнить