David,

The spark Wipe effect is different from its predecessor in the fact that it inherits from AnimateShaderTransition. This class specializes in animating shaders during a transition. There are ways to make it work outside of a transition, but the usage is awkward.

Another roadblock you'll hit is if you try to use the old wipe effect on new spark components. Due to the addChild/addElement API change, an RTE will be raised.

If you want the old behavior on a spark component, you can wrap the object with a Halo container and use that as the target of a Halo wipe (i.e. WipeRight). Here's an example:

<?xml version="1.0" encoding="utf-8"?>
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/halo"
    xmlns:s="library://ns.adobe.com/flex/spark"
    width="300" height="300">

    <fx:Declarations>
        <mx:WipeRight id="wipe" />
    </fx:Declarations>

    <mx:Box id="box">
        <s:Button id="btn"
            x="0" y="0"
            width="150"
            label="Spark Button"
            click="wipe.play([box])"/>
    </mx:Box>

    <mx:Button id="btn2"
        x="0" y="50"
        width="150"
        label="Halo Button"
        click="wipe.play([btn2])"/>

</s:Application>

And here's an update of your example with the non-transition usage. It can be done. However, it helps to match the size of the target and the bitmap you are going from etc. You avoid some of that awkwardness in your example by binding your rect size to the size of the bitmap. Anyhow, hope this helps a bit more. The animateShader classes are very powerful once you understand their usages:

<?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/halo" >

    <fx:Script>
        <![CDATA[
            import spark.effects.WipeDirection;

            [Embed(source='asset/blue.png')]
            public var blueImage:Class;
            public var blueBitmap:Bitmap = new blueImage();
        ]]>
    </fx:Script>

    <fx:Declarations>
        <s:Wipe id="wipeIn"
        target="{wipeGraphic}"
        direction="{WipeDirection.RIGHT}"
        bitmapFrom="{blueBitmap.bitmapData}"/>
    </fx:Declarations>

    <s:Group id="g1"
    x="143" y="89">
        <s:Rect id="wipeGraphic"
        width="{blueBitmap.width}" height="{blueBitmap.height}">
            <s:fill>
                <mx:SolidColor color="#EEEEEE"/>
            </s:fill>
        </s:Rect>
    </s:Group>

    <s:Button x="140" y="338"
    label="Play Effect"
    click="wipeIn.play()"/>

</s:Application>