Another great Flex 3 Skinning experiment by Dolores Joya, 80s GUI “Flex Candy”. Dolores sent along some tips and information regarding the skinning process for Flex Builder 3. Great stuff!!

Check the finished experiment here.

Dolores Joya is a freelance Graphic/UI/Brand Designer located in San Diego CA. Get in touch with her here.

“Greetings Flex Community. I’m back for another round of interface art & design to inspire others doing Flex Skinning. My creative inspiration this time is “The Rad 80’s”. The triangular shapes, plastic, synthesizers, boombox’s, Breakin’ and over accessorizing. There’s so many things from the 80’s to work with. For this design I started with the Flex Skin for Flash template available at Adobe’s website: http://www.adobe.com/devnet/flex/articles/flex_skins.html.

Also, I read through the article there on How to Skin for Flex. I usually create some brief sketch concepts then do some initial mock-up work in Illustrator because the color swatch, pattern, and gradient libraries available there provide much more materials for me to get going. For this design I pulled the Boombox from stock photography and cut it apart to suit my UI requirements. I took materials from the image and re-purposed them for buttons and backgrounds. At this point I open up Flash and import my vectors and pngs into the appropriate symbol. For items that do not exist I create a new symbol, making sure “Export for Actionscript” is checked in the Symbol properties dialogue box. Once that is done I created a new class in my CSS with a similar name and call my symbol there. From here you tell your Flex control what style it should take on and your off and running. I usually go back and forth from Photoshop to Flash to Flex to test out my ideas and see how they come across. I haven’t gotten into animation and audio which are going to be my next steps. For me, this is strictly creativity for fun and inspiration so I follow the direction my ideas flow in and I’m happy to say Flex is making things much more easier for me to create.

Flash Design Tip:
Did you know that Illustrator Color and Gradient Swatch’s translate very smoothly into Flash? If you setup your AI file with your gradients, then Export SWF. Once you import them into Flash you can select them with the eyedropper tool and add them to your swatch palette. Here’s one I created and saved out as a Flash Color Set. This one is in Metallic’s. Try it, just “Add Colors” in your Flash Swatch palette and select the “gradients_metallics.clr” file.

Have fun.

–
dolores joya
graphic designer
www.doloresjoya.com”