Dolores Joya » Flex Skinning http://doloresjoya.com/blog Branded RIA UI Designer Blog Sun, 19 Jul 2009 23:38:07 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Flex + Flash + Maya for 3D UI button controls http://doloresjoya.com/blog/2008/07/19/flex-flash-maya-for-3d-ui-button-controls/ http://doloresjoya.com/blog/2008/07/19/flex-flash-maya-for-3d-ui-button-controls/#comments Sat, 19 Jul 2008 20:58:49 +0000 dolores http://doloresjoya.com/blog/?p=46 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

Rendered 3D Flex Skins


]]> http://doloresjoya.com/blog/2008/07/19/flex-flash-maya-for-3d-ui-button-controls/feed/ 2 Launched my new Brand/RIA Design Portfolio http://doloresjoya.com/blog/2008/05/20/launched-my-new-brandria-design-portfolio/ http://doloresjoya.com/blog/2008/05/20/launched-my-new-brandria-design-portfolio/#comments Wed, 21 May 2008 00:04:31 +0000 dolores http://doloresjoya.com/blog/2008/05/20/launched-my-new-brandria-design-portfolio/ 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…

RIA/Brand Design Portfolio Snapshot

]]> http://doloresjoya.com/blog/2008/05/20/launched-my-new-brandria-design-portfolio/feed/ 1 How to Skin a Flex Video Player http://doloresjoya.com/blog/2008/04/09/skinning-a-flex-video-player/ http://doloresjoya.com/blog/2008/04/09/skinning-a-flex-video-player/#comments Thu, 10 Apr 2008 03:46:15 +0000 dolores http://doloresjoya.com/blog/2008/04/09/skinning-a-flex-video-player/ 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

]]> http://doloresjoya.com/blog/2008/04/09/skinning-a-flex-video-player/feed/ 15 Saving Images to be Embedded as Icons in Flex Buttons http://doloresjoya.com/blog/2008/04/09/saving-images-to-be-embedded-as-icons-in-flex-buttons/ http://doloresjoya.com/blog/2008/04/09/saving-images-to-be-embedded-as-icons-in-flex-buttons/#comments Thu, 10 Apr 2008 03:11:41 +0000 dolores http://doloresjoya.com/blog/2008/04/09/saving-images-to-be-embedded-as-icons-in-flex-buttons/ 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.

]]> http://doloresjoya.com/blog/2008/04/09/saving-images-to-be-embedded-as-icons-in-flex-buttons/feed/ 0 Saving Photoshop Images for Flex http://doloresjoya.com/blog/2008/04/09/saving-photoshop-images-for-flex/ http://doloresjoya.com/blog/2008/04/09/saving-photoshop-images-for-flex/#comments Thu, 10 Apr 2008 03:08:47 +0000 dolores http://doloresjoya.com/blog/2008/04/09/saving-photoshop-images-for-flex/ 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.

]]> http://doloresjoya.com/blog/2008/04/09/saving-photoshop-images-for-flex/feed/ 0 Turn Off the Scrollbars for a Flex Component http://doloresjoya.com/blog/2008/04/09/turn-off-scrollbars-for-flex-component/ http://doloresjoya.com/blog/2008/04/09/turn-off-scrollbars-for-flex-component/#comments Thu, 10 Apr 2008 03:05:39 +0000 dolores http://doloresjoya.com/blog/2008/04/09/turn-off-scrollbars-for-flex-component/ 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.

]]> http://doloresjoya.com/blog/2008/04/09/turn-off-scrollbars-for-flex-component/feed/ 0 Styling the Border of a Flex Component http://doloresjoya.com/blog/2008/04/09/styling-the-border-of-a-flex-component/ http://doloresjoya.com/blog/2008/04/09/styling-the-border-of-a-flex-component/#comments Thu, 10 Apr 2008 03:03:23 +0000 dolores http://doloresjoya.com/blog/2008/04/09/styling-the-border-of-a-flex-component/ 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.

]]> http://doloresjoya.com/blog/2008/04/09/styling-the-border-of-a-flex-component/feed/ 0 Assigning a Style to a Flex Button http://doloresjoya.com/blog/2008/04/09/assigning-a-style-to-a-flex-button/ http://doloresjoya.com/blog/2008/04/09/assigning-a-style-to-a-flex-button/#comments Thu, 10 Apr 2008 02:57:51 +0000 dolores http://doloresjoya.com/blog/2008/04/09/assigning-a-style-to-a-flex-button/ 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.

]]> http://doloresjoya.com/blog/2008/04/09/assigning-a-style-to-a-flex-button/feed/ 1 How to Make a New Style in Flex CSS Design View http://doloresjoya.com/blog/2008/04/09/how-to-make-a-new-style-in-flex-css-design-view/ http://doloresjoya.com/blog/2008/04/09/how-to-make-a-new-style-in-flex-css-design-view/#comments Thu, 10 Apr 2008 02:50:56 +0000 dolores http://doloresjoya.com/blog/2008/04/09/how-to-make-a-new-style-in-flex-css-design-view/ 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.

]]> http://doloresjoya.com/blog/2008/04/09/how-to-make-a-new-style-in-flex-css-design-view/feed/ 0 How to Setup a new CSS Stylesheet in Flex http://doloresjoya.com/blog/2008/04/09/how-to-setup-a-new-css-stylesheet-in-flex/ http://doloresjoya.com/blog/2008/04/09/how-to-setup-a-new-css-stylesheet-in-flex/#comments Thu, 10 Apr 2008 02:41:46 +0000 dolores http://doloresjoya.com/blog/2008/04/09/how-to-setup-a-new-css-stylesheet-in-flex/ 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 

]]> http://doloresjoya.com/blog/2008/04/09/how-to-setup-a-new-css-stylesheet-in-flex/feed/ 0