Visual effect when object in ModelLocator changes

Question

Hi all,
I have a feeling that this is straightforward, but I'm drawing a blank. In my app, I have a ViewStack with three views. Each view displays a list of Offer objects (via a Repeater control) and each Offer object has a Status. Offers with a "Pending" status show up on the first view, "Accepted" are on the second view and "Declined" are on the third view. Each Offer that the Repeater displays has a button that lets you change the status. When this button is clicked, a CairngormEvent is dispatched and the status of that Offer is updated in the ModelLocator and the display is updated accordingly. This is all working perfectly.
What I'd like to do is, when you click on a button and the status of an Offer changes (say from Pending to Accepted), instead of that Offer instantly disappearing from the Pending view and showing up on the Accepted view I'd like to have it animated (blur/fade or something). My problem is that I don't know to approach this. I obviously don't want to fire the animation based on the button's click event, since there might be some sort of server issue that keeps the update from happening. Should I create some sort of "StatusChanged" event on the Offer object that fires and then display the animation based on that?
Any help would be appreciated. Thanks!

Answer 1

Hi,
I tried to write a small test liki this:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script>
        <![CDATA[
          [Bindable]
          public var myArray:Array=[1,2,3,4,5];
        ]]>
      </mx:Script>
     <mx:Dissolve id="dissolveOut" duration="500" alphaFrom="1.0" alphaTo="0.0"/>
     <mx:Dissolve id="dissolveIn" duration="500" alphaFrom="0.0" alphaTo="1.0"/>
    <mx:ArrayCollection id="myAC" source="{myArray}"/>
    <mx:Repeater id="myrep" dataProvider="{myAC}" >
        <mx:Label addedEffect="{dissolveIn}" removedEffect="{dissolveOut}" id="Label1" text="This is loop #{myrep.currentItem}"/>
    </mx:Repeater>
    <mx:Button label="Remove" click="myAC.source.pop();myAC.refresh();"/>
    <mx:Button label="Add" click="myAC.source.push(6);myAC.refresh();"/>
</mx:Application>
I used a Label control as element for the Repeater and i attached to the removedEffect and addedEffect the dissolving effect.
It works even if there is a strange behaviour. Before starting the dissolving effect some duplicate labels get shown.
Let me know if it works right for your application
Mark