Tony has more information regarding the source code on his blog. We’re thinking about evolving these samples as we have the time, so you may want to continually check back (no promises).

The video is now available here or through the 360|Flex feed for AMP.

We were able to pull together some amazing prizes and judges with help from Adobe and EffectiveUI. Prizes for first place include:

• (1) MacBook Air with SSD
• (1) Ticket to MAX North America or Europe
• (1) Copy of Adobe CS3 Master Suite
• (1) Copy of Flex Builder Professional
• And a Feature on the Adobe Developer Network

With those prizes you can picture yourself at Adobe MAX sitting at the keynote with your MacBook Air coding away while people point and ask, “Hey, isn’t that the guy featured on the Adobe Dev Net? You know, the one who won that contest?” We’ve got some great prizes for second and third place, as well as “spot prizes” for people who put forth a strong effort.

You might be thinking, “I’m no designer” or “I’m no coder”, but why not team up with someone? You can find a designer or developer to collaborate with and divvy up the prizes. It’s a great excuse to get up to speed with skinning Flex components and thanks to Andrew Shorten, Adobe Platform Evangelist, you’ve got several tutorial videos to learn from.

Get all the information about the ScaleNine “Skin to Win Challenge”

Also, I’d like to thank Patrick Hansen, UX Designer from EffectiveUI, for making that sweet logo for the contest; Paulo Rizkalla, Developer for EffectiveUI, for helping me with some website stuff; and Mike Potter and Andrew Shorten of Adobe for their help putting this all together.

Aurora is a concept video exploring one possible future user experience for the Web, created by Adaptive Path as part of the Mozilla Labs concept series.

Being able to directly manipulate content in the browser, have a seamless browsing and collaboration experience, and the methods shown for organizing user content are definitely somethings worth shooting for. Granted I’m a guy who uses key commands or gestures wherever possible to avoid the Finder, drilling down to look for files, or using the mouse to access menu items.

One of the designer’s at EffectiveUI turned me on to a magazine called “SEED“. SEED focuses on “Science is Culture” and it’s a really well-designed magazine that initially caught my eye with some nice diagrams and visualizations. It has a really great sense of design all-around with details that I enjoy discovering.

The best thing is that some has taken the time to go through issues of the magazine and post them on Flickr. The photos capture the magazine in a printed state rather than it being flat artwork which also adds a nice feel. The above image was taken from that Flickr photostream.

Check out SEED Magazine on Flickr

What’s interesting is I was just talking to some designer’s at EffectiveUI about creating a site very similar to this, but with some additional functionality. I’ll probably end up using this site a lot, but there’s some features I think would really make Scrnshots stand apart from something like Flickr.

I’d like the ability to post iterations and have them be connected. I’d love to be able to post a sketch, get feedback, post a refined mockup with revisions, get more feedback, refine, get feedback, etc. Then, at any point someone could review the entire process I went through from sketch to final execution. Being able to see the thinking that went into something is where most of the value lies.

Being able to have comments point to specific parts of the screenshot would be cool too, kinda like ConceptShare. Maybe even a comparison overlay view to to get down to the details.

I can really see this site used for a variety of things, like filing bugs, reviewing designs, concepting, etc. In some cases, maybe I’d like to make some things private. Then I can share designs for internal purposes.

Scrnshots is one of those site I could browse for hours, kinda like LogoPond. Now all I need is some time to find and upload a bunch of designs that never made it beyond the concept phase.

Over the weekend I noticed a new build of the Flex SDK popped up with some new samples, like a CircularScrollBar, and some Gumbo Effects (amongst other things). I decided to make a Button skin with transitions that included a Resize and Fade Effect. Here’s what the 2 states look like:

The transition between the up and over states resizes the skin vertically then fades in the Sun/Cloud icon and the static temperature text. When you roll off the Button the transition plays in reverse. The transitions are pretty easy to implement if you’re familiar with working with Transitions and Effects currently in Flex. However, it will be nice to have Thermo to see exactly what your transitions are doing in real-time, especially for making more advanced composite effects.

During the process of putting this example together I experimented with using the includeIn property to only show content in certain states. Eventually I took it out, but that’s another option for showing/hiding content rather just messing with the alpha and scale. Plus, you’ll be sure that content will only show up in a designated state and not mess with the layout.

If you’re interested in what I did to get this sample to work you can download the source here.

Skinning in Flex 4 is drastically different than what we do today. Instead of having to work with a single graphic to represent the skin of a component, skins can be composed of multiple elements, like text, images, FXG graphics, transitions, filters, transforms, states, etc. You create your skin in a separate file and compose the skin elements together using MXML markup. This makes skinning so much more versatile so you can do things like layer graphics on top of labels, add multiple icons, create unique transitions and more.

Just to get started, I thought I’d just create a Button skin that began to illustrate some of the benefits of this new way of skinning. Here’s an image of the skin I ended up creating:

It’s a relatively simple skin (or is it?). If you look closer you’ll notice some things that aren’t possible to do in Flex 3 without making a custom component or using OpenFlux. Here’s why:

• - There’s two icons. One is the cloud, the other is an arrow.
• - Notice the Glow Filter on the text. How many times has a designer or yourself wanted to throw that in a Flex application only to have to scrap it ’cause it would take too long to implement.
• - It may be hard to see, but the highlight on the Button is actually an FXG graphic layered on TOP of the Label and the 2 icons.

Those reasons are just the beginning of why I’m looking forward to skinning in Flex 4. You have so much more control and it’s easy to do. However, that may have been the case for me because I use Degrafa so much.

This was just a “getting started” exercise for me and I plan to get into more dynamic things like transitions, working with transforms, maybe adding some 3D, experimenting with Pixel Bender filters and working with skins for other components, like Lists. Definitely fun stuff.

In case anyone’s interested, you can download the source here.

Of course, the things I’m most interested in are the ways they’re improving designer/developer workflows. As I mentioned previously, there’s a lot of stuff that has to happen to make that collaboration smooth. Here’s a few things that caught my eye:

FXG
FXG is the graphics markup that will allow you to compose graphics for things like skins and visual displays. This is similar in concept to Degrafa, but with more focus on Thermo and the capabilities of Flash Player 10.

Skin Parts, States and More
All these features surround the new approach to creating components in Flex 4. With skins being separate you’ll be able to do a lot of wild stuff without feeling the current constraints you may be experiencing in Flex 3. Things are going to get a lot easier.

Advanced Animations
A lot of designers and developers I’ve spoken with have had issues working with Effects and Transitions in current versions of Flex. Animations are being reworked to be more versatile and support both component and non-component objects like FXG, colors, etc. I definitely like the sound of “intelligent” and “blended” effects.

New Text Elements
I use HTML text a lot in applications to support styled and dynamic text. It’s great to see additional support coming for <div>, <span>, etc.

This is all really great stuff to read and I can’t wait to see it come across in code. I’m also looking to see how this all integrates with Thermo. For more information, check out Deepa Subramaniam’s post with a round-up of links.

If you’re interested in some of the background of the design of the HUD and POV systems, the UI Resource Center (UIRC) has posted a great article based on an interview with Kent Seki (Pixel Liberation Front), the Visualization and HUD Supervisor on Iron Man. I actually had the opportunity to sit in on the interview and I think the dynamics of the interview carried pretty well into the article. It was great hearing the thinking that went into things like the evolution of the suit, the way the HUD was treated as a character in the film, and more.

Here’s a great quote by Seki describing part of their process, which I think can apply to a wide range of design:

When you can justify all the visual elements, then you know you’ve done your job because you don’t have to worry about anything being random. We took out all randomness and made sure we had a purpose to everything. That way, when we consciously decided to do something that is random, we knew we were doing it for a reason.

You can read the article in its entirety on the UI Resource Center website. If you haven’t checked out the UIRC before, it’s a great source for articles on a variety of topics surrounding the world of user interface technologies and design.

Button skin artwork that extends beyond the bounds. Unmasked and masked.

The animation appeared fine in Flash, but when it was applied as a skin to a Button the skin shrank in size (see image below). This was because the Button took into account the artwork that was masked in Flash. This made total sense. To fix it I thought, “Well, we could just use the bounding box technique that has been outlined in several Flex Component Kit Tutorials.” Easy enough.

Button skin without a bounding box. The red is the “actual” bounds of the Button component.

If you’re not familiar with using a bounding box in Flash to define the bounds you’d like your Flash artwork to adhere too, the concept is simple. Basically, you create a box, make it a MovieClip (called “BoundingBox” or something), give it an instance name of “boundingBox” when it’s on the Stage and then use it to define bounds of the Flash content. Kinda like this:

Button skin with bounding box (red) applied.

We did all that without any issues. However, we hit a snag when we tried to apply the Button skin that had this bounding box to an actual Flex Button component. We were trying to apply the skin by embedding a skinClass through CSS like this:


Button
{
skin: Embed(skinClass="Button_skin");
}


The Flex application would just hang. The trick to getting it to work was to just use a ClassReference like this:


Button
{
skin: ClassReference("Button_skin");
}


Everything compiled fine when using ClassReference. The skin looked exactly as it did in Flash and used the bounding box correctly. Cool!

The scary thing is that “Skin Import Wizard” in Flex automatically uses skinClass and most designers who use Flash are probably used to working with masks and artwork that extends “beyond the bounds”. The thing is that to a designer or developer it could appear that the skin is the issue, but in fact it was just a matter of switching the Skin Import Wizard default of skinClass to use ClassReference.

Just to make sure it wasn’t a fluke I made a quick test (view source enabled). If you wanna make the app break, just switch ClassReference to skinClass as shown above. Am I just doing something wrong?