Компоненты

Вернемся к сайту

Теперь вернемся к версии сайта, созданной нами в последней лекции. До сих пор кнопки, которые мы создавали, выполняли действия, и только. Сейчас мы создадим класс кнопок, который будет изменять яркость после посещения ссылок, а также создадим состояния rollover и active.

Дополнительная интерактивность кнопки: настройка интенсивности и яркости с помощью Color.setBrightness

Сначала мы создадим метод объекта Color для установки яркости кнопок. Как мы выяснили ранее, мы можем установить интенсивность или яркость на рабочем столе и затем получить настройки из панели Advanced Effect для воспроизведения интенсивности или яркости динамически с помощью setTransform.

Перед началом программирования вкратце вспомним некоторые значения, с которыми придется иметь дело. Итак, rgb - Синий, Белый, Красный, a и b, соответственно, интенсивность и яркость. Отсюда: ra будет означать настройку интенсивности красного цвета, а gb - настройку яркости зеленого цвета.

Нам нужно рассмотреть эффект изменения яркости фильма на отдельные значения для объекта colorTransform. Ниже приведены некоторые настройки:

Первое, что нужно учесть, - это то, что значения для aa и ab везде одинаковы - 100 и 0, соответственно. Вы также заметите, что ra, ga и ba, а также rb, gb и bb всегда содержат одни и те же значения.

Рассмотрим значения яркости. ra, ga и ba совершенно очевидны, и каждое из них содержит значение 100 минус значение яркости. Значения rb, gb и bb сложнее. При 100 они равны 255, а при 50 равны 128. Здесь уже легко догадаться, что получить их значения можно, умножив 255 на значение яркости и затем поделив на 100. Вы можете проверить это предположение, включив некоторые другие значения яркости. Например, rb равен 179 с 70% яркостью. 255 умножаем на 70 и делим на 100, получается 178,5; округляем полученное значение до 179, вот и все! Для отрицательной яркости значения rb, gb и bb равны нулю при любой яркости. ra, ga и ba, стало быть, равны 100 плюс значение яркости, или (как на самом деле), минус абсолютное значение яркости (отбрасываем минус при отрицательном значении).

Теперь напишем метод для использования всего вышеперечисленного. Мы будем проверять, является ли яркость положительной или отрицательной, и в зависимости от этого выполнять нужные действия, вычисляя величины для всех значений преобразования a и b.

color.prototype.setBrightness = function(bright) {
        if (bright<0) {
            var aNum = 100-Math.abs(bright);
            var bNum = 0;
        } else {
            var aNum = 100-bright;
            var bNum = Math.ceil(255*bright/100);
        }
        this.setTransform((ra:aNum, ga:aNum, ba:aNum, aa:100, rb:bNum,
        К gb:bNum, bb:bNum, ab:0});
    };

Просмотрев этот код, становится понятно, что его можно упростить. Мы можем выполнять те же вычисления непосредственно для aNum, независимо от положительности или отрицательности значения яркости, так как Math.abs(bright) будет эквивалентен bright, если bright больше нуля.

color.prototype.setBrightness = function(bright) {
        var aNum = 100-Math.abs(bright);
        if (bright<0 {
            var bNum = 0;
        } else {
            var bNum = Math.ceil(255*bright/100);
        }
        this.setTransform({ra:aNum, ga:aNum, ba:aNum, aa:100, rb:bNum,
        Кgb:bNum, bb:bNum, ab:0});
    };

Мы также можем удалить выражение if...else, применив троичный оператор. Если вы не знакомы с этим подходом, поясним: это способ сокращения выражений if:else, который реализуется примерно так.

var whatever = conditionalStatement ? returnIfTrue : returnIfFalse;

Когда Flash доходит до вопросительного знака, происходит оценка значения перед этим знаком. Если выражение имеет значение "истина", выполняется выражение между вопросительным знаком и двоеточием. Если значением является "ложь", выполняется выражение после двоеточия. Этот подход можно также использовать для инициализации функций. В нашем случае условием должно быть brightness<0. В случае его истинности нам нужно, чтобы возвращался 0, а если оно имеет значение "ложь", нужно будет возвращать Math.ceil (255*bright/100).

var bNum = bright<0 ? 0 : Math.ceil (255*bright/100);

Теперь наш метод в завершенном виде выглядит более компактно.

color.prototype.setBrightness = function(bright) {
        // values for a properties
        var aNum = 100-Math.abs(bright);
        // values for b properties
        var bNum = bright<0 ? 0 : Math.ceil(255*bright/100);
        this.setTransform({ra:aNum, ga:aNum, ba:aNum, aa:100, rb:bNum,
        Кgb:bNum, bb:bNum, ab:0});
    };