`

Flex皮肤制作笔记

 
阅读更多
Titlewindow的创建流程
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 类配合使用可以定义渐变填充。
分享到:
评论

相关推荐

    flex 皮肤 大集合

    flex皮肤 大集合 很齐全 对flex开发人员很有帮助

    flex笔记 flex笔记 flex笔记

    根据提供的标题、描述以及部分代码内容,我们可以推断出这些信息与Flex技术有关。Flex是一种用于构建跨浏览器、跨平台的富互联网应用(RIA)的软件框架,它使用Adobe Flash Player或Adobe AIR来呈现界面,并支持多种...

    flex皮肤flex皮肤

    Flex皮肤是一种专为Adobe Flex应用程序设计的用户界面样式。Flex是一个开源框架,用于构建富互联网应用程序(RIA),它使用ActionScript编程语言和MXML标记语言。在Flex中,皮肤是可定制的外观组件,允许开发者根据...

    Flex 皮肤大全,各种样式的Flex控件皮肤大全

    标题和描述中的"Flex 皮肤大全"指的是收集了多种样式的Flex控件皮肤资源,包括模仿Windows Vista和Windows 7操作系统的风格,以及其它30多种独特设计。 1. **Flex控件样式**:Flex控件是构建用户界面的基本元素,如...

    flex皮肤主题36款

    flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤主题36款flex皮肤...

    flex 经典 皮肤主题

    在本文中,我们将深入探讨Flex的经典皮肤主题及其与CSS样式、皮肤的关系。 一、Flex概述 Flex是一种开源的开发框架,主要用于构建基于Flash Player或Adobe AIR运行时的应用程序。它提供了丰富的组件库,使开发者...

    FLEX4的皮肤skin

    在Flex 4中,皮肤(Skin)是一种强大的机制,用于改变和定制UI组件的外观和交互体验。本文将深入探讨FLEX4中的皮肤系统,特别是SparkSkin类,并通过实例展示如何创建和应用自定义皮肤。 1. SparkSkin的介绍: ...

    flex 学习详细笔记

    本笔记将深入探讨Flex的基本概念、架构、组件、布局管理器以及事件处理机制,帮助初学者全面理解并掌握Flex开发。 1. **Flex简介**:Flex是一种开放源代码的框架,主要用于创建交互式的、基于Web的用户界面。它允许...

    很炫经典的flex 皮肤主题

    在本压缩包中,我们看到的"很炫经典的flex 皮肤主题",这通常指的是开发者为Flex应用设计的一系列视觉样式,以提升用户体验和界面美观度。 在Flex应用中,皮肤(Skin)是一种可替换的外观组件,允许开发者根据需求...

    flex actionscript学习笔记

    Flex ActionScript 学习笔记是关于使用Adobe Flex技术并结合ActionScript 3.0进行开发的知识总结。ActionScript 3.0是随着Flash CS3一起推出的一种强大的编程语言,相较于之前的ActionScript版本,它有着显著的提升...

    经典收藏 Flex 皮肤

    Flex皮肤是一种广泛应用于富互联网应用(Rich Internet Applications, RIA)开发中的用户界面设计元素,尤其在Adobe Flex框架中占据重要地位。Flex是基于ActionScript和MXML的开源框架,用于构建可在多个浏览器和...

    Flex图表制作Flex图表制作

    Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表制作Flex图表...

    三个Flex的皮肤

    在本主题中,我们重点关注的是Flex中的“皮肤”这一概念,这关系到Flex应用的外观和用户界面的定制。 首先,让我们了解什么是Flex皮肤。在Flex中,皮肤是一种可以改变组件外观和行为的可替换资源。通过更换皮肤,...

    Flex万年历记事本_flex源码

    9. **样式和皮肤**:Flex支持样式和皮肤,开发者可以通过定义CSS样式来改变组件的外观,使应用符合特定的设计风格。 10. **响应式设计**:考虑到跨设备兼容性,开发者可能使用Flex的弹性布局(Flexbox)或响应式...

    flex 自定义 制作 流程图 (五种)

    flex 流程图 制作 flex 流程图 制作flex 流程图 制作flex 流程图 制作flex 流程图 制作flex 流程图 制作flex 流程图 制作flex 流程图 制作flex 流程图 制作flex 流程图 制作flex 流程图 制作flex 流程图 制作flex ...

    FLEX学习笔记

    《FLEX学习笔记》 FLEX,全称为Flex Builder,是由Adobe公司开发的一款基于MXML和ActionScript的开源框架,用于构建富互联网应用程序(RIA)。它允许开发者创建具有交互性、响应性和丰富用户体验的Web应用。FLEX的...

    Flex AS3笔记

    ### Flex AS3笔记知识点 #### 1. Flex与AS3概述 - **Flex**: 是一套开源框架和技术集合,用于构建跨浏览器、跨平台的应用程序。它由Adobe Systems开发,主要面向企业级应用开发,能够创建丰富的互联网应用程序(RIA)...

    flex4自定义组件皮肤

    - 组件皮肤是Flex中改变组件外观的一种方式,通过定义不同的皮肤,可以改变组件的颜色、形状、边框等视觉元素。 - Flex4引入了Spark组件模型,相对于MX组件,Spark组件更加强调可定制性,允许开发者更自由地设计...

    Flex help之Flex 皮肤

    压缩包中的"关于皮肤.pdf"文件可能是对Flex皮肤更深入的指南,包括更复杂的皮肤设计技巧、自定义皮肤的注意事项以及最佳实践。这份文档可能会涵盖如何处理皮肤状态(如鼠标悬停、按下等)、如何使用9-patch图像以...

Global site tag (gtag.js) - Google Analytics