GeneralSanguo工作笔记1——利用Illustrator制作Flex4皮肤

来源：互联网发布：投资性主体知乎编辑：程序博客网时间：2024/05/18 00:16

突兀的从服务端转到了客户端，有点意外也有点惊喜。工作几年了，暮然回首却发现自己竟然没有留下任何有价值的东西，很是遗憾。从今天起，我要将每一次成功或失败详细的记录下来，也算是记录自己的成长吧。

目标：制作Flex控件皮肤

前提：理解Flex控件的皮肤与逻辑的拆分

失败：根据Adobe官网上的介绍，使用Catalyst制作的FXG文件用来做Flex的皮肤是最适合不过的。但是，可能是本人比较愚钝，费了半天劲搞出来的FXG文件一放到Flex中就是一堆乱码。无奈，我换成了Illustrator。这个地方还请高手指导。

正题：

1、下载安装Illustrator CS5

2、新建文件，然后随意绘制一个图形，例如：

3、另存为fxg文件

4、在Flex4中导入该文件，然后打开该文件，会发现它变成了一堆代码：

<?xml version="1.0" encoding="utf-8" ?><Graphic version="2.0" viewHeight="841.89" viewWidth="595.28" ai:appVersion="15.0.0.399" ATE:version="1.0.0" flm:version="1.0.0" d:id="1" d:using="" xmlns="http://ns.adobe.com/fxg/2008" xmlns:ATE="http://ns.adobe.com/ate/2009" xmlns:ai="http://ns.adobe.com/ai/2009" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:flm="http://ns.adobe.com/flame/2008"> <Library/> <Group ai:artboardActive="1" ai:artboardIndex="0" ai:seqID="1" d:layerType="page" d:pageHeight="841.89" d:pageWidth="595.28" d:type="layer" d:userLabel="画板 1"> <Group ai:objID="5c19b00" ai:seqID="2" d:id="2" d:type="layer" d:userLabel="图层 1"> <Path x="116.444" y="193.334" winding="nonZero" ai:objID="13a71780" ai:seqID="3" data="M133.556 2.6662C80.5559 61.6662 -114.444 -84.3338 94.5559 85.6662 303.556 255.666 212.556 55.6662 212.556 55.6662L133.556 2.6662Z"> <fill> <SolidColor color="#E41C16"/> </fill> <stroke> <SolidColorStroke weight="1" caps="none" joints="miter" miterLimit="10" color="#9AC832"/> </stroke> </Path> </Group> </Group> <Private> <ai:PrivateElement d:ref="#1"> <ai:SaveOptions> <ai:Dict data="I preserveGradientPolicy 4 I rasterizeResolution 72 I preserveFilterPolicy 3 B downsampleLinkedImages 0 I preserveTextPolicy 4 I expandBlendsOption 5 B includeXMP 0 B includeSymbol 0 B writeImages 1 B aiEditCap 1 I versionKey 2 B includeObjectOutsideArtboard 0 "/> </ai:SaveOptions> <ai:DocData base="未标题-1.assets/images" rulerCanvasDiffH="298.5" rulerCanvasDiffV="421.5"> <ai:DocRasterSettings> <ai:Dict data="R padd 36 B alis 0 B mask 0 B spot 1 I dpi. 300 I colr 5 "/> </ai:DocRasterSettings> </ai:DocData> <ai:AutoGenImageList> <ai:Dict/> </ai:AutoGenImageList> </ai:PrivateElement> <ai:PrivateElement flm:hashcode="FA60BD83A2C0660BFDBE32B626C06239" d:ref="#2"> <ai:LayerOptions color="5 79.31 257 128.502"/> </ai:PrivateElement> </Private> </Graphic>

5、里面乱七八糟的东西我们不用管，只需要将<Path>中间的那段代码截取出来就行：

6、将上面代码拷贝至你的皮肤类中，当然由于fxg文件与mxml文件的格式有些差异，所以会报错，按照提示或者对照下面代码修改一下就可以了：

<?xml version="1.0" encoding="utf-8"?><s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"><fx:Metadata>[HostComponent("spark.components.Button")]</fx:Metadata> <s:states><s:State name="disabled" /><s:State name="down" /><s:State name="over" /><s:State name="up" /></s:states><s:Path x="116.444" y="193.334" winding="nonZero" data="M133.556 2.6662C80.5559 61.6662 -114.444 -84.3338 94.5559 85.6662 303.556 255.666 212.556 55.6662 212.556 55.6662L133.556 2.6662Z"><s:fill><s:SolidColor color="#E41C16" color.over="red"/></s:fill><s:stroke><s:SolidColorStroke weight="1" caps="none" joints="miter" miterLimit="10" color="#9AC832"/></s:stroke></s:Path></s:Skin>

7、至此，你就可以将上面的皮肤类指定给某个控件，我指定在了一个按钮上:

<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="1024" minHeight="768" xmlns:local="*" xmlns:Components="Components.*"><s:layout><s:BasicLayout/></s:layout><fx:Declarations></fx:Declarations><s:Button id="login" x="105" y="152" skinClass="Skins.LoginButtonSkin"/> </s:Application>

8、预览效果：

正常状态

悬停状态

怎么样，很简单吧。其实我们这里就是利用了Flex4独特的FXG文件，你也可以直接使用Path类去绘制各种复杂图形（如果你真的很强！），还是推荐用工具来绘制吧。

刚刚接触Flex还请大家多多指教，如有问题请留言或者邮件联系：sunix2010@gmail.com