topical media & game development

talk show tell print

graphic-flex-image-effects-10-Flex-Alien.ax

graphic-flex-image-effects-10-Flex-Alien.ax [swf] flex


  

alien(s) demo


  package {
  
          import aether.effects.shaders.ShaderEffect;
          import aether.utils.ImageUtil;
  
          import flash.display.Bitmap;
          import flash.display.BitmapData;
          import flash.display.BitmapDataChannel;
          import flash.display.Sprite;
          import flash.events.Event;
          import flash.filters.DisplacementMapFilter;
          import flash.filters.DisplacementMapFilterMode;
          import flash.geom.ColorTransform;
          import flash.geom.Matrix;
          import flash.geom.Point;
  
[SWF(width=490, height=370, backgroundColor=0x000000)]

shader effect(s)


          
Demonstrates how a shader effect can be applied to a video, updating each video frame. This example loads in a video in which a color can be isolated using the IsolateColorEffect, then generates an effect on just the isolated pixels.

  
  

class


          public class @ax-graphic-flex-image-effects-10-Flex-Alien extends Sprite {
  
                  // controls the amount of movement visible in the flames that are generated
                  private static const FLICKER_RATE:Number = 10;
  
                  private var _flame:BitmapData;
                  private var _perlinNoise:BitmapData;
                  private var _perlinOffsets:Array;
                  private var _perlinSeed:int;
                  private var _video:graphic_flex_image_effects_10_Flex_VideoLoader;
                  private var _filteredScreen:Bitmap;
                  private var _shaderEffect:graphic_flex_image_effects_10_Flex_IsolateColorEffect;
  
  

constructor


                  
Constructor. This initiates load of external shader file.

  
                  public function @ax-graphic-flex-image-effects-10-Flex-Alien() {
                          ShaderEffect.shaderFilePath = "graphic-flex-image-effects-10-assets-";
                          _shaderEffect = new graphic_flex_image_effects_10_Flex_IsolateColorEffect(0x00FF00, 5, 50, true);
                          _shaderEffect.addEventListener(Event.COMPLETE, onShaderReady);
                  }
  
  

shader loaded / handler


                  
Handler for when the shader file has loaded. This adds the video loader and sets up the properties used for the flame effect.
parameter: event Event dispatched by ShaderEffect.

  
  
private function onShaderReady(event:Event):void { _shaderEffect.removeEventListener(Event.COMPLETE, onShaderReady); addVideo(); makeFlame(); makeNoise(); _filteredScreen = new Bitmap(); addChild(_filteredScreen); }

video update(s) / handler


                  
Handler for when the video frame updates. This draws the current video frame into the bitmap data and applies an image effect.
parameter: event Event dispatched by VideoLoader.

  
                  private function onVideoRender(event:Event):void {
                          var bitmapData:BitmapData = new BitmapData(_video.width, _video.height);
                          // draws video frame into bitmap data, making sure it is at proper scale
                          var matrix:Matrix = new Matrix();
                          matrix.scale(_video.scaleX, _video.scaleY);
                          bitmapData.draw(_video, matrix);
                          // isolates color in copied data
                          _shaderEffect.apply(bitmapData);
                          _filteredScreen.bitmapData = bitmapData;
                          // updates flame image
                          drawFlame();
                  }
  
  

video loader


                  
Instantiates a video loader to load video and sets up listener for progress.

  
                  private function addVideo():void {
                          _video = new graphic_flex_image_effects_10_Flex_VideoLoader(490, 370, "graphic-flex-image-effects-10-assets-alien.flv");
                          addChild(_video);
                          _video.addEventListener(Event.RENDER, onVideoRender);
                  }
  
  

bitmap to draw


                  
Creates the bitmap data that will be used to draw the flames.

  
                  private function makeFlame():void {
                          // flame image is same size as stage, fully transparent
                          _flame = new BitmapData(
                                  stage.stageWidth,
                                  stage.stageHeight,
                                  true,
                                  0x00000000
                          );
                          addChild(new Bitmap(_flame));
                  }
  
  

perlin noise generator


                  
Initializes Perlin noise properties that will be used in flame animation.

  
                  private function makeNoise():void {
                          // noise bitmap data is same size as flame bitmap data
                          _perlinNoise = _flame.clone();
                          _perlinSeed = int(new Date());
                          // one octave requires one point
                          _perlinOffsets = [new Point()];
                  }
  
  

apply perlin noise


                  
Applies the Perlin noise to the bitmap data, offsetting the octave displacement by the FLICKER_RATE each time this method is called.

  
                  private function applyNoise():void {
                          _perlinNoise.perlinNoise(
                                  20,
                                  20,
                                  1,
                                  _perlinSeed,
                                  false,
                                  true,
                                  BitmapDataChannel.RED,
                                  true,
                                  _perlinOffsets
                          );
                          // altering offset contributes to upward animation of flames
                          (_perlinOffsets[0] as Point).y += FLICKER_RATE;
                  }
  
  

draw flame(s0


  
                  
Updates the flame bitmap data each frame, creating the animation.

  
                  private function drawFlame():void {
                          // move the flame image up slightly, creating upward movement of flames
                          _flame.scroll(0, -3);
                          // draw the current filtered image into flame at a reduced alpha
                          _flame.draw(
                                  _filteredScreen,
                                  null,
                                  new ColorTransform(1, 1, 1, .1)
                          );
  
// apply new Perlin noise with altered offset applyNoise(); // displacement flame image with updates Perlin noise ImageUtil.applyFilter( _flame, new DisplacementMapFilter( _perlinNoise, new Point(), BitmapDataChannel.RED, BitmapDataChannel.RED, 2, 8, DisplacementMapFilterMode.CLAMP ) ); } } }


(C) Æliens 27/08/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> </script> <script type="text/javascript"> _uacct = "UA-2780434-1"; urchinTracker(); </script>