How do I make this custom Style property work correctly?

Question

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
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");

Answer 1

Thanks for the quick response! I will definitely take your
advice to work around the problem but your answer leads to more
questions.
I can specify effects via an instance when assigning them to
effect triggers and it works without a problem, as seen below. How
does it handle this at compile time?
<mx:Fade id="rollOverFadeUp" alphaFrom="0.35"
alphaTo="1.0" duration="250"/>
<mx:Fade id="rollOutFadeDown" alphaFrom="1.0"
alphaTo="0.35" duration="250"/>
<mx:Style> // this is an external .css file in my app
TextInput {
rollOverEffect: rollOverFadeUp;
rollOutEffect: rollOutFadeDown;
</mx:Style>