Archief - Flex background change on mouseEvent

<s:Image source="assets/images/home.png"  
					  id="home"
					  mouseOver="event.currentTarget.source = 'assets/images/home_hover.png'"
					  mouseOut="event.currentTarget.source = 'assets/images/home.png'"
					  mouseDown="event.currentTarget.source = 'assets/images/home_click.png'"
					  click="currentState='State1'"
					  />

mouseOver="event.currentTarget.source = 'assets/images/home_hover.png'"

vervangen door?

mouseOver="event.currentTarget.validateNow() = 'assets/images/home_hover.png'"

public function createHandlers(e:Event):void {
				home.addEventListener(MouseEvent.CLICK, submitHome);
				home.addEventListener(MouseEvent.MOUSE_OVER, overHome);
				home.addEventListener(MouseEvent.MOUSE_DOWN, downHome);
				home.addEventListener(MouseEvent.MOUSE_OUT, outHome);
			}
			private function submitHome(e:Event):void {
				currentState = "State1";
			}
			private function overHome(e:Event):void {
				e.currentTarget.source = '@Embed("assets/images/home_hover.png")';
			}
			private function downHome(e:Event):void {
				e.currentTarget.source = '@Embed("assets/images/home_click.png")';
			}
			private function outHome(e:Event):void {
				e.currentTarget.source = '@Embed("assets/images/home.png")';
			}

<?xml version="1.0" encoding="utf-8"?>
<s:Application 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="955" minHeight="600">
	
	
	<s:states>
		<s:State name="enterState" />
		<s:State name="targetState" />
	</s:states>
	
	<fx:Script>
		<![CDATA[
			protected function buttonClickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
				this.currentState = 'targetState';
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<s:Button skinClass="NineLivesButtonSkinClass" click="buttonClickHandler(event)" />
</s:Application>

<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for the Spark Button component.  

       @see spark.components.Button
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minWidth="21" minHeight="21" 
             alpha.disabled="0.5">
     
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
    
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
	
	
	<s:BitmapImage source="@Embed(source='assets/images/home.png')" includeIn="up" />
	<s:BitmapImage source="@Embed(source='assets/images/home_click.png')" includeIn="down" />
	<s:BitmapImage source="@Embed(source='assets/images/home_hover.png')" includeIn="over" />
  
	<!--
	//Eventueel label
	
    <s:Label id="labelDisplay"
             textAlign="center"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1" verticalAlign="middle"
             left="10" right="10" top="2" bottom="2">
    </s:Label>
	-->
    
</s:SparkButtonSkin>