[flexcoders] How do I make this custom Style property work correctly?

[tombaggett]

I'm trying to create a CSS style property that expects an mx:Effect
object to be used in a custom AS class.  I want to detect changes being
made to the style property and assign the specified effect to an effect
trigger belonging to a child of my custom component.

Unfortunately, the specified mx:Effect object seems to be interpreted as
a string instead of an mx:Effect object.  Can anyone tell me what I need
to correct for this to work as expected?

You can see the compiled example here
<http://tommyb.com/flex/styleeffectbug/index.html>  and review the
source code below.  It fails due to a "TypeError: Error #1034: Type
Coercion failed: cannot convert "myTestEffect" to
mx.effects.Effect.Style" in the custom components styleChanged function
at the bottom of this post.

EffectTest.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
                 xmlns:mx="http://www.adobe.com/2006/mxml";
                 xmlns:myComps="myComponents.*"
                 layout="absolute"
                 viewSourceURL="srcview/index.html"
                 >

     <mx:Fade id="myTestEffect" alphaFrom="0.0" alphaTo="1.0"
duration="1000"/>

     <mx:Style>
        MyCustomPanel {
            testEffect: myTestEffect;
        }
     </mx:Style>

     <myComps:MyCustomPanel/>

</mx:Application>

myComponents/MyCustomPanel.as:

package myComponents
{
     import mx.containers.Panel;
     import mx.effects.Effect;
     import mx.controls.Alert;

     [Style(name="testEffect", type="mx.effects.Effect", inherit="no")]

     public class MyCustomPanel extends Panel
     {
         public function MyCustomPanel()
         {
             super();
         }

          override public function styleChanged(styleProp:String):void
         {
             var allStyles:Boolean = !styleProp || styleProp ==
"styleName";

             super.styleChanged(styleProp);

             if (allStyles || styleProp == "testEffect")
                 {
                 var theTestEffect:Effect = getStyle("testEffect");
                 if (theTestEffect)
                     Alert.show("Effect assignment successful");
                 }
         }
    }
}