这个问题一直有很多人问,我们能不能够去更换Flex中默认组件的外观,答案是可以的。我们可以使用CSS和FLASH软件来制作并更换程序中的组 件外观。这里我们就制作一篇简单易懂的教程来向大家讲解如何制作并替换Flex原有组件的外观样式。
网上也有类似的教程,我这篇不一定写的比其他的教程好,但是我们的教程绝对属于原创,并结合了作者的心得体会,力求独一无二。如果大家要转载本篇文章,请 注明文章来源。
好了,废话不多说,我们直接进入正题。首先我们要知道在FLEX中是什么控制组件的样式。答案是CSS。这个CSS和我们网页中的CSS不太一样。它可是 为FLEX专门设计的一种语言规范,所以写起来也不太一样。知道了是什么控制组件的格式之后我们就要来了解一下CSS是怎样工作的。实际上在FLEX编译 的时候会调用一个外部SWF文件的库文件。也就是说,我们的新组件外观都存放在这个外部的SWF文件的库中。这样当编译器编译时就会将资源调用,从而打到 改变皮肤的目的。
说到SWF文件,并且需要美工设计时,选择FLASH这个软件是最合适不过了。好了,我们打开FLASH软件,现在我们来制作皮肤外观。
新建一个元件,将它的属性设置为影片剪辑,具体设置请看下图:
然后我们再去绘制这个按钮外观,我们绘制一个简单的外观:
请注意,大家要调好九宫格的位置,因为位置一旦设定,在FLEX中就不能进行更改了。好了我们在FLASH中绘制的工作就完成了,接下来我们将这个FLA 文件保存,并发布。当然你保存到哪里都可以,发布的SWF文件要和CSS处于统一文件夹下。这里我们来看一下我的FLA文件存储路径。
大家看,我将FLA文件也存储到了style文件夹下,这样便于文件的寻找。生成的SWF文件和CSS文件在一起,大家应该看到了。到现在大家的文件中应 该没有CSS文件,所以我们要创建一个CSS格式文件。如何新建CSS文件呢?我们可以在style文件夹单击右键,创建一个CSS文件。
新建CSS文件后,我们就要对CSS文件进行编辑。CSS文件名称要定义成style.css。然后我们新建一个BUTTON外观。
点击一下这个蓝色的按钮,弹出一个对话框:
这样设置以后,我们就可以看到一个CSS文件,如图:
这8个按钮外观就是按钮的8中状态的默认皮肤,我们可以对每一种皮肤进行替换,在这篇教程中,我们仅以鼠标抬起和鼠标按下状态进行演示,其他的大家可以自 行实验。我们切换到代码设计面板,添加代码如下:
Button
{
color:#AAAAAA;
upSkin:Embed(source="skin.swf" ,symbol="up_pifu");
downSkin:Embed(source="skin.swf",symbol="down_pifu");
}
这段代码就是调用我们自定义的皮肤,我们看upSkin是指按钮弹起状态,Embed是调用外部资源。source="skin.swf" ,symbol="up_pifu"他的函数是指定我们要替换的资源。好了写完这段语句我们在回到视图设计面板来看一下效果。这里请大家注意,这段代码一 定要手动输入,如果您是直接复制我们的代码,将会导致编译错误。
我们可以看到,按钮的外观已经被更改了。那么如何将我们的CSS文件关联到主程序中呢?我们先来将这些文件保存,确保编译没有错误。然后回到MXML文件 中,在代码视图中添加代码如下:
<mx:Style source="style/style.css"/>
这样再保存文件,你的组件外观就被更改了,我们来看一下运行效果吧!
可以看到虽然按钮的大小改变了,但是按钮的外观也跟随伸缩,这是因为我们设置了九宫格。好了!以上就是皮肤的制作方法。如果您对自己制作的皮肤不满意,也 可以到一些网站上去下载现成的皮肤使用,这里我们推荐一个网站,这个网站的皮肤使用起来还有外观上都还不错!http://www.scalenine.com/
第二部分 ActionScript自定义按钮皮肤
转自http://toromio1987.spaces.live.com/Blog/cns!84F20CD1D80F1B38!348.entry?wa=wsignin1.0&sa=525654097
//首先在类里面定义css:
<code>
var skin:Class;
//然后就可以通过setStyle的方法来放皮肤了,想要什么,那就多定义一些css吧:)
private function changeSkin():void{
var button:Button = new Button();
button.graphics.clear();
button.setStyle("upSkin", skin);
button.setStyle("downSkin", skin);
button.setStyle("overSkin", skin);
this.addChild(button);
}
</code>
import mx . controls . LinkButton ;
[ Style ( name = "toggleBackgroundColor" , type = "uint" , format = "Color" , inherit = "yes" )]
public class CustomLinkButton2 extends LinkButton {
public function CustomLinkButton2 () {
super () ;
}
override public function set enabled ( value : Boolean ) : void {
super . enabled = value ;
useHandCursor = value ;
}
}
}
package skins { import mx .skins .halo .LinkButtonSkin ; import mx .styles .StyleManager ; public class CustomLinkButtonSkin1 extends LinkButtonSkin { public function CustomLinkButtonSkin1 () { super () ; } override protected function updateDisplayList ( w : Number , h : Number ) : void { super .updateDisplayList ( w , h ) ; // Inherited styles var cornerRadius : Number = getStyle ( "cornerRadius" ) ; var rollOverColor : uint = getStyle ( "rollOverColor" ) ; var selectionColor : uint = getStyle ( "selectionColor" ) ; // Custom styles var toggleBackgroundColor : uint = getStyle ( "toggleBackgroundColor" ) || getStyle ( "themeColor" ) ; graphics .clear () ; switch ( name ) { case "upSkin" : // Draw invisible shape so we have a hit area. drawRoundRect ( 0, /* x */ 0, /* y */ w , /* width */ h , /* height */ cornerRadius , /* cornerRadius */ 0, /* color */ 0.0 /* alpha */ ) ; break ; case "selectedUpSkin" : case "selectedOverSkin" : drawRoundRect ( 0, 0, w , h , cornerRadius , toggleBackgroundColor , 1.0) ; break ; case "overSkin" : drawRoundRect ( 0, 0, w , h , cornerRadius , rollOverColor , 1.0) ; break ; case "selectedDownSkin" : case "downSkin" : drawRoundRect ( 0, 0, w , h , cornerRadius , selectionColor , 1.0) ; break ; case "selectedDisabledSkin" : // Draw 20% alpha shape so we have a hit area. drawRoundRect ( 0, 0, w , h , cornerRadius , toggleBackgroundColor , 0.2) ; break ; case "disabledSkin" : // Draw invisible shape so we have a hit area. drawRoundRect ( 0, 0, w , h , cornerRadius , 0, 0.0) ; break ; } } } }
comps:CustomLinkButton1 id="
linkButtonMXML
"
label="
LinkButton (MXML)
"
toggle="
true
"
enabled="
{
checkBox
.selected
}
"
skin="
skins.CustomLinkButtonSkin1
"
rollOverColor="
red
"
selectionColor="
haloOrange
"
toggleBackgroundColor="
yellow
"
/>
第四部分 我只是把第二和第三部分合并到一起
在代码中修改skin方法 先是继承修改了 rollover所应该显示的效果 然后在actionscript中创建了一个效果类
使linkbutton的效果改变。
有些方法是需要类来“充值”的