Databases
StackOverflow2013
Postsdbo
POflash AS3 custom button rollover (windows 7 style)
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POflash AS3 custom button rollover (windows 7 style)
    primarykey
    data
    text
    <p><strong>NOTE:</strong> <em>I chose to keep the history of the topic cause I think the searching process might be usefull to someone. If you want the solution go to the bottom of my post.</em></p> <p>I searched but I didnt find my answer either on Google and StackOverflow (not even a single tutorial on it). I would like to create a rollover highlight on a button, like the windows 7 taskbar. The highlight moves and is function of where the mouse is on the button. I dont want any image on my button (only color gradient) to keep a standard component. How can I apply this rollover effect?</p> <p>Back, I tried to run this code:</p> <pre><code> &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;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)"&gt; &lt;fx:Metadata&gt;[HostComponent("spark.components.Button")]&lt;/fx:Metadata&gt; &lt;fx:Declarations&gt; &lt;/fx:Declarations&gt; &lt;fx:Script&gt; &lt;![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"; } ]]&gt; &lt;/fx:Script&gt; &lt;s:states&gt; &lt;s:State name="up"/&gt; &lt;s:State name="over"/&gt; &lt;s:State name="down"/&gt; &lt;s:State name="disabled"/&gt; &lt;/s:states&gt; &lt;s:transitions&gt; &lt;s:Transition fromState="up" toState="over" autoReverse="true"&gt; &lt;s:Fade target="{overEffect}" alphaFrom="0" alphaTo="1" duration="500"/&gt; &lt;/s:Transition&gt; &lt;/s:transitions&gt; &lt;!-- inner border --&gt; &lt;s:Rect left="0" right="0" top="0" bottom="0" id="innerBorder" radiusX="4" radiusY="4"&gt; &lt;s:stroke&gt; &lt;s:SolidColorStroke id="innerBorderStroke" weight="1" color="#ffffff" /&gt; &lt;/s:stroke&gt; &lt;/s:Rect&gt; &lt;!-- outer border --&gt; &lt;s:Rect left="1" right="1" top="1" bottom="1" id="outerBorder" radiusX="4" radiusY="4"&gt; &lt;s:stroke&gt; &lt;s:SolidColorStroke id="outerBorderStroke" weight="1" color="#000000"/&gt; &lt;/s:stroke&gt; &lt;/s:Rect&gt; &lt;!-- fill --&gt; &lt;!--- Defines the appearance of the Button component's background. --&gt; &lt;s:Rect id="background" left="1" right="1" top="1" bottom="1"&gt; &lt;s:fill&gt; &lt;s:SolidColor alpha="0.5" color="#000000"/&gt; &lt;/s:fill&gt; &lt;/s:Rect&gt; &lt;s:Rect id="backgroundTopPart" left="1" right="1" top="1" height="50%" includeIn="up,over,disabled"&gt; &lt;s:fill&gt; &lt;s:LinearGradient rotation="90"&gt; &lt;s:GradientEntry color="#ffffff" alpha="0.6"/&gt; &lt;s:GradientEntry color="#ffffff" alpha="0.2"/&gt; &lt;/s:LinearGradient&gt; &lt;/s:fill&gt; &lt;/s:Rect&gt; &lt;s:Rect id="overEffect" left="1" right="1" bottom="1" height="50%" radiusX="4" radiusY="4" includeIn="over,down"&gt; &lt;s:fill&gt; &lt;s:RadialGradient id="overEffectRadialGradient" x="{width*0.5}" y="{height*0.5}" scaleY="{height}" scaleX="{width/1.5}"&gt; &lt;s:GradientEntry color="#8dbdff" alpha="0.7" /&gt; &lt;s:GradientEntry color="#8dbdff" alpha="0"/&gt; &lt;/s:RadialGradient&gt; &lt;/s:fill&gt; &lt;/s:Rect&gt; &lt;s:Label id="labelDisplay" text="Send" textAlign="center" verticalAlign="middle" color="#FFFFFF" horizontalCenter="0" verticalCenter="1" left="10" right="10" top="2" bottom="2"&gt; &lt;/s:Label&gt; &lt;/s:SparkSkin&gt; </code></pre> <p>The problem is that no event is captured. I tried to change the label text on a click event to test but it just doesn't work at all (no event handle). It's really strange. Can you bring some help please?</p> <p><strong>EDIT 15/11/11</strong> I found that my creationCompleteHandler needed a parent.mouseChildren = true; to capture the mouse events. I put it and now I can see that mouse events are captured but my rollovereffect is not displayed anymore even if i delete the transition of states and I play with the visible = true/false; of the effect in my mouse over handler.</p> <p><strong>LAST EDIT</strong> I finally found the solution of my problem, thanks to all. My solution:</p> <pre><code> &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;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)"&gt; &lt;fx:Metadata&gt;[HostComponent("spark.components.Button")]&lt;/fx:Metadata&gt; &lt;fx:Declarations&gt; &lt;/fx:Declarations&gt; &lt;fx:Script&gt; &lt;![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); } ]]&gt; &lt;/fx:Script&gt; &lt;s:states&gt; &lt;s:State name="up"/&gt; &lt;s:State name="over"/&gt; &lt;s:State name="down"/&gt; &lt;s:State name="disabled"/&gt; &lt;/s:states&gt; &lt;s:transitions&gt; &lt;s:Transition fromState="over" toState="disabled"&gt; &lt;s:CallAction target="{this}" functionName="removeElement" args="{[this.rectRollOverEffect]}"/&gt; &lt;/s:Transition&gt; &lt;/s:transitions&gt; &lt;!-- outer border --&gt; &lt;s:Rect left="0" right="0" top="0" bottom="0" id="outerBorder" radiusX="4" radiusY="4"&gt; &lt;s:stroke&gt; &lt;s:SolidColorStroke id="outerBorderStroke" weight="1" color="#ffffff" /&gt; &lt;/s:stroke&gt; &lt;/s:Rect&gt; &lt;!-- inner border --&gt; &lt;s:Rect left="1" right="1" top="1" bottom="1" id="innerBorder" radiusX="4" radiusY="4"&gt; &lt;s:stroke&gt; &lt;s:SolidColorStroke id="innerBorderStroke" weight="1" color="#000000"/&gt; &lt;/s:stroke&gt; &lt;/s:Rect&gt; &lt;!-- fill --&gt; &lt;!--- Defines the appearance of the Button component's background. --&gt; &lt;s:Rect id="background" left="1" right="1" top="1" bottom="1"&gt; &lt;s:fill&gt; &lt;s:SolidColor alpha="0.5" color="#000000"/&gt; &lt;/s:fill&gt; &lt;/s:Rect&gt; &lt;s:Rect id="backgroundTopPart" left="1" right="1" top="1" height="50%" includeIn="up,over,disabled"&gt; &lt;s:fill&gt; &lt;s:LinearGradient rotation="90"&gt; &lt;s:GradientEntry color="#ffffff" alpha="0.5" ratio="0.1"/&gt; &lt;s:GradientEntry color="#ffffff" alpha="0.1"/&gt; &lt;/s:LinearGradient&gt; &lt;/s:fill&gt; &lt;/s:Rect&gt; &lt;s:Label id="labelDisplay" text="Send" textAlign="center" verticalAlign="middle" color="#FFFFFF" horizontalCenter="0" verticalCenter="1" left="10" right="10" top="2" bottom="2"&gt; &lt;/s:Label&gt; &lt;s:Rect id="disableForeground" left="0" right="0" top="0" bottom="0" includeIn="disabled"&gt; &lt;s:fill&gt; &lt;s:LinearGradient rotation="90"&gt; &lt;s:GradientEntry color="#7B7B7B" alpha="0.6" ratio="0.1"/&gt; &lt;s:GradientEntry color="#aaaaaa" alpha="0.3"/&gt; &lt;/s:LinearGradient&gt; &lt;/s:fill&gt; &lt;/s:Rect&gt; &lt;/s:SparkSkin&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTheFrenchGuy
    1. USTheFrenchGuy
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POflash AS3 custom button rollover (windows 7 style)
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POflash AS3 custom button rollover (windows 7 style)
      1. This table or related slice is empty.
      1. VTUpMod
    1. COCan you link to a picture or a video of the effect you're trying to achieve?
      singulars
      1. POflash AS3 custom button rollover (windows 7 style)
      1. USjedd.ahyoung
    2. COHere is a link for tha W7 task bar effect : [capture]http://blogs.msdn.com/photos/mgrayson/images/1689351/500x36.aspx
      singulars
      1. POflash AS3 custom button rollover (windows 7 style)
      1. USTheFrenchGuy
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload