- 浏览: 499703 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
Tang叁藏:
没图啊!!楼主
天地图-地图投影技术剖析与思考 -
liuxing8807:
不知道怎么用
google地图经纬度偏移修正算法完美解决方案 -
copyday:
step6是Foo, step7是Bar。(foo和bar 中 ...
osworkflow学习笔记-这一步步是咋连起来的呢 -
haowanlisx:
谢谢!太感谢,我还以为flex3不能实现用组件导出excel呢 ...
FileReference.save()方法找不到? -
shootboss:
问下,用infoWindowRenderer怎样才能监听到in ...
ags infoWindow 应用
原文:http://ctwen.iteye.com/blog/654848
1. Flex 4 默认为Spark主题,Spark组件的外观设计与之前相比也变得更简单高效。
Spark组件都不包含可视外观属性,所有这类信息都包含在外观文件SkinClass中。
SkinClass借助 FXG和状态语法完成组件的交互式设计,其使用MXML编写新的外观文件。
在组件中则通过skinClass属性来应用相关外观文件,
如: <s:Button label="myButton" skinClass="myButtonSkin"/>。
以下是本人写的一个简单的ButtonSkinClass:
<?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.7">
<s:states>
<s:State name="up"/>
<s:State name="over"/>
<s:State name="down"/>
<s:State name="disabled"/>
</s:states>
<s:filters>
<s:DropShadowFilter alpha="0.5" distance="1.2" quality="2" excludeFrom="down"/>
</s:filters>
<s:Rect id="myMain" radiusX="4" radiusY="4" top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="0x5bc1e9" color.over="0xcfc851" color.down="0xb19600"/>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="0x001fa4" weight="1"/>
</s:stroke>
</s:Rect>
<s:Rect id="myTop" radiusX="4" radiusY="4" top="1" right="1" left="1" height="50%">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xFFFFFF" alpha="0.7"/>
<s:GradientEntry color="0xFFFFFF" alpha="0.2"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<s:Label text="myButton" verticalCenter="2" horizontalCenter="0" textAlign="center" fontWeight="bold" color="0x131313" color.over="0x0150ad" color.down="0x0150ad"/>
</s:Skin>
效果如下图:
2. SkinClass借助 FXG和状态语法完成组件的交互式设计。
FXG也有类似提取公共方法的功能,其实现依靠Library标签。
比如设计中用到好多处外观相同的“竖线”,不过摆放的位置不同,当然不用每用到一处就写一遍相似度达99%的代码,使用FXG的Library标签就可以将其提取简化。
直接把“竖线”代码放在<fx:Library/>中,设好其id,下面用到处使用<fx:id x="..." y="..."/>进行调用便可。
以下是本人写的一个简单实例:
<?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">
<fx:Library>
<fx:Definition name="fg">
<s:Group alpha="0.5">
<s:Line x="1" xFrom="0.5" xTo="0.5" yTo="34">
<s:stroke>
<s:SolidColorStroke color="#ffffff" caps="none" weight="1" joints="miter" miterLimit="4"/>
</s:stroke>
</s:Line>
<s:Line xFrom="0.5" xTo="0.5" yTo="34">
<s:stroke>
<s:SolidColorStroke color="#000000" caps="none" weight="1" joints="miter" miterLimit="4"/>
</s:stroke>
</s:Line>
</s:Group>
</fx:Definition>
</fx:Library>
<s:states>
<s:State name="normal"/>
</s:states>
<s:filters>
<s:DropShadowFilter alpha="0.5" angle="90" distance="1.7" quality="2"/>
</s:filters>
<s:Path winding="nonZero" data="M0.5 35.5L0.5 4.5C0.5 2.29102 2.29102 0.5 4.5 0.5L730.5 0.5C732.709 0.5 734.5 2.29102 734.5 4.5L734.5 35.5" >
<s:fill>
<s:LinearGradient x="367.5" y="35.5" scaleX="35" rotation="-90">
<s:GradientEntry color="#00738c" ratio="0"/>
<s:GradientEntry color="#49b7d3" ratio="0.04"/>
<s:GradientEntry color="#366cad" ratio="0.96"/>
<s:GradientEntry color="#bfeffb" ratio="1"/>
</s:LinearGradient>
</s:fill>
<s:stroke>
<s:SolidColorStroke color="#001fa4" caps="none" weight="1" joints="miter" miterLimit="4"/>
</s:stroke>
</s:Path>
<fx:fg x="465" y="1"/>
<fx:fg x="600" y="1"/>
</s:Skin>
效果如下图:
3. SkinClass借助FXG和状态语法完成组件的交互式设计。
FXG对于复杂的图形会生成多而繁琐的代码,这时还不如使用一张透明的PNG图片代替来得“划算”。
当然SkinClass中也有插入图片的标签,就是<s:BitmapImage/>。其插入图片非常方便,也可随意缩放、旋转等。
以下是本人写的一个简单实例:
Rect矩形(圆角矩形),以下是基本的一些属性:
width <length>: 矩形的宽度。
height <length>: 矩形的高度。
radiusX <length>: 圆角矩形,圆角在X轴椭圆半径的弯道,此值四舍五入。
radiusY <length>: 圆角矩形,圆角在y轴椭圆半径的弯道,此值四舍五入。
rotation <Number>: 旋转角度,正数为顺时针,负数为逆时针。
scaleX <Number>: x轴缩放,1为100%。
scaleY <Number>: y轴缩放,1为100%。
visible <Boolean>: 可见性。
Ellipse椭圆(圆形),以下是基本的一些属性:
width <length>: 椭圆的宽度。
height <length>: 椭圆的高度。
rotation <Number>: 旋转角度,正数为顺时针,负数为逆时针。
scaleX <Number>: x轴缩放,1为100%。
scaleY <Number>: y轴缩放,1为100%。
visible <Boolean>: 可见性。
Line直线,以下是基本的一些属性:
xFrom <Number>: X轴起点,默认为0。
yFrom <Number>: y轴起点,默认为0。
xTo <Number>: X轴终点,默认为0。
yTo <Number>: y轴终点,默认为0。
rotation <Number>: 旋转角度,正数为顺时针,负数为逆时针。
scaleX <Number>: x轴缩放,1为100%。
scaleY <Number>: y轴缩放,1为100%。
alpha <Number>: 不透明度,1为100%。
visible <Boolean>: 可见性。
FXG的复杂图形使用Path来绘制。
以下是一个尖角向下的红色三角形的绘制(其主要通过节点坐标来绘制):
<Path data="M 0 0 L 100 0 L 50 100 Z">
<fill>
<SolidColor color="#FF0000"/>
</fill>
</Path>
P.S. data中M表示起始位置,Z表示返回到起始位置。
发表评论
-
ArcGIS API for Flex 调用天地图、e都会瓦片地图
2012-05-30 18:59 5308ArcGIS API for Flex 调 ... -
actionscript 绘制环形(中空)图形
2012-03-20 11:28 1908<?xml version="1.0&q ... -
绘制环形/中空图形
2012-03-20 11:21 0<?xml version="1.0" ... -
flex4 表格加载 xml文件数据
2012-02-19 17:27 0<fx:Declarations> < ... -
ags infoWindow 应用
2012-02-13 16:32 83181 首先如何设置 infowindow或infoWindowR ... -
flex builder 配置 文件 中文 乱码
2012-02-11 22:31 1374记事本打开另存,下面的有格式选项,选UTF-8,然后放到项目目 ... -
在Flex4中嵌入字体
2012-02-05 22:10 3185<fx:Style> @namespa ... -
flex4 绕中心 旋转和翻转
2012-01-27 14:30 9216特别参考文章:http://uh.9ria.com/space ... -
在Flash和Flex中用matrix.rotate方法实现显示对象绕点旋转
2012-01-26 21:57 2自转与公转 http://uh.9ria. ... -
Flex 3D旋转的各种实现
2012-01-22 23:55 2720大年夜,在整flex 3d旋转呵呵。 传说大年夜写程序,来年发 ... -
Flex皮肤制作笔记
2012-01-16 10:38 1584Titlewindow的创建流程 1、先创建皮肤 命名为:t ... -
Flex 4 设置背景图片
2012-01-16 10:31 3332Flex 3中Canvas是可以设置backgroundIma ... -
谈谈ActionScript垃圾回收
2011-12-09 14:57 1536转自:http://kevincao.com/2011/08/ ... -
actionscript flex 中三维坐标和屏幕(二维)坐标的转换
2011-12-03 17:44 4790flash.display.DisplayObject ... -
arcgis flex api2.4 学习笔记
2011-11-24 19:43 6635本文仅记录通过浏览官 ... -
快速创建精彩的Flash游戏 (二) Flash3D引擎简介
2011-11-19 10:34 1601原帖: http://www.fans8.com/?p=663 ... -
flex 滤镜样式在线预览
2011-11-10 11:26 2174好多效果没用过 -
Flex StringUtil 工具类 字符串函数
2011-10-29 18:35 4643转自:http://www.cnblogs.com/god_b ... -
Flex4 中skinclass使用Path绘制多边形
2011-10-19 22:29 1347skinClass中绘制多边形使用Path标签,把绘制路径放在 ... -
flex 双轴 多曲线
2011-09-08 11:03 1727用FLEX 4的时候 用secondVerticalAxis ...
相关推荐
- Flex4引入了Spark组件模型,相对于MX组件,Spark组件更加强调可定制性,允许开发者更自由地设计组件外观。 2. **创建自定义皮肤** - 使用Flex SDK中的Skin类或MXML来创建自定义皮肤。皮肤通常包含一组显式状态...
本篇文章将详细介绍如何利用Flex4中的Spark Skin进行控件样式的自定义。 #### 二、Spark Skin与Skin类的关系 在Flex4中,`spark.skins` 包含了一个核心类 `SparkSkin`。`SparkSkin` 是一个继承自 `Group` 类型的...
在Flex4中,开发者经常需要根据项目需求对标准UI组件进行自定义,以实现独特的界面效果和交互体验。本主题将深入探讨如何在Flex4的Spark主题下开发一个带有图标的自定义输入框皮肤组件,并实现圆角效果。首先,我们...
在Flex4中,我们可以通过ActionScript 3(AS3)来实现对ActionBar的自定义,以满足特定的UI设计需求。本篇将详细介绍如何在Flex4手机应用中定制ActionBar的外观。 首先,我们需要了解Flex4的基本概念。Flex4是Adobe...
在Flex 4中,皮肤(Skin)是一种强大的机制,用于改变和定制UI组件的外观和交互体验。本文将深入探讨FLEX4中的皮肤系统,特别是SparkSkin类,并通过实例展示如何创建和应用自定义皮肤。 1. SparkSkin的介绍: ...
`SparkSkin`是Flex4中用于创建Spark组件皮肤的主要类,位于`spark.skins`包下。它是一个`Group`类型的容器,意味着它可以包含多个子组件来构建复杂的皮肤结构。所有`mx.spark`包下的可视控件都使用`SparkSkin`的子类...
在Flex 4中,皮肤是界面组件外观的关键元素,可以自定义以满足特定设计需求。进度条是用户界面中常见的组件,用于表示任务的完成程度或加载状态。本文将深入探讨如何在Flex 4中创建和定制进度条的皮肤。 首先,我们...
在Flex 4中,开发人员有时需要根据项目需求创建具有特定设计和功能的自定义组件。Alert组件是标准UI库中的一个常见元素,通常用于显示警告、确认或信息消息。然而,Flex 4的默认Alert组件可能无法满足所有设计和交互...
在Flex开发中,DataGrid控件是一个非常常用的数据展示组件,它允许开发者以表格的形式展示大量结构化的数据。本文将深入探讨如何在Flex的DataGrid中插入子组件,以实现更丰富的用户界面和交互功能。 一、Flex ...
Flex允许自定义组件外观,通过修改皮肤和主题来满足设计需求。`TimerChooser`可能使用了特定的皮肤类,如`TimeChooserSkin`,并在MXML中通过`skinClass`属性指定。 5. **事件处理**: Flex组件之间的交互通常通过...
在Flex4中,皮肤(skin)是一种用于控制UI组件外观的设计模式,允许开发者和设计师定制组件的视觉表现,而不必触及组件的核心功能代码。这不仅提高了开发效率,还实现了设计与逻辑的分离,使得UI设计更加灵活且易于...
在Flex4中,用户界面组件的外观可以通过自定义皮肤来大幅度改变,这使得开发者能够创建具有独特视觉风格的应用程序。本主题将深入探讨如何修改Flex4滚动条的皮肤,以改变Scroller组件的外观。 滚动条在用户界面中起...
在Flex4中,开发者可以利用其强大的皮肤定制能力来改变应用程序的外观和感觉,从而提供更个性化的用户体验。本文将详细讲解如何为垂直滚动条VScrollBar进行换肤,以提升应用界面的美观度。 首先,我们需要理解Flex4...
在Flex4中,可以通过`Spark`组件模型来实现这一目标,利用`Skin`和`States`来定制组件的外观和行为。在`skinClass`中,你可以定义`CheckBox`如何与每个树节点关联,并且处理点击事件以记录用户的选择。 `...
在Flex4中,组件的外观(皮肤)与逻辑分离,这有助于提升代码的可维护性和可重用性。SkinClass是一种特殊的MXML文件,用于定义组件的视觉表现形式。 #### SkinClass 必须包含的要素 - **HostComponent元数据**:每...
在Flex中,皮肤是UI组件外观的可定制层,允许开发者改变组件的视觉呈现。对于按钮,我们可以通过创建自定义皮肤类来改变其默认的矩形形状,将其变为圆形。 1. **创建皮肤类**: 首先,我们需要创建一个新的MXML...
在Flex中,皮肤是可定制的外观组件,允许开发者根据项目需求改变控件的视觉表现。 1. **什么是Flex皮肤?** Flex皮肤是Flex组件的外观表示,它可以改变组件的颜色、形状、大小等视觉元素。通过更换皮肤,开发者...
4. 应用皮肤:在组件类中,通过设置`skinClass`属性,指定使用的皮肤类。 在压缩包“Flex皮肤”中,可能包含了各种预定义的Flex皮肤文件,如CSS样式表、SWF文件或者MXML文件。这些文件可以直接应用于Flex项目,快速...
4. **创建皮肤组件**:在Flex项目中,使用MXML或ActionScript编写皮肤类。导入导出的图形资源,并将其添加到相应的皮肤部件中。 5. **关联皮肤与组件**:在组件类中,通过设置`skinClass`属性来指定使用的皮肤类。...
Spark组件设计为轻量级,适合移动设备资源有限的环境,同时提供了丰富的视觉样式和布局管理。 4. **ActionScript 3.0**:Flex 4.5基于ActionScript 3.0编程语言,这是一种面向对象的脚本语言,具有强类型、高性能和...