This is the fourth 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
The third part showed rollover and selection background and foreground animations under a mixed dark-light theme
This part demonstrates the animations under the new Magma skin. Unlike other mixed dark-light skins (Nebula, Nebula Brick Wall and Business Black Steel), pretty much all animations under Magma feature dark-light transitions for both background and foreground colors. Here is a sample video that shows animation effects on buttons, toggle buttons, checkboxes and radio buttons (note that for the later two, the foreground is not animated):
The next video shows rollover animation effects on Magma sliders:
The last video shows a complex rollover animation effect on Magma tabs. Substance provides support for tab close buttons. When installed, Substance shows the close buttons on the currently selected and the currently rolled over tab. On rolled over tabs, the close button is faded as the mouse moves over the tabbed pane. For Magma, this means that the close button animation has two channels – during the fade in, the color fades from white to black, and the alpha fades from 0.0 to 1.0. During the fade out, the color fades from black to white, and the alpha fades from 1.0 to 0.0. The video shows the rollover animation sequence under very slow animation speed so you can follow this effect:
You can run a test WebStart application by clicking the button below. The application is signed and requires read-only access to the local disk (for the filetree). In order to switch to Magma, go to the Skins menu and select “Magma”.
It’s finally time to release one of my favorite new skins for Swing applications. The latest 4.0dev drop of Substance provides full support for a new dark skin named Magma. Like Nebula, Nebula Brick Wall and (partially) Business Black Steel, it uses a mix of dark and light color schemes, but takes this one step further. In Magma, the default and disabled color schemes are dark, and the active (selected, pressed, armed, rollover) color schemes are light (saturated Sunset shifted to red). In addition, like Autumn, it uses the same color scheme for the default and disabled states, and 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 the watermark “shines through” the disabled controls (look closer at the disabled buttons in the first screenshot below).
Here are a few screenshots of different controls under the new Magma skin. Buttons, toggle buttons, checkboxes and radio buttons in different states (default, selected, disabled and disabled selected):
Comboboxes in different states (default, active, disabled, with custom background):
An internal frame with a few controls:
Horizontal and vertical sliders in different states (enabled, disabled, ticks, labels, RTL). Note the translucent layers on the disabled sliders:
Progress bars (horizontal, vertical, determinate, indeterminate, with caption):
Tree with a selected and rollover path:
A control panel with different controls embedded in a SwingX task pane:
SwingX error pane:
SwingX month view:
A frame with menubar, toolbar and status bar from SwingX:
You’re welcome to try this skin and report any issues / RFEs that you find.
This also marks the core feature freeze stage for the 4.0 version of Substance. From this point on, only the user-requested features, minor polishments and bugfixes will be done on the main trunk. Since version 4.0 introduces binary incompatibilities with the previous release, you’re welcome to follow the instructions in the migration guide in order to migrate to version 4.0 (in case your application uses Substance-specific APIs and client properties). The final release is planned for September 4th.
You can run a test WebStart application by clicking the button below. The application is signed and requires read-only access to the local disk (for the filetree). In order to switch to Magma, go to the Skins menu and select “Magma”.
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.
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.
