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

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

?

目标：制作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>中间的那段代码截取出来就行：

<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>

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