Illustrator快速入门之利用Illustrator制作Flex4皮肤

在Illustrator快速入门学习的时候，我们该如何来利用Illustrator制作Flex4皮肤呢，首先我们应该先理解Flex控件的皮肤与逻辑的拆分，接下来就来看看本文的具体操作步骤吧，让我们在今后学习和使用的时候能够更加熟练的运用它们，从而让自己获得更大的提升。

正题：

1、下载安装Illustrator CS5

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

3、另存为fxg文件

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

[xhtml] view plain copy
1. <?xml version="1.0" encoding="utf-8" ?>  
2. <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="//ns.adobe.com/fxg/2008" xmlns:ATE="//ns.adobe.com/ate/2009" xmlns:ai="//ns.adobe.com/ai/2009" xmlns:d="//ns.adobe.com/fxg/2008/dt" xmlns:flm="//ns.adobe.com/flame/2008">  
3.   <Library/>  
4.   <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">  
5.     <Group ai:objID="5c19b00" ai:seqID="2" d:id="2" d:type="layer" d:userLabel="图层 1">  
6.       <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">  
7.         <fill>  
8.           <SolidColor color="#E41C16"/>  
9.         </fill>  
10.         <stroke>  
11.           <SolidColorStroke weight="1" caps="none" joints="miter" miterLimit="10" color="#9AC832"/>  
12.         </stroke>  
13.       </Path>  
14.     </Group>  
15.   </Group>  
16.   <Private>  
17.       <ai:PrivateElement d:ref="#1">  
18.         <ai:SaveOptions>  
19.           <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 "/>  
20.         </ai:SaveOptions>  
21.         <ai:DocData base="未标题-1.assets/images" rulerCanvasDiffH="298.5" rulerCanvasDiffV="421.5">  
22.           <ai:DocRasterSettings>  
23.             <ai:Dict data="R padd 36 B alis 0 B mask 0 B spot 1 I dpi. 300 I colr 5 "/>  
24.           </ai:DocRasterSettings>  
25.         </ai:DocData>  
26.         <ai:AutoGenImageList>  
27.           <ai:Dict/>  
28.         </ai:AutoGenImageList>  
29.       </ai:PrivateElement>  
30.       <ai:PrivateElement flm:hashcode="FA60BD83A2C0660BFDBE32B626C06239" d:ref="#2">  
31.         <ai:LayerOptions color="5 79.31 257 128.502"/>  
32.       </ai:PrivateElement>  
33.     </Private>  
34.   </Graphic>

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

[xhtml] view plain copy
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">  
2.         <fill>  
3.           <SolidColor color="#E41C16"/>  
4.         </fill>  
5.         <stroke>  
6.           <SolidColorStroke weight="1" caps="none" joints="miter" miterLimit="10" color="#9AC832"/>  
7.         </stroke>  
8.       </Path>

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

[xhtml] view plain copy
1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:Skin xmlns:fx="//ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> 
3.       
4.     <fx:Metadata>  
5.         [HostComponent("spark.components.Button")]  
6.     </fx:Metadata>   
7.     <s:states>  
8.         <s:State name="disabled" />  
9.         <s:State name="down" />  
10.         <s:State name="over" />  
11.         <s:State name="up" />  
12.     </s:states>  
13.       
14.     <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">  
15.         <s:fill>  
16.             <s:SolidColor color="#E41C16" color.over="red"/>  
17.         </s:fill>  
18.         <s:stroke>  
19.             <s:SolidColorStroke weight="1" caps="none" joints="miter" miterLimit="10" color="#9AC832"/>  
20.         </s:stroke>  
21.     </s:Path>  
22.       
23. </s:Skin>

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

[xhtml] view plain copy
1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:Application xmlns:fx="//ns.adobe.com/mxml/2009"   
3.                xmlns:s="library://ns.adobe.com/flex/spark"   
4.                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="1024" minHeight="768"  
5.                xmlns:local="*" xmlns:Components="Components.*">  
6.     <s:layout>  
7.         <s:BasicLayout/>  
8.     </s:layout>  
9.     <fx:Declarations>  
10.         <!-- 将非可视元素（例如服务、值对象）放在此处 -->  
11.     </fx:Declarations>  
12.       
13.     <s:Button id="login"  x="105" y="152" skinClass="Skins.LoginButtonSkin"/>   
14. </s:Application>

8、预览效果：

正常状态

悬停状态

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

本文由职坐标整理并发布，了解更多内容，请关注职坐标常用软件Illustrator频道！