4 Replies Latest reply on Mar 3, 2011 3:14 AM by flexillu10

    Move 3D, seems to go sidewards a bit (Pics to explain)

    flexillu10 Level 1

      When i first hover over the button it sort of goes a bit bent:

       

      bent3D.png

      But when i hover over it again:

       

      straight3D.png

      See how the second image is straight?

       

      Any ideas why this would be happening? Seems to be only happening when the buttons are in some sort of container?

       

      here is my button skin, i'm using it on a custom panel, not sure if that makes a difference, i've also noticed this when using Move 3D in an item renderer.

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                xmlns:mx="library://ns.adobe.com/flex/mx">
           <!-- host component -->
           <fx:Metadata>
                [HostComponent("spark.components.Button")]
           </fx:Metadata>
           
           <!-- states -->
           <!-- states -->
           <s:states>
                <s:State name="up"/>
                <s:State name="over"/>
                <s:State name="down"/>
                <s:State name="disabled"/>
           </s:states>
           
           
           <fx:Declarations>
                <s:Scale id="scaler" target="{this}" disableLayout="true"/>
                <s:Move3D id="overMover" targets="{[rect, labelDisplay]}" duration="150"/>
                <s:Move3D id="downMover" targets="{[rect, labelDisplay]}" duration="100"  easer="{fastIn}"/>
                <s:Power easeInFraction="0" id="fastIn" exponent="3"/>
           </fx:Declarations>
           <s:transitions>
                <s:Transition fromState="up" toState="over" effect="{overMover}" autoReverse="true"/>
                <s:Transition fromState="over" toState="up" effect="{overMover}" autoReverse="true"/>
                <s:Transition toState="down" effect="{downMover}"/>
                <s:Transition fromState="down" effect="{downMover}"/>
           </s:transitions>
           
           <s:Rect id="rect" left="0" right="0" top="0" bottom="0" radiusX="7" radiusY="7"
                     z.over="-40" z.down="-65">
                <s:fill>            
                     <s:LinearGradient rotation="90">
                          <s:GradientEntry id="fillEntry0" color="0x7DF9FF"                      
                                               color.down="0xFCC954" 
                                               alpha="0.85"/>
                          <s:GradientEntry id="fillEntry1" color="0x1034A6" 
                                               color.down="0xEA7C15" 
                                               alpha="0.85" />
                     </s:LinearGradient>
                </s:fill>
                <s:stroke>
                     <s:LinearGradientStroke rotation="90" weight="3">
                          <s:GradientEntry id="borderEntry0" 
                                               color="0x000000"
                                               color.over="0xEA7C15"
                                               alpha="0.5625"
                                               alpha.down="0.6375" />
                          <s:GradientEntry id="borderEntry1"
                                               color="0x00000"
                                               color.over="0xEA7C15"
                                               alpha="0.75" 
                                               alpha.down="0.85" />
                     </s:LinearGradientStroke>
                </s:stroke>
           </s:Rect>
           
           <!-- layer 8: text -->
           <s:Label id="labelDisplay"
                      textAlign="center"
                      verticalAlign="middle"
                      fontWeight="bold"
                      fontSize="14"
                      z.over="-40" z.down="-65"
                      horizontalCenter="0" verticalCenter="1"
                      left="10" right="10" top="4" bottom="4">
           </s:Label>
           
      </s:Skin>
      
        • 1. Re: Move 3D, seems to go sidewards a bit (Pics to explain)
          Shongrunden Adobe Employee

          I don't think I'm able to reproduce what you are seeing with this application:

           

          <s:Application

              xmlns:fx="http://ns.adobe.com/mxml/2009"

              xmlns:s="library://ns.adobe.com/flex/spark">

           

              <s:Panel backgroundColor="red" x="100" y="100">

                  <s:Button label="testing button" x="20" y="20" skinClass="CustomButtonSkin" />

                  <s:Button label="testing button" x="20" y="45" skinClass="CustomButtonSkin" />

              </s:Panel>

           

          </s:Application>

           

          The SWF of this application is attached to this message.  Are you seeing issues in that sample swf?

           

          If not can you provide a small sample application like the one above that does demonstrate the issue?

          • 2. Re: Move 3D, seems to go sidewards a bit (Pics to explain)
            flexillu10 Level 1

            Couldn't find out how to attach a file, not sure if I can. But I get the problem in the following app after the panel has spun round.

             

            I'm using this dual panel: i think its causing me the problems

             

            http://www.rialvalue.com/components/dualpanel/srcview/

             

            i'm using the same vsButtonSkin as before.

             

            Here is my app:

             

            <?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" xmlns:dualpanel="com.rialvalue.components.dualpanel.*" viewSourceURL="srcview/index.html">
            
                 <fx:Script>
                      <![CDATA[
                           
            
                           protected function loginButton_clickHandler(event:MouseEvent):void
                           {
                                loginmenuPanel.setState("back");
                           }
            
                      ]]>
                      
                 </fx:Script>
            
                 <fx:Declarations>
                      <!-- Place non-visual elements (e.g., services, value objects) here -->
                 </fx:Declarations>
                 
                 
            
                 <dualpanel:DualPanel id="loginmenuPanel" transitionDuration="300"  skinClass="com.rialvalue.components.dualpanel.SpinSkin" x="100" y="100">
                      <dualpanel:frontView>
                           <s:Panel id="frontPanel" height="200" width="200" title="Please Enter Your Login Details">
                                <s:layout>
                                     <s:BasicLayout/>
                                </s:layout>
                                
                                <s:TextInput id="userinputbox" x="100" y="40" width="75" height="20" text="testuser"/>
                                <s:TextInput id="passwordinputbox" x="100" y="80" width="75" height="20" text="testpass"/>
                                <s:Label x="12" y="45" text="Username"/>
                                <s:Label x="12" y="85" text="Password"/>
                                <s:Button id="loginButton" label="Login" x="80" y="120" skinClass="vsButtonSkin" click="loginButton_clickHandler(event)"/>
                           </s:Panel>
                      </dualpanel:frontView>
                      
                      <dualpanel:backView>
                           <s:Panel id="backPanel" height="200" width="200" title="Choose an Option">
                                <s:layout>
                                     <s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
                                     
                                </s:layout>
                                <s:Button id="componentsButton"  label="View Components" skinClass="vsButtonSkin"/>
                                <s:Button id="stylesButton"  label="View Product Styles" skinClass="vsButtonSkin"/>
                                <s:Button id="referenceButton" label="View Reference Data" skinClass="vsButtonSkin"/>
                                
                           </s:Panel>
                      </dualpanel:backView>
                 </dualpanel:DualPanel>
            
            </s:Application>
            
            

             

            Thanks for your help

            • 3. Re: Move 3D, seems to go sidewards a bit (Pics to explain)
              flexillu10 Level 1

              anyone got any similar problems? Or know whats going on?

              • 4. Re: Move 3D, seems to go sidewards a bit (Pics to explain)
                flexillu10 Level 1

                Just incase anyone has the same problem....

                 

                I fixed this issues by setting a minWidth and minHeight property for the skin.

                 

                <s:Skin 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="20" minHeight="15">