3 Replies Latest reply on Jun 16, 2011 2:49 AM by harihisu

    how to Create cool color transition button in Flex  4

    gajanan hiroji

      Hi friends,

       

      I m creating one application for i require to create cool color transition buttonand searched in net but i m getting the example on flex 3 but i m not getting anything on flex 4 so . i want to know how to create it.

       

      Hope i'll get the solution soon...

      Thanking you

       

      Regards,

      gajanan hiroji

        • 1. Re: how to Create cool color transition button in Flex  4
          harihisu

          What do you mean cool?

          For simple color transition, you can define a custom skin with different colors for different states, and apply AnimateColor transition when state changed. For example:

           

          <?xml version="1.0" encoding="utf-8"?>
          <!-- SparkSkinning/mySkins/ButtonParallelTransitionSkin.mxml -->
          <s:SparkSkin 
               xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               minWidth="21" minHeight="21"
               alpha.disabled="0.5">
               
               <s:transitions>
                    <s:Transition>
                         <s:Parallel>
                              <s:AnimateColor target="{labelDisplay}" duration="250" />
                              <s:AnimateColor target="{grad01}" duration="250" />
                              <s:AnimateColor target="{grad02}" duration="250" />
                         </s:Parallel>
                         
                    </s:Transition>
               </s:transitions>
               
               <fx:Metadata>
                    [HostComponent("spark.components.Button")]
               </fx:Metadata>
               
               <fx:Script>
                    static private const exclusions:Array = ["labelDisplay"];
                    override public function get colorizeExclusions():Array {return exclusions;}        
               </fx:Script>
               
               <s:states>
                    <s:State name="up" />
                    <s:State name="over" />
                    <s:State name="down" />
                    <s:State name="disabled" />
               </s:states>
               
               <!--  The following values are negative because they define a border or drop shadow. 
               The negative values separate them from the Button's bounds. -->
               <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="2" radiusY="2">
                    <s:fill>
                         <s:LinearGradient rotation="90">
                              <s:GradientEntry color="0x000000" 
                                                   color.down="0xFFFFFF"
                                                   alpha="0.01"
                                                   alpha.down="0" />
                              <s:GradientEntry color="0x000000" 
                                                   color.down="0xFFFFFF" 
                                                   alpha="0.07"
                                                   alpha.down="0.5" />
                         </s:LinearGradient>
                    </s:fill>
               </s:Rect>
               
               <s:Rect left="1" right="1" top="1" bottom="1" radiusX="2" radiusY="2">
                    <s:fill>
                         <s:LinearGradient rotation="90">
                              <s:GradientEntry id="grad01" 
                                                   color="0xFFFFFF" 
                                                   color.over="0x2266CC" 
                                                   color.down="0xAAAAAA" 
                                                   alpha="0.85" />
                              <s:GradientEntry id="grad02" 
                                                   color="0xD8D8D8" 
                                                   color.over="0x1155AA" 
                                                   color.down="0x929496" 
                                                   alpha="0.85" />
                         </s:LinearGradient>
                    </s:fill>
               </s:Rect>
               
               <s:Rect left="1" right="1" bottom="1" height="9" radiusX="2" radiusY="2">
                    <s:fill>
                         <s:LinearGradient rotation="90">
                              <s:GradientEntry color="0x000000" alpha="0.0099" />
                              <s:GradientEntry color="0x000000" alpha="0.0627" />
                         </s:LinearGradient>
                    </s:fill>
               </s:Rect>
               
               <s:Rect left="1" right="1" top="1" height="9" radiusX="2" radiusY="2">
                    <s:fill>
                         <s:SolidColor color="0xFFFFFF" 
                                          alpha="0.33" 
                                          alpha.over="0.22" 
                                          alpha.down="0.12" />
                    </s:fill>
               </s:Rect>
               
               <s:Rect left="1" right="1" top="1" bottom="1" 
                         radiusX="2" radiusY="2" excludeFrom="down">
                    <s:stroke>
                         <s:LinearGradientStroke rotation="90" weight="1">
                              <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
                              <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
                         </s:LinearGradientStroke>
                    </s:stroke>
               </s:Rect>
               
               <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
                    <s:fill>
                         <s:SolidColor color="0x000000" alpha="0.07" />
                    </s:fill>
               </s:Rect>
               <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
                    <s:fill>
                         <s:SolidColor color="0x000000" alpha="0.07" />
                    </s:fill>
               </s:Rect>
               <s:Rect left="2" top="1" right="2" height="1" includeIn="down">
                    <s:fill>
                         <s:SolidColor color="0x000000" alpha="0.25" />
                    </s:fill>
               </s:Rect>
               <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
                    <s:fill>
                         <s:SolidColor color="0x000000" alpha="0.09" />
                    </s:fill>
               </s:Rect>
               
               <s:Rect left="0" right="0" top="0" bottom="0" 
                         width="69" height="20" 
                         radiusX="2" radiusY="2">
                    <s:stroke>
                         <s:LinearGradientStroke rotation="90" weight="1">
                              <s:GradientEntry color="0x000000" 
                                                   alpha="0.5625"
                                                   alpha.down="0.6375" />
                              <s:GradientEntry color="0x000000" 
                                                   alpha="0.75" 
                                                   alpha.down="0.85" />
                         </s:LinearGradientStroke>
                    </s:stroke>
               </s:Rect>
               
               <s:Label id="labelDisplay"
                          fontSize="24"
                          color.over="0xFFFFFF" color.down="0xFFFFFF"
                          textAlign="center"
                          verticalAlign="middle"
                          lineBreak="toFit"
                          maxDisplayedLines="1"
                          horizontalCenter="0" verticalCenter="1"
                          left="10" right="10" top="2" bottom="2">
               </s:Label>
          </s:SparkSkin>
          
          1 person found this helpful
          • 2. Re: how to Create cool color transition button in Flex  4
            gajanan hiroji Level 1

            Thanks for ur reply

            but i m new to flex so i m not getting what your telling me......

             

            could u please explaine it????

             

            Regards,

            Gajanan Hiroji

            • 3. Re: how to Create cool color transition button in Flex  4
              harihisu Level 2

              Flex 4 has successfully separate the functionality and the look of its visual components. For your case, a Button is a SkinnableComponent, which allows you to change its look by assign another Skin to it (normally if you don't set, it will use the default skin).

               

              Assume that the above code is save as skins\SampleButtonSkin.mxml

               

              All you need to do is, in your main View, just declare a Button and set skinClass to that.

               

              <s:Button label="Click me" width="300" height="75" enabled="false" fontSize="24"
                                    skinClass="skins.SampleButtonSkin"/>
              

               

               

              Normally, a component has several states (such as up, down, click, disabled.. for a button). A Skin class should declare skins for all of these states, corresponding skin will be load when state changed. For example, if you set your Button's normal color is Blue, click color is Red, then if you click, the button's color will change from Blue to Red. However, if you need that color changed gradually, you have to define transition (look at the code above) which contains several rules.

               

              For more information, please visit this article http://www.adobe.com/devnet/flex/articles/flex4_skinning.html