volume indicator techniques - volume

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!

Answer 2

Here is what you need:
<?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>
There is one thing that should be clarified.
When you add GradientEntry one by one and set each ratio to 0, the first two entries do not disappear. So I had to change yellow and red entries to green whenever slider is at 0 or 1 or in between.
Cheers!