<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>中文Flex例子 &#187; Theme</title>
	<atom:link href="http://blog.minidx.com/tag/theme/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.minidx.com</link>
	<description>中文Adobe Flex例子,Flex实例教程,RIA资源,全文检索技术,算法和数据结构</description>
	<lastBuildDate>Thu, 31 Mar 2011 03:22:33 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.5</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Flex中通过borderColor和borderColor属性设置按钮（Button）控件边框颜色和theme颜色的例子</title>
		<link>http://blog.minidx.com/2008/07/25/1130.html</link>
		<comments>http://blog.minidx.com/2008/07/25/1130.html#comments</comments>
		<pubDate>Fri, 25 Jul 2008 13:15:17 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[borderColor]]></category>
		<category><![CDATA[Button]]></category>
		<category><![CDATA[emphasized]]></category>
		<category><![CDATA[halo]]></category>
		<category><![CDATA[Theme]]></category>
		<category><![CDATA[themeColor]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/2008/07/25/1130.html</guid>
		<description><![CDATA[接下来的例子演示了Flex中如何通过borderColor和borderColor属性，设置按钮（Button）控件边框颜色和theme颜色。例子中列举了”haloBlue”, “haloGreen”, “haloOrange” or “haloSilver”等几种方案。
让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：









下面是完整MXML实现代码(或点击这里察看)：
Download: main.mxml&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&#62;
&#60;mx:Application&#160;xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34;
&#160; &#160; &#160; &#160; layout=&#34;vertical&#34;
&#160; &#160; &#160; &#160; verticalAlign=&#34;middle&#34;
&#160; &#160; &#160; &#160; backgroundColor=&#34;white&#34;&#62;
&#160;
&#160; &#160; &#60;mx:Script&#62;
&#160; &#160; &#160; &#160; &#60;![CDATA[
&#160; &#160; &#160; &#160; &#160; &#160; private function comboBox_change(value:String):void {
&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; myButton.label = value;
&#160; &#160; &#160; &#160; &#160; &#160; &#160; &#160; myButton.setStyle(&#34;borderColor&#34;, value);
&#160; [...]]]></description>
		<wfw:commentRss>http://blog.minidx.com/2008/07/25/1130.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>超过10万的免费字体让您的Flex UI(Skin和Theme)鹤立鸡群</title>
		<link>http://blog.minidx.com/2008/06/28/1004.html</link>
		<comments>http://blog.minidx.com/2008/06/28/1004.html#comments</comments>
		<pubDate>Sat, 28 Jun 2008 02:30:42 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[Adobe其他]]></category>
		<category><![CDATA[Flex]]></category>
		<category><![CDATA[Font]]></category>
		<category><![CDATA[Skin]]></category>
		<category><![CDATA[Theme]]></category>
		<category><![CDATA[字体]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/2008/06/28/1004.html</guid>
		<description><![CDATA[前面我们有了如何在Flex中创建Skins和Themes的教程（15+ Strongly Recommend Tutorials You Must Read for Creating Skins and Themes( UI Design ) in Flex）,也准备好了非常多的可以供我们免费使用的icons(480+ free and fresh icon sets help you to create your beautiful skins and themes in Flex)，那么在创建与众不同的Skins和Themes的时候，还有什么是我们所需要的呢？答案就是Fonts!不要小看这个我们只要打开电脑就可以看到的普通的不能再普通的东西，在你的Flex project中合理的使用他们，往往会给你带来画龙点睛的意外效果。下面是一篇字体资源列表，超过10万的字体可以供您选择，设计类的朋友们可以收藏一下：








100000+ Free Fonts To Make Your Flex UI(skins and themes) Stand Out From The Crowd
你可能还对下列文章感兴趣:480+免费icon sets帮助我们在Flex中创建自己的漂亮的Skin和Theme5款不得不看的Flex皮肤Flex中如何通过调用Font.enumerateFonts函数判断系统中安装了哪些字体的例子auzn经典Flex教程&#8211;KingnareStyle皮肤制作简介Flex中如何通过设定headerStyleName样式在Accordion控件中使用嵌入字体的例子]]></description>
		<wfw:commentRss>http://blog.minidx.com/2008/06/28/1004.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>auzn经典Flex教程&#8211;KingnareStyle皮肤制作简介</title>
		<link>http://blog.minidx.com/2008/06/26/1000.html</link>
		<comments>http://blog.minidx.com/2008/06/26/1000.html#comments</comments>
		<pubDate>Thu, 26 Jun 2008 15:29:25 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[FlexBuilder]]></category>
		<category><![CDATA[KingnareStyle]]></category>
		<category><![CDATA[Skin]]></category>
		<category><![CDATA[Theme]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/2008/06/26/1000.html</guid>
		<description><![CDATA[本教程所需工具：FlexBuilder 3, Flash CS3;OS:Windows XP
先来看一下整套KingnareStyle的整体效果：
 
 Demo &#124; Download Full Project &#124; Download project from here.

FLEX3.0组件可以通过CSS来控制样式，这里的CSS和平时编写网页时所谈及的CSS是有区别的，可以说是为FLEX量身定制的样式表，借助ActionScript可以实现强大的显示效果，下面的示例中会有相关介绍。
Adobe公司发布的Express Photoshop，黑色风格很令人着迷，KingnareStyle就是以它为原型制作的一款FLEX皮肤。皮肤包含的组件很多，限于篇幅，只能选取有代表性的组件做演示。下面以Button组件为例，开始FLEX皮肤制作的入门。








我们先在Flex Builder 3中新建一个项目FlexSkinTest

新建文件夹style，并在style文件夹下新建style.css文件：

双击打开style.css，切换到Design面板并新建一个样式：

选择Button组件：

按下OK后可以看到按钮的8种状态。便于测试，我们把背景色调整为0&#215;333333：

切换到Source面板调整字体样式：
Button
{
color:#AAAAAA;/*Color*/
textRollOverColor:#FFFFFF; /*text&#160;rolling over color*/
textSelectedColor:#FFFFFF; /*SelectedColor*/
disabledColor:#5A5A5A; /*&#160;disabledColor */
fontWeight:normal; /*fontweight*/
}
结果如下图：

接下来的工作就是把按钮的8种状态用自定义的皮肤替换掉。
常用的实现方法有4种，我们将逐步介绍。
我们先学习KingnareStyle中Button组件皮肤的实现方法：将外部swf文件里的皮肤元件嵌入到组件样式文件中。
嵌入swf文件中的元件
首先在style文件夹下新建文件skin.fla，背景色同样设置为#333333。
CTRL+F8新建影片剪辑Button_upSkin，属性设置如下:

这里最好启用9切片，以后嵌入FLEX样式时就不用进行9切片设置了。
关于9切片，可以参考下面图示（引自Flex Developer Center）：

将舞台放大至400%，使用矩形工具画一个空心矩形，坐标为（0，0），厚度为1像素，高宽均为23像素，填充色为#FFFFFF，透明度10%

再新建一个层，用同样的方法在内部画一个空心矩形，坐标为（1，1），厚度1像素，高宽均为21像素，填充色为#000000，透明度60%

下面填充空白区。
新建一个层，画实心矩形，坐标为（2，2），高宽均为19像素，填充线性渐变色白色，透明度由10%至0%：

最后再加高亮框。新建一个层，画空心矩形，坐标为（2，2），厚度为1，高宽均为19像素，填充线性渐变色白色，透明度由8%至3%

至此，图形部分完成，再把9切片的线重新定位：

CTRL+ENTER发布程序。
Flash部分告一段落，回到FLEX的style.css中。切换到Source面板，在Button样式中加入下面语句：
upSkin:Embed(source=”skin.swf”, symbol=”Button_upSkin”);
解释一下，upSkin，Button弹起状态皮肤。Embed语句，用于将外部资源嵌入程序中使用，本例中将skin.swf中的Button_upSkin元件嵌入到样式中。
保存后切换到Design面板，会发现up状态已经更新为我们刚才制作的元件了：

使用同样的方法来制作其他状态皮肤，要注意给元件赋合适的名字。最后CCS如下：
Application
{
backgroundGradientAlphas:&#160;1.0, 1.0;
backgroundGradientColors:&#160;#333333, #333333;
}
&#160;
Button
{
color:&#160;#AAAAAA;
textRollOverColor:&#160;#FFFFFF;
textSelectedColor:#FFFFFF;
disabledColor:#5A5A5A;
fontWeight:normal;
upSkin:&#160;Embed(source=”skin.swf”, symbol=”Button_upSkin”);
overSkin:&#160;Embed(source=”skin.swf”, symbol=”Button_overSkin”);
downSkin:&#160;Embed(source=”skin.swf”, symbol=”Button_downSkin”);
disabledSkin:&#160;Embed(source=”skin.swf”, symbol=”Button_disabledSkin”);
selectedUpSkin:&#160;Embed(source=’skin.swf’, symbol=’Button_selectedUpSkin’);
selectedOverSkin:&#160;Embed(source=’skin.swf’, symbol=’Button_selectedOverSkin’);
selectedDownSkin:&#160;Embed(source=’skin.swf’, symbol=’Button_selectedDownSkin’);
selectedDisabledSkin:&#160;Embed(source=’skin.swf’, symbol=’Button_selectedDisabledSkin’);
}
效果图：

接下来我们打开FlexSkinTest.mxml文件，切换到Source面板，
添加 &#60;mx:Style source=&#34;style/style.css&#34;/&#62;
&#60;mx:Button x=&#34;10&#34; y=&#34;10&#34; label=&#34;Button&#34;/&#62;
换到Design面板，可以看到新加的Button组件已经应用我们的样式了，也可以多拖几个Button到程序中并设置不同的大小，可以发现边缘并未因形变发生模糊，这是我们使用了9切片的结果。

可以说，我们的Button组件皮肤已经完工了。
使用Flex Skin Design Extensions for Flash CS3
我们再开始第二种皮肤制作方法。
先做准备活动：
从http://www.adobe.com/go/flex3_cs3_swfkit下载Flex Component Kit for Flash CS3。
从http://www.adobe.com/go/flex3_skinning下载Flex [...]]]></description>
		<wfw:commentRss>http://blog.minidx.com/2008/06/26/1000.html/feed</wfw:commentRss>
		<slash:comments>19</slash:comments>
		</item>
		<item>
		<title>480+免费icon sets帮助我们在Flex中创建自己的漂亮的Skin和Theme</title>
		<link>http://blog.minidx.com/2008/05/12/842.html</link>
		<comments>http://blog.minidx.com/2008/05/12/842.html#comments</comments>
		<pubDate>Mon, 12 May 2008 14:24:27 +0000</pubDate>
		<dc:creator>Minidxer</dc:creator>
				<category><![CDATA[Flex]]></category>
		<category><![CDATA[网络资源]]></category>
		<category><![CDATA[icon]]></category>
		<category><![CDATA[Skin]]></category>
		<category><![CDATA[Theme]]></category>

		<guid isPermaLink="false">http://blog.minidx.com/2008/05/12/842.html</guid>
		<description><![CDATA[在前面的15+ Strongly Recommend Tutorials You Must Read for Creating Skins and Themes( UI Design ) in Flex中，我们收集了一些非常精彩的Tutorials，帮助我们了解了如何在Flex中创建符合自己需要的Skins和Themes。知道了如何创建，很多人就会迫不及待的动手做自己的Skins和Themes了，我也相信大部分的Flex程序员都具有很好的艺术细胞，依靠自己的想象或者利用10+ great free Photoshop brush websites中的工具，可以按照自己的想象制作出自己满意的作品； 也有一部分人可能会非常&#8220;smart&#8221;的让google帮我们找一些资料/素材；也许有一些人在自己的收藏夹里就有类似于前面的a list of the best free vector graphics,free icons,images and sounds website这样的列表&#8211;这或多或少可以节省不少的时间。








我在61+ Free Business Wordpress themes一文中曾经说过我自己没什么艺术细胞，可以制作出很漂亮的东西，所以我只能选择利用别人共享出来的免费的资源。我花了一些时间，整理了另外一份列表，假如你收藏并且在用到的时候还记得这份列表的话，相信它同样可以帮你节省一定的时间。
具体列表看这里吧：
480+ free and fresh icon sets help you to create your beautiful skins and themes in Flex
你可能还对下列文章感兴趣:超过10万的免费字体让您的Flex UI(Skin和Theme)鹤立鸡群5款不得不看的Flex皮肤auzn经典Flex教程&#8211;KingnareStyle皮肤制作简介Flex中通过disabledIconColor样式设置NumericStepper控件图标(icon)无效时的颜色的例子Flex中如何通过downArrowSkin和upArrowSkin样式设置NumericStepper控件的上下箭头Skin的例子]]></description>
		<wfw:commentRss>http://blog.minidx.com/2008/05/12/842.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk
Page Caching using disk (enhanced)
Database Caching using disk
Object Caching 360/702 objects using disk

Served from: blog.minidx.com @ 2012-02-09 10:38:29 -->
