Flex 2 RollOverButton Examples

Posted on July 11, 2006 | 2 comments

[lang_en]
You can make really simple image/button rollover’s in Flash. But in Flex, when you want to go beyond the default button roll-over skin implementation you have many different choices. I have compiled a few using ActionScript and a Custom class. There are many more ways of creating image rollover functionality. Even CSS can be used, but they all come back to manually setting the rollOver, rollOut, and mouseDown events.

To see the application run go to http://renaun.com/flex2/RollOverButtons/
To see the application’s source code go to http://renaun.com/flex2/RollOverButtons/srcview/
[/lang_en]
[lang_zh]
在Flash你可以制造简单图片/按纽滑动。但是在Flex, 超过缺省按纽滑动skin贯彻, 你有很多的选择。我有编辑一些用动作脚本语言(Action Script)和Custom Class。制造图片滑动使用的方法很多。连CSS也可以用, 但是都需要自己安排鼠标在按钮上滑动(rollOver),鼠标滑出按钮(rollOut)和鼠标按下时触发事件(MouseDown)。

想看应用按这儿
To see the application run go to http://renaun.com/flex2/RollOverButtons/
想看应用的代码按这儿
To see the application’s source code go to http://renaun.com/flex2/RollOverButtons/srcview/
[/lang_zh]

Share the post "Flex 2 RollOverButton Examples"

  • http://www.weblycan.com/blog/ Marcus

    Hi Renaun,

    Great to see a bunch of different ways of achieve the same result. Two of them I’d never even considered. Which leads me to a couple of questions.
    1) Which of the 3 do you recommend and why?
    2) When styling button skins, I’ve been creating a style (usually in an external css) and then setting the button’s ‘styleName’ property to that style. The style declaration has a bunch of skin definitions in it, like ‘upSkin: Embed(“/images/TRIANGLE_BTN_UPSKIN.png”);’. I’ve found this to be a really clean and flexible approach. I assume you avoided this method for a reason. Would you mind letting me in on what that reason is?

    Great blog.
    Cheers,

    Marcus.

  • http://www.renaun.com Renaun Erickson

    Setting the skins is the same as what the code is doing here. All the setStyle’s is the same as setting the skins in CSS.

    Also since then I have learned of the flash.display.SimpleButton, you could extend it and apply the down, up and over skins as images and have a very basic rollover image component.