How to Skin a Flex Video Player
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:
I wrote out a bit more of the steps in the previous posts to this post.
by Dolores Joya. doloresjoya.com
Dolores Joya » Blog Archive » Saving Images to be Embedded as Icons in Flex Buttons (April 9, 2008, 8:53 pm).
[...] View outline for this entire lesson. Skinning a Flex Video Player. [...]
Dolores Joya » Blog Archive » Saving Photoshop Images for Flex (April 9, 2008, 8:54 pm).
[...] View outline for this entire lesson. Skinning a Flex Video Player. [...]
Dolores Joya » Blog Archive » Turn Off the Scrollbars for a Flex Component (April 9, 2008, 8:54 pm).
[...] View outline for this entire lesson. Skinning a Flex Video Player. [...]
Dolores Joya » Blog Archive » Assigning a Style to a Flex Button (April 9, 2008, 8:55 pm).
[...] View outline for this entire lesson. Skinning a Flex Video Player. [...]
Dolores Joya » Blog Archive » How to Add or Copy Design Assets into your Flex Project (April 9, 2008, 8:56 pm).
[...] View outline for this entire lesson. Skinning a Flex Video Player. [...]
Dolores Joya » Blog Archive » How to Create a New UI Layout in Flex to Skin (April 9, 2008, 8:56 pm).
[...] View outline for this entire lesson. Skinning a Flex Video Player. [...]
Dolores Joya » Blog Archive » Making New Folders to Store Graphics and Video in Flex (April 9, 2008, 8:56 pm).
[...] View outline for this entire lesson. Skinning a Flex Video Player. [...]
Free Adobe - Macromedia Flash Web Site Design Tips, Flash Tutorials » How to Skin a Flex Video Player Tutorial from Dolores Joya (April 10, 2008, 12:27 am).
[...] may want to subscribe to my RSS feed. Thanks for visiting!Dolores Joya has posted great tutorials how to skin a Flex Video Player from scratch. She has created small video tutorials for creating Flex skins from Photoshop. Check [...]
Tutorial | How to Skin a Flex Video Player (Video Tutorials) « Flash Enabled Blog (April 11, 2008, 2:31 am).
[...] Dolores Joya has created small video tutorials for creating Flex skins from 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 cool, if anyone needs any help with creating the video player in Flex, there are a few caveats, and the tutorials on flexexamples.com will help with some.
If you’re having trouble with anything flex related, give me a shout @ robin+nospam@ibnor.co.uk
15+ Strongly Recommand Tutorials You Must Read for Creating Skins and Themes( UI Design ) in Flex - Ntt.cc (May 3, 2008, 5:41 am).
[...] How to Skin a Flex Video Player ( by Dolores Joya )This is a small video tutorials for creating Flex skins from photoshop.It shows all details from “Create a New Flex Project” to “Test Project Turn Off the Scrollbars for the Flex Component”(see details by click above link).I think this tutorial is very easily understand for EVERYONE. [...]
Dear
Thanks you very much. very interesting.
Some lesson video file haven’t some section.Example Bring in the FLV Video.Help me I need full.
This lesson’s mxml file sending for me. Please. My project not working bayanmunkh.b@gmail.com
very thanks
Flash tutorials | Flex Skin roundup | Lemlinh.com (September 7, 2008, 1:34 am).
[...] Read more [...]
设置FLEX的皮肤和主题的15篇强烈推荐的文章。 (转nttcc) | wsflex (December 29, 2009, 7:34 pm).
[...] How to Skin a Flex Video Player ( by Dolores Joya ) This is a small video tutorials for creating Flex skins from photoshop.It shows all details from “Create a New Flex Project” to “Test Project Turn Off the Scrollbars for the Flex Component”(see details by click above link).I think this tutorial is very easily understand for EVERYONE. [...]