Значок кнопки Adobe Flex - изменить в оттенках серого и обратно

Question

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

Я бы хотел углубиться в значок кнопки и применить какой-то фильтр оттенков серого, когда кнопка отключена, и удалить фильтр, когда кнопка снова включена. Я попробовал пару вещей, но я не знаю достаточно о Flash-графике, чтобы действительно иметь представление о том, что делать.

Кто-нибудь может дать мне несколько советов? В идеале мне бы хотелось решение Flex 3 (так как большинство моих приложений все еще смешаны с mx / spark), но Flex 4 тоже подойдет.

Answer 1

Это решение Flex3.

mx:Button имеет значок дочернего элемента внутри себя.Вы можете переопределить функцию updateDisplayList и настройщик enabled, чтобы сделать этот значок черно-белым.

Чтобы сделать черно-белое изображение, вам необходимо усреднить значения цвета RGB.Вот формула для вещания и телевидения:

grey = R * 0.3 + b2 * 0.59 + b3 * 0.11

В вашем случае вы можете использовать flash.filters.ColorMatrixFilter на значке, этот фильтр преобразует цвета цели.Черно-белая матрица для фильтра:

[ 0.3, 0.59, 0.11, 0,
  0.3, 0.59, 0.11, 0,
  0.3, 0.59, 0.11, 0,
  0,   0,    1,    0 ]

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

Фильтр применяется для отображения компонента следующим образом:

var filter = Filter();
component.filters.push(filter); // doesn't work, and not because null pointer
component.filters = [filter];   // works

Важно переназначить массив новыми фильтрами, иначе компонент не будет обновлять его.

Answer 2

Используйте скин! В flex 4 они сделали это намного проще с файлами скинов и возможностью выставлять свойства по состоянию. Вот один из наших примеров, который в основном использует состояния и фильтры для изменения эффекта:

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" width="28" height="28" xmlns:Common="UI.Common.*" xmlns:Controls="Core.Flex.Controls.*">
    <fx:Metadata>[HostComponent("Core.Flex.Controls.ToggleIcon")]</fx:Metadata>
    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>

    <s:Group left="2" right="2" top="2" bottom="2" useHandCursor="true" buttonMode="true">
        <Controls:ColorRect width="24" height="24" FillColor="#154b6b" StrokeColor="#FFFFFF" StrokeWeight=".1" alpha=".8" radiusX="6" radiusY="6" includeIn="up, disabled">
            <Controls:filters>
                <s:BevelFilter blurX="5" blurY="5" strength=".56" quality="3" distance="3"/>
            </Controls:filters>
        </Controls:ColorRect>

        <Controls:ColorRect width="24" height="24" FillColor="#1C648E" StrokeColor="#FFFFFF" StrokeWeight="2" radiusX="6" radiusY="6" includeIn="over">
            <Controls:filters>
                <s:BevelFilter blurX="5" blurY="5" strength=".87" quality="3" distance="3"/>
            </Controls:filters>
        </Controls:ColorRect>

        <Controls:ColorRect width="24" height="24" FillColor="#154b6b" StrokeColor="#FFFFFF" StrokeWeight=".1" radiusX="6" radiusY="6" includeIn="down, selectedStates">
            <Controls:filters>
                <s:BevelFilter blurX="5" blurY="5" strength=".1" quality="3" highlightColor="#000000" distance="3"/>
            </Controls:filters>
        </Controls:ColorRect>

        <s:BitmapImage source="{hostComponent.Icon}" left="2" top="2" right="2" bottom="2" alpha=".9" alpha.over="1" alpha.selectedStates="1"/>
    </s:Group>

</s:SparkSkin>