FLEX中自定义button样式

    相册
    广场

    登录
    注册

关注此空间
起跑线

与你齐飞...
2010-08-09 13:20
FLEX中自定义button样式

首先我们要知道在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>
     [Embed("picture.gif")]
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>                第三部分 一个继承LinkButton的例子        Flex中如何扩展LinkButton控件并且添加自定义的样式的例子       http://www.elanso.com/ArticleModule/P0KASEPUSOGwT3MlS4MGJ2Ii.html     package comps {
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的效果改变。有些方法是需要类来“充值”的
#Flex
分享到：
举报 浏览(1141) 评论 转载
你可能也喜欢

    。。海老根俊雄的插画欣赏。。 。。海老根俊雄的插画欣赏。。
    大力蒋的小小有爱插画分享 大力蒋的小小有爱插画分享
    黑白速写·戈麦斯【涂鸦】 黑白速写·戈麦斯【涂鸦】
    祈福雅安 祈福雅安
    卷卷公主小散文插画 21 卷卷公主小散文插画 21
    藝心一意-爵士（JAZZ） 藝心一意-爵士（JAZZ）
    为flex chart 添加点击事件 为flex chart 添加点击事件

本文最近访客

    荷擎雨盖 荷擎雨盖
    4月18日
    Eamonning Eamonning
    4月16日
    laryun laryun
    4月10日
    雨中訫晴 雨中訫晴
    4月8日
    kuqoi kuqoi
    3月13日
    chen200415 chen200415
    3月12日
    情怀水岸 情怀水岸
    3月1日
    firebellqq firebellqq
    2月28日

评论
 发布
帮助中心 | 空间客服 | 投诉中心 | 空间协议
©2013 Baidu
百度空间，让世界发现你
向世界展示自己，发布喜爱的图片、文字和音乐
简单注册登录