0 Replies Latest reply on Jan 31, 2011 9:50 AM by Miggl

    How to Crossfade and Resize Embedded Images?

    Miggl

      Hi all,

       

      I have successfully figured out how to crossfade images, the only problem is that I don't know how to resize them?

      The crossfade target is an image that spans the entire width and height of the screen, and it has scaleContent set to true, so that the images will fill the screen.

       

      The images that are being crossfaded are embedded images using the following syntax:

      [Embed("/com/qamasonry/backgrounds/img_6305.jpg")]

      private const image1:Class;

      These are not he same size as the target image, and so when the crossfade completes, they snap to the scaled size to fill the screen. My questions is: how do I get the embedded images resized prior to the crossfade, so that the crossfade already fills the screen?
      Here is my code:
      <?xml version="1.0" encoding="utf-8"?>
      <s:Application
           xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:mx="library://ns.adobe.com/flex/mx"
           minWidth="955"
           minHeight="600"
           creationComplete="application_creationCompleteHandler(event)"
      >
           <fx:Declarations>
                <s:CrossFade
                     id="crossfade"
                     target="{this.img_background}"
                     duration="3000"
                />
           </fx:Declarations>
           <s:transitions>
                <s:Transition autoReverse="true" />
           </s:transitions>
           <fx:Script>
                <![CDATA[
                     import mx.collections.ArrayCollection;
                     import mx.core.BitmapAsset;
                     import mx.events.FlexEvent;
                     import mx.graphics.BitmapFill;
      
                     private var timer:Timer;
                     private var i:uint = 1;
                     [Embed("/com/qamasonry/backgrounds/img_6305.jpg")]
                     private const image1:Class;
                     [Embed("/com/qamasonry/backgrounds/img_6306.jpg")]
                     private const image2:Class;
                     private function application_creationCompleteHandler(event:FlexEvent):void
                     {
                          timer = new Timer(7000);
                          timer.addEventListener(TimerEvent.TIMER, runCrossfade);
                          timer.start();
                     }
                     private function runCrossfade(event:Event):void
                     {
                          var image_from:Class;
                          var image_to:Class;
      
                          if (this.timer.currentCount % 2 == 0)
                          {
                               image_from = this["image2"];
                               image_to = this["image1"];
                               this.i = 1;
                          }
                          else
                          {
                               image_from = this["image" + i];
                               image_to = this["image" + (i + 1).toString()];
                               this.i++;
                          }
                          this.crossfade.end();
                          this.crossfade.bitmapFrom = new image_from().bitmapData;
                          this.crossfade.bitmapTo = new image_to().bitmapData;
                          this.crossfade.play();
                          this.img_background.source = new image_to;
                     }
                ]]>
           </fx:Script>
           <mx:Image
                id="img_background"
                width="100%"
                height="100%"
                source="{this.image1}"
                scaleContent="true"
           />
      </s:Application>
      
      

       

      Any ideas are appreciated.

      Thanks!