Flex 2 RollOverButton Examples
July 11th, 2006 中文
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/
Entry Filed under: Adobe Flex, Rich Internet Applications
2 Comments Add your own
1. Marcus | 2006-12-13 at 10.11 pm
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.
2. Renaun Erickson | 2006-12-14 at 12.19 am
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.
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed