2014.06.05, Автор: Алексей Клецель5288 прочтений

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

Теги: Adobe Программное обеспечение Эксклюзив

Новый функционал в Edge Animate и Muse CC.

Новое в Edge Animate CC 3.0 (январь 2014)

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

Поддержка 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, как сказал бы классик ивритской литературы Агнон, «время ещё не пришло».

Особенности библиотек

Библиотека сохраняется на уровне всей программы, а не в отдельных файлах, как в InDesign, и не внутри проекта, как символы Illustrator или Flash. Т. е. есть библиотека в Muse, как победа, — одна на всех. Возможно, исходя из этой информации, нужно даже писать с большой буквы — Библиотека Muse.

Это не символы — связи между вытянутыми из Библиотеки элементами с их оригиналами в самой Библиотеке нет.

Содержимое Библиотеки подразделяется по папкам, что удобно.

Папки, или наборы, можно импортировать и экспортировать в формате MULIB. На сайте muse.adobe.com/exchange можно найти множество полезных наборов элементов, которые можно скачать и импортировать в свою Библиотеку.

В Библиотеке Muse можно содержать всё, что может содержать страница в Muse. Например, интерактивные компоненты, множество таких компонент уже сейчас можно найти как на muse.adobe.com/exchange, так и на ряде других сайтов.

 

Доработанная параллакс-прокрутка | Теперь она называется 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, г. Холон, Израиль.

 

Архив журналов в свободном доступе.

Купить номер с этой статьей в pdf

На ту же тему:
  • Управление цветом в Adobe Creative Cloud без секретов

     

     

    Подробное руководство по настройке параметров управления цветом в программах Adobe.

    Без модуля управления цветом — Color Management Module (CMM) — и цветовых профилей ICC предсказать на экране монитора результат печати невозможно. Даже при выборе опции Don`t color manage (Не управлять цветом, Отменить управление цветом) * CMM и цветовые профили всегда задействуются в Adobe Photoshop, хотя и не оптимальным образом.

     

  • Начинаем с цвета: предварительная работа детектива *

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

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

     

     

  • Adobe Muse CC 2015: блиц-обзор
    Самые интересные новшества в самом многообещающем инструменте для веб-дизайна.
  • Adobe InDesign CC 2015: блиц-обзор

    Самые интересные новшества  в самом популярном пакете вёрстки.

     

     


comments powered by Disqus