代码：

 
  
  1. <?xml version="1.0" encoding="utf-8"?> 
  2.  
  3. <!--  
  4.  
  5.     ADOBE SYSTEMS INCORPORATED  
  6.     Copyright 2008 Adobe Systems Incorporated  
  7.     All Rights Reserved.  
  8.  
  9.     NOTICE: Adobe permits you to use, modify, and distribute this file  
  10.     in accordance with the terms of the license agreement accompanying it.  
  11.  
  12. --> 
  13.  
  14. <!--- The default skin class for a Spark RadioButton component.    
  15.  
  16.        @see spark.components.RadioButton  
  17.        @see spark.components.RadioButtonGroup  
  18.           
  19.       @langversion 3.0  
  20.       @playerversion Flash 10  
  21.       @playerversion AIR 1.5  
  22.       @productversion Flex 4  
  23. --> 
  24. <s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
  25.     xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabledStates="0.5"> 
  26.  
  27.     <fx:Metadata> 
  28.     <![CDATA[   
  29.         /**   
  30.          * @copy spark.skins.spark.ApplicationSkin#hostComponent  
  31.          */  
  32.         [HostComponent("spark.components.RadioButton")]  
  33.     ]]> 
  34.     </fx:Metadata>   
  35.  
  36.       
  37.  
  38.       
  39.     <s:states> 
  40.         <s:State name="up" /> 
  41.         <s:State name="over" stateGroups="overStates" /> 
  42.         <s:State name="down" stateGroups="downStates" /> 
  43.         <s:State name="disabled" stateGroups="disabledStates" /> 
  44.         <s:State name="upAndSelected" stateGroups="selectedStates" /> 
  45.         <s:State name="overAndSelected" stateGroups="overStates, selectedStates" /> 
  46.         <s:State name="downAndSelected" stateGroups="downStates, selectedStates" /> 
  47.         <s:State name="disabledAndSelected" stateGroups="disabledStates, selectedStates" /> 
  48.     </s:states> 
  49.       
  50.     <s:Group verticalCenter="0" width="13" height="13"> 
  51.         <!-- drop shadow --> 
  52.         <s:Ellipse left="-1" top="-1" right="-1" bottom="-1"> 
  53.             <s:stroke> 
  54.                 <s:LinearGradientStroke rotation="90" weight="1"> 
  55.                     <s:GradientEntry color="0x000000"   
  56.                                    color.downStates="0xFFFFFF" 
  57.                                    alpha="0.011" 
  58.                                    alpha.downStates="0" /> 
  59.                     <s:GradientEntry color="0x000000"   
  60.                                    color.downStates="0xFFFFFF"   
  61.                                    alpha="0.121" 
  62.                                    alpha.downStates="0.57" /> 
  63.                 </s:LinearGradientStroke> 
  64.             </s:stroke> 
  65.         </s:Ellipse> 
  66.           
  67.         <!-- fill --> 
  68.         <s:Ellipse left="2" top="2" right="2" bottom="2"> 
  69.             <s:fill> 
  70.                 <s:LinearGradient rotation="60"> 
  71.                     <s:GradientEntry color="0xAEB3B9" alpha="1.0" 
  72.                                      color.over="0x96D3FB" 
  73.                                      /> 
  74.                     <s:GradientEntry color="0xF2F2F2" alpha="1.0" 
  75.                                      color.over="0xBBE5FD" 
  76.                                      /> 
  77.                     <s:GradientEntry color="0xFFFFFF" alpha="0.8" 
  78.                                      color.over="0xDFF3FE" 
  79.                                      /> 
  80.                 </s:LinearGradient> 
  81.             </s:fill> 
  82.         </s:Ellipse> 
  83.           
  84.         <!-- layer 6: highlight stroke (all states except down) --> 
  85.         <s:Ellipse left="2" right="2" top="2" bottom="2"> 
  86.             <s:stroke> 
  87.                 <s:LinearGradientStroke rotation="45" weight="1"> 
  88.                     <s:GradientEntry color="0x8E8F8F"   
  89.                                      color.over="0x84CDF9"  alpha.over="0.33"   
  90.                                      color.selectedStates="0x919292" alpha.selectedStates="1.0"/> 
  91.                     <s:GradientEntry color="0x919292" alpha="0.12" alpha.over="0.0396"   
  92.                                      color.selectedStates="0x919292" alpha.selectedStates="1.0"/> 
  93.                     <s:GradientEntry color="0xf4f4f4" alpha="0.12" alpha.over="0.0396"   
  94.                                      color.selectedStates="0x919292" alpha.selectedStates="1.0"/> 
  95.                 </s:LinearGradientStroke> 
  96.             </s:stroke> 
  97.         </s:Ellipse> 
  98.         <s:Rect left="5" top="1" right="5" height="1"> 
  99.             <s:fill> 
  100.                 <s:SolidColor color="0xFFFFFF"   
  101.                             color.downStates="0x939393" 
  102.                             alpha.overStates="0.22" /> 
  103.             </s:fill> 
  104.         </s:Rect> 
  105.           
  106.         <!-- border - put on top of the fill so it doesn't disappear when scale is less than 1 --> 
  107.         <s:Ellipse left="0" top="0" right="0" bottom="0"> 
  108.             <s:stroke> 
  109.                 <s:LinearGradientStroke rotation="90" weight="1"> 
  110.                     <s:GradientEntry color="0x919292" alpha="1.0"   
  111.                                      color.over="0x5586A3" 
  112.                                      /> 
  113.                 </s:LinearGradientStroke> 
  114.             </s:stroke> 
  115.         </s:Ellipse> 
  116.           
  117.         <!-- dot --> 
  118.         <!--- Defines the appearance of the RadioButton's dot. To customize the appearance of the dot, create a custom RadioButtonSkin class. --> 
  119.         <s:Path left="4" top="4" includeIn="selectedStates" id="dot" itemCreationPolicy="immediate" 
  120.                 data="M 0 0 Q 4.5 0.5 5 2.5 Q 4.5 4.5 2.5 5 Q 0.5 4.5 0 2.5 Q 0.5 0.5 2.5 0"> 
  121.             <s:fill> 
  122.                 <!--- @private  
  123.                       Defines the appearance of the dot's fill. The default color is 0x000000. The default alpha is .9. --> 
  124.                 <s:LinearGradient id="dotFill" rotation="225"> 
  125.                     <s:GradientEntry color="0x1898D1" alpha="1.0"/> 
  126.                     <s:GradientEntry color="0x1898D1" alpha="0.9"/> 
  127.                     <s:GradientEntry color="0xf4f4f4" alpha="0.5"/> 
  128.                 </s:LinearGradient> 
  129.             </s:fill> 
  130.         </s:Path> 
  131.         <s:Path left="3" top="3" includeIn="selectedStates"   
  132.                 data="M 1 0 Q 5 0 6 3 Q 5 5 3 6 Q 0 5 0 3 Q 1 0 3 0 "> 
  133.             <s:stroke> 
  134.                 <s:LinearGradientStroke> 
  135.                     <s:GradientEntry color="0x183348" alpha="1.0" /> 
  136.                     <s:GradientEntry color="0x183348" alpha="1.0" /> 
  137.                     <s:GradientEntry color="0x183348" alpha="1.0" /> 
  138.                 </s:LinearGradientStroke> 
  139.             </s:stroke> 
  140.         </s:Path> 
  141.     </s:Group> 
  142.  
  143.     <!-- Label --> 
  144.     <!---  @copy spark.components.supportClasses.ButtonBase#labelDisplay --> 
  145.     <s:Label id="labelDisplay" 
  146.              textAlign="start" 
  147.              verticalAlign="middle" 
  148.              maxDisplayedLines="1" 
  149.              left="18" right="0" top="3" bottom="3" verticalCenter="2" /> 
  150.  
  151. </s:SparkSkin> 
 
  
效果：
 
  
 
 
  
 
  
关键是dot的画法：
 
  
path的data属性：
 
  
 
  
  1. spark.primitives.Path.data(value:String):void  
  2. 包含路径段的压缩表示的字符串。这是设置 segments 属性的一种替代方式。设置此属性会覆盖 segments array 属性中存储的任何值。   
  3. 该值是用于描述每个路径段的以空格分隔的字符串。每个段条目都有一个表示段类型的字符和两个或更多段参数。  
  4.  
  5. 如果段命令是大写的，则这些参数是绝对值。如果段命令是小写的，则这些参数是相对值。  
  6.  
  7. 下表显示这些段的语法： 段类型 命令 参数 示例   
  8. Move M/m x y M 10 20 － 将直线移到 10, 20。   
  9. Line L/l x y L 50 30 － 直线到 50, 30。   
  10. 水平线 H/h x H 40 = 水平线到 40。   
  11. 垂直线 V/v y V 100 - 垂直线到 100。   
  12. QuadraticBezier Q/q controlX controlY x y Q 110 45 90 30 - 曲线到 90, 30，控制点位于 110, 45。   
  13. CubicBezier C/c control1X control1Y control2X control2Y x y C 45 50 20 30 10 20 － 曲线到 10, 20，第一个控制点位于 45, 50，而第二个控制点位于 20, 30。   
  14. 闭合路径 Z/z 无 关闭路径。   
  15.  
  16.  
  17. 语言版本:   
  18. 3.0   
  19. Player 版本:   
  20. Flash 10, AIR 1.5   
  21. 产品版本:   
  22. Flex 4  
 
  
利用M和Q呼出一个圆，然后用stroke填充他
 
  
 data="M 1 0 Q 5 0 6 3 Q 5 5 3 6 Q 0 5 0 3 Q 1 0 3 0 "