Search Flex Components Free

Custom Search

December 27, 2007

Hide/show effect in Flex

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”
http://www.adobe.com/2006/mxml ” layout=”vertical” creationComplete=”creationCompleteHandler()”>
<mx:Script>
<![CDATA[
// we need to import these modules to be able to create our own effects
import mx.effects.Glow;
import mx.effects.Fade;
import mx.effects.Parallel;

import mx.controls.Button;
import mx.containers.Canvas;

private var myCanvas:Canvas = new Canvas();
private var myButton:Button = new Button();
private var myParallel:Parallel = new Parallel(myCanvas);
private var myVisible:Boolean = true;

// we play the parallel effect when the user clicks the button
private function buttonHandler(event:MouseEvent):void {
if (myVisible) {
// play the effect in reverse, hiding the canvas in the process
myParallel.play(null, true);
myVisible = false;
} else {
// play the effect normaly, making the canvas appear with our Fade and Glow effects applied
myParallel.play();
myVisible = true;
}
}

private function creationCompleteHandler():void {
// define properties for our Canvas
myCanvas.setStyle(”backgroundColor”, 0×000000);
myCanvas.width = 250;
myCanvas.height = 250;

// define properties for our Button and its click event handler
myButton.label = “Hide/Show”;
myButton.addEventListener(MouseEvent.CLICK, buttonHandler);

// define our Fade effect
var myFade:Fade = new Fade();
myFade.alphaFrom = 0;
myFade.alphaTo = 1;
myFade.duration = 1000;

// define our Glow effect
var myGlow:Glow = new Glow();
myGlow.alphaFrom = 1;
myGlow.alphaTo = 0;
myGlow.blurXFrom = 0;
myGlow.blurXTo = 150;
myGlow.blurYFrom = 0;
myGlow.blurYTo = 150;
myGlow.color = 0×000000;

// add our Fade and Glow effects to our Parallel object
myParallel.addChild(myFade);
myParallel.addChild(myGlow);

// add our Canvas and Button objects to the main application
this.addChild(myCanvas);
this.addChild(myButton);
}
]]>
</mx:Script>
</mx:Application>


Related Flex Tutorials