sequencing through several images

Question

I'm using flex and have a few images that I need to sequence through. I may add some text under each image. What I'm trying to do is automatically sequence through these images such that a black fading effect appears briefly between each image and the next - sure you've seen that sort of thing before.

My questions are this:

• should these images be considered as states of a component or what? I was going to go that way, but corrections are welcome
• how to get that black fading effect between the images and the next. Any clues please

Update: found an example of it. This example has more elements, but the idea is the same, an images fades and another images loads.

http://www.lifeblue.com/flash/lb_banner.swf

Answer 1

You can try using a ViewStack and a Timer to iterate through its children. Just add a fade in/fade out effect on them and you'll get what you're looking for.
Something like that :

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

    <mx:Script>
        <![CDATA[
            private var timer:Timer;

            private function creationCompleteHandler():void
            {
                timer = new Timer( 2000 );
                timer.addEventListener( TimerEvent.TIMER, timerHandler );
                timer.start();
            }

            private function timerHandler( e:TimerEvent ):void
            {
                if( vs.selectedIndex == vs.getChildren().length - 1 )
                    vs.selectedIndex = 0;
                else
                    vs.selectedIndex++;
            }
        ]]>
    </mx:Script>

    <mx:Fade id="fadeIn"  alphaFrom="0" alphaTo="1" duration="500" effectEnd="timer.start();"/>
    <mx:Fade id="fadeOut" alphaFrom="1" alphaTo="0" duration="500" effectEnd="timer.stop();"/>

    <mx:ViewStack id="vs">
        <mx:Canvas showEffect="fadeIn" hideEffect="fadeOut">
            <mx:Image source="picture1.jpg"/>
        </mx:Canvas>
        <mx:Canvas showEffect="fadeIn" hideEffect="fadeOut">
            <mx:Image source="picture2.jpg"/>
        </mx:Canvas>
        <mx:Canvas showEffect="fadeIn" hideEffect="fadeOut">
            <mx:Image source="picture3.jpg"/>
        </mx:Canvas>
    </mx:ViewStack>

</mx:Application>

---

Note that this code isn't the most optimized one. The best would be to create a custom component with a black background and 2 Image components.

• Set the alpha property of both of them to 0
• Load a picture in the first one, then play your fade in effect
• Begin to load the following picture in the second Image component
• Fade out the first one, fade in the second, and load the following picture in the first Image, etc.

This way you only got one Container (instead of one per picture plus the ViewStack) and 2 Images.
It will also be easier to clean them from memory if you need to.