Flash AS3自定義按鈕翻轉（Windows 7風格）

Question

注意： 我選擇保留主題的歷史記錄，因為我認為搜索過程可能對某人有用。 如果您想要解決方案，請轉到我的帖子的底部。

我進行了搜索，但在Google和StackOverflow上都找不到答案（甚至沒有關於它的單個教程）。 我想在Windows 7任務欄之類的按鈕上創建鼠標懸停突出顯示。 高亮顯示移動，並且取決於鼠標在按鈕上的位置。 我不希望按鈕上的任何圖像（僅顏色漸變）保持標准組件。 如何應用此翻轉效果？

返回，我嘗試運行以下代碼：

    <?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin 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="65" minHeight="22"
             creationComplete="GlassButtonSkin_creationCompleteHandler(event)"> 

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

    <fx:Declarations>

    </fx:Declarations>


    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function GlassButtonSkin_creationCompleteHandler(event:FlexEvent):void{
                this.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler);
                this.addEventListener(MouseEvent.CLICK,mouseClickHandler);
            }

            private function mouseOverHandler(event:MouseEvent):void{
                this.overEffectRadialGradient.y = event.stageY;
                this.labelDisplay.text = "your in";
                this.commitProperties();
            }
            private function mouseClickHandler(event:MouseEvent):void{
                this.labelDisplay.text = "your in";
            }
        ]]>
    </fx:Script>


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

    <s:transitions>
        <s:Transition fromState="up" toState="over" autoReverse="true">
            <s:Fade target="{overEffect}" alphaFrom="0" alphaTo="1" duration="500"/>
        </s:Transition>
    </s:transitions>




    <!-- inner border --> 
    <s:Rect left="0" right="0" top="0" bottom="0" id="innerBorder" radiusX="4" radiusY="4">
        <s:stroke>     
            <s:SolidColorStroke id="innerBorderStroke" weight="1" color="#ffffff" />
        </s:stroke>
    </s:Rect>

    <!-- outer border --> 
    <s:Rect left="1" right="1" top="1" bottom="1" id="outerBorder" radiusX="4" radiusY="4">
        <s:stroke>     
            <s:SolidColorStroke id="outerBorderStroke" weight="1" color="#000000"/>
        </s:stroke>
    </s:Rect>

    <!-- fill -->
    <!--- Defines the appearance of the Button component's background. -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:SolidColor alpha="0.5" color="#000000"/>
        </s:fill>
    </s:Rect>

    <s:Rect id="backgroundTopPart" left="1" right="1" top="1" height="50%"
            includeIn="up,over,disabled">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="#ffffff" alpha="0.6"/>
                <s:GradientEntry color="#ffffff" alpha="0.2"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <s:Rect id="overEffect" left="1" right="1" bottom="1" height="50%" radiusX="4" radiusY="4"
            includeIn="over,down">
        <s:fill>        
            <s:RadialGradient id="overEffectRadialGradient" x="{width*0.5}" y="{height*0.5}" scaleY="{height}" scaleX="{width/1.5}">
                <s:GradientEntry color="#8dbdff" alpha="0.7" />
                <s:GradientEntry color="#8dbdff" alpha="0"/>
            </s:RadialGradient>
        </s:fill>
    </s:Rect>


    <s:Label id="labelDisplay"
             text="Send"
             textAlign="center" 
             verticalAlign="middle" 
             color="#FFFFFF"
             horizontalCenter="0" verticalCenter="1" 
             left="10" right="10" top="2" bottom="2">
    </s:Label>



</s:SparkSkin>

問題是沒有捕獲任何事件。 我試圖更改click事件上的標簽文本以進行測試，但它根本不起作用（沒有事件句柄）。 真的很奇怪 你能幫忙嗎？

編輯15/11/11我發現我的creationCompleteHandler需要parent.mouseChildren = true; 捕獲鼠標事件。 我放了它，現在我可以看到捕獲了鼠標事件，但是即使刪除狀態轉換並且以visible = true / false進行播放，也不再顯示我的rollovereffect。 鼠標懸停在處理程序上的效果

最后的編輯 ，感謝所有人，我終於找到了解決問題的方法。 我的解決方案：

 <?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin 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="65" minHeight="22"
             creationComplete="GlassButtonSkin_creationCompleteHandler(event)"> 

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

    <fx:Declarations>

    </fx:Declarations>


    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.graphics.RadialGradient;

            import spark.effects.Fade;
            import spark.effects.animation.RepeatBehavior;

            [Bindable]
            private var rectRollOverEffect:Rect = new Rect();
            private var radialGradientRollOverEffect:RadialGradient = new RadialGradient();
            private var gradientEntryRollOverEffect1:GradientEntry = new GradientEntry(0x8dbdff,NaN,0.7);
            private var gradientEntryRollOverEffect2:GradientEntry = new GradientEntry(0x8dbdff,NaN,0);
            private var indexOfRollOverEffect:int;
            private var myFade:Fade;

            protected function GlassButtonSkin_creationCompleteHandler(event:FlexEvent):void{
                parent.mouseChildren = true;
                this.addEventListener(MouseEvent.MOUSE_MOVE,mouseMoveHandler,true);
                this.addEventListener(MouseEvent.MOUSE_OUT,mouseOutHandler,true);
                this.addEventListener(MouseEvent.MOUSE_OVER,mouseOverHandler,true);

                this.addElement(rectRollOverEffect);
                indexOfRollOverEffect = this.getElementIndex(rectRollOverEffect);
                this.removeElementAt(indexOfRollOverEffect);
            }

            private function mouseOverHandler(event:MouseEvent):void{
                if(this.currentState == "disabled")
                    return;

                createRollOverEffect(event,0);

                myFade = new Fade(this.getElementAt(indexOfRollOverEffect));
                myFade.alphaFrom = 0;
                myFade.alphaTo = 1;
                myFade.duration = 200;
                myFade.end();
                myFade.play();
            }

            private function mouseMoveHandler(event:MouseEvent):void{
                if(this.currentState == "disabled")
                    return;

                this.removeElementAt(indexOfRollOverEffect);
                createRollOverEffect(event,1);
            }

            private function mouseOutHandler(event:MouseEvent):void{
                if(this.currentState == "disabled")
                    return;

                this.removeElementAt(indexOfRollOverEffect);
            }

            private function createRollOverEffect(event:MouseEvent,alpha:int):void{
                rectRollOverEffect.alpha = alpha;
                rectRollOverEffect.left = 2;
                rectRollOverEffect.right = 2;
                rectRollOverEffect.bottom = 2;
                rectRollOverEffect.top = 2;
                rectRollOverEffect.radiusX = 4;
                rectRollOverEffect.radiusY = 4;

                radialGradientRollOverEffect.entries = [gradientEntryRollOverEffect1,gradientEntryRollOverEffect2];
                radialGradientRollOverEffect.x = event.localX;
                radialGradientRollOverEffect.y = height-2;
                radialGradientRollOverEffect.scaleX = width/1.5;
                radialGradientRollOverEffect.scaleY = height;

                rectRollOverEffect.fill = radialGradientRollOverEffect;

                this.addElementAt(rectRollOverEffect,indexOfRollOverEffect);
            }
        ]]>
    </fx:Script>


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

    <s:transitions>
        <s:Transition fromState="over" toState="disabled">
            <s:CallAction target="{this}" functionName="removeElement" args="{[this.rectRollOverEffect]}"/>
        </s:Transition>
    </s:transitions>



    <!-- outer border --> 
    <s:Rect left="0" right="0" top="0" bottom="0" id="outerBorder" radiusX="4" radiusY="4">
        <s:stroke>     
            <s:SolidColorStroke id="outerBorderStroke" weight="1" color="#ffffff" />
        </s:stroke>
    </s:Rect>

    <!-- inner border --> 
    <s:Rect left="1" right="1" top="1" bottom="1" id="innerBorder" radiusX="4" radiusY="4">
        <s:stroke>     
            <s:SolidColorStroke id="innerBorderStroke" weight="1" color="#000000"/>
        </s:stroke>
    </s:Rect>

    <!-- fill -->
    <!--- Defines the appearance of the Button component's background. -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:SolidColor alpha="0.5" color="#000000"/>
        </s:fill>
    </s:Rect>

    <s:Rect id="backgroundTopPart" left="1" right="1" top="1" height="50%"
            includeIn="up,over,disabled">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="#ffffff" alpha="0.5" ratio="0.1"/>
                <s:GradientEntry color="#ffffff" alpha="0.1"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>


    <s:Label id="labelDisplay"
             text="Send"
             textAlign="center" 
             verticalAlign="middle" 
             color="#FFFFFF"
             horizontalCenter="0" verticalCenter="1" 
             left="10" right="10" top="2" bottom="2">
    </s:Label>

    <s:Rect id="disableForeground" left="0" right="0" top="0" bottom="0"
            includeIn="disabled">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="#7B7B7B" alpha="0.6" ratio="0.1"/>
                <s:GradientEntry color="#aaaaaa" alpha="0.3"/>
            </s:LinearGradient>
        </s:fill>
    </s:Rect>


</s:SparkSkin>

Answer 1

這里有一些入門步驟：

1. 創建漸變。 可能：
   • 預定義的圖像
   • 一個圓，填充有設置為透明的外部漸變顏色。 也許需要轉變為橢圓形。
2. 使用按鈕的區域遮蓋漸變。
3. 偵聽按鈕區域上的鼠標懸停和鼠標懸停事件。 在鼠標移動時將漸變的位置更新為鼠標位置（或僅mouse.y ）。

我不能保證它會看起來像Windows 7任務欄中的樣子，因為它取決於按鈕的背景和漸變的形狀。 我不確定在那里是否使用了其他效果。 您可以通過添加更多漸變來增加一些透明度，這些漸變會根據鼠標距離而改變其透明度，並嘗試使用多次混合模式 ，可以產生很好的效果。

---

更新 -我認為this.overEffectRadialGradient.y = event.stageY; 使用錯誤的坐標。 如果按鈕為0,0 ，則可能有效。 本地坐標應該是正確的： event.localY 。