Перейти к содержимому
  • Урок девятый. Новые возможности. Параметр <color>

    Всем доброго времени суток.

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

    Но теперь все по порядку.

    Новые параметры работают в версии Muse 2014.3 и старше. Для этого в <HTMLWidget formatNumber=”3”> указываем формат 3.

    Оба параметра содержат уже давно известные нам атрибуты name и label. О них мы сегодня не будем говорить. Мы поговорим о более интересных специфических параметрах.

    Параметр Выбора цвета (<color>)

    Параметр позволяет в меню виджета открыть мини-окно где пользователь может удобно выбрать цвет, как и при выборе цвета любого другого элемента в Muse. Данные из этого параметра передаются в виджет как в формате RGB (0, 0, 0) так и в формате HEX (#000000). Способ передачи определяться при создании виджета.

    Значение цвета по-умолчанию - ( defaultValue ) – изначальное значение параметра цвета при первом его размещении в Adobe Muse. Может быть задано как в формате RGB (0, 0, 0) так и в формате HEX (#000000). (Обязательный атрибут)

    Формат RGB ( rgbColor ) – Имеет формат да или нет (true, или false). Если включен, то передаст в виджет цвет в формате RGB через запятую (Пример: 255, 255, 255).

    Формат HEX( formatHexColor )  – Имеет формат да или нет (true, или false). Если включен, то передаст в виджет цвет в формате HEX через запятую (Пример: #ff0000).

    Поддержка отсутствия цвета ( supportsNoneColor ) - Имеет формат да или нет (true, или false). Если включен, позволит пользователю не выбирать цвет, другими словами – выбрать прозрачный цвет.

    Теперь сразу разберем параметр на примере:

    Для первого примера возьмем уже известный нам Text Shadow.

    Ранее параметр цвета тени состоял из 3 параметров и был крайне неудобный для настройки:

    <number name="redColor" defaultValue="0" min="0" max="255" stap="1" snap="1" />
    <number name="greenColor" defaultValue="0" min="0" max="255" stap="1" snap="1" />
    <number name="blueColor" defaultValue="0" min="0" max="255" stap="1" snap="1" />

    И передавался в виджет следующим образом:

    text-shadow: 1px 1px 1px rgba({param_redColor}, {param_greenColor}, {param_blueColor}, 1);

    Теперь же все стало намного проще и удобней. Одна строка – один параметр:

    <color name="shadowColor" rgbColor="true" defaultValue="0, 0, 0"/>

    А вот как теперь будет выглядеть передача параметра в виджет:

    text-shadow: 1px 1px 1px rgba({param_shadowColor}, 1);

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

    Ранее цвет секунд в таймере задавался через параметр текст:

    <text name="colorTimerSec" defaultValue="#FF0000" />

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

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

    <color name="colorTimerSec" formatHexColor="true" defaultValue="#FF0000" />

    При этом суть передачи в само тело виджета не поменялось:

    .sectext
    {
    color: {param_colorTimerSec};
    }

    В следующем мини-уроке мы рассмотрим параметр передачи файлов <file> на конкретном примере.

    Вопросы к этому уроку задавайте в комментариях ниже.

    Отзывы пользователей

    Рекомендуемые комментарии

    Оставлять сообщения могут только участники клуба

    Вступите в клуб или войдите под своим аккаунт, чтобы писать сообщения

    Вступить в клуб

    Зарегистрируйтесь для получения аккаунта. Это просто!

    Зарегистрировать аккаунт

    Войти

    Уже зарегистрированы? Войдите здесь.

    Войти сейчас
×