flex换皮肤.docVIP

flex3更换皮肤 2010-09-18 14:16 Flex中的皮肤（一） ??? ????? 这里是第一篇，将讲述一下Flex中如何应用UI的皮肤，其实应用UI皮肤不难，你们在使用Flex的过程中是否觉得Flex中自带的皮肤样式不太好看？或者是想自已做个比较有特色的？下面就我们来说说皮肤吧，先来个简单的，你们在做网页时，做导航按钮什么的很多人都是用一个图片来作为一个按钮吧？之后做几个不同的颜色，之后就在CSS或者JS里设置一下当鼠标Over和Down和Out等等动作时，就切换不同颜色的图片，这样实现动态效果。在Flex里也可以如此简单的做皮肤。你可以先画好一个UI的皮肤，之就就将该图片应用到Flex里面。先来看看效果： 之后我们来看看代码： 1 ?xml version=1.0 encoding=utf-8?2 mx:Application xmlns:mx=/2006/mxml layout=absolute creationComplete=init() width=257 height=182 backgroundGradientColors=[#ffffff, #ffffff]3??? 4???? mx:Script5???????? ![CDATA[6??????????? 7???????????? //Embed标签是用于将一些外部资源加入到Flex中，随Flex的编译成SWF文件，8???????????? //这里是加入一张PNG图片，即是做好的Skin图片9???????????? [Embed(source=images/buttonskin.png,10??????????????????? scaleGridTop=26,11??????????????????? scaleGridBottom=64,12??????????????????? scaleGridLeft=30,13??????????????????? scaleGridRight=106)]14???????????? //上面的Embed标签下面要紧跟着这个Class，意思就是将上面的资源加入到Flex15???????????? //后变为这个Class的内容，即调用这个Class时，就是调用那些资源16???????????? private var MyBtnSkin:Class;17??????????? 18???????????? //在程序创建完成时会调用该函数，在函数里面设置Button的样式（Style）19???????????? //这里就是设置按钮的up,over,down三个鼠标状态时的皮肤，就是上面加入的图片资源20???????????? private function init():void{21???????????????? btn.setStyle(upSkin,MyBtnSkin);22???????????????? btn.setStyle(overSkin,MyBtnSkin);23???????????????? btn.setStyle(downSkin,MyBtnSkin);24???????????? }25???????? ]]26???? /mx:Script27???? mx:Button id=btn label=Hello World width=190 height=90/28 /mx:Application ????? 怎么样？很简单吧？大家需要注意一下的是在Embed标签里，我定义了一些scaleGridTop之类的属性，这是跟皮肤的缩放有关的，如果不定义那些属性的话，那么图片是多大的，就按多大来进行缩放，当你的按钮很大时，那些皮肤图片就会被拉大，出现马赛克与变形等，这都是不好看的。加入了9格缩放模式后，当你缩放按钮时，九个格中的四个角的区域不会被缩放，保持原样，中间格会宽高同时缩放，中间上下格会仅是宽度缩放，中间左右格只会高度缩放，这样，那个皮肤的边框无论你如何缩放，都是原来的大小比例，而不会将整个图片一起拉申。????? 现在的按钮太单调了，只有一个外观，现在大家可以再加多两个不同颜色或者其它图案的图片作为不同状态的皮肤就可以了，比如将overSkin改成红色边框的图片等。 ????? 其实大家有没有发现，上面代码的写法感觉比较麻烦的。我们可以用CSS来实现，我们可以直接点，将皮肤直接写在Button上，如下： 1 mx:Button label=Hello World2???????? upSkin=@Embed(images/buttonskin.png)3???????? o