Flex皮肤制作流程

最新推荐文章于 2017-03-11 07:40:55 发布

转载最新推荐文章于 2017-03-11 07:40:55 发布 · 738 阅读

39 篇文章

订阅专栏

1、先创建皮肤命名为：titlewindowSkin1
2、再创建基于spark.components.SkinnableContainer组件的文件
例如：命名为testTitlewindow 引用titlewindowSkin1皮肤
写入代码：

 <fx:Script>
  <![CDATA[
   import core.view.componentSkin.titleWindow.TwN_0_0_1;
   
   import mx.events.FlexEvent;
   public var _title:String;
   
   public function set title(v:String):void
   {
    if(skin != null)
     TwN_0_0_1(this.skin).titleDisplay.text=v;
     //TwN_0_0_1为titlewiondw的名字
     //titleDisplay为titlewindow中lable的id
     
    
    _title = v;
   }
   
   protected function skinnablecontainer1_creationCompleteHandler(event:FlexEvent):void
   {
    TwN_0_0_1(this.skin).titleDisplay.text=_title;
    
   }
   
  ]]>
 </fx:Script>

3、再创建基于testTitlewindow组件类型的文件在此文件中写titlewindow中的内容在弹出窗体的时候也是弹出此文件

制作皮肤时控件id有些是一定要写的。比如titlewindow的关闭按钮的id 其id要与默认titlewindow皮肤中的关闭按钮id名相同
控件使用skinClass属性设置要用的皮肤

提高性能的方式：
尽量用最少的控件实现最多的效果。
利用状态改变图片路径来控制按钮的各种状态效果，要比用贴图的方式改变图片实现状态效果，消耗性能小

在自定义皮肤时自定义的文件上最好加上以下代码

 <fx:Metadata>
  <![CDATA[ 
  /** 
  * @copy spark.skins.spark.ApplicationSkin#hostComponent
  */
  [HostComponent("控件包")] //如：[HostComponent("spark.components.VScrollBar")]
  ]]>
 </fx:Metadata>

1、贴图：

 <s:Rect width="18" height="18">
  <s:fill>
   <s:BitmapFill source="@Embed(source='css/groupware/button/18_18ico12.png')" />
   <!--source="@Embed(source='css/groupware/button/18_18ico12.png')"图片路径加@Embed会讲图片下载至客户端，
   再次启用页面时程序自动去客户端查找图片-->
  </s:fill>
 </s:Rect>

贴图：Rect绘制一个可贴图的矩形区域（可设置巨型边角弧度） fill标签为设置为填充（如果不写fill标签则为绘制图像）
BitmapFill向矩形区域内贴图。
注：Rect必须要设置宽度和高度如果不设置宽高要设置距离上下左右边的距离

2、states 状态：
<s:states>
  <s:State name="up" />      按钮抬起时
  <s:State name="over" />      鼠标经过按钮时
  <s:State name="down" />      按钮被按下时
  <s:State name="disabled" /> 按钮不作用时
</s:states>
<s:Button label="button1" click.visibleFalse="{this.currentState = 'visibleTrue'}"
           click.visibleTrue="{this.currentState = 'visibleFalse'}" />
currentState属性用来改变状态

    注：按钮的状态必须有 up over down disabled
titleWindow必须有normal（不作用时）状态
    凡是在flex中有自己皮肤的控件都有自己的状态都是在自定义皮肤状态时要定义的，可以不用状态但是必须定义
    各种控件的状态可以到系统默认皮肤中查看。
    查看方法：拖拽一个控件。skinclass=“默认皮肤类” ，按住ctrl鼠标点默认皮肤类。

3、titlewindow 贴图方试：九宫格
1：左上角、右上角、左下角、右下角各一张图片设置距离上下左右的距离来定位
2：上中、左中、右中、下中、正中心各用一张可以拉伸的图片设置距离上下左右的距离
和拉伸方式来定位
3：titlewindow控件头部一个Group 中间一个Group。中间的Group用来存放、显示titlewindow中的内容。

4、filters 滤镜
<s:filters>
<s:GlowFilter alpha="1.0" blurX="2" blurY="2" color="#000000" inner="false" knockout="false" quality="1" strength="4"/>
</s:filters>
1、斜角滤镜（BevelFilter 类）可创建立体效果的文字或图像

2、模糊滤镜（BlurFilter 类）对文字或图片进行模糊处理

3、投影滤镜（DropShadowFilter 类）添加阴影效果

4、发光滤镜（GlowFilter 类）添加发光效果

5、渐变斜角滤镜（GradientBevelFilter 类可使用多种颜色渐变实现斜角效果

6、渐变发光滤镜（GradientGlowFilter 类）可使用多种颜色渐变实现发光效果

7、颜色矩阵滤镜（ColorMatrixFilter 类）可设置图片的亮度、对比度、饱和度、色相！

8、卷积滤镜（ConvolutionFilter 类）可实现图片的锐化、边缘、雕刻效果！

9、置换图滤镜（DisplacementMapFilter 类）可实现两张图片之间的切换效果！

10、着色器滤镜（ShaderFilter 类）可通过应用不同的pbj文件，实现多种效果！例如：聚焦模糊、铅笔画、反色、马赛克、调色效果等！

1、GlowFilter属性：
  olor：光晕颜色
  alpha：颜色的Alpha透明度值
  blurX：水平模糊量
  blurY：垂直模糊量
  strength：光晕的强度
  quality：应用滤镜的次数
  inner：指定发光是否为内侧发光
  knockout：是否具有挖空效果

5、文本框 textinput：
1、textinput 中文本输入框用RichEditableText
  RichEditableText属性：
  1、textAlign 设置文字对齐方式
  2、color 设置文字颜色
  3、verticalAlign 设置垂直对齐方式
  4、lineHeight 行高度
  5、mouseEnabled设置是否接受鼠标事件，默认为true
  6、mouseChildren确定对象的子项是否支持鼠标。如果对象支持鼠标，则用户可以使用鼠标与其交互。默认值为 true。
  7、visible设置对象是否显示可用作绑定数据源
2、贴图方式：左、中、右
3、textinput的状态
  <s:states>
          <s:State name="normal"/>
          <s:State name="disabled"/>
      </s:states>

6、垂直滚动条VScrollBar
由四个按钮组成。最上面的按钮、中间按钮、最下面的按钮、中的长竖条也作为一个按钮。首先要先做出这四个按钮的皮肤。

---focusEnabled属性设置成false以便外部组件成为可获得焦点的实体？？？？不懂

中间竖长条id=“track”
中间按钮 id=“thumb”
最上面按钮id=“decrementButton”
最下面按钮id=“incrementButton”

7、布局
Group的属性：
    <s:Group width="33.33%" height="100%">

   <s:layout >
    <s:HorizontalLayout horizontalAlign="left" verticalAlign="middle"/>
    </s:layout>
    </s:Group>
    horizontalAlign="center"：设置内容横向对齐方式
      verticalAlign="middle"：设置内容纵向对齐方式
            gap：设置goup各元素之间的间隔

8、设置渐变

 <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">
           <s:stroke>
             <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
             </s:LinearGradientStroke>
          </s:stroke>
        </s:Rect>

1、Rect:绘制矩形的填充图形元素。矩形的角可以是圆角。
radiusX="2"：设置所有角上的 x 轴的默认角半径
    topLeftRadiusX（巨型左上角x半径）
    topRightRadiusX（矩形右上角的 x 半径）
    bottomLeftRadiusX（矩形的左下角的 x 半径）
bottomRightRadiusX（矩形的右下角的 x 半径
    属性优先于此属性。
2、LinearGradientStroke:渐变标签 rotation设置渐变方向 weight渐变笔触粗细

GradientEntry：在 LinearGradientStroke标签内可以写多个GradientEntry 用来控制渐变填充过程中的过渡、
与LinearGradient 和 RadialGradient 类配合使用可以定义渐变填充。

转载地址：http://www.cnblogs.com/AS30/archive/2011/11/05/2236898.html