项目中需要用到如下一个效果。下图中五个圆代表一个五孔的梅花管。客户在后台操作时需要编辑梅花管的每个子孔占用情况。
客户的要求是：点击某一个孔，小孔变黑，表明此孔被占用；再次点击，则小孔再变成透明圆形，表明此孔未被占用。
由于没学过flash或者其它相关功能，且还有七孔，五孔盘管等之分，我考虑用自定义组件来实现
学习Flex没有多久，还没接触过自定义组件，于是研究之，感谢这篇博文
http://www.cnblogs.com/xxcainiao/archive/2008/03/08/1096815.html
File->New->MXML Component新建一个组件，继承自：Canvas
在组件里我用五个Png图片拼成上图的五孔梅花管。代码如下：
Code<mx:Image x="31" y="2" source="Images/C.png" id="C1" click="switchImg(C1)"/>
<mx:Image x="3" y="42" source="Images/C.png" id="C2" click="switchImg(C2)"/>
<mx:Image x="35" y="79" source="Images/C.png" id="C3" click="switchImg(C3)"/>
<mx:Image x="81" y="62" source="Images/C.png" id="C4" click="switchImg(C4)"/>
<mx:Image x="77" y="14" source="Images/C.png" id="C5" click="switchImg(C5)"/>
switchImg方法是用来更换图片，C.png是一个空心的圆，而C2.png是一个实心的圆。代码如下：
Code<mx:Script>
<![CDATA[
import mx.controls.Alert;
private var _ware_num:int;
private function switchImg(img:Image):void
{
img.source = img.source.toString()=="Images/C.png"?"Images/C2.png":"Images/C.png";
}
]]>
</mx:Script>
然后将这个组件直接拖到主页面即可运行了。后面的属性，方法的设置略去。由于多处重复用到这个操作，所以我把它定义为一个组件，并可以通过代码多次调用。
复杂功能逐步完善中，先记录之
