Experimental Custom Skinning of Flex UI Controls
Dolores Joya, a fantastic Graphic/UI/Brand Designer, took some time to explore skinning some of the Flex UI Controls which resulted in some really cool results. We’re planning on working on some Flex apps together soon and to prepare for that work Dolores made the leap into the world of Flex skinning. This example is a proof of concept for now. While some of the controls are not functional we really wanted to push Flex to the limits and see just what is possible in terms of sknning/UI customization. (This is not meant to be a functional application, just a means to demonstrate some skinning techniques for Flex Builder 3.)
Dolores had not worked with Flex however skinning in Flex relies on CSS and Flash, which she knows well. She designed the skins in Flash and then used CSS to map the skins to the UI controls. The result is a very unique interface created with Flex Builder 3.
The source will be released soon but for now we wanted to share the visual side of things with the community and perhaps get some creative thoughts flowing for developers and designers working together on Flex projects.
Dolores is a freelance Graphic/UI/Brand designer located in San Diego. She also has a very strong interest in 3D animation.
This is a great example of just how far you can take graphical skinning in Flex. One small addition might be adding some “blingin” fonts and possibly embedding fonts to get the text to show up in the items that are rotated (the login text input fields and the button).
Nice!
Hi Juan,
Thank you very much for stopping by and taking a look. Thank you very, very much for the great, positive, constructive comments. It mean a lot!!
Thanks again!
Sean
[...] Check it here.Brgds, [...]
Awesome work! I like the background element on the TextInput, but here’s what I’m wondering, could you skin the TextInput the same way you can a Button? up-skin, over-skin etc. so you would have all your states as images, AND apply scale9 as well????