Did you try adding the button I mentioned? Do you understand what it does?
--- In flexcoders@yahoogroups.com, "kaushal.shah05" <kshah0...@...> wrote: > > 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> >
