Adobe Flex Flash developer blog

Adventures of a Flex developer

Metro Air Style application

Thursday, 10 November 2011 by jonnysparkplugs

The Metro UI seems to be used in more and more places of late.  Originally I only saw it in the Zune software but its now part of the Windows mobile 7 and the up coming Windows 8 release.  I personally really like it.  Any how I've created a few skins and released this demo Air app. Feel free to take the code and skins and make your own apps metro themed





You can download and run the app here (it does very little apart from look pretty)

Or you can download the source code here

Enjoy

Filed under having  

5 comments:

Paul Smith (Assumed Name) said...

Question,

I'm just starting to work in Flash Builder, and I'm trying to figure out how I can convert your project into a SWF (or whatever it needs to be) so I can import it as a skin in my project. I have in loaded as a project in Flash Builder, I'm just lost as to what to do now.

Thanks for creating and sharing your work by the way. I've been looking for a Metro UI look that I can use in AIR as I'm aiming for a *cough* cross-platform application.

jonnysparkplugs said...

Hi Paul,

You don't need to convert anything to a swf to use it as a skin. The best/easiest way to use the styling would be to block in Metro.mxml

you will need the classes that are referenced in your own project though.

eg:

s|Button
{
skinClass:ClassReference("com.indecentmonkey.metro.view.skins.MetroButtonSkin");
}

You need to make sure the package is vailed for where you store you skin classes

Unknown said...

This is an Older Post, have you been doing any work in the realm since then. I've been building a resource hub in anything pertaining to Flash Builder and Windows 8 Metro apps, and native extensions.

This is great work. You would think that this UI skin base in Flash Builder could be achieved with CSS and almost no graphics.

do you notice speed improvements?

jonnysparkplugs said...

Hi Damon,

No I haven't looked at this for ages. I do still actively develop in Flex, although I was just messing about when I did this.

I think it would be possible, although I think it would involve a lot of spark skins. You could would probably have to create some fxg graphics.

Performance would be the same though

Unknown said...

Have you ever seen an example in Flex or Flash Builder where the whole of the interface UI is just CSS?

I think if Adobe could wrangle in simple CSS into the MXML markeup it would bring relevance back to Flash Builder immediately.

Post a Comment