Advanced animations on core Swing components – part III

July 10th, 2007

This is the third part in the ongoing series about advanced animations on core Swing component built-in to the latest binary drops of Substance look-and-feel.

The first part showed rollover and selection background animations on menus, sliders, tables and table headers
The second part showed rollover foreground animations on menus under a skin that uses dark background fill on menubars

This part is going to show rollover and selection background and foreground animations under a mixed dark-light theme. A few weeks ago I have added a few experimental skins to Substance, and two of these (Nebula and Nebula Brick Wall) use the colors from the upcoming Nimbus look and feel. The design of Nimbus is interesting in that it uses dark highlight color schemes on trees, tables, lists and menus:

This presents an interesting problem once animations will be added – you have to fade not only the background (from white to dark blue), but also the foreground (from black to white). Here is how these animations look like under the Nebula skin in the latest 4.0dev drop of Substance. The first video shows rollover animations on menus and menu items (under the default speed setting):

The second video shows rollover and selection animations on a tree (note that both background and foreground colors are animating):

The third video shows rollover and selection animations on a list:

The last video shows rollover and selection animations on a table (and its header). Note how the settings (foreground / background) of a custom cell renderer are respected during the animation sequences:

So, you’re welcome to grab the latest binary drops of version 4.0dev and try the new and improved Nebula and Nebula Brick Wall skins.

Advanced animations on core Swing components – part II

July 9th, 2007

The first part showed the animations added (among the rest) on menus, sliders, tables and table headers. While all of these operated on the control background (except the sliders, which don’t really have background and foreground), this is not always the case. Take, for example, the Business Black Steel skin:

Note that this skin (like a few others i mentioned before) uses a header painter (painter that paints not only the title pane, but also other parts of the frame, such as menu bar, toolbar, task panes, status bars etc). With the specific skin, the header painter uses dark background, which requires using light foreground colors in order for the menu texts to be legible (note how all other controls use dark foreground on light background gradients). And here comes the twist – in order to keep the rollover effects consistent (black on steel blue), it’s not enough to animate the background of the top-level menus (which would result in white texts on steel blue background instead of black texts on steel blue background). In addition, the painting of menus depends on the menu parent (menu bar or not):

As you can see in this screenshot, non top-level menus and menu items use the main theme (black text on white background / black text on steel blue background for active states), while the top-level menus use different dark-light combinations based on the menu state.

Which brings me to the main animation effect that i’m going to show in this entry – the top-level menus animate not only the background fill, but also the foreground color (otherwise the animation would look inconsistent, switching the foreground color to black at the beginning, which would result in a very distracting animation sequence). Here is how it looks like under slow animation speed (note the rollover effects on the top-level menus):

And here is how the same animation sequences look under the default speed settings:

So, you’re welcome to grab the latest binary drops of version 4.0dev and try the new and improved Business Black Steel skin.

Advanced animations on core Swing components – part I

July 8th, 2007

Animations are most probably one of the main ingredients of a modern UI. This applies not only to traditional (thick) rich clients, but also to the new (thin) web clients (at least judged by the amount of tutorials that show different animation, fading and sliding tricks using simple HTML and CSS coding). And Swing shouldn’t be left behind. This is why i started working on animations as a built-in layer in the Substance look-and-feel. It has started back in October 2005 with simple fades on buttons, continued with more advanced animations on tables, lists and trees and is still under significant development today (and in the near future).

I mentioned already that Swing has 41 different core components, and pretty much all of them are good targets for some kind of animations (if done in a consistent, non-invasive, non-distractive and configurable way). And so, the latest drop of 4.0dev (code-named Key Largo) provides even more advanced animations as before. In this series of postings i’ll show some of these animations in action. You’re more than welcome to try out the latest binary drops and post your feedback here, on project forums, mailing lists or in a private e-mail.

The first video below shows improved rollover animations on tables. Note that the animations have been extended to the table header as well, providing a consistent visual indication for the user (Business Black Steel skin is used):

The second video shows the improved selection animations on the tables. Not only the table headers are now animating in sync with the cell selection, but there’s a new animation on the focus ring on the currently focused cell. The focus ring is faded in and out along with the selection background, providing a streamlined and consistent animation effect (Business Black Steel skin is used):

The next video shows improved animations on the sliders. One of my previous entries showed the animations on slider thumbs. These has now been enhanced by fades on the selected portion of the slider track when the user hovers over the slider thumb (Office Silver 2007 skin is used):

The last video shows much improved animation implementation for menu bars and menu items. Note the smooth fade ins and fade outs using a custom state-aware theme on both the top-level menus and the menu items inside a menu (Office Silver 2007 skin is used):

Note that for illustration purposes, all the videos in this entry use slower animation speeds. Under the normal (default) setting, the animation sequences are faster and less distracting. Let me know your thoughts.

New Autumn skin for Swing applications

July 5th, 2007

It has been added last October, but only now i feel that it has been polished enough to have it officially supported and released. The latest 4.0dev drop of Substance provides full support for a new toned-down skin named Autumn. It is similar to the Creme skin, but even less intrusive. It is one of the two new skins that use the same theme for default and disabled controls. In order to differentiate these two states, a skin defines a custom alpha value (translucency) for the disabled state. The end result (see screenshots below) is that the disabled controls appear less “visible” as the default controls. This also means that if you set a non-null watermark, it will “shine through” the disabled controls.

Here are a few screenshots of different controls under the new Autumn skin. Buttons, toggle buttons, checkboxes and radio buttons in different states (default, selected, disabled and disabled selected):