魅族经典－Flex 4主题

本文来自：http://anirudhs.chaosnet.org/blog/2009.11.25.html

 

我是非常之相信的。我小试了下。我用Flash Catalyst就构建了一个黑色 Flex  4主题。上个礼拜，我看着Harish用Catalyst构建了一个 Flex  4 主题。 靠着他的肩膀，我傻呆呆地看着他轻松地移动着一个个长方形和椭圆，搭建了一个对话窗口。这个窗口看上去很有趣，和MAC上的“Display Properties"对话窗口很相近。我印象颇深（任何看到Harish demo Catalyst的人都会留下深刻印象），所以，我给予了充分的信任。请阅读以下细节，和一些针对Catalyst的小贴士。

魅族经典

点击这里  试一下吧。

 

你可从 这里 下载代码（FXP）。已经用使用 Flex 4 BETA 2.5DK的Flash Builder 4 Beta 2进行了测试。

 

设计

首先声明：我不是设计人员或UI专家，如果我的颜色没选好，只管“抨击”我好了。不论如何，我都要用这个主题建一个应用程序。

 

我一直想将这个蓝色和黑色搭配起来做一个 Flex 主题。在D esk W orld 里，可以看到我对蓝色和黑色的挚爱：

我开始做这个主题的时候，只有一个简单的概念，是受到了 Flex  4里的一个按钮皮肤的Highlight部分的启发：

0xcccccc颜色的一条线，顶部为0.25透明度值，两边留一些间距，下面的另外一条线使用相同的颜色，但是整个沿边为0.07透明度值。下面也是同样的设置，但是仅在鼠标移动经过时显现。在左边和右边，两条蓝线，0.07透明度值。底部的两条线在鼠标移动经过时变成蓝色。

针对 Flash  Catalyst的小贴士：

令人惊叹的工具。所有的 Flex 开发人员应该都尝试下，看看属性和样式的改变是如何瞬间影响组件的（无需Flash Builder里的编辑循环）。

例如，一个椭圆上的斜线（停止点设置为约0.36，透明度值0）被用来画滑块里的大拇指顶部的“高光”。这在FB的设计图1里，则很难预映和略微进行调整。

代码生成

你必须对Catalyst生成的代码稍作调整，这样组件才会恰当调节大小。基本上，要注意硬编码宽度或高度，并且使用限制条件（左，右，高，底）。当你使用GROUP（组）下面的条目时，这个过程就非常“痛苦”。所以，你可能会要在向Flash Builder4输入FXP之前采用“Ungroup”方法。

CSS

我发现有效的一个方法：剥离应用到单个组件如focusColor和skinClass的属性，放入CSS文件。这样，只需进入CSS文件，你就可以使用皮肤了。

例如，下面是我为魅族经典创建的CSS文件的一部分：

s|Button { focusColor: #0d103f; skinClass: ClassReference("components.Button2"); fontFamily: "Inconsolata"; }

只要放入一个样式标签里，你就可以使用我的主题了：

<!-- apply our theme --> <fx:Style source="blackglass.css"/>

结论：

试一下C atalyst   Flex  4 R ocks。

 

【国内下载】Flex 3 Builder :http://g.csdn.net/5120749
【国内下载】Adobe Flash Builder 4 :http://g.csdn.net/5105812
【官方下载】Flex 3 Builder :http://g.csdn.net/5121278
【官方下载】Adobe Flash Builder 4 :http://g.csdn.net/5120750