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.
