Mar 23, 2007 - Simple Parallel Effect Using Actionscript
How to add parallel effects to your components using only Actionscript

Here's a simple way to use Actionscript 3.0 to add Parallel effects to your components. Useful if you're going to instantiate the components at runtime, not statically using MXML.

In this example we use Fade and Glow effects on a Canvas component.

<?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", 0x000000);
    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 = 0x000000;
    
    // 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>