I'm trying to implement a simple image rotator that just rotates among 5 different images. I have it working except that I want a smooth fade out/in between each image.
To keep things simple, I implemented this using mx:states / mx:transitions, as follows: <mx:states> <mx:State name="image01"> <mx:SetProperty target="{button_image}" name="source" value="assets/images/image01.jpg"/> </mx:State> <mx:State name="image02"> <mx:SetProperty target="{button_image}" name="source" value="assets/images/image02.jpg"/> </mx:State> <mx:State name="image03"> <mx:SetProperty target="{button_image}" name="source" value="assets/images/image03.jpg"/> </mx:State> <mx:State name="image04"> <mx:SetProperty target="{button_image}" name="source" value="assets/images/image04.jpg"/> </mx:State> <mx:State name="image05"> <mx:SetProperty target="{button_image}" name="source" value="assets/images/image05.jpg"/> </mx:State> </mx:states> <mx:transitions> <mx:Transition id="image_transition" fromState="*" toState="*"> <mx:Sequence target="{button_image}"> <mx:Fade duration="1000" alphaFrom="1" alphaTo="0" /> <mx:Fade duration="1000" alphaFrom="0" alphaTo="1" /> </mx:Sequence> </mx:Transition> </mx:transitions> The problem I'm having is that the image source is getting replaced before the transition starts, so the image "pops" to the next image and then the new image does a fade in/out. I understand why it's doing this, what I don't know is how to change it so that the fade out happens *before* the image source is changed, and then the fade in happens *after* the image source is changed. I can think of way(s) this might be done by scrapping the states/transitions approach and just writing ActionScript, but I was wondering if there's any easy way to modify what I've already got instead of scrapping it and going in a new direction. Thanks in advance for any feedback.