Home » Flex » Currently Reading:

Personalizar botones de aplicaciones Flex con Actionscript

diciembre 20, 2008 Flex No Comments
Personalizar botones de aplicaciones Flex con Actionscript

Este =http://www.cristalab.com/tipstip[/url] es una continuación a tip escrito por Mx en Cristalab sobre como personalizar botones (y componentes en general) de Flex.

En ese tip, se muestra como podemos utilizar gráficos de Photoshop para sustituir los gráficos estándar del componente. Ella mostró la forma de hacerlo desde los menús de Flex Builder y el resultado de ese proceso es la generación de un archivo CSS como, por ejemplo, este:

  1. Button {
  2.     upSkin: Embed("img/ico1.png");
  3.     overSkin: Embed("img/ico2.png");
  4.     downSkin: Embed("img/ico3.png");
  5.     disableSkin: Embed("img/ico4.png");
  6. }

Con esto cambiaremos el aspecto de TODOS los componentes botón de nuestra aplicación. Pero.. ¿que pasa si queremos cambiar el aspecto de un botón en concreto? por ejemplo para un botón de “Play” o de “Stop” en un reproductor de vídeo.

Para hacer eso, podemos asignar otro “estilo” a ese botón en concreto a través de actionscritp.

Para ello abriremos un tag y ahí incrustaremos los gráficos dentro de variables tipo Class, y asignaremos el nuevo estilo al botón a través de setStyle().

  1. <mx:Script>
  2.     <!&#91;CDATA[
  3.         &#91;Embed("img/ico2_1.png")]
  4.         private var ico1:Class;
  5.  
  6.         &#91;Embed("img/ico2_2.png")]
  7.         private var ico2:Class;
  8.  
  9.         &#91;Embed("img/ico2_3.png")]
  10.         private var ico3:Class;
  11.  
  12.         &#91;Embed("img/ico2_4.png")]
  13.         private var ico4:Class;
  14.        
  15.         private function ini():void
  16.         {
  17.             boton1.setStyle("upSkin", ico1);
  18.             boton1.setStyle("overSkin", ico2);
  19.             boton1.setStyle("downSkin", ico3);
  20.             boton1.setStyle("disableSkin", ico4);
  21.         }
  22.     &#93;]>
  23. </mx:Script>

De esta manera, todos los componentes botón tendrán el estilo definido desde el archivo CSS menos nuestro botón “boton1” que tendrá el estilo definido en el actionscript.

Compártelo:

Personalizar botones de aplicaciones Flex con Actionscript
Visto 10.257 veces

Comment on this Article:








Twitter: zguillez

AdvertisementAdvertisementAdvertisementAdvertisement

Recibe las novedades por email

Post destacado

Panel de zoom de imágenes en Flex

13 abr 2009

Este ejemplo es, igual que hice en el post anterior, un ejemplo que he adaptado a Flex desde un ejemplo que hice hace tiempo para Flash. Se trata de un panel donde se ve un zoom de una parte de una imagen. Este es el ejemplo montado en Flex: Y este es el código utilizado para la película principal: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"                 xmlns:ui="*"                 layout="absolute"                 creationComplete="ini()"                 width="505" …



Map

Ranking

Codigoactionscript.org: 4.65 sobre 5 (106 valoraciones)

twitter-widget.com