Flex Skin使用方法

说明：

1·本方法使用Flex3 SDK , FlashCs3版本。

2·本方法使用FlexBuilder3

 

准备工作:

 

１· 如果Flash使用的为绿色版Cs3需要下载对应版本的Extension Manager

２· 下载 Flex Skin Design Extensions & Flex Component Kit for Flash

 

实现方法:

 

1 · 在FlashCs3中选择新建 FlexSkin->ButtonSkin

    
 

2 · 按需求更改Button按钮四帧的形状(注:Button按钮四帧大小需均为第一帧形状大小，

    若大小不统一Flex也会默认为第一帧大小。见 补充说明 )

3 · 选择 Command –> Convert Symbol to Flex Component 将元件转化为FlexSkin 组件

    
 

4 · 发布资源，将生成的swc文件放入FlexBuilder的工程目录下，选择 Import –> ArtWork

   
 

5 · 选择对应的swc File 以及对应的Skin Css文件和需要应用的.mxml文件(见补充说明)

6 · 选择需要导入的皮肤

 

补充说明：

 

1 · 如果需要按钮每帧大小形状不同如何处理？

    有些时候是需要按钮在Over的时候大小会比On时候放大一些，而在Down的时候又比On时候缩小一些。目前我发现可行的方式有两种

    1）在美术设计上将On图形边框留有透明色，及所有按钮大小以图形外框最大的帧设计

    2）使用 setActualSize(widht,height) 分别对 up,over,down 三帧指定按钮大小。不过使用这种方法话Skin需要使用 ProgrammaticSkin

       （我只停留在实验阶段，暂未能将完成复杂的Skin特效。如有相关经验请告知一二 谢谢）。

 

 

2009.08.26 补充资料：

 

Flex4Help 文档P1365

 

Flex does not support controlling all aspects of component layout with CSS. Properties such as x, y, width, and height are properties, not styles, of the UIComponent class, and therefore cannot be set in CSS. Other properties, such as left, right, top, and bottom, are style properties and are used to manipulate a component’s location in a container.

 

所以说使用定义Css的方式来完成按钮大小有变化 应该是不可能的了。T_T

 

2 · 如何在同一个Application中使用不同的Skin？

     在游戏中很多情况都不能保证同一个Application中仅使用一种Skin皮肤。如果需要使用多种皮肤在同一个Application中，可以通过对不同皮肤进行不同的命名的方式来达到效果。

        在OrangeButton.css中建立不同名称的ButtonSkin

.buttonGreen
{
  skin: Embed(skinClass="Button_green");
}

.buttonRed
{
  skin: Embed(skinClass="Button_red");
} 

在Application中 使用不同的styleName

 

 

 

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  <mx:Style source="OrangeButton.css"/>
  <mx:Button x="125.5" y="307" label="Button" width="75" height="31" styleName="buttonGreen" click="greenButtonOnClick(event)"/>
  <mx:Button x="226.5" y="307" label="Button" width="75" height="31" styleName="buttonRed"/>
  <mx:Button x="179.5" y="220" styleName="buttonSpecial"/>
  <mx:Button x="179" y="366" label="Button" styleName="buttonTest"/>
  <mx:Button x="60" y="199" label="Button" styleName="buttonTestOrg"/>
</mx:Application>

 进一步学习资料：

 

１·Adobe官方视频教程