`

Flex skin 制作相关

阅读更多
http://flex2.group.iteye.com/group/blog/840255

Flex4中BorderContainer有一个cornerRadius属性,通过设置该属性,即可实现圆角边框效果,但设置这个属性后,4个角都会变圆,有的时候可能会有这么一种需求:我只需要设置某一两个角变圆,或者几个圆角的弧度都不一样,这个时候,cornerRadius属性的设置显然就不能满足需求。

ps:在Flex4之前可以设置borderSides属性达到类似效果,如:borderSides="top left right"
在Flex4中borderSides属性貌似已经没有了(其实flex3中很多的属性,在flex4中都没有了,已经换了其他实现方式)

那么,在flex4中要如何做才能达到上面说的效果呢?

看代码:
首先,写一个skin:
<?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"
		alpha.disabled="0.5">
	
	<!-- host component -->
	<fx:Metadata>
		[HostComponent("spark.components.SkinnableContainer")]
	</fx:Metadata>
	
	<!-- states -->
	<s:states>
		<s:State name="disabled" />
		<s:State name="normal" />
	</s:states>
	
	<!-- SkinParts
	name=contentGroup, type=spark.components.Group, required=false
	-->
	
	<s:Rect left="0" top="0" right="0" width="100%" height="100%" 
			topLeftRadiusX="25">
		<s:stroke>
			<s:SolidColorStroke color="#AEADB0" alpha="0.5" scaleMode="none"/>
		</s:stroke>
		<s:fill>
			<mx:LinearGradient>
				<mx:entries>
					<mx:GradientEntry color="0x333333" ratio="0.00" alpha="0.5"/>
					<mx:GradientEntry color="0xfefef3" ratio="0.33" alpha="0.5"/>
					<mx:GradientEntry color="0x333333" ratio="0.66" alpha="0.5"/>
				</mx:entries>
			</mx:LinearGradient>
		</s:fill>
	</s:Rect>
	
	<s:Group id="contentGroup" left="1" right="1" top="1" bottom="1"/>
</s:Skin>

使用这个skin:
<s:SkinnableContainer width="20%" height="50" top="2" horizontalCenter="0"
				      skinClass="com.flyhigh.skin.BorderContainerSkin">
		
	</s:SkinnableContainer>


分享到:
评论

相关推荐

    flex skin 皮肤资源

    在Flex中,皮肤通常以ActionScript类的形式存在,这些类扩展了Flex框架提供的BaseSkin或Skin类,并覆盖了特定组件的绘制方法,如drawBackground()和drawBorder()。开发者可以通过修改这些类来调整皮肤的细节,比如...

    FLEX4 皮肤制作教程

    ### FLEX4 皮肤制作教程知识点详解 #### 一、SparkSkin介绍 1. **基本概念**: - SparkSkin是Adobe Flex 4 (Gumbo)框架中的一个关键类,用于自定义用户界面(UI)组件的外观。它提供了一种机制,允许开发者通过...

    FLEX4的皮肤制作教程

    ### FLEX4的皮肤制作教程 #### 一、SparkSkin介绍 在Adobe Flex 4 (代号Gumbo)中,为了提高用户界面(UI)的美观度和灵活性,引入了一个非常强大的概念——皮肤(Skin)。皮肤是用于定义控件外观的一系列元素组合,...

    Flex4 Spark皮肤

    ### Flex4 Spark皮肤详细制作讲解 #### 一、引言 在Flex4中,Adobe引入了新的皮肤系统,称为Spark Skin系统,旨在提供更高效、更灵活的UI设计能力。本篇文章将详细介绍如何利用Flex4中的Spark Skin进行控件样式的...

    flex4.0快速入门

    通过《flashbuilder4Q_airiabook.pdf》这份文档,读者可以深入学习Flex 4.0的各个方面,包括基本概念、组件使用、数据绑定、动画制作、服务调用等,逐步成为一名熟练的Flex开发者。在学习过程中,结合实际项目实践,...

    Flex中基于Fireworks的Skin样式插件

    安装此插件,可将由Fireworks制作的样式添加到Flex项目中,

    Flex 作出的按钮

    在描述中提到的“word里有显示的样子”,可能是指在Word文档中展示了使用Flex制作的按钮的视觉效果或设计示例。 创建Flex按钮的基本步骤如下: 1. **导入Button类**:首先,在代码中引入`mx.controls.Button`类。 ...

    flex4.5httpservice实现搜狐焦点图新闻和特效按钮皮肤制作

    4. 设计并创建自定义按钮皮肤,可以使用 Flex SDK 提供的 ButtonSkin 类作为基础,通过调整图形元素、颜色和动画来实现所需效果。 5. 在 Flex 应用程序中实例化该按钮,并将其与其他组件(如焦点图新闻)交互,例如...

    Flex Itunes7 皮肤

    Flex皮肤,顾名思义,就是用Flex技术制作的用户界面皮肤,可以改变应用程序的外观和交互体验。 Flex iTunes7皮肤,正如其名,是专为iTunes7设计的一款皮肤,它利用Flex的强大功能,为iTunes带来了全新的视觉效果和...

    flex皮肤

    这些类会继承自Flex的Skin基类,并包含组件所需的显示列表元素。 c) **导出阶段**:将Flash项目导出为SWF或SWC文件,以便在Flex项目中引用。 d) **集成阶段**:在Flex项目中引入导出的皮肤资源,将皮肤类与组件...

    Flex高级组件详细介绍

    - **高级皮肤专题**:深入探讨如何使用Flex Skin框架为组件创建自定义外观。 - **自定义数据验证组件**:构建具有复杂数据验证逻辑的组件。 - **布局、导航、状态组件的实践**:详细介绍这些高级组件的使用场景和...

    Flex Skins For Flash 官方插件

    安装此文件后,Flash IDE将获得对Flex Skins的支持,用户可以在其界面上找到相关的工具和选项,开始制作自己的FLEX组件皮肤。 为了充分利用Flex Skins For Flash,开发者应了解FLEX组件的皮肤结构,包括外观层...

    Flex 4.1 语言参考

    Adobe Flex 4.1 是一个强大的开发框架,用于构建富互联网应用程序(RIA),...开发者可以通过查阅此文档,深入了解Flex 4.1的编程模式、组件使用、数据绑定、事件处理、动画制作以及如何优化应用程序性能等关键知识点。

    Flex皮肤(手绘风格)

    "手绘风格"的Flex皮肤,正如标题所言,是指设计者采用类似手工绘画的艺术手法来制作的UI皮肤,这种风格通常具有独特的艺术感,线条柔和,色彩丰富,能够为用户带来与众不同的视觉享受。 在Flex中,皮肤是一个可替换...

    01 FLEX从浅入深简单教程.docx

    #### 四、Flex桌面应用简易图形制作 Flex不仅可用于Web开发,还可以用于创建桌面应用程序。利用Adobe AIR(Adobe Integrated Runtime),开发者可以将Flex应用程序打包为桌面应用。 - **简易图形制作:** 通过MXML...

    Flex_4_Fun

    1. **模糊滤镜**:用于模拟图像模糊的效果,常用于制作背景模糊的场景。 2. **颜色调整滤镜**:包括亮度、对比度、饱和度等多种颜色调整选项,可用于美化图片或改变图片的整体色调。 3. **阴影滤镜**:添加投影效果...

    flex4.5学习笔记

    - **判断组件是否有skin**: 检查组件是否已经应用了皮肤。 - **FXG(FlashXMLGraphic)**: 一种用于描述矢量图形的格式。 - **向皮肤里传值**: 通过参数传递动态值。 - **Button皮肤示例**: 展示按钮的不同状态(正常...

    flex渐变色制作圆角橙色按钮示例代码

    接下来,让我们深入分析这段关于flex渐变色制作圆角橙色按钮的示例代码。 首先,这段代码展示了如何使用Spark Button Skin来创建一个圆角按钮,并应用了渐变色效果。在Flex中,Spark是新一代的框架组件,提供了更...

Global site tag (gtag.js) - Google Analytics