volume indicator techniques

Question

Im desperatly trying to build a volume indicator

Just found some volume slider examples. What I look for is like in picture below:

What are good volume indicator techniques to handle ?

Answer 1

I've tried to create what you need. Please take a look here.

If it is what you're looking for, here is the code:

<?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>

Probably it is better to build it with ActionScript. I created it just to convey the idea.

Speaking about the second component you need, it should be event easer. You can probably achieve that effect by drawing a gradient across your component and animating a mask whenever values are changing.

Thanks!