Dolores Moore - Flex Skinning and RIA UI Design

I’ve been using the Flex Component and the Flex Skinning Templates for Adobe Flash CS3 for awhile now. I couldn’t figure out why Flash CS3 would throw up this error at certain times:

“A definition for the base class could not be found in the classpath. Please enter the name of a class that is defined in the classpath, or enter the default base class ‘flash.display.MovieClip’.”

Today I found the answer in the comments of the Flex Community Blog post about “Turning Flash CS3 assets into Flex Components“.

If you’re using the Skinning Templates by Adobe to create new skins for your project you’ll want to pay attention to this little item during your workflow.

I usually open the Flex Skinning Template in Flash CS3 via the “New” dialog box.

In the example of skinning a Flex Button Component. Once I open the Flex skinning template, I duplicate the symbol in the library because more often than not I will be creating multiple Flex Skin’s for a single Flex Button Component.

If you’ll notice below in the “Symbol Properties” dialog box the default Base class for the component is “mx.flash.UIMovieClip”

If you duplicate the symbol (see below), Flash CS3 changes the Base class to “flash.display.MovieClip”.

The thing to note here is if you publish your file and import the new skin into Flex Builder, your skin states will automatically play like an animated gif. Also, if you try to type in the “mx.flash.UIMovieClip” Base class path you will get the error message above.

The admin on the Flex Community blog today resolved this for me in his comments on this post and quoted below for clarity.

“I’m sorry, It appears I have mislead you with an error. I went through my steps from the beginning, and found that you need to set the base class as flash.display.MovieClip. Flash then automatically changes it to mx.flash.UIMovieClip after you click commands -> convert symbol to Flex component. You can see this change if you go to the linkage window for the symbol after you create a Flex component from it. I’m sorry for the frustration, I try to keep these articles as error free as possible, but this one slipped through. Try this and let me know how it works for you.

If you still have a problem, let me know before googling your eyes out further (I know how that is), and I’ll help you get it. It’s a great tool.

P.S. I have corrected this in the article.”

So if you encounter this problem when you are trying to bring in an animated Flash skin into Flex, converting the symbol to a Flex component command could help. See below.

Thanks Admin, I’m not sure who you are but you helped me a lot today.

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

The Neo UI Designer
As a freelance RIA UI Brand Designer, I’ve adapted my Design workflow/delivery methods to fit the needs of the 2008 Start-up and Flex Builder 3.0 has helped me to accomplish this. It might seem strange for a Designer to utilize Flex Builder in the Design workflow, but for me coming from a Website Design/HTML/CSS coder background it was as a natural fit as Dreamweaver. I downloaded the trial of Flex Builder 2.0 over a year ago and created my first project as a test, just to find out what was really going on. I have to say, I was very surprised to see how much Flex’s MXML language made sense. It was just like coding an HTML/CSS website, except with MXML I had way more creative control and Photoshop-like style options such as:

• Dropshadows and Blurs
• Gradients! (Can’t emphasis this enough)
• Alpha Transparency
• Rounded Corner (Corner Radius)
• Embedded Fonts
• Animation Effects (Move, Resize, Rotate, Fade)
• Not to mention the powerful Skinning possibilities

I was amazed at how quickly I could prototype Flex UI layouts from my Photoshop or Illustrator mock-ups and how creative I could be with a Developer’s tool.

A Designer using Flex Builder for RIA UI Design? Duh!
I know there’s Designers out there who say Fireworks is the next best thing for UI Design and rapid prototyping and I can’t really say I’ve tried it. I have used Visio and Illustrator for years to create static wireframes and workflows. Also, I have tried loading Flex component kits into Illustrator, Flash and Photoshop and those do aid the in the design and production process. I have to say using Flex Builder 3.0 to create working UI prototypes to hand-off to developers is the fastest and most requested way to deliver a RIA UI design.

What about Thermo?
Now, I know that Adobe is coming out with Thermo some time in the near future but I don’t know if I’m going to leave Flex Builder behind. As a Graphic UI and Brand Designer for some years now I have to say I get a lot of fulfillment seeing things actually work. As a contractor, clients don’t readily provide defined codebases to share with me (probably because they are in “stealth” mode) so I can’t work parallel to a Flex developer. Some clients have no immediate plan to build a fully functioning RIA, but want a Branded/Skinned Flex prototype to wow prospects during the pitch process. It must be fallout from the dotcom hay days that’s forcing start-ups to provide more substantive products complete with; proof of concept, branding, an established super-network of users, multiple beta releases/testing and a audible buzz before gaining additional funds from investors.

Meeting the Demand
Regardless, I am in the same boat as any other start-up. As a contract RIA UI Designer I need to provide more within my own services to meet the increase in demand for a more seamless Design-to-Developer workflow. I don’t think I am alone in this, and if you have been around long enough you will see this pattern emerge; as software applications provide more functionality, software users must demonstrate more technical knowledge and skills.

The Neo UI Designer’s New Deliverable
Gone are the days of static mock-ups being the deliverable, today are the days of Flex UI Skinned prototypes with multiple states, multiple views, animated menus and transitions. I must say the feedback has been awesome. Clients are eager to get my zipped files containing:

• The Flex Builder Project
• Flex CSS Stylesheet
• Asset Folder containing: Images, SWF’s, SWC’s, MP3’s, Fonts
• UI Layouts in MXML with Multiple Views
• Flex Builder Bin ready for demo
• MXML scripted movement, transitions, effects, and animated menuing
• Flash SWF animation for the preloader
• Embedded Icons and Fonts

View a sample Flex UI Design Prototype deliverable.

View sample of final product 
Download sample zipped file

So with this, it is my view that the UI or Interactive Designer’s role in RIA’s is evolving. Extended knowledge into the realm of functionality will become the status quo. Integrating Flex Builder 3.0 into the UI Design workflow can only speed the RIA process which is increasingly getter shorter and shorter.

I’m always interested to hear about other’s UI Design process’ or project’s, shoot me an email at moore.art.design@gmail.com to get in touch.

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…

I don’t know when it happened, but Adobe Bridge just got a lot cooler for me. I just noticed the total integration of Web Content: Training, Community, Exchange, News, Tutorials, and all out enormous amount of cool content being pushed down to me on my very own desktop through Adobe Bridge. I’m pretty sure they are using Flex. What a great example of utilizing Flex on the desktop.

As a Designer, I visit Adobe’s website for video training, tutorials, download photoshop brushes, illustrator patterns, and Flash and Flex info pretty much everyday. I am so stoked that the places I go, are already there organized by program, and by resource type, basically how “I” need them. No need to keep going to the bookmarks. Saves me a couple steps anyway. I think this integration is one more step towards seamlessness and I’m sure we are going to be seeing more.

Check out the vid - Flash Video (compressed)

Noted Flex Components used (correct me if I’m wrong on these):

Top level nav (TabMenu component with 2nd Level Flash Nav)

Content Box (Canvas Component with Image Slider/Text Area)
Interesting adoption of the iPhone paging dots.

Minimized Slider Navigation (Flash with Custom component)

Full Screen View (Photoshop)

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.