Hi Friends, I was looking for dissolve effect with spark component , but it seems to throw exception when i use it . Error is "use addElement() method instead of addChild()"
so i did some exploring of the effect in flex4 and wrote a code compatible with flex4 using the "Animate class" my code is below Question : The Effect is not coming smoothly as it comes in the MX component .I need help to make the effect look like MX component Any Suggestion are also wecomed <?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="createInst()"> <s:layout> <s:VerticalLayout verticalAlign="top" horizontalAlign="center" paddingTop="10"/> </s:layout> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> <s:Animate id="animationh" /> <s:Animate id="animations" /> <mx:Dissolve id="dh" duration="800" alphaFrom="1" alphaTo="0" /> <mx:Dissolve id="ds" duration="800" alphaFrom="0" alphaTo="1" /> </fx:Declarations> <fx:Script> <![CDATA[ import mx.core.UIComponent; import mx.events.FlexEvent; import spark.effects.animation.Keyframe; import spark.effects.animation.MotionPath; private var duration : int = 800; private function createInst():void { var motionPaths:Vector.<MotionPath> = motionPaths = new <MotionPath>[new MotionPath("alpha")]; motionPaths[0].keyframes = new <Keyframe>[new Keyframe(0, 1), new Keyframe(duration, 0,0.5)]; var motionPaths_:Vector.<MotionPath> = motionPaths = new <MotionPath>[new MotionPath("alpha")]; motionPaths_[0].keyframes = new <Keyframe>[new Keyframe(0, 0), new Keyframe(duration, 1,0.5)]; //adding teh motion path to instance .. animationh.motionPaths = motionPaths; animations.motionPaths = motionPaths_; } protected function button1_clickHandler(event:MouseEvent):void { vs.selectedIndex == 0 ? vs.selectedIndex = 1 : vs.selectedIndex =0 ; vs1.selectedIndex == 0 ? vs1.selectedIndex = 1 : vs1.selectedIndex =0 ; } ]]> </fx:Script> <s:Button label="ChangeIndex" click="button1_clickHandler(event)" /> <mx:ViewStack id="vs"> <s:NavigatorContent id="fcS" width="100%" hideEffect="{animationh}" showEffect="{animations}"> <s:VGroup width="100%" height="100%" > <s:Label color="0xff0000" text="Display the First Container in View stack " width="200"/> </s:VGroup> </s:NavigatorContent> <s:NavigatorContent width="100%" > <s:VGroup width="100%" height="100%" > <s:Label color="0x00ff00" text="Display the Second Container in View stack " width="200"/> </s:VGroup> </s:NavigatorContent> </mx:ViewStack> <s:Label text="========== Below is the MX Container =============" /> <mx:ViewStack id="vs1"> <mx:VBox width="100%" height="100%" hideEffect="{dh}" showEffect="{ds}"> <s:Label color="0xff0000" text="Display the First Container in View stack (MX) " width="200"/> </mx:VBox> <mx:VBox width="100%" height="100%" > <s:Label color="0x00ff00" text="Display the Second Container in View stack (MX)" width="200"/> </mx:VBox> </mx:ViewStack> </s:Application> Thanks, shavinee -- You received this message because you are subscribed to the Google Groups "Flex India Community" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/flex_india?hl=en.
