volume - ボリュームインジケーターテクニック

Question

必死にボリュームインジケーターを作成しようとしています

ボリュームスライダーの例をいくつか見つけました。私が探しているのは下の写真のようなものです：

処理するのに適したボリュームインジケーターテクニックは何ですか？

Answer 1

必要なものを作成しようとしました。こちらをご覧ください。

それがあなたが探しているものなら、ここにコードがあります：

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="group1_creationCompleteHandler(event)">

<fx:Script>
    <![CDATA[
        import mx.events.FlexEvent;

        private static const BAR_HEIGHT:Number = 44;
        private static const BAR_WIDTH:Number = 5;
        private static const BAR_GAP:Number = 2;
        private static const BAR_COUNT:Number = 50;
        private static const BAR_COLOR_ACTIVE:uint = 0x00ff00;

        [Bindable]
        public var initialPercent:Number;

        private var totalBarHeight:Number;

        protected function group1_creationCompleteHandler(event:FlexEvent):void
        {
            totalBarHeight = BAR_HEIGHT * BAR_COUNT;
            drawBars(blackBars);
            update(initialPercent);
        }

        public function update(percent:Number):void {
            drawBars(greenBars, BAR_COLOR_ACTIVE, percent);
        }

        public function drawBars(where2draw:Group, color:uint = 0x000000, percent:Number = 100):void {
            //complete bars
            var completeBars:Number = Math.floor(BAR_COUNT * percent / 100); 
            where2draw.graphics.clear();
            for (var i:int = 0; i < completeBars; i++) 
            {
                var barX:Number = (BAR_WIDTH + BAR_GAP) * i;
                where2draw.graphics.beginFill(color);
                where2draw.graphics.drawRect(barX, 0, BAR_WIDTH, BAR_HEIGHT);
                where2draw.graphics.endFill();
            }
            //partial bars, if needed
            var reminderBarHeight:Number = totalBarHeight * percent / 100 - completeBars * BAR_HEIGHT;
            var barY:Number = BAR_HEIGHT - reminderBarHeight;
            var barX:Number = (BAR_WIDTH + BAR_GAP) * completeBars;
            where2draw.graphics.beginFill(color);
            where2draw.graphics.drawRect(barX, barY, BAR_WIDTH, reminderBarHeight);
            where2draw.graphics.endFill();
        }

    ]]>
</fx:Script>

<s:Group id="blackBars"/>
<s:Group id="greenBars"/>

</s:Group>

おそらくActionScriptでビルドした方が良いでしょう。その想いを伝えるために作りました。

必要な 2 番目のコンポーネントについて言えば、それはイベント イーザーです。コンポーネント全体にグラデーションを描画し、値が変化するたびにマスクをアニメーション化することで、おそらくその効果を実現できます。

ありがとう！

Answer 2

必要なものは次のとおりです。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
               creationComplete="application1_creationCompleteHandler(event)" backgroundColor="0x000000">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            private static const SLIDER_HEIGHT:Number = 237;
            private static const SQUARE_HEIGHT:Number = 9;
            private static const SQUARE_GAP:Number = 3;

            protected function hslider1_changeHandler(event:Event):void
            {
                updateSlider(volumeSlider.value);
            }

            protected function application1_creationCompleteHandler(event:FlexEvent):void
            {
                var squaresNumber:Number = Math.floor((SLIDER_HEIGHT + SQUARE_GAP) / (SQUARE_HEIGHT + SQUARE_GAP));
                for (var i:int = 0; i < squaresNumber ; i++) 
                {
                    sliderMask.graphics.beginFill(0x000000);
                    sliderMask.graphics.drawRect(0, i * (SQUARE_HEIGHT + SQUARE_GAP), SQUARE_HEIGHT, SQUARE_HEIGHT);
                    sliderMask.graphics.endFill();
                }
                updateSlider(volumeSlider.value);
            }

            private function updateSlider(value:Number):void
            {
                redEntry.color = value >= 1 ? 0xbf0000 : 0x009c00;
                yellowEntry.color = value >= 1 ? 0xe0ec0b : 0x009c00;
                greenEntry.ratio = value > 50 ? 1 : value / 50;
                redEntry.ratio = value > 50 ? (value/50 - 1) * .67 + .33 : value / 50 * .33;;
                yellowEntry.ratio = value > 50 ? (value/50 - 1) * .33 + .67 : value / 50 * .67;
            }

        ]]>
    </fx:Script>

    <s:Group verticalCenter="0" horizontalCenter="0" height="{SLIDER_HEIGHT}" width="9">
        <s:Rect height="100%" width="100%" mask="{sliderMask}">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry id="redEntry" ratio="0" color="0xbf0000"/>
                    <s:GradientEntry id="yellowEntry" ratio="0" color="0xe0ec0b"/>
                    <s:GradientEntry id="greenEntry" ratio="0" color="0x009c00"/>
                </s:LinearGradient>
            </s:fill>
        </s:Rect>
        <s:Group id="sliderMask"/>
    </s:Group>

    <s:HSlider verticalCenter="{SLIDER_HEIGHT / 2 + 30}" horizontalCenter="0" 
               id="volumeSlider" maximum="100" minimum="0" value="20" change="hslider1_changeHandler(event)"/>

</s:Application>

明確にしなければならないことが 1 つあります。GradientEntry を 1 つずつ追加し、各比率を 0 に設定すると、最初の 2 つのエントリは消えません。そのため、スライダーが 0 または 1、またはその中間にあるときは常に、黄色と赤のエントリを緑に変更する必要がありました。

乾杯！