8 Replies Latest reply on Dec 18, 2011 11:09 PM by Mike6679

    Flex Spark Border Only On 3 Sides of Button

    Mike6679

      I have a skin class whose host component is a Toggle Button. I need to be able to add a border around it but only on the top, left, and right sides, As I understand it you have to the: <s:Line> component. So I added:

       

       

                <s:Line   left="0" top="0" right="0">

                          <s:stroke>

       

                                    <s:LinearGradientStroke  rotation="180" weight="2" caps="square">

                                              <s:GradientEntry color="0xffffff"

                                                                                       alpha="0"

                                                                                       alpha.selectedStates="1"/>

       

                                              <s:GradientEntry color="0xffffff"

                                                                                       alpha="0"

                                                                                       alpha.selectedStates="1" />

                                    </s:LinearGradientStroke>

       

                          </s:stroke>

                </s:Line>

       

       

      This worked for the top line , But I can't seem to get the left and right lines. I tried: this for the left side line, but it did not work (no line showed up):

       

       

                <s:Line   left="0" top="0">

                          <s:stroke>

       

                                    <s:LinearGradientStroke  rotation="90" weight="2" caps="square">

                                              <s:GradientEntry color="0xffffff"

                                                                                       alpha="0"

                                                                                       alpha.selectedStates="1"/>

       

                                              <s:GradientEntry color="0xffffff"

                                                                                       alpha="0"

                                                                                       alpha.selectedStates="1" />

                                    </s:LinearGradientStroke>

       

                          </s:stroke>

                </s:Line>

       

       

      How can I achieve the 3 Lines around the button?

        • 1. Re: Flex Spark Border Only On 3 Sides of Button
          Flex harUI Adobe Employee

          What di dyou use to specify the vertical lines?

          • 2. Re: Flex Spark Border Only On 3 Sides of Button
            Mike6679 Level 1

            I tried my second code block above to get the vertical lines:

             

            <s:Line   left="0" top="0">

                                <s:stroke>

             

                                          <s:LinearGradientStroke  rotation="90" weight="2" caps="square">

                                                    <s:GradientEntry color="0xffffff"

                                                                                              alpha="0"

                                                                                              alpha.selectedStates="1"/>

             

                                                    <s:GradientEntry color="0xffffff"

                                                                                              alpha="0"

                                                                                              alpha.selectedStates="1" />

                                          </s:LinearGradientStroke>

             

                                </s:stroke>

                      </s:Line>

            • 3. Re: Flex Spark Border Only On 3 Sides of Button
              kevinklin Adobe Employee

              I think you need to add bottom="0" to the vertical lines.

              • 4. Re: Flex Spark Border Only On 3 Sides of Button
                Mike6679 Level 1

                Ok I was able to add top and left side lines but I can't fifure out the right side line. What amn I doing wrong?

                 

                 

                ***TOP SIDE***

                 

                          <s:Line   left="0" top="0"  right="0">

                  <s:stroke>

                 

                                              <s:LinearGradientStroke  rotation="180" weight="1" caps="round" >

                  <s:GradientEntry color="0x70706F"

                                                                                                 alpha="1"

                                                                                                 alpha.selectedStates="0"/>

                 

                  <s:GradientEntry color="0x70706F"

                                                                                                 alpha="1"

                                                                                                 alpha.selectedStates="0" />

                  </s:LinearGradientStroke>

                 

                  </s:stroke>

                  </s:Line>

                 

                 

                 

                ***LEFT***

                 

                          <s:Line   left="0" top="0"  bottom="0">

                  <s:stroke>

                 

                                              <s:LinearGradientStroke  rotation="90" weight="1" caps="round" >

                  <s:GradientEntry color="0x70706F"

                                                                                                 alpha="0"

                                                                                                 alpha.selectedStates="1"/>

                 

                  <s:GradientEntry color="0x70706F"

                                                                                                 alpha="0"

                                                                                                 alpha.selectedStates="1" />

                  </s:LinearGradientStroke>

                 

                  </s:stroke>

                  </s:Line>

                 

                 

                ***RIGHT - DOESN"T WORK:***

                          <s:Line  right="0"  top="0" bottom="0">

                  <s:stroke>

                 

                                              <s:LinearGradientStroke  rotation="90" weight="1" caps="round" >

                  <s:GradientEntry color="0x70706F"

                                                                                                 alpha="1"

                                                                                                 alpha.selectedStates="1"/>

                 

                  <s:GradientEntry color="0x70706F"

                                                                                                 alpha="1"

                                                                                                 alpha.selectedStates="1" />

                  </s:LinearGradientStroke>

                 

                  </s:stroke>

                  </s:Line>

                • 5. Re: Flex Spark Border Only On 3 Sides of Button
                  kevinklin Adobe Employee

                  Maybe something is covering it up? Try making the weight > 1 and see what happens.

                   

                  Also, it might help to use 1px Rects instead of a line...for example:

                   

                  RIGHT:

                   

                  <s:Rect width="1" right="0"  top="0" bottom="0">

                    <s:fill>

                   

                                                <s:LinearGradient  rotation="90" >

                    <s:GradientEntry color="0x70706F"

                                                                                                   alpha="1"

                                                                                                   alpha.selectedStates="1"/>

                   

                    <s:GradientEntry color="0x70706F"

                                                                                                   alpha="1"

                                                                                                   alpha.selectedStates="1" />

                    </s:LinearGradient>

                   

                    </s:fill>

                    </s:Rect>

                   

                  or something like that...Hope that helps.

                  • 6. Re: Flex Spark Border Only On 3 Sides of Button
                    Mike6679 Level 1

                    Thx for the tip,  The issue was that the gap between the buttons was -2 so yes the right line was being obstructed.  I have 2 other lines I'm not sure how to add:

                     

                    1. I have also added  a bottom line. **How do I join all 3 lines that I have here with a radius of say 5?

                    2. How can I  add lines on the left and right side of the button that start  in the middle and say are 10 pixels high?

                     

                    thx for the help

                     

                    -Mike

                    • 7. Re: Flex Spark Border Only On 3 Sides of Button
                      kevinklin Adobe Employee

                      1. I am assuming you want a corner radius? It's very difficult to create a partial border with corner radius. Typically, borders include all four sides, and you just use one Rect with radiusX/Y set for the entire border. One way to maybe get the same effect is to have the Rect and then cover the side that you want to disappear.

                       

                      2. Same way as you added the other left and right lines. Instead of using top and bottom, just use height="10" and verticalCenter="0". You'll still want left="0" or right="0".

                      • 8. Re: Flex Spark Border Only On 3 Sides of Button
                        Mike6679 Level 1

                        Thx,

                         

                        1. I used a series of lines to cover of the part od the radial border I did not want to be be visibe

                         

                        2, I tried this and it did work , however I could not hide it in the button selected state, hmmmm. I even tried

                        weight.selectedStates="0" , but it still shows up in the selected state. This is the only line where I see an issue with this..

                         

                         

                         

                        <s:Line   verticalCenter="0" right="0" height.selectedStates="0"  height="12" >

                          <s:stroke>

                         

                                                      <s:LinearGradientStroke  weight.selectedStates="0"  rotation="90" weight="2" caps="round" >

                          <s:GradientEntry color="0x666766"

                                                                                                         alpha="1"

                                                                                                         alpha.down="0"

                          alpha.selectedStates="0"/>

                         

                          <s:GradientEntry color="0x666766"

                                                                                                         alpha="1"

                                                                                                         alpha.down="0"

                                                                                                         alpha.selectedStates="0"

                                                                                                         />

                          </s:LinearGradientStroke>

                         

                          </s:stroke>

                          </s:Line>

                         

                        3. Is there any way to have a  line's alpha=0 if its the last / first element in a Group?