肌肤为啥显示不出来，非常有意思，命名确实需要规范

皮肤为啥显示不出来，非常有意思，命名确实需要规范啊
今天做Button组件的时候遇到一个非常奇怪的问题：
本来该显示成这样：
却显示成了这样：

代码如下：

<?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for the Spark Button component.  

       @see spark.components.Button
        
      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
             xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"             
             alpha.disabled="0.5">
     
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
    
	<fx:Script>
		<![CDATA[
			
			[Embed(source="assets/images/btn_searchButton_disabled.png")]
			[Bindable]
			private var disabledCls:Class;
			
			[Embed(source="assets/images/btn_searchButton_up.png")]
			[Bindable]
			private var upCls:Class;
			
			[Embed(source="assets/images/btn_searchButton_down.png")]
			[Bindable]
			private var downCls:Class;
			
			[Embed(source="assets/images/btn_searchButton_over.png")]
			[Bindable]
			private var overCls:Class;
		]]>
	</fx:Script>
	
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>
	<s:BitmapImage source.up="{upCls}" left="0" top="0" right="0" bottom="0"></s:BitmapImage>
	<s:BitmapImage source.over="{overCls}" left="0" top="0" right="0" bottom="0"></s:BitmapImage>
	<s:BitmapImage source.down="{downCls}" left="0" top="0" right="0" bottom="0"></s:BitmapImage>
	<s:BitmapImage source.disabled="{disabledCls}" left="0" top="0" right="0" bottom="0"></s:BitmapImage>
	<!--
	<s:Rect width="57" height="39" includeIn="up"><s:fill><s:BitmapFill source="{upCls}" /></s:fill></s:Rect>
	<s:Rect width="57" height="39" includeIn="over"><s:fill><s:BitmapFill source="{overCls}" /></s:fill></s:Rect>
	<s:Rect width="57" height="39" includeIn="down"><s:fill><s:BitmapFill source="{downCls}" /></s:fill></s:Rect>
	<s:Rect width="57" height="39" includeIn="disabled"><s:fill><s:BitmapFill source="{disabledCls}" /></s:fill></s:Rect>
	-->
</s:SparkButtonSkin>

原来声明为upCls、buttonCls、overCls、downCls在Button中是会异常显示图片的，没有深究这个原因，反正命名不能写这四个名字就行了。