flex4 skin image

最新推荐文章于 2025-11-24 17:05:24 发布

原创最新推荐文章于 2025-11-24 17:05:24 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#大数据

本文介绍如何在Flex4中为Spark组件自定义皮肤，并通过示例演示如何使用外部图片资源，包括PNG和SWF文件中的图片。文章提供了具体的MXML代码实现。

flex4 skin 使用外部图片，当需要自定义一个组件时，需要用到一些外部图片，对于一些flex3的遗留思想，

希望通过css来控制，

upSkin="{null}"

overSkin="mx.skins.halo.ButtonSkin"

downSkin="mx.skins.halo.ButtonSkin"

disabledSkin="mx.skins.halo.ButtonSkin"

在flex4中，对于 spark 组件就不行了

flex4 创建css 就不多介绍了

现以button引入外部image (常用*.png,*.swf中图片)为例：

<?xml version="1.0" encoding="utf-8"?>
<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"
			   minWidth="21" minHeight="21" 
			   alpha.disabled="0.5">

<fx:Metadata>
	<![CDATA[ 
	/** 
	* @copy spark.skins.spark.ApplicationSkin#hostComponent
	*/
	[HostComponent("spark.components.Button")]
	]]>
</fx:Metadata>

<fx:Script fb:purpose="styling">
	<![CDATA[         
		import spark.components.Group;
		/* Define the skin elements that should not be colorized. 
		For button, the graphics are colorized but the label is not. */
		static private const exclusions:Array = ["labelDisplay"];
		
		/** 
		 * @private
		 */     
		override public function get colorizeExclusions():Array {return exclusions;}
		
		/**
		 * @private
		 */
		override protected function initializationComplete():void
		{
			useChromeColor = true;
			super.initializationComplete();
		}  
		
	]]>        
</fx:Script>
<s:states>  
<s:State name="up"/>  
<s:State name="over"/>  
<s:State name="down"/>  
<s:State name="disabled"/>  
</s:states>  
<s:BitmapImage smooth="true" 
source="@Embed('button-up.png')" 
source.up="@Embed('button-up.png')" 
source.down="@Embed('button-down.png')" 
source.disabled="@Embed('button-disabled.png')" 
/>  
<s:Image smooth="true" source="@Embed(source='MyButton.swf',symbol='pBtnUp')" />
<s:Label id="labelDisplay" />
</s:SparkButtonSkin>