AnimatePath is a standard Effect class.

Specific properties

• dataTo : Define the target data path (SVG type) of the aniation.

Sample

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" 
               minHeight="600" 
               xmlns:uigfx="http://uigfx.lafabrick.com"  viewSourceURL="srcview/index.html">

    <fx:Script>
        <![CDATA[
            protected function group1_rollOverHandler(event:MouseEvent):void
            {
                animOut.stop(); 
                animIn.play();
                
                colorAnimOut.stop();
                colorAnimIn.play();
            }

            protected function group1_rollOutHandler(event:MouseEvent):void
            {
                animIn.stop(); 
                animOut.play();
                
                colorAnimIn.stop();
                colorAnimOut.play();
            }

        ]]>
    </fx:Script>

    <fx:Declarations>
        <s:Elastic id="elastic" />
        <s:Bounce id="bounce" />
        
        <s:AnimateColor id="colorAnimIn" target="{fillCol}" colorTo="#00D5BA" />
        <s:AnimateColor id="colorAnimOut" duration="1000" target="{fillCol}" colorTo="#009EE0" />
        
        <uigfx:AnimatePath id="animIn"
            targets="{[cmpPath, cmpPath2]}"
            easer="{elastic}"
            dataTo="M 0 15 L 1 15 L 15 0 L 76 15 L 15 30 L 1 15 L 0 15 z"  />

        <uigfx:AnimatePath
            id="animOut"
            targets="{[cmpPath, cmpPath2]}"
            
            easer="{bounce}"
            duration="1000"
            dataTo="M 0 10 L 40 10 L 35 0 L 60 15 L 35 30 L 40 20 L 0 20 z " />
        
    </fx:Declarations>
    
    <s:Group 
        horizontalCenter="0" verticalCenter="0"
        width="100" height="100" 
        rollOver="group1_rollOverHandler(event)"
        rollOut="group1_rollOutHandler(event)"
        >
        
        <s:Path 
            id="cmpPath"
            horizontalCenter="0" verticalCenter="0"
            
            top="0" bottom="0" left="0" right="0"
            data="M 0 10 L 40 10 L 35 0 L 60 15 L 35 30 L 40 20 L 0 20 z ">
                   
            <s:fill>
                <s:SolidColor id="fillCol" color="#009EE0" />
            </s:fill>
            
            <s:filters>
                <s:GlowFilter inner="true" color="#000000" alpha="0.6" blurX="8" blurY="8" />
            </s:filters> 
        </s:Path>
                
        <s:Path 
            id="cmpPath2"
            horizontalCenter="0" verticalCenter="0"
            
            top="0" bottom="0" left="0" right="0"
            data="M 0 10 L 40 10 L 35 0 L 60 15 L 35 30 L 40 20 L 0 20 z ">
                   
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="#FFFFFF" alpha="0.4" ratio="0" />
                    <s:GradientEntry color="#FFFFFF" alpha="0" ratio="0.5" />
                </s:LinearGradient>
            
            </s:fill>
            
        </s:Path>
        
    </s:Group>
    
</s:Application>

Warning ! The dataTo property must to store a path with same types and same number of vectors.