Dolores Moore - Flex Skinning and RIA UI Design

3D is a passion of mine. I’ve been doing some experimenting exporting 3D rendered stills from Maya to Flash and then finally to Flex. I like the concept of creating GUI elements that are squashy, transformed or deformed in some way. I’m hoping to create an entire interface with 3D elements. Maybe blend these elements with video for a Game like experience? We’ll See…Here’s where I am so far.

3D Rendered GUI Flex Skinned Components

I finally had a chance to put together my recent RIA/UI Design and Brand projects of recent. Stayed tuned for my most exciting UI Design work to-date IORad. I current design UI’s in Flash, Photoshop or Illustrator and transfer the elements to Flex Builder 3 to do the layout, styles and skinning until Adobe releases Thermo…

Skinning a Flex Video Player with Photoshop

I have created a series of small snippet videos taking you through the basic process of creating this (left) Flex Skin using Photoshop. This training is meant to give insight into the process of using the Flex interface to implement a Design from Mock-Up into a Production like workflow. This is a very similar process to creating a Website and anyone who is familiar with that will be at ease with this. I am traditionally a Web Designer and I found that Flex is very friendly for making User Interfaces. Adobe is supposed to come out with an application specifically for Designers to Design UI’s in, but until then I am outlining how to work within Flex and Photoshop.

Please note that this lesson is meant to describe the Flex Skinning process only and does NOT cover programming the functionality behind building a working Flex Video Player.

Below is the outline for the project and links to the videos…sorry about the massive compression:(

1. Create a New Flex Project
2. Make New Folders to Store Design Assets
3. Save Images from Photoshop for Button Background
4. Save Images from Photoshop for Embedded Button Icons
5. Copy New Images and Video to Flex Project
6. Create a New Base UI Layout
7. Add Image to the Background and Header
8. Bring in the FLV Video
9. Set Up a New CSS Stylesheet in Flex and Link to It
10. Make a New Style for the Flex Button Component
11. Assign Your New Style to Flex Component
12. Add a Border to Your Design
13. Test Project Turn Off the Scrollbars for the Flex Component

Here is what the final Player should look like: Launch Video Player

Project Files

Download the asset files used in the Video Player Skin project. Please used them to learn not for sale:

• Images
• FLV Video
• Photoshop Design

I wrote out a bit more of the steps in the previous posts to this post.

by Dolores Joya. doloresjoya.com

Learn how to save images to be used as Button Icons for Flex buttons.

Play Video

View outline for this entire lesson. Skinning a Flex Video Player.

Making images to be used as Flex Skins for the Flex Button Component. Saving and formatting images.

Play Video

View outline for this entire lesson. Skinning a Flex Video Player.

Learn how to turn off the AutoScroll Policy of a Flex Component.

Play Video

View outline for this entire lesson. Skinning a Flex Video Player.

Learn how to add a Border and Border Color to a Flex Component.

Play Video

View outline for this entire lesson. Skinning a Flex Video Player.

Learn how to assign your custom style to your Flex button to be used as the background image for the Up and Over states. Also Embed an icon for each button.

Play Video

View outline for this entire lesson. Skinning a Flex Video Player.

Learn how to style a Flex Button Component with bitmap Images exported from Photoshop. Assign different images the the Up and Over states of the Flex Button Component.

Play Video

View outline for this entire lesson. Skinning a Flex Video Player.

Learn how to make a new blank Stylesheet in Flex and call it from your application so that your styles can be applied to Flex Components to customize them.

Play Video