Flex4设计button的外观.docVIP

flex4从组件的角度走【第一节，与Button相遇，蹦出火花】 Button:在RIA中应用怎么能少了我呢，我要排在第一个讲，没了我他们想交互没门。。。你听到了没有楼下的 ken:我无话可说。。。华丽的飘过 ————————————————————————————————————————————— 在序里我好像说过，要从外观开始讲起，一个好看的外观会给组件穿上华丽的衣服，让我们心情也变的很激动中。所以今天讲 怎么设置Button的外观样式。 居然都讲到FLEX4，我相信大家肯定会建立项目了把 所以我就不再讲建立项目的过程我跳，跳，跳过他 首先我们先建立一个外观的文件详细见下图 建立外观文件 ?建立好后，华丽丽的好多代码 !– 打开看到那些代码头就大了，感觉官方写类的外观不能写的让看起来不那么可怕吗 会吓坏初学者 还好我闭着眼把那些可怕的东东删除了? 只留下了头部和状态，看起来果然好多下来开始自定义外观，come on– fx:Metadata??![CDATA[??/**??* @copy spark.skins.spark.ApplicationSkin#hostComponent??*/??//这里这个就是指定修改的组件??[HostComponent(ponents.Button)]??]]?/fx:Metadata???!– states 关于样式我们下节在讲–?s:states??s:State name=”up” /??s:State name=”over” /??s:State name=”down” /??s:State name=”disabled” /?/s:states???!– 开始绘制按钮的形状样式等??Rect 类是绘制矩形的填充图形元素。矩形的角可以是圆角。radiusX,Y是定义圆角的半径的值,熟悉CSS的人肯定知道下面4个属性意思吧 就是把上下左右设置为0–??s:Rect radiusX=”4″ radiusY=”4″ top=”0″ left=”0″ bottom=”0″ right=”0″????!–fill类是定义填充的属性的对象，也可以说他是个类型说明吧当你绘制好一个矩形，还是圆形，都得定义这个类，因为他是填充的类。????他包括了用颜色填充，还是用图片来填充。如果未定义，则会绘制对象而不使用填充。–????s:fill??????!–solidcolor定义我们绘制的矩形图形背景颜色，这个类包括颜色值和 alpha 值。–??????s:SolidColor color=”0x77CC22″/?????/s:fill????!–stroke类是定义笔触的样式，熟悉CSS的同学把这个叫做边框–????s:stroke??????!–SolidColorStroke 类定义线条的属性 weight是定义线条的粗细程度–??????s:SolidColorStroke color=”#000000″ weight=”2″/?????/s:stroke???/s:Rect???!–下来该设置按钮上的字体了 常用的属性我就不介绍了 对于CSS不熟悉的人我还是介绍下，这些属性大部分给HTML CSS类似?textAlign=”center”===文本居中对齐?verticalAlign=”middle”=====文本垂直居中?horizontalCenter=”0″=====组件内容水平居中?verticalCenter=”0″======组件内容垂直居中?在这里设置成0就是居中? 要是改成1的话就是中间的位置挪动了1像素??? =========================================================??–??s:Label? text=”我是按钮” color=”#ffffff” textAlign=”center” verticalAlign=”middle”??? horizontalCenter=”0″ verticalCenter=”0″ /?/s:SparkSkin 外观代码部分搞定进行下一步 建立一个MXML文件从舞台上拖动一个Button组件放到舞台上 然后再代码上修改这句并添加skinclass样式类 s:Button x=”478″ y=”242″ width=”107″ label=”硕士生硕士生硕硕士生硕士生硕.” buttonMode=”true” skinClass=”skin.buttonskin”/ 这里的buttonMode是指当你鼠标移动到这个按钮时鼠标箭头变成手的形状 该完后打下看下效果