Adobe Flex 3 Help

Using standard effect triggers

Chart controls support standard effects triggers, such as showEffect and hideEffect.

The following example defines a set of wipe effects that Flex executes when the user toggles the chart's visibility by using the Button control. Also, Flex fades in the chart when it is created.

<?xml version="1.0"?>
<!-- charts/StandardEffectTriggers.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()">
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     import mx.effects.Fade;

     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2000, Expenses:1500, Amount:450},
        {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
        {Month:"Mar", Profit:1500, Expenses:500, Amount:300}
     ]);

  ]]></mx:Script>

  <!-- Define the effects -->
  <mx:Parallel id="showEffects">
     <mx:WipeRight duration="2000"/>
     <mx:Fade alphaFrom="0" alphaTo="1" duration="4000"/>
  </mx:Parallel>

  <mx:Parallel id="hideEffects">
     <mx:Fade alphaFrom="1" alphaTo="0" duration="2500"/>
     <mx:WipeLeft duration="3000"/>
  </mx:Parallel>

  <mx:Panel title="Area Chart with Effects">
     <mx:AreaChart id="myChart"
        dataProvider="{expenses}"
        creationCompleteEffect="showEffects"
        hideEffect="hideEffects"
        showEffect="showEffects"
     >
        <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="Month"/>
        </mx:horizontalAxis>
        <mx:series>
           <mx:AreaSeries 
                yField="Profit" 
                displayName="Profit"
           />
           <mx:AreaSeries 
                yField="Expenses" 
                displayName="Expenses"
           />
        </mx:series>
     </mx:AreaChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:Panel>

  <mx:Button label="Toggle visibility"
        click="myChart.visible=!myChart.visible"
  />
</mx:Application>

The executing SWF file for the previous example is shown below:

A negative aspect of using standard effect triggers with charts is that the effects are applied to the entire chart control, and not just the data in the chart control. The result is that an effect such as Fade causes the chart's axes, gridlines, labels, and other chart elements, in addition to the chart's data, to fade in or out during the effect. To solve this, you use special charting effect triggers (see Using charting effect triggers).