Apache flex 在Flex 4中创建动画蒙皮有困难

我的任务是创建此页面上按钮的图形样式的等效Flex 4实现：

即按钮上的动画发光效果。我已经得到了我认为是适当的基于程序梯度的皮肤基础，但我有两个问题

第一，我无法让任何鼠标事件在皮肤上产生反应。我似乎找不到其他有这个问题的人。在下面的代码中，当鼠标悬停时，startAnimation永远不会被调用，但该事件显然正在被注册。要测试此代码，只需将

skinClass=“ButtonSkin”

添加到主应用程序中的按钮声明中，下面的代码就是ButtonSkin.mxml文件

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx"
        initialize="init()"
        mouseEnabled="true">

    <fx:Metadata>
        [HostComponent("spark.components.Button")]
    </fx:Metadata>

    <fx:Script>
        <![CDATA[
            import flash.events.Event;

            [Bindable]
            private var animatedAlpha:Number = 0.8;
            private var animationDirection:Number = -1;

            private function backAndForth(value:Number, max:Number, min:Number, increment:Number):Number {
                value += (animationDirection * increment);
                if (value < min || value > max)
                {
                    animationDirection *= -1;
                    value += (animationDirection * increment * 2);
                }
                return value;
            }

            private function startAnimation(e:MouseEvent):void {
                animatedAlpha = backAndForth(animatedAlpha, 0.8, 0.3, 0.1); // Or something
                systemManager.addEventListener(MouseEvent.MOUSE_OUT, endAnimation);
            }

            private function endAnimation(e:MouseEvent):void {
                animatedAlpha = backAndForth(animatedAlpha, 0.8, 0.3, 0.1); // Or something
                systemManager.removeEventListener(MouseEvent.MOUSE_OUT, endAnimation);
            }

            private function init():void {
                parent.mouseChildren = true; // Otherwise mouse events don't fire in the skin
                clickableArea.addEventListener(MouseEvent.MOUSE_OVER, startAnimation);
            }
        ]]>
    </fx:Script>


    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <s:Group top="0" bottom="0" left="0" right="0" id="clickableArea">
        <s:Rect top="0" bottom="0" left="0" right="0" radiusX="8" radiusY="8">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="#000000" color.down="#bb0000" color.disabled="#3b3b3b" ratio="0" />
                    <s:GradientEntry color="#353535" color.down="#ff0000" color.disabled="#555555" ratio="1" />
                </s:LinearGradient>
            </s:fill>
        </s:Rect>

        <s:Rect top="0" bottom="0" left="0" right="0" radiusX="8" radiusY="8">
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color.over="#8f1b1b" alpha="0" ratio="0" />
                    <s:GradientEntry color.over="#8f1b1b" alpha="0" ratio="0.4" />
                    <s:GradientEntry color.over="#8f1b1b" alpha="{animatedAlpha}" alpha.down="0" ratio="1" />
                </s:LinearGradient>
            </s:fill>
        </s:Rect>

        <s:Rect top="0" bottom="0" left="0" right="0" radiusX="8" radiusY="8">
            <s:stroke>
                <s:SolidColorStroke color="#000000" color.disabled="#333333" weight="1" />
            </s:stroke>
            <s:fill>
                <s:LinearGradient rotation="90">
                    <s:GradientEntry color="#ffffff" color.disabled="#9e9e9e" alpha="0.6" alpha.down="0.7" ratio="0" />
                    <s:GradientEntry color="#ffffff" color.disabled="#848484" alpha="0.2" alpha.down="0.4" ratio="0.45" />
                    <s:GradientEntry color="#ffffff" alpha="0" ratio="0.46" />
                </s:LinearGradient>
            </s:fill>
        </s:Rect>

        <s:Label id="labelDisplay" color="#ffffff" color.disabled="#aaaaaa" textAlign="center" baseline="center" paddingTop="7" paddingBottom="5" paddingLeft="10" paddingRight="10">
            <s:filters>
                <s:DropShadowFilter distance="0" angle="45" blurX="5" blurY="5" />
            </s:filters>
        </s:Label>
    </s:Group>

[主机组件（“spark.components.Button”）]
最大值）
{
动画方向*=-1；
值+=（动画方向*增量*2）；
}
返回值；
}
私有函数startAnimation（e:MouseEvent）：void{
animatedAlpha=前后（animatedAlpha，0.8，0.3，0.1）；//或其他
systemManager.addEventListener（MouseEvent.MOUSE_OUT，endAnimation）；
}
私有函数endAnimation（e:MouseeEvent）：无效{
animatedAlpha=前后（animatedAlpha，0.8，0.3，0.1）；//或其他
systemManager.removeEventListener（MouseEvent.MOUSE_OUT，endAnimation）；
}
私有函数init（）：void{
parent.mouseChildren=true；//否则鼠标事件不会在皮肤中触发
clickableArea.addEventListener（MouseEvent.MOUSE_在上方，开始动画）；
}
]]>

编辑我找到了鼠标事件不触发的原因。默认情况下，该按钮显然有mouseChildren false，这专门防止事件以低于自身的频率触发。使用

parent.mouseChildren=true修复了此问题。关于问题的下一部分：连续动画

除此之外，我希望得到一些帮助，或者为我指出每帧调用函数的正确方向，以及使用鼠标事件打开和关闭增量调用的能力。（如果这不是你在Flex中制作动画的方式，请原谅，我对基于Flash的动画一无所知。）谢谢
 找到了这两个问题的答案：

按钮防止其子项（包括皮肤）接收鼠标事件。通过设置
parent.mouseChildren=true在皮肤的初始化功能中，正常接收鼠标事件

事实证明，你可以用Flex（Actionscript）制作动画，就像用Javascript制作动画一样：setInterval和clearInterval