11 Replies Latest reply on Oct 20, 2010 3:49 PM by rck_Cena77

    mouse over redrawing the component...

    rck_Cena77

      Hi,

       

      i am using states,path , transitions and effects.    I had one image, one fxg, one rect in a row, when mouseover the color  has to change from left to right

       

      using effect and  transition  the problem is when the state changes the fxg  color has to  change, while changing the color, fxg is moving 1 px down and

       

      coming back.

       

      i have to implement updatedisplaylist something like that, i tired by setting the x,y values of the fxg's but it didn't work.

       

      appreciate your help.

        • 1. Re: mouse over redrawing the component...
          Shongrunden Adobe Employee

          Could you please provide a small sample application that demonstrates this so we can investigate further?


          • 2. Re: mouse over redrawing the component...
            rck_Cena77 Level 1

            thanks for reply, here is all the code i used, i am trying to implements the updatedisplaylist and set the x,y coordinates so that it will not redraw it.

             

            the problem is  when the state is over, the fxg legs are moving by 1px up and coming back to its pos in 1 sec which is not desired.

             

            thank you

             

             

            <?xml version="1.0" encoding="utf-8"?>
            <s:Skin
                xmlns:s="library://ns.adobe.com/flex/spark"
                xmlns:fx="http://ns.adobe.com/mxml/2009"
                xmlns:d="http://ns.adobe.com/fxg/2008/dt"
                xmlns:Components="Components.*"
                xmlns:mx="library://ns.adobe.com/flex/mx"
                >

             

            <fx:Metadata>[HostComponent("Components.SkinnableValueLabel")]</fx:Metadata>

             

            <s:states>

             

                    <s:State name="unloaded"/>

             

                    <s:State name="up"/>

             

                    <s:State name="over"/>

             

                </s:states>

             

            <s:Group
                    id="layoutRoot"
                    x="0"
                    y="0"
                    >

             

            <s:Group  id="Target" >
                      
                       <s:Group id="nector">
                            <s:Path
                                data="M1.30701 0 1.30701 3C1.30701 3 -5.84387 3 13.307 3 28.5038 3 38.2601 33 54.2631 33 59.9183 33 64.307 33 64.307 33L64.307 30C64.307 30 63.601 30 55.1957 30 39.3929 30 30.5038 0 14.307 0 14.1561 0 1.30701 0 1.30701 0Z"
                                x="22"    y="12">
                              
                                <s:fill>   <s:SolidColor color="#000000" color.over="#0A8A9D"/>   </s:fill>
                                  
                              
                                <s:filters>
                                    <s:GlowFilter blurX="2"  blurY="2"      inner="false"   color="#ffffff"    strength="7"     quality="3"   knockout="false"  alpha="0"      alpha.over="1" />
                                                                   
                                    <s:DropShadowFilter blurX="4.0"     blurY="4.0"      distance="2"       hideObject="false"     inner="false"     color="0x000000"
                                                    
                                                        strength="1"
                                                        alpha="0.25"
                                                        quality="2"
                                                        knockout="false"
                                                        angle="45.0"/>
                                </s:filters>
                            </s:Path>
                        </s:Group>
                       
                        <s:Group id="label" y="21"    x="85">
                            <s:Rect    id="innerRectangle"    height="37"    width="100" radiusX="12" radiusY="12" x="2"    y="2">
                                <s:stroke>
                                    <s:SolidColorStroke    color="#3A3E42"    weight="2" color.over="#0A91A5" pixelHinting="true"    />
                                </s:stroke>
                                <s:fill>
                                    <s:SolidColor color="#FFFFFF"/>
                                </s:fill>
                                <s:filters>
                                    <s:GlowFilter blurX="2"    blurY="2" inner="false" color="#ffffff"    strength="7" quality="3"
                                                  knockout="false" alpha="0" alpha.over="1"    />
                                    <s:DropShadowFilter blurX="4.0" blurY="4.0"    distance="2" hideObject="false" inner="false"
                                                        color="0x000000" strength="1" alpha="0.25" quality="2" knockout="false" angle="45.0" />
                                </s:filters>
                            </s:Rect>
                            <s:RichText id="txtPriceType" x="2" y="8" textAlign="center" color="#0A90A4" color.up="#111111"
                                        fontFamily="Arial" fontSize="14" fontWeight="bold" text="{hostComponent.Header}"/>
                            <s:RichText id="txtAmount" x="2" y="24" textAlign="center" color="#000000"
                                        fontFamily="Arial" fontSize="11" fontWeight="bold"    text="{priceFormatter.format(hostComponent.Text)}" />
                        </s:Group>
                    </s:Group>
                   
                    <s:Group id="anchor" x="0" y="0">
                    <mx:Image
                        source.up="@Embed('Assets/erOff.png')"
                        source.over="@Embed('Assets/On.png')"
                        />               
                </s:Group>
               
                </s:Group>
               
                <s:transitions>
                    <s:Transition fromState="up" toState="over" autoReverse="true">
                        <s:Sequence>
                            <s:Wipe direction="right" duration="500" target="{Target}" disableLayout="true" />
                        </s:Sequence>
                    </s:Transition>
                </s:transitions>
               

            • 3. Re: mouse over redrawing the component...
              rck_Cena77 Level 1

              any help......    i set all properties in updatedisplaylist() but it didn't work.

              • 4. Re: mouse over redrawing the component...
                Flex harUI Adobe Employee

                Are the asset pngs the exact same size?

                • 5. Re: mouse over redrawing the component...
                  rck_Cena77 Level 1

                  thanks for going into the code.

                   

                  i didn't understand your question exactly, the size of the asset pngs,fxg and rect remains  same when state changes.

                   

                  when the state changes to over, the fxg and text in rect are moving, that to only in some cases.

                   

                  the asserts are not having any problem when state changes to over.

                   

                  i feel like flex is redrawing component it again, is it true?

                  • 6. Re: mouse over redrawing the component...
                    Flex harUI Adobe Employee

                    The children are layed out again when states change.  If the size of

                    anything changes, positions might shift.

                    • 7. Re: mouse over redrawing the component...
                      rck_Cena77 Level 1

                      what might be the solution for that ...

                      • 8. Re: mouse over redrawing the component...
                        rck_Cena77 Level 1

                        when i comment the transition sequence it is working good,  but i need the sequence to right, is there any other ways to set like in as3.???

                        • 9. Re: mouse over redrawing the component...
                          Flex harUI Adobe Employee

                          There should be effect events during the transition.  UpdateDisplayList will

                          not be called.

                          • 10. Re: mouse over redrawing the component...
                            rck_Cena77 Level 1

                            what things i have to set in the events,

                             

                            protected function wipeTarget_currentStateChangeHandler(event:StateChangeEvent):void
                                        {
                                            wipeRight.duration=500;
                                            wipeRight.direction="right";
                                            wipeRight.target=wipeTarget;
                                           
                                        }

                             

                            didn't work. may be the height and width???

                            • 11. Re: mouse over redrawing the component...
                              rck_Cena77 Level 1

                              finally, i didn't round the x,y values of the component thats why

                               

                              sorry