<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    width="600" height="400"
    creationComplete="create()"
    updateComplete="update()">
    <mx:Canvas id="mainCanvas" x="0" y="0"
        width="600" height="400">
        <mx:UIComponent id="myUIComponent" 
            x="0" y="0"
            width="600" height="400" />
        <mx:Button id="myButton" horizontalCenter="0" y="300" width="120"/>
    </mx:Canvas>
    <mx:Script>
        <![CDATA[
            // imports
            import com.flashdynamix.motion.effects.core.ColorEffect;
            import com.flashdynamix.motion.effects.core.FilterEffect;
            import com.flashdynamix.motion.extras.Emitter;
            import com.flashdynamix.motion.effects.PerlinDisplacementEffect;
            import com.flashdynamix.motion.layers.BitmapLayer;
 
            // bitmap layer that will hold and add all effect and
            // filters needed 
            private var _layer:BitmapLayer;
            // color transformation
            private var _colorTransform:ColorTransform;
            // displacement effect
            private var _displacementEffect:PerlinDisplacementEffect;
            // our emitter which will generate particles
            private var _emitter:Emitter;
            // another two effects
            private var _filterEffect:FilterEffect;
            private var _colorEffect:ColorEffect;
            // fire particle model
            // emitter will generate particles based on it
            [Embed(source="assets/images/fire.png")]
            private var _fireParticle:Class;
 
            // button labels
            private var _startFireText:String = "Start the fire!";
            private var _endFireText:String = "Stop the fire!";
 
            // create method
            // called before all objects are added to stage
            // stage is not available when this method is called
            private function create():void
            {
                myButton.addEventListener(MouseEvent.CLICK, startFire);
                myButton.label = _startFireText;
                // setting up the fire effect but not showing it
                createFire();
            }    
 
            // update method
            // this will be called when all objects are added to stage
            // stage is available at the moment this method is called
            private function update():void
            {
                // setting the quality to low
                // making it higher will overload the processor
                // and because of heavy calculation artefact may appear
                stage.quality = StageQuality.LOW;
            }
 
            // creating the fire
            // setting it up
            private function createFire():void
            {
                // width
                var tW:Number = 600;
                // height 
                var tH:Number = 400;
                // scale 
                var tS:Number = 2;
 
                // creating bitmap layer
                _layer = new BitmapLayer(tW,tH,tS);
                // creating displacement effect
                _displacementEffect = 
                    new PerlinDisplacementEffect(tW/2,tH/2,tS,-6,1);
                _displacementEffect.baseX = 50;
                _displacementEffect.baseY = 40;
                // creating filter effect
                _filterEffect = new FilterEffect(new BlurFilter(3,3,1));
                // creating color effect
                _colorEffect = new ColorEffect(
                    new ColorTransform(1,1,1,0.95,-20,-20,-20));
                // adding the above effects to bitmap layer
                _layer.add(_displacementEffect);
                _layer.add(_filterEffect);
                _layer.add(_colorEffect);
                // creating color transformation
                _colorTransform = new ColorTransform(0,0,0,1,80,30,15);
                // creating the emitter that will generate particles
                _emitter = new Emitter(
                    _fireParticle, // our particle
                    {
                        rotation: "-22, 44", // rotation: starting from -22 deg 
                                             // and having an interval of 44 deg
                        scaleX: tS,
                        scaleY: tS
                    }, // target's properties
                    2, // frequency: how many particles are created on each frame
                    1, // random: how often the particles are created
                    "255, 285", // angle: allowed movement angle
                    "5, 60", // distance: allowed distance
                    0.5, // speed: time (in sec) to reach destination
                    BlendMode.ADD // blend mode
                );
                // adding color tranformation
                _emitter.transform.colorTransform = _colorTransform;
                // setting the emitter's scale
                _emitter.scale = 0.2;
                // setting x & y position
                _emitter.x = 300 - 20;
                _emitter.y = 150;
                // drawing the bitmap layer
                _layer.draw(_emitter.holder);
                // stoping rendering
                _layer.stopRender();
                // hidding the effect
                myUIComponent.visible = false;
                // adding the bitmap layer to our object holder
                myUIComponent.addChild(_layer);
            }
 
            // starting the fire effect
            private function startFire(e:MouseEvent):void
            {
                // showing the object holder
                myUIComponent.visible = true;
                // starting the effect
                _layer.startRender();
                // events and label set for button
                myButton.removeEventListener(MouseEvent.CLICK, startFire);
                myButton.addEventListener(MouseEvent.CLICK, endFire);
                myButton.label = _endFireText;
            }
 
            // ending the fire effect
            private function endFire(e:MouseEvent):void
            {
                // hiddinh the object holder
                myUIComponent.visible = false;
                // stoping the effect
                _layer.stopRender();
                // events and label for button
                myButton.removeEventListener(MouseEvent.CLICK, endFire);
                myButton.addEventListener(MouseEvent.CLICK, startFire);
                myButton.label = _startFireText;
            }
        ]]>
    </mx:Script>
</mx:Application>