>From looking at the source code for that application, the width of the
>indicator bar is bound to the value of the capacityWidth slider.
Try adding the following button to the controls HBox to see what happens:
<mx:Button label="Change Width" click="{capacityWidth.value += 50}"/>
--- In [email protected], "kaushal.shah05" <kshah0...@...> wrote:
>
> Below is the link to the application:
>
> http://degrafa.org/source/CapacityIndicator/CapacityIndicator.html
>
>
> --- In [email protected], "kaushal.shah05" <kshah0097@> wrote:
> >
> > does anyone know how to dynamically change the size of the indicator bar?
> >
> > binding variables to the width and height did not work. I
> > also tried changing the "surface" component but no luck
> >
> > below is the isolated capacity indicator bar code.
> >
> >
> > <!-- Graphics and Paint for the inner bars and background -->
> > <GeometryComposition
> > graphicsTarget="{[capacitySurface]}"
> > propertyChange="initChange(event);">
> >
> >
> > <fills>
> > <SolidFill
> > id="colorOne"
> > color="{cpOne.selectedColor}"/>
> > <SolidFill
> > id="colorTwo"
> > color="{cpTwo.selectedColor}"/>
> > <SolidFill
> > id="colorThree"
> > color="{cpThree.selectedColor}"/>
> > <SolidFill
> > id="colorFour"
> > color="{cpFour.selectedColor}"/>
> >
> >
> > <ComplexFill
> > id="complex">
> > <SolidFill
> > color="{cpFour.selectedColor}"/>
> > <BlendFill
> > blendMode="multiply">
> > <BitmapFill
> > id="crosshatch"
> > source="@Embed('assets/65003.png')"/
> >
> >
> >
> >
> > </BlendFill>
> > </ComplexFill>
> >
> > <LinearGradientFill
> > id="highlight"
> > angle="90">
> > <GradientStop
> > color="#FFF"
> > alpha=".3"/>
> > <GradientStop
> > color="#FFF"
> > alpha=".05"/>
> > </LinearGradientFill>
> > <LinearGradientFill
> > id="shadow"
> > angle="90"
> > blendMode="multiply">
> > <GradientStop
> > color="#000"
> > alpha=".01"/>
> > <GradientStop
> > color="#000"
> > alpha=".5"/>
> > </LinearGradientFill>
> > <LinearGradientFill
> > id="inset"
> > angle="90">
> > <GradientStop
> > color="#CCC"
> > alpha=".2"
> > ratio="0"
> > ratioUnit="pixels"/>
> > <GradientStop
> > color="#FFF"
> > alpha=".3"
> > ratio="16"
> > ratioUnit="pixels"/>
> > </LinearGradientFill>
> > </fills>
> >
> >
> > <strokes>
> > <SolidStroke
> > id="whiteStroke"
> > color="#FFF"
> > weight="1"
> > alpha=".15"/>
> > <SolidStroke
> > id="darkStroke"
> > color="#000"
> > weight="1"
> > alpha=".2"/>
> > </strokes>
> >
> >
> > <RegularRectangle
> > id="insetRect"
> > width="{capacityWidth.value}"
> > height="{capacitySurface.height}"
> > fill="{inset}"/>
> >
> >
> > <RegularRectangle
> > id="fourthRect"
> > width="{capacitySlider.values[3]}"
> > height="{capacitySurface.height}"
> > fill="{complex}"/>
> > <RegularRectangle
> > id="thirdRect"
> > width="{capacitySlider.values[2]}"
> > height="{capacitySurface.height}"
> > fill="{colorThree}"/>
> > <RegularRectangle
> > id="secondRect"
> > width="{capacitySlider.values[1]}"
> > height="{capacitySurface.height}"
> > fill="{colorTwo}"/>
> > <RegularRectangle
> > id="firstRect"
> > width="{capacitySlider.values[0]}"
> > height="{capacitySurface.height}"
> > fill="{colorOne}"/>
> >
> >
> > <RegularRectangle
> > id="shadowRect"
> > width="{capacityWidth.value}"
> > height="{capacitySurface.height}"
> > fill="{shadow}"/>
> > <VerticalLineRepeater
> > x="20"
> > y="0"
> > y1="{capacitySurface.height}"
> > moveOffsetX="20"
> > count="{capacityWidth.value/20}"
> > stroke="{darkStroke}"/>
> > <VerticalLineRepeater
> > x="21"
> > y="0"
> > y1="{capacitySurface.height}"
> > moveOffsetX="20"
> > count="{capacityWidth.value/20}"
> > stroke="{whiteStroke}"/>
> > <RoundedRectangleComplex
> > id="highlightRect"
> > bottomLeftRadius="10"
> > bottomRightRadius="10"
> > width="{capacityWidth.value}"
> > height="{capacitySurface.height/2}"
> > fill="{highlight}"/>
> >
> >
> > </GeometryComposition>
> >
> >
> > <!-- Masked Surface and Filter for the Capacity Indicator -->
> > <Surface
> > id="capacitySurface"
> > verticalCenter="0"
> > horizontalCenter="0"
> > width="{capacityWidth.value}"
> > height="40"
> > mask="{roundMask}">
> >
> >
> > <GeometryGroup
> > id="roundMask">
> > <RoundedRectangle
> > width="{capacityWidth.value}"
> > height="{capacitySurface.height}"
> > cornerRadius="20"
> > fill="{colorOne}"/>
> > </GeometryGroup>
> >
> >
> > <filters>
> > <filters:GlowFilter
> > color="#000000"
> > alpha=".1"
> > blurX="4"
> > blurY="4"
> > inner="true"
> > quality="6"/>
> > </filters>
> >
> >
> > </Surface>
> >
>
