Flex更换皮肤与LinkButton自定义按钮皮肤

最新推荐文章于 2021-06-25 20:36:28 发布

ismell

最新推荐文章于 2021-06-25 20:36:28 发布

阅读量2.3k

点赞数

文章标签： flex actionscript css button function styles

第一部分转自http://hi.baidu.com/%B0%B5%BA%DA%B2%E0%CE%C0/blog/item/c661182afccbee93023bf632.html

这个问题一直有很多人问，我们能不能够去更换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>

     [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的效果改变。

有些方法是需要类来“充值”的

ismell

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Flex更换皮肤与LinkButton自定义按钮皮肤

第一部分转自http://hi.baidu.com/%B0%B5%BA%DA%B2%E0%CE%C0/blog/item/c661182afccbee93023bf632.html 这个问题一直有很多人问，我们能不能够去更换Flex中默认组件的外观，答案是可以的。我
复制链接

扫一扫