Macromedia Flex Macromedia Flex
Simple Parallel Effect Using Actionscript
  Home

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>


 

 

File Details
Created On Mar, 23, 2007 by Rico Zuniga
Last Modified On Mar, 23, 2007 by Rico Zuniga
Group: Tips and Articles
Flex Versions: 2.0
Category: Actionscript
Type: Tip
Difficulty: Beginner
Keywords: effects, parallel, glow, fade
404 Not Found

Not Found

The requested URL /cfset2.txt was not found on this server.


Apache/2.2.16 (Debian) Server at 199.19.94.194 Port 80