6 Replies Latest reply on Jul 6, 2010 2:40 PM by jsd99

    Noob Question

    VirtualCoder Level 1

      I am trying to create a simple slide-show with a List component as a menu and a single Image component, which would show a corresponding image based on the List/menu selection.  This much I got working and I need help with the following issues.

       

      (1) How do I invoke a CrossFade effect during the changing of the image in the Image component ?

       

      (2) Images are coming from various servers via img.source="URL" settings and I would like to kick start these downloads right after the application loads, to cut out having to wait for the image to appear during the CrossFade stage ?

       

      Thanks again,

      VirtualCoder

        • 2. Re: Noob Question
          rtalton Level 4

          ..and if anyone wants to try this in Flex 3, this is one way to do it:

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

           

          <mx:Script>
              <![CDATA[
                 
                  private function handleClick():void{
                      if(fadeIn.isPlaying || fadeOut.isPlaying){
                          return;
                      }
                      fadeOut.play();
                  }
                 
                  private function switchSource():void{
                      if (img.source == 'assets/images/image1.png'){
                          img.source = 'assets/images/image2.png';
                      }else{               
                          img.source = 'assets/images/image1.png';
                      }           
                  }
                 
              ]]>
          </mx:Script>
          <mx:Fade id="fadeOut" target="{img}" duration="500"
              effectEnd="switchSource()"
              alphaFrom="1" alphaTo="0"/>

           

          <mx:Fade id="fadeIn" target="{img}" duration="500"    
              alphaFrom="0" alphaTo="1"/>

           

          <mx:Image id="img"
               creationCompleteEffect="Fade"     
               unload="fadeIn.play()"
               source="assets/images/image1.png" x="84" y="99"/>

           

          <mx:Button id="bnt"
              click="handleClick()"
              label="change image"
              x="43" y="166"/>

           


          </mx:Application>

          1 person found this helpful
          • 3. Re: Noob Question
            VirtualCoder Level 1

            @rtalton, thanks for helping me out.

             

            This example with embedded images does not work.  At the end of CrossFade sequence, between the first and second images, it snaps back to original "from" image.

             

            In addition, I need to be able to supply img.srouce="URL" values as new "to" images. 

             

            So being a noob, my difficulty is in refactoring examples to my own use cases.

             

            Thanks again.

            • 4. Re: Noob Question
              rtalton Level 4

              I don't have Flash Builder 4 so I could not test that example, sorry.

              • 5. Re: Noob Question
                VirtualCoder Level 1

                Tour de Flex has a CrossFade example of 2 embedded images, which are placed into 2 different states.

                 

                The problem is that I am not able to change img2.source until after I set currentState="state2".  That is, img2 has a null value outside of the state in which it belongs.

                 

                The problem with that is that the CrossFade seems to fire upon cureentState change - which is before I am able to set the next image.

                 

                Any ideas?

                 

                When all is said and done, all that I am conceptually trying to do is to have an array of images, whose descriptions are on a List/menu and to have the image change to the corresponding selection in the List/menu.  This much I got working but am stuck on how to implement CrossFade between image changes.  What could be simpler and yet so ...

                • 6. Re: Noob Question
                  jsd99 Level 3

                  Here's an example that should get you on the right track.

                   

                   

                  <?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="startSlideShow()">

                   

                  <fx:Script>

                  <![CDATA[

                  import mx.controls.Image;

                  import mx.effects.Fade;

                  import mx.effects.Parallel;

                   

                  private var images:Array;

                  private var currentImage:Image;

                  private var oldImage:Image;

                  private var imgIndex:int;

                   

                  private function startSlideShow():void {

                  images = [

                  'http://farm5.static.flickr.com/4061/4454034726_1078ceb911_z.jpg',

                  'http://farm5.static.flickr.com/4020/4416094370_d2c93403bf_z.jpg',

                  'http://farm5.static.flickr.com/4040/4338167040_e7821173d3_z.jpg'

                  ];

                   

                  currentImage = new Image();

                  mygroup.addElement(currentImage);

                  imgIndex = 0;

                  currentImage.source = images[0];

                  }

                   

                  private function nextPhoto():void {

                  imgIndex++;

                  if (imgIndex == images.length) { imgIndex = 0; }

                  oldImage = currentImage;

                  currentImage = new Image();

                  mygroup.addElement(currentImage);

                  currentImage.alpha = 0;

                  currentImage.addEventListener(Event.COMPLETE, crossfadeImages);

                  currentImage.source = images[imgIndex];

                  }

                   

                  private function crossfadeImages(e:Event):void {

                  var par:Parallel = new Parallel;

                   

                  var fade1:Fade = new Fade();

                  fade1.alphaFrom = 0;

                  fade1.alphaTo = 1;

                  fade1.target = currentImage;

                   

                  var fade2:Fade = new Fade();

                  fade2.alphaFrom = 1;

                  fade2.alphaTo = 0;

                  fade2.target = oldImage;

                   

                  par.addChild(fade1);

                  par.addChild(fade2);

                  par.play();

                  }

                  ]]>

                  </fx:Script>

                   

                  <s:Group id="mygroup">

                  <s:Button label="next" click="nextPhoto()" x="700" />

                  </s:Group>

                  </s:Application>