1. #1
    KingOfWoods's Avatar
    Registered
    28/07/02
    Location
    Gent
    Posts
    2,195
    iTrader
    19 (91%)
    Mentioned
    0 Post(s)
    Reputation
    0/144

    Flex background change on mouseEvent

    Hallo nochmaals allemaal

    Eerst de code
    Code:
    <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'"
    					  />
    Het probleem is dat wanneer ik over mijn image ga, deze supersnel begint te flikkeren. Iemand enig idee waar het probleem zich bevind? of doen jullie je animaties op een andere manier?
    no votes  

  2. #2
    W0utR's Avatar
    Registered
    16/04/08
    Location
    Hong Kong
    Posts
    1,989
    iTrader
    6 (100%)
    Mentioned
    0 Post(s)
    Reputation
    7/9
    Probeer ook eens event.currentTarget.validateNow() uit te voeren, als je de source aanpast kan het zijn dat het een frame duurt eer dit veranderd.

    Voor de rest ziet alles er goed uit
    no votes  

  3. #3
    Shaddix's Avatar
    Registered
    08/09/09
    Posts
    6,121
    iTrader
    23 (100%)
    Mentioned
    9 Post(s)
    Reputation
    3/121
    Bij mouse_over gaat hij het event uitvoeren telkens je ook maar 1 pixel over uw object beweegt.

    Je gaat dus best bij uw mouseOver de eventlistener tijdelijk wissen met removeEventListener() en bij mouseOut de eventlistener weer instellen via addEventListener().
    PSN: Shaddix-be
    no votes  

  4. #4
    KingOfWoods's Avatar
    Registered
    28/07/02
    Location
    Gent
    Posts
    2,195
    iTrader
    19 (91%)
    Mentioned
    0 Post(s)
    Reputation
    0/144
    Quote Originally Posted by W0utR View Post
    This quote is hidden because you are ignoring this member. Show
    Probeer ook eens event.currentTarget.validateNow() uit te voeren, als je de source aanpast kan het zijn dat het een frame duurt eer dit veranderd.

    Voor de rest ziet alles er goed uit
    Ik begrijp niet goed wat je bedoeld?

    Code:
    mouseOver="event.currentTarget.source = 'assets/images/home_hover.png'"
    
    vervangen door?
    
    mouseOver="event.currentTarget.validateNow() = 'assets/images/home_hover.png'"
    dan krijg ik volgende error:

    Description Resource Path Location Type
    1105: Target of assignment must be a reference value. MovieList.mxml /MovieList/src line 49 Flex Problem

    Ik ben niet zo goed in programmeren dus mijn excuses al op voorhand als ik aan het zagen ben.
    no votes  

  5. #5
    KingOfWoods's Avatar
    Registered
    28/07/02
    Location
    Gent
    Posts
    2,195
    iTrader
    19 (91%)
    Mentioned
    0 Post(s)
    Reputation
    0/144
    Quote Originally Posted by Shaddix View Post
    This quote is hidden because you are ignoring this member. Show
    Bij mouse_over gaat hij het event uitvoeren telkens je ook maar 1 pixel over uw object beweegt.

    Je gaat dus best bij uw mouseOver de eventlistener tijdelijk wissen met removeEventListener() en bij mouseOut de eventlistener weer instellen via addEventListener().
    Moet ik dit dan tussen de <fx:Script> tags zetten?

    Code:
    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")';
    			}
    no votes  

  6. #6
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    Is absoluut niet de juiste manier om dit te doen trouwens, daarvoor hebben ze buttons uitgevonden. Flex is volledig skinnable (zeker buttons zijn supergemakkelijk te skinnen, alles is een state).

    Dus ge begint in uw project met de volgende code:

    Code:
    <?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>
    In uw skinClass staat dan iets gelijkaardig aan dit:

    Code:
    <?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>
    Hou er rekening mee dat de meeste code in die SkinClass gewoon gegenereerd werd door Flash Builder. Bij autocompletion van de skinClass property gewoon 'create new skinclass' kiezen en daar heb ik voor het gemak al aangevinkt om geen ActionScript code te laten genereren. Dan alle getekende lagen verwijderd en gewoon die 4 images in de plaats gezet.
    Last edited by Zero Grav; 20-12-2011 at 15:31.
    no votes  

  7. #7
    W0utR's Avatar
    Registered
    16/04/08
    Location
    Hong Kong
    Posts
    1,989
    iTrader
    6 (100%)
    Mentioned
    0 Post(s)
    Reputation
    7/9
    Quote Originally Posted by Streaker View Post
    This quote is hidden because you are ignoring this member. Show
    Ik begrijp niet goed wat je bedoeld?

    Code:
    mouseOver="event.currentTarget.source = 'assets/images/home_hover.png'"
    
    vervangen door?
    
    mouseOver="event.currentTarget.validateNow() = 'assets/images/home_hover.png'"
    dan krijg ik volgende error:

    Description Resource Path Location Type
    1105: Target of assignment must be a reference value. MovieList.mxml /MovieList/src line 49 Flex Problem

    Ik ben niet zo goed in programmeren dus mijn excuses al op voorhand als ik aan het zagen ben.
    Nee, je moest deze functie ook uitvoeren.

    Maar zoals hierboven gezegd werd kan je beter een button skinnen, tenzij je natuurlijk totaal andere bedoelingen hebt met je image
    no votes  

  8. #8
    KingOfWoods's Avatar
    Registered
    28/07/02
    Location
    Gent
    Posts
    2,195
    iTrader
    19 (91%)
    Mentioned
    0 Post(s)
    Reputation
    0/144
    Quote Originally Posted by Zero Grav View Post
    This quote is hidden because you are ignoring this member. Show
    Is absoluut niet de juiste manier om dit te doen trouwens, daarvoor hebben ze buttons uitgevonden. Flex is volledig skinnable (zeker buttons zijn supergemakkelijk te skinnen, alles is een state).....................

    Hou er rekening mee dat de meeste code in die SkinClass gewoon gegenereerd werd door Flash Builder. Bij autocompletion van de skinClass property gewoon 'create new skinclass' kiezen en daar heb ik voor het gemak al aangevinkt om geen ActionScript code te laten genereren. Dan alle getekende lagen verwijderd en gewoon die 4 images in de plaats gezet.
    Dit blijkt wonderwel te werken. Bedankt voor de raad. Heeft mij ook weer wat meer de skinning optie geleerd. Maak ik amper gebruik van omdat ik dat wat omslachtig vond.
    no votes  

  9. #9
    Zero Grav's Avatar
    Registered
    06/06/04
    Location
    Bilzen
    Posts
    8,805
    iTrader
    18 (100%)
    Mentioned
    0 Post(s)
    Reputation
    42/128
    Ja, daarom dat ik ook verwees naar Adobe Flash Catalyst in die andere thread. Is spijtig genoeg ten dode opgeschreven met het doneren van Flex aan de Apache Foundation., maar is enorm handig om Flex applicaties te prototypen en een basiscode te genereren.

    Ge importeert gewoon uw PSD, selecteert de nodige componenten en hij genereert de code voor u, inclusief states en skinclasses. Op die code kunt ge u dan vor een groot deel baseren eens ge aan het echte programmeerwerk begint. 'k Zou het niet allemaal letterlijk gebruiken, maar eens ge de werkwijze onder de knie hebt kan dat echt enorm veel tijd besparen.
    no votes  

  10. #10
    KingOfWoods's Avatar
    Registered
    28/07/02
    Location
    Gent
    Posts
    2,195
    iTrader
    19 (91%)
    Mentioned
    0 Post(s)
    Reputation
    0/144
    Quote Originally Posted by Zero Grav View Post
    This quote is hidden because you are ignoring this member. Show
    Ja, daarom dat ik ook verwees naar Adobe Flash Catalyst in die andere thread. Is spijtig genoeg ten dode opgeschreven met het doneren van Flex aan de Apache Foundation., maar is enorm handig om Flex applicaties te prototypen en een basiscode te genereren.

    Ge importeert gewoon uw PSD, selecteert de nodige componenten en hij genereert de code voor u, inclusief states en skinclasses. Op die code kunt ge u dan vor een groot deel baseren eens ge aan het echte programmeerwerk begint. 'k Zou het niet allemaal letterlijk gebruiken, maar eens ge de werkwijze onder de knie hebt kan dat echt enorm veel tijd besparen.
    A da wist ik dus nog niet, maar ik denk niet dat ik met flex ga blijven werken. ben niet zo goed in programmeren. Is eens een leuke oefening, maar als ik zie hoe dat ik hier lig te klungelen.
    no votes  

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Log in

Log in