在前面的Flex中通过设置嵌入字体以及替换默认Skin自定义Button风格的例子中我们介绍过通过设置嵌入字体以及替换默认Skin，自定义Button风格。当然我们也可以在auzn经典Flex教程–KingnareStyle皮肤制作简介中了解到更加深入的Skin处理。万丈高楼也是从地基开始的，接下来的例子演示了Flex中通过设置skin, upSkin, overSkin, downSkin和disabledSkin样式，修改按钮（Button）的皮肤(Skin)。
前面我们有了如何在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万的字体可以供您选择，设计类的朋友们可以收藏一下：
本教程所需工具：FlexBuilder 3, Flash CS3;OS:Windows XP
先来看一下整套KingnareStyle的整体效果：
Demo | Download Full Project | Download project from 
here.
FLEX3.0组件可以通过CSS来控制样式，这里的CSS和平时编写网页时所谈及的CSS是有区别的，可以说是为FLEX量身定制的样式表，借助ActionScript可以实现强大的显示效果，下面的示例中会有相关介绍。
Adobe公司发布的Express Photoshop，黑色风格很令人着迷，KingnareStyle就是以它为原型制作的一款FLEX皮肤。皮肤包含的组件很多，限于篇幅，只能选取有代表性的组件做演示。下面以Button组件为例，开始FLEX皮肤制作的入门。
接下来的例子演示了Flex中如何通过downArrowSkin和upArrowSkin样式设置NumericStepper控件的上下箭头的Skin。皮肤（Skin）牵涉到各种素材图片的问题，当然还有字体，好在网络上总是有好人会分享自己的劳动成果，免费的好的图片，免费的字体都可以在网上找到。你可以在这里（480+ free and fresh icon sets help you to create your beautiful skins and themes in Flex）挑选符合自己主题的图标icons,可以在这里（100000+ Free Fonts To Make Your Flex UI(skins and themes) Stand Out From The Crowd）挑选自己需要的字体。当然还有这个（a list of the best free vector graphics,free icons,images and sounds website）。当然，下面的例子实际上仅仅是设置了两个属性，离真正的Skin设计还很远，但是凡是总归是从简单得做起。 
让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：
Continue reading »
在前面的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中的工具，可以按照自己的想象制作出自己满意的作品； 也有一部分人可能会非常“smart”的让google帮我们找一些资料/素材；也许有一些人在自己的收藏夹里就有类似于前面的a list of the best free vector graphics,free icons,images and sounds website这样的列表–这或多或少可以节省不少的时间。
下面的例子演示了Flex中如何通过设置barSkin风格，设定进度条(ProgressBar)的自定义皮肤(Skin)。
让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：
Continue reading »
