注意: 我选择保留该主题的历史记录，因为我认为搜索过程可能对某人有用。如果您想要解决方案，请转到我的帖子底部。
我进行了搜索，但在 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>
问题是没有捕获任何事件。我尝试更改单击事件上的标签文本进行测试，但它根本不起作用(没有事件句柄)。真的很奇怪。你能给我一些帮助吗？
编辑 2011 年 11 月 15 日 我发现我的creationCompleteHandler需要一个parent.mouseChildren = true;捕获鼠标事件。我把它放了，现在我可以看到鼠标事件被捕获，但即使我删除状态转换并使用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>
最佳答案
以下是一些入门步骤:
- 创建渐变。可能:
- 预定义图像
- 一个圆圈，填充外部渐变颜色设置为透明。也许需要转变成椭圆。
- 用按钮区域遮盖渐变。
- 收听mouse over和 mouse out按钮区域上的事件。将渐变位置更新为 mouse move 上的鼠标位置(或仅
mouse.y) .
我不能保证它看起来与 Windows 7 任务栏中一模一样，因为它取决于按钮的背景和渐变的形状。我不确定那里是否使用了额外的效果。您可以通过添加更多渐变(根据鼠标距离改变透明度)并尝试 multiply blend mode 来让事情变得更有趣。这给出了很好的效果。
更新 - 我认为 this.overEffectRadialGradient.y = event.stageY; 使用了错误的坐标。如果按钮位于 0,0 处，它可能会起作用。本地坐标应该是正确的:event.localY。
关于flash AS3自定义按钮翻转(windows 7风格)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8123497/