I've tried using States to zoom in/out but no luck. Full code below:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml";
layout="absolute"
xmlns="http://www.degrafa.com/2007";
xmlns:reflector="com.rictus.reflector.*"
xmlns:filters="flash.filters.*"
backgroundGradientColors="[ #666666, #222222 ]"
color="#FFFFFF" viewSourceURL="srcview/index.html">
<!-- Define one view state, in addition to the base state.-->
<mx:states>
<mx:State name="recede">
<mx:SetProperty target="{capacitySurface}" name="scaleX"
value=".5"/>
<mx:SetProperty target="{capacitySurface}" name="scaleY"
value=".5"/>
<mx:SetEventHandler target="{button1}" name="click"
handler="currentState=''"/>
<!-- <mx:SetProperty target="{capacitySurface}" name="width"
value="900"/>-->
</mx:State>
</mx:states>
<mx:transitions>
<!-- Define the transition from the base state to the Register state.-->
<mx:Transition id="toRegister" fromState="*" toState="recede">
<mx:Sequence targets="{[capacitySurface, theReflection]}">
<mx:RemoveChildAction/>
<mx:Resize targets="{[capacitySurface, theReflection]}"/>
<mx:AddChildAction/>
</mx:Sequence>
</mx:Transition>
<!-- Define the transition from the Register state to the base state.-->
<mx:Transition id="toDefault" fromState="recede" toState="*">
<mx:Sequence targets="{[capacitySurface, theReflection]}">
<mx:RemoveChildAction/>
<mx:Resize targets="{[capacitySurface, theReflection]}"/>
<mx:AddChildAction/>
</mx:Sequence>
</mx:Transition>
</mx:transitions>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
// Updates the Reflection when the bar widths change.
private function initChange(event:Event):void{
if(theReflection){
theReflection.invalidateDisplayList();
}
}
[Bindable]
public var ac:Array = new Array([40, 120, 280, 310]);
import flash.events.MouseEvent;
public function doZoom(event:MouseEvent):void {
if (zoomAll.isPlaying) {
zoomAll.reverse();
}
else {
// If this is a ROLL_OUT event, play the effect backwards.
// If this is a ROLL_OVER event, play the effect forwards.
zoomAll.play([event.target], event.type ==
MouseEvent.ROLL_OUT ? true : false);
}
}
]]>
</mx:Script>
<mx:Zoom id="zoomAll" zoomWidthTo="1" zoomHeightTo="1"
zoomWidthFrom=".5" zoomHeightFrom=".5" />
<!-- Graphics and Paint for the inner bars and background -->
<GeometryComposition
graphicsTarget="{[capacitySurface]}"
propertyChange="initChange(event);" id="geo">
<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="{capacityHeight.value}"
fill="{inset}"/>
<RegularRectangle
id="fourthRect"
width="{capacitySlider.values[3]}"
height="{capacityHeight.value}"
fill="{colorFour}"/>
<RegularRectangle
id="thirdRect"
width="{capacitySlider.values[2]}"
height="{capacityHeight.value}"
fill="{colorThree}"/>
<RegularRectangle
id="secondRect"
width="{capacitySlider.values[1]}"
height="{capacityHeight.value}"
fill="{colorTwo}"/>
<RegularRectangle
id="firstRect"
width="{capacitySlider.values[0]}"
height="{capacityHeight.value}"
fill="{colorOne}"/>
<RegularRectangle
id="shadowRect"
width="{capacityWidth.value}"
height="{capacityHeight.value}"
fill="{shadow}"/>
<VerticalLineRepeater
x="20"
y="0"
y1="{capacityHeight.value}"
moveOffsetX="20"
count="{capacityWidth.value/20}"
stroke="{darkStroke}"/>
<VerticalLineRepeater
x="21"
y="0"
y1="{capacityHeight.value}"
moveOffsetX="20"
count="{capacityWidth.value/20}"
stroke="{whiteStroke}"/>
<RoundedRectangleComplex
id="highlightRect"
bottomLeftRadius="10"
bottomRightRadius="10"
width="{capacityWidth.value}"
height="{capacityHeight.value/2}"
fill="{highlight}"/>
</GeometryComposition>
<!-- Masked Surface and Filter for the Capacity Indicator -->
<Surface
id="capacitySurface"
verticalCenter="0"
horizontalCenter="0"
width="{capacityWidth.value}"
height="{capacityHeight.value}"
mask="{roundMask}" rollOutEffect="doZoom(event)"
rollOverEffect="doZoom(event)">
<GeometryGroup
id="roundMask">
<RoundedRectangle
width="{capacityWidth.value}"
height="{capacityHeight.value}"
cornerRadius="{capacityHeight.value/2}"
fill="{colorOne}"/>
</GeometryGroup>
<filters>
<filters:GlowFilter
color="#000000"
alpha=".1"
blurX="4"
blurY="4"
inner="true"
quality="6"/>
</filters>
</Surface>
<!-- The Reflection -->
<reflector:Reflector
id="theReflection"
target="{capacitySurface}"
alpha=".5"
falloff=".5"
blurAmount=".1"/>
<!-- The Controls -->
<mx:HBox
x="20"
y="20"
verticalAlign="middle">
<mx:HBox width="100%">
<mx:Label
text="Colors"
fontWeight="bold"/>
<mx:ColorPicker
id="cpOne"
selectedColor="#62ABCD"/>
<mx:ColorPicker
id="cpTwo"
selectedColor="#CC5500"/>
<mx:ColorPicker
id="cpThree"
selectedColor="#FFC858"/>
<mx:ColorPicker
id="cpFour"
selectedColor="#609E66"/>
</mx:HBox>
<mx:Button label="Change Width" click="{capacityWidth.value +=
150}"/>
<mx:Button label="Change state" click="currentState='recede'"
id="button1"/>
<mx:Label
text="Capacities"
fontWeight="bold" id="label1"/>
<mx:HSlider
id="capacitySlider"
thumbCount="4"
minimum="0"
maximum="{capacityWidth.value}"
liveDragging="true"
snapInterval="2"
values="[40,120,280,310]"/>
<mx:Label
text="Width"
fontWeight="bold"/>
<mx:HSlider
id="capacityWidth"
minimum="100"
maximum="1200"
liveDragging="true"
snapInterval="8"
value="800"/>
<mx:Label text="Height"/>
<mx:HSlider
id="capacityHeight"
minimum="10"
maximum="40"
liveDragging="true"
snapInterval="2"
value="40"/>
</mx:HBox>
</mx:Application>
