5款不得不看的Flex皮肤

Flex应用中允许我们动态加载Skin,这就为我们开发更加个性化的Flex应用提供了便利。作为一个开发人员,总是希望自己开发的应用是独一无二的,而且运行的时候给人以“赏心悦目”的感觉那就跟完美了。不过很可惜并不是每一个开发人员都是一个很好的设计人员。要定置一套漂亮的Skin,除了必要的技术外,还是需要不少“艺术细胞”。

没有艺术细胞的TX们怎么办呢?好在我们的互联网是开放的,并且到处都充满着共享精神。DoNotYet.com整理了一个列表,列出了5款相当漂亮的Flex皮肤,大家可以参考一下,当然你知道其他的而列表中没有的话,也可以留言与大家分享。

http://www.donotyet.com/2009/08/09/5-very-beautiful-skins-for-flex-applications/

Flex中如何通过buttonStyleName样式设置ButtonBar的Skin的例子

接下来的例子演示了Flex中如何通过buttonStyleName样式,设置ButtonBar的Skin。

让我们先来看一下Demo可以右键View Source或点击这里察看源代码):

Continue reading “Flex中如何通过buttonStyleName样式设置ButtonBar的Skin的例子”

Flex中如何利用skin样式修改DateField中默认的日历图标的例子

接下来的例子演示了Flex中如何利用skin样式,修改DateField中默认的日历图标。

让我们先来看一下Demo可以右键View Source或点击这里察看源代码):

Continue reading “Flex中如何利用skin样式修改DateField中默认的日历图标的例子”

Flex中如何扩展LinkButton控件并且添加自定义的样式的例子

接下来的例子演示了Flex中如何扩展LinkButton控件并且添加自定义的样式。

让我们先来看一下Demo可以右键View Source或点击这里察看源代码):

Continue reading “Flex中如何扩展LinkButton控件并且添加自定义的样式的例子”

Flex中如何给Button制定样式

我们在Flex中如何设置进度条(ProgressBar)的自定义皮肤(Skin)的例子中介绍过如何给ProgressBar自定义皮肤,而在auzn经典Flex教程–KingnareStyle皮肤制作简介中也具体介绍过皮肤的制作过程。下面的文章针对Button这一控件,一步一步的介绍了如何给Button制定样式。有兴趣的可以仔细阅读一下。

Continue reading “Flex中如何给Button制定样式”

Flex中通过设置skin, upSkin, overSkin, downSkin和disabledSkin样式修改按钮(Button)的皮肤(Skin)的例子

在前面的Flex中通过设置嵌入字体以及替换默认Skin自定义Button风格的例子中我们介绍过通过设置嵌入字体以及替换默认Skin,自定义Button风格。当然我们也可以在auzn经典Flex教程–KingnareStyle皮肤制作简介中了解到更加深入的Skin处理。万丈高楼也是从地基开始的,接下来的例子演示了Flex中通过设置skin, upSkin, overSkin, downSkin和disabledSkin样式,修改按钮(Button)的皮肤(Skin)。

让我们先来看一下Demo可以右键View Source或点击这里察看源代码):

Continue reading “Flex中通过设置skin, upSkin, overSkin, downSkin和disabledSkin样式修改按钮(Button)的皮肤(Skin)的例子”

超过10万的免费字体让您的Flex UI(Skin和Theme)鹤立鸡群

前面我们有了如何在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万的字体可以供您选择,设计类的朋友们可以收藏一下:

Continue reading “超过10万的免费字体让您的Flex UI(Skin和Theme)鹤立鸡群”

auzn经典Flex教程–KingnareStyle皮肤制作简介

本教程所需工具:FlexBuilder 3, Flash CS3;OS:Windows XP

先来看一下整套KingnareStyle的整体效果:

KingnareStyle-Skin

Search-256x256 Demo | Download Full Project | Download project from Downloadhere.

FLEX3.0组件可以通过CSS来控制样式,这里的CSS和平时编写网页时所谈及的CSS是有区别的,可以说是为FLEX量身定制的样式表,借助ActionScript可以实现强大的显示效果,下面的示例中会有相关介绍。

Adobe公司发布的Express Photoshop,黑色风格很令人着迷,KingnareStyle就是以它为原型制作的一款FLEX皮肤。皮肤包含的组件很多,限于篇幅,只能选取有代表性的组件做演示。下面以Button组件为例,开始FLEX皮肤制作的入门。

Continue reading “auzn经典Flex教程–KingnareStyle皮肤制作简介”

Flex中如何通过downArrowSkin和upArrowSkin样式设置NumericStepper控件的上下箭头Skin的例子

接下来的例子演示了Flex中如何通过downArrowSkinupArrowSkin样式设置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 “Flex中如何通过downArrowSkin和upArrowSkin样式设置NumericStepper控件的上下箭头Skin的例子”

480+免费icon sets帮助我们在Flex中创建自己的漂亮的Skin和Theme

在前面的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这样的列表–这或多或少可以节省不少的时间。

Continue reading “480+免费icon sets帮助我们在Flex中创建自己的漂亮的Skin和Theme”

Flex中如何设置进度条(ProgressBar)的自定义皮肤(Skin)的例子

下面的例子演示了Flex中如何通过设置barSkin风格,设定进度条(ProgressBar)的自定义皮肤(Skin)。

让我们先来看一下Demo(可以右键View Source或点击这里察看源代码):
Continue reading “Flex中如何设置进度条(ProgressBar)的自定义皮肤(Skin)的例子”