Меньше кодирования, больше дизайна

Поддержка Audio | Итак, важный шаг к превращению Edge Animate из несложного аниматора в важную составляющую платформы создания программ сделан — появилась возможность применять аудио: вставлять звуковое сопровождение, навешивать звуковые эффекты на события. Поддерживаются ряд основных форматов: MP3, OGG, WAV, M4A, AAC. В Edge Animate появился целый ряд действий (actions) со звуком, которые можно присвоить объектам: включать, ставить на паузу, создавать переключатели паузы-проигрывания, контролировать звук, скорость и др. Силе звучания также можно присваивать ключевые кадры (контроль звука в HTML не поддерживается на телефонах и планшетах). Также есть автостарт звука и закольцованное проигрывание.

Адаптивный дизайн (масштабирование) | У сцены Edge Animate появился контроль местоположения и масштабирования. Можно определить, что сцена будет посреди окна браузера по вертикали, по горизонтали или по обеим осям сразу. Параметр Responsive Scaling по высоте, ширине или по обоим параметрам одновременно позволяет задать увеличение и уменьшение всей сцены вместе с измением размера окна браузера. Всё это работает также и с OAM-контентом, импортированным в другие программы.

Напомню в связи с новыми функциями по созданию «отзывчивого» макета, что в прошлых выпусках Edge Animate уже было реализовано задание размеров как объектов, так и сцены в процентах, не только в пикселях. Теперь с нетерпением ждём появления возможности создавать дополнительные сцены — это уже будет выход в следующую лигу.

Подключение скриптов | В палитре Library появилась новая секция Scripts. В ней можно подключать к проекту локальные JavaScript-библиотеки или ссылкой из интернета. При публикации проекта скрипты, подключенные обоими способами, будут экспортированы вместе с проектом.

Улучшение анимации по траектории | Motion Path появился с выходом CC-версии Edge Animate. На этот раз ему добавили функционала на основе использования альтернативных клавиш. С  можно передвигать всю траекторию, с  — вращать, а с  — масштабировать. Скромно, но полезно.

Команды распределения | В дополнение к командам выравнивания (align) появились в меню Modify также и команды Distribute. Это базовое распределение, оно задаёт не равные расстояния между объектами независимо от их формы, а лишь одинаковые расстояния между краями или центрами объектов.

Прозрачная заставка | В File • Publish Settings, в настройках экспорта OAM-файлов можно задавать прозрачный Poster Image — давно ожидаемая функция. Иногда автоматически генерируемая заставка весила больше, чем весь проект, и при этом часто была ещё и бесполезна.

Host runtime files on Adobe CDN | В том же окне настройки экспорта добавили возможность держать исполняемые JavaScript-файлы в Adobe CDN (Content Delivery Network — Сеть доставки контента). Это уменьшает размер проекта, он быстрее загружается (за счёт кэширования), но требует подключения к интернету. Этот способ подходит преимущественно для Edge-проектов, предназначенных для использования в Dreamweaver или Muse.

Новое в Muse CC 3.0 (ноябрь 2013)

Библиотеки | Панель Library сильно напоминает библиотеки объектов, которые появились в программах вёрстки ещё во времена молодости Мадонны. Элемент(ы) добавляется в библиотеку путём его выделения и нажатия на иконку Add Selected Item (s) на панели Library либо щелчком по объекту правой кнопкой мыши и командой Add to Library. Интересно, что простым перетаскиванием в палитру Library объект не добавить. Я подозреваю, что такую очевидную функцию не удалось реализовать из-за того, что Muse — это AIR-программа (написана с помощью технологии Flex, являющейся развитием Flash). Отсюда, кстати, общая «тормознутость» Muse, мигание панелей при нажатии мыши на объекты страницы, невозможность интегрировать поддержку языков, пишущих иначе, чем слева направо. Евреи от этого сильно страдают, сам видел. Арабы и японцы наверняка тоже, и только индусам на берегах Ганга и Брахмапутры это не важно. Видимо, бросить AIR, как сказал бы классик ивритской литературы Агнон, «время ещё не пришло».

Доработанная параллакс-прокрутка | Теперь она называется Scroll Effects — эффекты прокрутки. Функция выделена в отдельную и одноименную (Scroll Effects) панель и серьёзно расширена.

К параллакс-прокрутке добавились:

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

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

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

Вращение аккордеона и вкладок | Виджеты Accordion и Tabbed Panels можно вращать. Например, вы разворачиваете на 90° аккордеон, все надписи, естественно, становятся на попа. Далее открываете содержимое каждой вкладки и разворачиваете его назад, чтобы смотрелось прямо. Таким образом можно создавать вертикальные аккордеоны и панели вкладок.

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

Интерфейс пользователя | Переведён на 17 языков, включая русский. Частично на русский переведена и справка к программе. Тем не менее не спешите отменять свои уроки английского — он ещё пригодится.

Виджеты социальных сетей | Чтобы поставить себе кнопку Like на страницу, раньше нужно пойти на Facebook, в раздел разработчиков, выудить верный код и вставить его к себе. И так с каждой кнопкой каждой социальной сети — все они решены по-своему. В Muse теперь инсталлировать кнопку Like на страницу проще, чем откупорить бутылку пива. В панель Widgets Library добавлена новая группа Social, оттуда простым перетаскиванием на страницу можно добавить кнопки Facebook Like и Follow, Google Maps, Google+, LinkedIn, Pinterest, Twitter, Vimeo и YouTube, а также кнопку Buy Now от PayPal и форму комментариев от Facebook. У всех есть различные специфичные настройки: цветовая гамма кнопки, размер и пр. — всё настраивается. А особо благодарный пользователь может добавить на свой сайт бэйдж Made with Adobe Muse CC, также находящийся в списке.

Словари | Можно сохранять слова в пользовательском словаре правописания на двух уровнях: как для конкретного языка, так и глобально для всех языков. Интересно, что хотя менеджер проекта Muse Даниэль Беумон (Danielle Beaumont) недавно на мой вопрос о поддержке восточных языков ответила, что это не в ближайших планах (not in our shortlist), программа уже может писать сверху вниз (важно для дальневосточных языков) и проверять правописание на малайском, тайском, японском, древнееврейском и других непростых языках. Даниэль Беумон очень скромна…

Оптимизация генерации кода и картинок | Применяются более эффективные алгоритмы генерации картинок (напомню, что Muse сам создает картинки на основе импортированных пользователем) — они теперь качественнее и вместе с тем лучше сжаты, значит, загружаются быстрее. Вместо растрирования чаще применяется CSS для сохранения данных о трансформации объектов. Также интерлиньяж в текстах выглядит идентично в разных браузерах.

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

Об авторе: Алексей Клецель (www.kletsel.com, alexey@kletsel.com), сертифицированный эксперт и инструктор по Illustrator, InDesign и Adobe DPS, г. Холон, Израиль.