Flex皮肤设计制作的捷径 – WEB前端开发

Web前端开发 • 9年前扫码分享

我是创始人李岩：很抱歉！给自己产品做个广告，点击进来看看。

Flex皮肤设计制作我也就做过一个项目，就是我博客右下角的绿色的搜道聊吧，这个是用flex实现的聊天室。看看flex的皮肤 2009-06-08_234356

红色部分就是flex的皮肤，外框是网页，js的。

下面我说说我做Flex皮肤设计制作的一些经验，仅供大家参考，毕竟这方面也是第一次，经验不住请见谅。

(转载请注明出处： WEB前端开发 http://www.css88.com/ )

一、要知道你要做什么：

我做flex的时候，MXML是程序员写好的，在他的基础上我做了部分修改。MXML其实和xhtml一样是一种基于XML的标记语言，在Flex技术中，MXML用于设计用户界面，实现丰富的Flex表现层。从作用上说，MXML和xHTML的功能是基本一致的，都是设计用户界面，但是MXML提供了较xHTML更为丰富的界面组件，并且在开发上更为结构化，条理更加清晰。MXML的编写同样类似于HTML，它通过标签来定义和描述组件。

你要制作皮肤必须了解MXML的标签来定义和描述组件，还有各个标签的属性。

大家可以通过一些书本，工具等学习这些：

1. http://examples.adobe.com/flex3/componentexplorer/explorer.html ，这里有很多关于MXML的实例几乎每个标签都有；如图：

2009-06-09_000356

2.flairbuilder： http://www.flairbuilder.com/ 这个是一个flex的布局工具，你可以通过这个工具做一些布局设计，甚至直接到处MXML；

2009-06-09_001138

3.Tour de Flex component explorer：安装地址： http://www.adobe.com/devnet/flex/tourdeflex/ ;这个工具也是MXML的实例，不过这个工具有MXML的标签，属性甚至样式，几乎包含了MXML每个标签，组件和该标签的所有属性，值，适用样式属性等等。

如果这些MXML都有程序员写，那么你只要需要设计和制作皮肤就好了。但是个人认为还是要熟知MXML每个标签，组件和该标签的所有属性，值，适用样式属性等等。

(转载请注明出处： WEB前端开发 http://www.css88.com/ )

二、设计皮肤要注意的地方

首先搞清楚需不需要设计，很多人做flex皮肤一般都不设计，直接在flex默认皮肤上通过修改css样式来实现。那么可以使用Flex Style Explorer这个工具经过简单的操作得到你要的css样式。如果你想设计的更加漂亮丰富的皮肤那么我建议你完整的设计一套皮肤。即时是自己设计很多地方也要使用到Flex Style Explorer（Flex2 Style Explorer在线版（ http://examples.adobe.com/flex2/consulting/styleexplorer/Flex2StyleExplorer.html ）这个是针对flex2的，当然flex 3绝大部分也可以使用，这个工具最新的是针对flex3的Flex3 Style Explorer V3.0 Beta，下载flex3styleexplorer_v3beta ；）使用非常简单，如图：

2009-06-09_014108

我们回到设计，设计我不在行，我只说一些注意点：

1.尽量根据MXML的标签设计元素；

2.如果flex要换肤，那么就要考虑皮肤的换肤方便。

3.组件的大小最好根据组件的默认尺寸设计，比如滚动条宽度，下拉框高度得的。

4.设计工具看你在行哪个，photoshop，illustrator，flash，fireworks都可以。

5.保持控件的统一性，尽量将各个控件统一样式（控件尺寸可以通过样式修改），比如按钮，下拉框什么的，实在需要，也可以多设计几种样式，就好比我们做网页前端开发，到不了多张图片，多个样式类。

(转载请注明出处： WEB前端开发 http://www.css88.com/ )

三、切图

设计好之后怎么应用的flex中去呢，就像网页前端开发一样，你需要将设计稿中有用的元素分离出来，将其转化成在Flex中能用的元素图片。那么怎么转化呢？

根据你的设计工具下载以下文件，这里已经将flex中绝大多数的组件和各个主讲状态都列出来，并有默认控件的样式文件，

下载flex_skins_fireworks

下载flex_skins_photoshop

下载flex_skins_illustrator

下载flex_skins_flash

以photoshop为例，将你设计稿上的各个元素拷贝的下载下来的源文件（flex_skins.psd）上，并覆盖源文件该控件的该状态（这是我的做的这一步，点击下载,晕本地没文件，明天更新），这是针线活，注意仔细，特别要注意改切片的大小，您的元素不能超过源文件该控件的该状态切片大小，如果超过了，那么请修改切片大小，如果需要，还要给css上的一些属性值。

(转载请注明出处： WEB前端开发 http://www.css88.com/ )

如果有些空间没在你项目中用到，那么就不用覆盖了，如果你想做一整套的皮肤也可以把所有的控件样式都做出来，呵呵。

完成后就要到处图片，覆盖压缩包中的images目录下的图片文件，一套皮肤就OK了。

注意几点，1.注意图片目录；2.以默认设置导出图片（png24位），3.导出时隐藏源文件中的背景层文件夹（如图）；

2009-06-09_011706

这样一套皮肤就初步完成了，就可以用到项目中去调试了。一个flex_skins.css和一个images文件夹就是你要用到的文件。

其他工具设计的flex皮肤我没试过，但是我觉得大致上是一样的；

PS:以上源文件由Narciso Jaramillo提供: http://www.adobe.com/devnet/flex/articles/flex_skins.html

(转载请注明出处： WEB前端开发 http://www.css88.com/ )

四、相同空间的多种样式处理

继续制作皮肤，还是以以photoshop为例。

如果你设计了两种（或多种）样式的按钮，一种常用的可以在这个在这个皮肤上完成，那么剩下的一个或几个按钮怎么办呢？这个其实和我们做网页的前端开发差不多，首先我们要把其他按钮的各个状态图片切出来，按一定的规则命名，我觉flex_skins.psd的切片命名规则蛮好的，你可以在那基础上稍作修改就可以了，然后把它保存到images目录下。

接下来就要修改css文件了，打开flex_skins.css，找到如下代码：

[code=”css”]

Button
{
disabledSkin: Embed(source=”images/Button_disabledSkin.png”,
scaleGridLeft=”4″, scaleGridTop=”4″, scaleGridRight=”60″, scaleGridBottom=”18″);
downSkin: Embed(source=”images/Button_downSkin.png”,
scaleGridLeft=”4″, scaleGridTop=”4″, scaleGridRight=”60″, scaleGridBottom=”18″);
overSkin: Embed(source=”images/Button_overSkin.png”,
scaleGridLeft=”4″, scaleGridTop=”4″, scaleGridRight=”60″, scaleGridBottom=”18″);
upSkin: Embed(source=”images/Button_upSkin.png”,
scaleGridLeft=”4″, scaleGridTop=”4″, scaleGridRight=”60″, scaleGridBottom=”18″);
}

[/code]

复制一份，命名你的类名，这个我们网页上的css写法差不多，例如：

[code=”css”]

Button.myButton
{
disabledSkin: Embed(source=”images/你的图片名”,
scaleGridLeft=”4″, scaleGridTop=”4″, scaleGridRight=”60″, scaleGridBottom=”18″);
downSkin: Embed(source=”images/你的图片名”,
scaleGridLeft=”4″, scaleGridTop=”4″, scaleGridRight=”60″, scaleGridBottom=”18″);
overSkin: Embed(source=”images/你的图片名”,
scaleGridLeft=”4″, scaleGridTop=”4″, scaleGridRight=”60″, scaleGridBottom=”18″);
upSkin: Embed(source=”images/你的图片名”,
scaleGridLeft=”4″, scaleGridTop=”4″, scaleGridRight=”60″, scaleGridBottom=”18″);
}

[/code]

其中：disabledSkin，downSkin，overSkin，upSkin表示按钮的4种状态。

其中的scaleGridTop=”4″, scaleGridLeft=”4″, scaleGridRight=”60″, scaleGridBottom=”18″即是限定了范围，定义了顶、左、右、底部的4个放缩位置；其实flex皮肤都是用九宫格布局来伸缩的，就是上面这些属性。按钮如图：

885ccb23415a595c9922edd1