flash AS3自定義按鈕翻轉（windows 7樣式）

Question

注意： 我選擇保​​留主題的歷史，因爲我認爲搜索過程可能對某人有用。如果你想讓解決方案進入我的文章底部。

我搜查，但我沒有找到我無論是在谷歌和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> 

的問題是，沒有事件被捕獲。我嘗試更改單擊事件上的標籤文本進行測試，但它根本不起作用（無事件句柄）。這真的很奇怪。你能帶來一些幫助嗎？

編輯15/11/11 我發現我的creationCompleteHandler需要一個parent.mouseChildren = true;捕獲鼠標事件。我把它和現在我可以看到，鼠標事件被捕獲，但我的rollovereffect不再顯示了，即使我刪除狀態的轉換，我玩visible = true/false;我的鼠標在處理程序中的效果。

最後編輯 我終於找到了我的問題的解決方案，謝謝大家。 我的解決方案：

<?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 over和mouse out事件。在mouse move上將漸變的位置更新爲鼠標位置（或僅mouse.y）。

我不能保證它看起來和windows 7任務欄完全一樣，因爲它取決於按鈕的背景和漸變的形狀。我不確定是否有其他效果。您可以通過添加更多漸變來增加事物的效果，這些漸變會根據鼠標距離更改其透明度，並嘗試使用multiply blend mode，從而獲得很好的效果。

---

更新 - 我想this.overEffectRadialGradient.y = event.stageY;使用了錯誤的座標。不過，如果按鈕位於0,0，它可能會有效。本地座標應該是正確的：event.localY。