Skinning a Flex Video Player with Photoshop

Flex Video Player Skin ProjectI 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:

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

by Dolores Joya. doloresjoya.com