Dolores Moore - Flex Skinning and RIA UI Design

This Video Training Snippet Shows you how to make a new folder in your project in Flex 3. This is necessary to store files like images, video, swfs. This process is similar to setting up a new website when you are about to take a web design into production.

Play Video

Steps Covered in Video

1. Right Mouse Button Click on your “src” folder in the Flex Navigator Panel in your project.
2. Go to New > Folder.
3. Type in title for your new folder in the “Folder Name” field.
4. Hit “Finish” Button.

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

This Video Training Snippet Shows you how to make a new project in Flex 3. This is the most basic way to make a new project with the default settings.

Play Video

Steps Covered in Video

1. Launch Flex 3.
2. Go to File > New Flex Project.
3. Type in title for your new project in the “Project Name” field.
4. Hit “Finish” Button.

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

For my Flex UI Design contribution to the Flex Community, I Designed this set of icons for developers to use in their Flex Applications. These are free to use in any way you wish. Hopefully these can help you spruce up your next Flex application. Download the source by right-clicking and selecting “view source”.

View and Download Free Flex Icons 

The icons are Embedded in the buttons and the background can be changed independently. I did not create .ico files but used .png’s. Have fun.

I’ve been playing around with Flex’s Effects lately and I thought I would post some of my experiments here. These are just my creative sketches. I like to play around with User Interfaces so I sat down to see what kind of animations I could create as a Designer.

Here I use Blur, Zoom, Resize, Fade, Move. I also put some Bounce.easeOut on the Zoom effect.

Bounce

play Flex Bounce Effect Animation

Zoom

Here I tried out the Flex Animation Effects combined with a Video Embedded in a Flash SWF. Looks pretty cool. I call it “Cloudscape. Could be a whole theme.

play Flex Zoom Video Animation

by Dolores Joya

Compositing images in Photoshop just got more exiting with the release of Photoshop CS3 Extended. “Extended” indicates a special version of Photoshop with added features such as 3D and Video layer support in Photoshop documents. In this tutorial, we are going to concentrate on the 3D layer feature now offered in Adobe’s CS3 product suite.

The use of Photoshop in the world of 3D is not new. CG Artists, 2D Digital Painters, and Texture Artists have used Photoshop as part of their workflow for several years. One application CG Artist’s employ to create a new digital illustration would be to render out their 3D model into a flat image with an alpha layer also contained in the file. They would then import that layer into Photoshop and begin compositing the image from there. If they needed the model at a different angle, they would have to render out another frame in their 3D program and re-import it into Photoshop. Now, with 3D layers the artist has the creative freedom to rotate, scale, and translate the model directly inside the Photoshop document. This ability allows the artist to mock up many different design options for their projects from a single 3D model file.

Photoshop CS3 Extended offers these 3D file import options:

• 3D Studio Max (.3DS)
• Alias|Wavefront (.OBJ)
• Google Earth 4 (.KMZ)
• U3D (.U3D)
• Collada (.DAE)

Today, we will be working with 3D Studio Max (.3DS) file format. This is a well known file format that has been around for years. There is a large 3D Studio Max community online and you can often find .3DS files for free or for purchase to suit your project requirements. For this project I will be looking for a 3D model of an airplane.

To start our project we will be using the 3D files from Turbosquid.com. Turbo Squid has a large repository of 3D files available. You only need to become a member to download FREE 3D files. Membership is free as well. At Turbo Squid I look in their products section under “Aircraft” to browse through all available Aircraft 3D models. For this project I am looking specifically for a 3D Studio Max file that contains a model with textures and is free (those are my requirements).

I find this well crafted WW2 Aircraft model (created by user Amalthea3D) file that I can work with and download the 3D Studio Max file format.

Although the drop down reads .MAX, this is a native 3D Studio file format, the zipped file contains all the textures and a .3DS model file.

Now that we have a file to work with. Let begin our Design work in Photoshop CS3 Extended.

1. Start Photoshop
2. Open a New Document. For this lesson I setup a 640×480 size canvas.
3. Save your Document. Save often, 3D files contain geometry which can sometimes crash Photoshop unexpectedly.
4. Under the Photoshop CS3 File Menu go to Layer > 3D Layers > New Layer from 3D File…
5. Locate the .3DS file in your directory and load it into the document. Once the file is loaded it will appear in a new Layer in the Layers Pallete.
6. Double click on the 3D cube icon on the 3D layer to open the 3D object menu.
7. Click on the “Rotate Object” icon in the 3D menu.
8. Begin Rotating the Airplane into a more interesting position on the canvas.
9. Use the “3D Pan Object” tool to move the object.
10. Click the “Apply Transformations” button to accept changes. The 3D Airplane contains landing gear in the down position. For our composition we need the Airplane to appear flying in the air. We can use Layer Effects and Layer Masks on 3D Layers in Photoshop to manipulate them as well!!
11. Click the “Layer Mask” icon on the Layer Palette and use the air brush tool to mask out unwanted objects.
12. To add more interest to our composition we can create a new view of the 3D Airplane by duplicating the 3D layer.
13. Double click the 3D Cube icon for the copy of the 3D layer to enter Edit 3D Object mode.
14. Rotate the 3D Airplane to be position in the side view.
15. Click the “Apply 3D Transformations” to accept changes. For this composition we want to combine a live action shot with a mechanical perspective.
16. For the action shot, we paint in smoke and fire on new separate layers to create the effect of the Airplane being shot out of the sky.

A couple more tweaks to the sky and layout and we’re on our way to an interesting composition in just a short time. Here is the final (rough) design.

But let’s not stop there. Since we’re in our creative flow why not come up with an alternate option?

1. Let’s duplicate our Photoshop document by clicking on the Image > Duplicate option of the file menu.
2. For this second composition I want to go with a more comic book illustration design. I find a comic book background on one my favorite image stock resources, istockphoto.com.
3. Import the new background into the document and begin to rearrange the objects.
4. Turn off the extra layers to clean up my canvas.
5. Double click the 3D layer to edit its position.
6. After repositioning my object the previous layer mask no longer works. So I create a new layer mask and airbrush out the landing gear again.
7. For this comp I think the strong bold backdrop needs to be balanced with a simpler foreground. So I turn off the textures for the 3D Airplane by click the “Texture Eye Icon” on the Layer Pallete.
8. To add more definition to the Airplane I add a “Stroke” Layer Effect outline to the 3D Airplane layer.
9. To complete the comp I add a comic style comment balloon and some text in the “Comic Sans” font face.
10. There’s one more thing I wanted to try. To bring in a little detail to the foreground I add one more tweak to the 3D layer.
11. In the 3D layer appearance settings I use the Appearance Settings > Render Mode > Line Illustration to have Photoshop render the wireframe mesh on top of the 3D Airplane. This adds some nice illustrative dimension to the scene. The Photoshop CS3 Appearance and Light Settings in the 3D tool are VERY cool. I suggest you play in there with all the options. You will be able to quickly create multiple layouts and compositions with this little toolbar.

Here is the final design

You can see the exciting possibilities now available with Photoshop CS3 Extended. The new 3D layer tool adds flexibility in your compositions in a unique and innovative way. If you love to design or illustrate collages in Photoshop, then 3D layers will add much more creative opportunity to your work.

Caveats:

I have tried to work with several different model types in Photoshop CS3 Extended and have come across these bugs:

• Photoshop CS3 does not like Beveled text from Maya
• 3D Models with Deformations can cause Photoshop to Crash
• 3D Studio Max .3DS files import the cleanest with the UV Texture Maps in tact
• Some .OBJ files import without the UV Texture Maps

Dolores Joya, Graphic Designer
DoloresJoya.com

Using Vector Gradients in Flash to Design User Interface Elements. Read more about my techniques as I take you on an in depth look into the world of gradients.

I’ve always loved repeat motif or repeat patterns since I first learned about them in my graphic design class in ‘95. That is also one of the things that caught my eye about the San Francisco inspired style and movement called “Hyphy”. The concept of repeat patterns layered with metallics is big in the Fashion scene right now and one that I employed as a recurring theme throughout this design. I dipped into this style for my 1st Flex skin theme called Green and Gold GUI Flex Skin . Below I’m going to go into my design approach to creating this unique user interface design using Photoshop, Illustrator and Adobe Flex. I call this user interface art.

Before we begin please note that this is not a technical walk-through of how to use Flash or Flex. For more in depth instructions on customizing Flex UI components I suggest you go through the tutorial by Narciso Jaramillo on Adobe’s website, he walks you through the process using Photoshop, Flash & Fireworks. Also, there’s templates for you to start with that contain all the Flex UI components layed out and named properly. He does a great job getting you started on the path to designing your own custom components. I started with these templates and also used the test files to create the design I’m discussing here.

A note on the inspiration for this design

What is Hyphy?
Some call it a movement, a style, a dance, or an evolution of culture rooted in the independent Hip Hop scene of San Francisco. I went there in Feb of ‘07 and have seen it used in many emerging fashion brands including limited edition shoes, clothing, and accessories. It’s a nice change from the gangsta look of the 90’s. Hyphy is cleaner and more preppy. The colors are brighter, poppin’ and are often used as a backdrop for silk screened graphics.

How did I deconstruct the “Hyphy” Hip Hop style and translate into my UI work?

Here’s my inspiration for the design.

Techniques I know I want to use right off the bat are:

1. Repeat pattern of simple animal shape
2. Minty green hues
3. Metallic Gold
4. Brown Plaid
5. Old English Letter Typography

Here’s the swatch palette of the design elements I developed and evolved from my inspiration.

When I look at the “Hyphy” design style I notice a combination of patterns and textures layered on top of each other, usually topped off with a bold graphic splashed over the layers. I think this creates a nice depth and so I incorporate that into my design.

For the base pattern layer
I wanted to do a repeat pattern using an animal shape. The pattern shape should be simple, not overly detailed, a flat vector and 1 color. A good resource for finding Photoshop shapes is the Adobe Exchange website. I’ve been going there for years and it is a treasure trove of styles and shapes. After I download some shapes I like, I export the paths out of Photoshop so that I can get them into Illustrator as vectors. The reason for doing this is to be able to export an SWF vector from Illustrator into Flash reduces file size and allows for your graphics to be scaled nicely.

Photoshop Export Paths to Illustrator
File > Export > Paths to Illustrator

1. Go to File > Export Paths to Illustrator
2. Make sure you have the correct path selected from the drop down menu
3. Save the path as an .AI file
4. Open Flash or Illustrator and Import the Shape Path

This is the pattern design I created in Flash from my snail vector shape.

For this pattern I use basic translation to repeat the graphic. I created 2 columns of evenly spaced copies of the shape. Column 2 is offset vertically in the positive Y direction from Column 1. I repeated copies of both columns across the page horizontally.

Something to look out for with Flex Background Styles and Repeat Patterns
This technique is a traditional approach used in website design. Create a tileable graphic to put into the background and set the CSS body tag to repeat. However, I could not locate a background-repeat attribute in Flex styles, so I was unable to make this background repeat. If anyone hears of a work around please let me know.

Now for the texture layer of graphics

Continuing the theme of repeating graphics, I began to make some of the metallic material for the main UI component element skins. I opened the Flex_Skins.Fla template I downloaded from Adobe’s site and began to think about which components I wanted to use in this design. The template contains nearly all the Flex components, which number over 200 graphical elements. For this design I knew I wasn’t going to use every component so I started with the “Panel” component in Flex.

Designing the User Interface for Flex in Flash

Repeat 2
For the panel component I wanted a metallic gold skin with metallic gold link borders. So, I start with a gold gradient created using the Flash interface. For the link I use our “repeat” theme again and tile the Gold swatch across the bottom of the panel to create a row of Gold Link bars. In this case I scale down the Gold Link to offset the larger background gradient used for the Panel backdrop.

Repeat 3
For the word “Login” I wanted to make a Diamond encrusted plaque with the title of the dialogue. I used a Diamond vector I purchased from iStockphoto.com royalty free graphics resource. They have very nice graphical elements at very affordable pricing. I take the Diamond vector and import it into Flash, make a symbol out of it and begin scaling and tiling them into the letters for the word.

Creating Dimension using Flash Gradients

For the centerpiece of my UI design I created a Gold speaker to use as a button. In order to create the illusion of depth in the speaker I rotated the gradient highlight color around the circle. This creates the appearance of light being reflected off of the surfaces that are sticking out the farthest. As you can see above layering these gradients can give a design element much depth.

After creating the basic elements, I start to lay out my page inside the Flash interface, separate from the Flex_Skin.Fla file. Once I have an arrangement that pleases me, I copy each element into its corresponding symbol in the Flex_Skin.fla file and publish the document in preparation for Flex.

UI Elements Ready for Flex

These are the elements I have customized using Flash for my Flex UI Design. Once these are ready, I save the Flex_Skin.fla to my root directory and call it from my Flex document using a stylesheet call similar to the kind you use with website CSS.

UI Elements in Flex

Using the predefined names in the Flex_Skins.fla document, I create new style calls for the components I customized. I simply point to the same Flex_Skin.swf document for each element I customized. Once, my stylesheet is saved I select the component in the design view of Flex and select my style from the “Style” drop down menu in Flex. The standard Flex component is then updated with my new Flash design.

Further customization to the standard Flex components

Since my design called for elements to be rotated as if they were dangling on a necklace, I simply used the “rotation” attribute available in Flex and type in the degree of rotation I wanted.

Caution
Rotating UI elements prevents users from typing in text inputs into the application and is not a practical technique for good usability. Doing this can also create unpredictable results in the Flash player, because I am creating an interface as art I overlook this and go with it.

Here is my final UI Design arrangement ready for Flex

View my live working User Interface Art Piece here

Programs used: Adobe CS3 Photoshop, Illustrator, Flash and Flex 3 Beta.

View my swatch book to see design elements used for Hyphy design.
Programs used: Adobe CS3 Photoshop, Illustrator, Flash and Flex 3 Beta.