Flex 4 SDK downloads now include Spark skins for all the components

If you happen to download our latest Flex 4 (Gumbo) nightly build (build 5101 or later) and compile an application, you will probably notice that the look of your application may have completely changed. Recently, new spark skins were implemented for all of our Halo Flex 3 components. This includes a new “Spark” skin for components like DataGrid, DateChooser, DateField, TabNavigator etc, which do not have equivalent components in the new Gumbo architecture.  This way, when you are building a brand new application in Flex 4, you will be able to mix the new Gumbo components with Flex 3 halo components, and they will all look the same. Here is a sample of what the new default skin looks like :


Here are a couple of things to note about these new skins:

1. The default size of text is now Arial 12.

2. The default size of many components has changed.  For example, if you have a Button in a Flex 3 application with no width or height set, it will be much wider when compiled in Flex 4.

3. Many of the styles that are supported in the halo (flex 3) theme is not supported in this Spark theme such as cornerRadius, fillColors, themeColor, etc. The only styles supported are those supported by our Spark components. (see #4)

4. The styles supported by the skins are baseColor, symbolColor, focusColor, contentBackgroundColor, color, rollOverColor and selectionColor.

5. There are still a lot of bugs with the spark theme on our Flex 3 components. Just Friday, I filed about 10 bugs on the components! If you care to see the bugs, search for “spark_skins” in the subject line of a bug in JIRA.

6. You can compile your application with this Gumbo build and use the old halo theme instead of the Spark theme which is now the default. To do this, add the argument “-theme=../frameworks/themes/Halo/halo.swc” to your compiler arguments.

To get an idea of what these skins look like, check them out here: SparkSkins.swf

The source for this application is here: SparkSkins.mxml

To download a new nightly build with the Spark skin defaults, go to opensource.adobe.com.

6 responses

  1. […] > Flex 4 SDK downloads now include Spark skins for all the components « Flex Butterflies and Bug… […]

  2. Is it just me or does the ‘spark’ theme just seem ugly? Do you think this is to push people to style their app instead of using the default theme? Halo just seemed like a sexier theme than spark (IMHO). What do you think?

    1. @Mike – Funny you should mention that… I’m not the biggest fan of the skins either. Our XD group created them, so, they have been ‘blessed’ by designers. I guess some folks will like it and others won’t. I think the TabNavigator skin is particularly boxy.

    2. Yes, was thinking the Halo skin was a bit ugly, hoping for an elegant and tasteful upgrade in Flex 4, but alas … Spark is even uglier than Halo. 😦 Ah well, at least it gives 3rd parties a chance to sell. But with Adobe being the graphics king, I would have expected something a lot more professional. It looks like we’ve gone back in time ! We are now in the era of Windows7, iPhone etc. We don’t want our Flex apps looking like a dumb terminal on the desktop 😦

  3. Thanks for the reply.

    Yea, I probably used the wrong word with ‘ugly’… but, the theme was a bit disappointing. But, I own Flash CS4 and I know CSS so, I guess it will be in my own hands. And the more I tweak my CSS, the more acceptable it’s looking.

    Side note. I really dig the new features in the IDE. Can’t wait for this to drop so I can start rebuilding all my library files and projects in it.

  4. […] Another good resource is the FlexCoders list: http://tech.groups.yahoo.com/group/flexcoders/||| Yes, this is definitely a Flex 4 question as opposed to TLF, but I think that it may be related to the use of the new Spark skins that are being used for halo components now in Flex 4. The halo ‘spark’ skins only support a small percentage of the style properties that the older halo skins support. You can override to use the old skins by adding the argument “-theme=../frameworks/themes/Halo/halo.swc” to your compiler arguments. More details here: https://butterfliesandbugs.wordpress.com/2009/03/01/flex-4-sdk-download s-now-include-spark-skins-for… […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: