Flex y diseñadores: Importar diseño desde Photoshop a Flex

Si bien a los componentes en Flex se les puede personalizar su apariencia desde el mismo programa, también puede pasar que justo nuestro diseño se salga demasiado de la línea gráfica que trae las opciones del programa. Para eso podemos generar nuestro propio diseño desde Photoshop, Flash, Fireworks, Illustrator o cualquier otro programa de diseño. En este caso veremos como importar los estados de un botón desde Photoshop a Flex.

Crear un proyecto en Flex

Comenzaremos creando nuestro proyecto en Flex. Primero creo mi carpeta hardSweetSkinning en donde se alojará mi proyecto.

Vamos a File > new > flex proyect y seguimos los pasos que se muestran en la imagen y luego damos finish y listo. Si vemos dentro de nuestra carpeta hardSweetSkinning veremos varios files OMG! solo entramos a la carpeta src y allí vemos el archivo hardSweetSkinning.mxml



Ya con nuestro file creado vemos que podemos trabajar en modo de diseño o de código.

Conociendo nuestro componente

Si queremos crear el diseño de un skin para algún componente, debemos saber cuántos estados presenta el mismo. ¿¿Cómo enterarnos??? Crearemos un archivo css. Vamos a File > new > css file y le damos un nombre cualquiera al archivo, en este caso como crearemos botones mi css se llamará botoncitos.css y estará dentro de la carpeta src.



Listo, ya tenemos nuestro CSS! Desde el modo de vista de diseño vamos al boton de New Style:



Y desde el cuadro de diálogo buscamos el componente button, teniendo seleccionada la opcion "specific component".



Y resulta que ya tenemos la info de todos los estados del componente button.

Creando nuestros botones desde Photoshop

Ya en Photoshop crearemos un botón de 200 * 65 px.



A ese mismo botón lo iremos duplicando la cantidad de veces correspondientes al número de estados que tendrá mi botón y los nombro de acuerdo al comportamiento que lleve cada uno:

Importando Nuestros botones a Flex

Ya de vuelta en Flex, vamos a File > import > skin artwork y nos saldra el siguiente cuadro de diálogo:



En "Import skins from" desde la opción de Folder of images, navegamos hasta indicar la carpeta en donde están alojados nuestros botones.

Luego establecemos que esos botones se copien en una subcarpeta llamada skinImages y que los estilos se creen en una hoja de estilos llamada skinImage.css y por último establecemos que esos estilos se apliquen al archivo .mxml en el cual estamos trabajando, en este caso seria el archivo hardSweetSkinning.mxml y damos next.

Tendremos una última pantalla en donde vemos los botones que creamos con sus estados.



Verificamos que estén todos seleccionados y asi terminamos con este paso.

Ahora vemos nuestro archivo .css con nuestros botones incrustados.



Si vamos a nuestro archivo hardSweetSkinning.mxml, vemos que automaticamente se agregó una línea de código indicando que se le aplicará el nuevo .css a ese proyecto:

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Style source="skinImages.css"/>      
</mx:Application>

Si insertamos un boton veremos que aparecerá con el skin que hemos creado, y de paso le damos un color verdecito al fondo en la 2da línea:

Código :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0x86DFBB">
    <mx:Style source="skinImages.css"/>
    <mx:Button x="100" y="100" label="Button"/>   
</mx:Application>

Nota: si cambiamos a la vista de diseño, desde el panel de componentes podemos también directamente arrastrar el componente button al escenario y listo, pero es bueno acostumbrarse a ver como se va armando el código.

y listo, ahora le damos al botón de run para ver como ha quedado nuestro skin:



y listo! ahora vemos un bonito botón luciendo sus lunares rosas



Para saber más sobre cómo comenzar con Flex te recomiendo el Tutorial de Flex Builder 2 de Zguishez.

Artículos Relacionados

• Cómo vectorizar imágenes de manera sencilla
• Efecto Ice-Man en Photoshop
• Retoque fotográfico: uso de Color Balance en Photoshop CS4

diseño photoshop flex

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario