<?xml version="1.0" encoding="utf-8"?>
  
  <!--
          ImageMixer:
          
          Displays one of two images, using a Fade effect to switch between them. The idea is to present a control
          the mimics the Image control. For example, there is a source property and the control dispatches both
          progress and complete events.
          
          Note: This code was lifted from the PhotoViewer example shipped with Flex 1.5.
    -->
  
  <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
          horizontalScrollPolicy="off" 
          verticalScrollPolicy="off">
  
      <mx:Metadata>
             [Event(name="complete",type="flash.events.Event")]
             [Event(name="progress",type="flash.events.Event")]
          </mx:Metadata>
          
      <mx:Script>
          <![CDATA[
                  import flash.events.Event;
                  import mx.effects.Fade;
                  import mx.effects.Parallel;
          
                  // activeControl is set to which Image, image1 or image2, is currently being
                  // used.
          public var activeControl:Image;
          
          
          // fades out the currently active image
          public function hideImage() : void {
                  if( activeControl != null ) {
                      var e1:Fade = new Fade(activeControl);
                      e1.duration=800;
                      e1.alphaTo = 0;
                      e1.play();
                  }
          }
  
                  /* set source
  		 * This set method mimics the Image source property and determines which image
  		 * should be set by comparing the activeControl.
  		 */
          public function set source(src:String) : void {
              if (activeControl==image1) {
                  image2.load(src);
              } else {
                  image1.load(src);
              }
          }
  
                  /* mix
  		 * This method uses the Fade effect to dissolve one image into the other. Note that
  		 * it dispatches the 'complete' event, much like the Image control.
  		 */
          private function mix(showObj:Image, hideObj:Image) : void {
              activeControl=showObj;
              var e1:Fade = new Fade(hideObj);
              e1.duration=800;
              e1.alphaTo = 0;
  
              var e2:Fade = new Fade(showObj);
              e2.duration=800;
              e2.alphaTo = 1;
  
              var mixEffect:Parallel = new Parallel();
              mixEffect.addChild(e1);
              mixEffect.addChild(e2);
              mixEffect.play();
                          
                          dispatchEvent(new Event("complete"));
          }
                  
                  /* update
  		 * This method reports the progress of the currently active image
  		 */
                  private function update() : void {
                          dispatchEvent(new Event("progress"));
                  }
      ]]>
      </mx:Script>
  
      <mx:Image id="image1" x="0" y="0"
              width="100%" height="100%" scaleContent="true"
              complete="mix(image1, image2)"
              horizontalAlign="center"
              verticalAlign="middle"
              progress="update()"/>
      <mx:Image id="image2" x="0" y="0"
              width="100%" height="100%" scaleContent="true"
              horizontalAlign="center"
              verticalAlign="middle"
              complete="mix(image2, image1)"  
              progress="update()"/>
  
  </mx:Canvas>