Our Blog

Transitions added to Photoshow example

I added some transitions and a progress bar to our Photoshow example.

For the transitions, I wanted the previous image to fade out and the new image to fade in. But in the original code, the image was binding to the currently selected image, so whenever the selected image changed (by clicking on next or previous buttons), the source of the image would change. The biggest problem with this is that if I changed the currently selected image as soon as the user would click the buttons, the image would change without waiting for the fade out to complete. One of the main changes made to the code is that before I can change the source of the image, I need to wait until the previous image has completely faded out. I do this by using the effectEnd event of the Fade effect to know when this happens, and only then make the change in the image source.

<mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0" effectEnd="updateCurrentPicture()"/>

The updateCurrentPicture() function changes the currently selected image.

To trigger the effect, I used the hideEffect property and when the user clicks “Next”, we set the picture.visible = false:

<mx:Image id="picture" [...] hideEffect="{fadeOut}" />

Adding the fade in effect is simple, and I used the showEffect property of the Image:

<mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>

Another issue was that if I set picture.visible = true as soon as the previous image has faded out, the fade in effect would be applied on a picture that may still be loading, and I would miss the effect. To avoid this, I must wait until I am sure the image has loaded:

<mx:Image [...] complete="picture.visible = true" />

Next update would be to add a timer for autoplaying.

View example
Download the source

Laura

Laura

10 Comments

  2. Joshua Rodgers

    Joshua Rodgers

    Cool very nice indeed. Just needs a tile bar to flip/skip through the images and a image reflector to finish it up.
  3. gurpreet

    gurpreet

    thanx for the example its really very nice n helpful.......
  4. Helder Meneses

    Helder Meneses

    Hi there Laura,

    could you help in putting a timer in your code? how can i do that?

    Thank you...

    Y Rck
  5. mitesh

    mitesh

    hiiiii ppl ven i was facing the same problem with fade effects on this slideshow....and even i wanna add the timer effect to this slideshow ao...........laura can u help me out please
  6. mitesh

    mitesh

    i have already used a timer.......but without using switch picture() and complete event......i will try to use these two ideas.............thamks for the help laura.......u r brilliant
  7. Reshmi

    Reshmi

    hiiii can u please help me how to use timer in a slide show..
  8. sarah

    sarah

    Thanks sooo much for this.

    Just wondering, I am interfacing with Drupal and am not using an xml file I'm using a standard array that I load from Drupal via amf php and xml rpc with the contributed services module. How do I get the first image in the array to autoload?

    Thanks so much again ;)

    Sarah
  9. sarah

    sarah

    Thought I'd post my code :) you can then tell me what Im doing wrong:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="init()" borderColor="#666666" themeColor="#009DFF" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#000000, #666666]">

    <mx:Script>
       <![CDATA[
          import mx.controls.*;
          import mx.rpc.events.*;
          import mx.rpc.remoting.*;
          import mx.utils.ArrayUtil;
          
          
          [Bindable]
          public var articles:Array;
          [Bindable]
          public var currentIndex:int = 0;
          [Bindable]
          public var currentPicture:Object;
          
          public function init():void
          {
             getArticles();
          }
          
          public function onFault(event:FaultEvent):void
          {
             Alert.show(event.fault.faultString, "Error");
          }
          
          public function onViewsResult(event:ResultEvent):void
          {
             articles = ArrayUtil.toArray(event.result);
          }
          
          public function getArticles():void
          {
             article.all();   
          }
          
          // show the next picture in set
             private function goNext():void
             {
                if (currentIndex < articles.length - 1){
                   currentIndex++;
                }
                else {
                   currentIndex = 0;
                }
                switchPictures();
             }
             
             // show the previous picture in set
             private function goPrevious():void
             {
                if (currentIndex != 0){
                   currentIndex--;
                }
                else {
                   currentIndex = articles.length - 1;
                }
                //set the current picture
                switchPictures();
             }
             
             private function switchPictures():void{
                fadeIn.end();
                fadeOut.end();
                picture.visible = false;         
             }
             
             private function updateCurrentPicture():void{
                
                //set the current picture based on current index
                currentPicture = articles[currentIndex];
             }
             
                
             //this changes the set of pictures
             public function set dataProvider(value:Array):void
             {
                articles = value;
                currentIndex = 0;
                updateCurrentPicture();
             }
             
             public function get dataProvider():Array
             {
                return articles;
             }

          
       ]]>
    </mx:Script>

    <mx:RemoteObject showBusyCursor="true" destination="amfphp" source="article" id="article">
    <mx:method name="all" result="onViewsResult(event)" fault="onFault(event)" />
    </mx:RemoteObject>
    <mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0" effectEnd="updateCurrentPicture()"/>
    <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/>

    <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Canvas y="10" width="500" height="460" horizontalCenter="0" backgroundAlpha="1.0">
    <mx:Image id="picture" x="0" y="0" width="500" height="376" source="http://mysite.com/{currentPicture.field_image_attachments[0].filepath}" hideEffect="{fadeOut}" showEffect="{fadeIn}" complete="picture.visible = true" autoLoad="true"/>
       <mx:VBox y="238" height="95" width="500" backgroundColor="#C3C3C3" alpha="0.4" horizontalCenter="0">
       <mx:Button height="25" textAlign="left" horizontalCenter="0" label="{currentPicture.title}" color="#FFFFFF" moveEffect="Move" click="navigateToURL(new URLRequest('http://mysite.com/node/' + currentPicture.nid), '_self');" />
       <mx:Text width="500" height="60" textAlign="left" horizontalCenter="0" text="{currentPicture.teaser}" color="#FFFFFF" moveEffect="Move" />
       </mx:VBox>
       <mx:Button width="58" height="20" styleName="next" click="goNext()" label="Next" color="#FFFFFF" labelPlacement="right" textAlign="right" x="442" y="343"/>
       <mx:Button y="343" width="78" height="20" styleName="previous" click="goPrevious()" x="0" label="Previous" color="#FFFFFF"/>
    </mx:Canvas>
       
    </mx:Canvas>


    </mx:Application>