domingo 16 de diciembre de 2007

Crear Botones con el componente Image



Un ejemplo para todos aquellos que se inician en Flex.

Muchas veces nos vemos en la necesidad de utilizar imágenes para crear botones que tengan un efecto o cambio de imagen cuando se haga rollOver sobre el mismo. Intentaré explicar como hacerlo en Flex. Aparentemente parece muy sencillo, pero hay que tener en cuenta una serie de cosas, como por ejemplo embeber las imágenes al inicio de la aplicación, y preparar el componente Image para que actue como tal, modificando una serie de propiedades e interactuando sobre algunos métodos del componente.

Supongamos un botón con una imagen inicial y su imagen FX:

Pues bien, el código que tendremos que poner seria el siguiente:
[Embed(source="b_aceptar.jpg")]
[Bindable]
public var ImgBoton:Class;

[Embed(source="b_aceptar_fx.jpg")]
[Bindable]
public var ImgBoton_FX:Class;


Las propiedades que tendremos que ajustar en el componente Image, son las siguientes:



id="botonAceptar"
buttonMode="true"
useHandCursor="true"

Los eventos serian:
initialize="botonAceptar.source=ImgBoton"
mouseOver="botonAceptar.source=ImgBoton_FX"
mouseOut="botonAceptar.source=ImgBoton"