Skip to main content

Orange Box: New Java Plugin Animation

Posted by campbell on February 2, 2007 at 10:54 AM PST


[Concision is often a difficult thing for me. Everytime I write a blog entry I tell myself, "This one's a-gonna be a short 'un." But it just never seems to work out that way. Perhaps I'll succeed today.]

For the dozen or so folks that attended the User Experience BOF at JavaOne 2006, this is probably not news. But if you're one of my (14 million) readers who did not attend that BOF, you may be interested to learn that we've revamped the quick little animation that users see when the Java Plugin is being initialized in the browser. In the years prior to JDK 5, users saw little more than a gray box and a tiny coffee cup logo. Besides being dull, there was no indication of applet startup progress; not exactly a brilliant user experience!

Fast forward to 2004 when a certain high-level-exec-turned-CEO decided it was time to improve that experience. A short startup animation (with progress indicator) was proposed, and the general design was (somewhat unfortunately) handed down from above. Our multi-talented visual designer, Coleen Baik *, and I were given only a couple weeks to churn out the final design and implementation (written purely in Java 2D, of course) in time for the impending JDK 5 release. Thus was born the original "gray box animation," called as such despite the fact that it was now much more white than gray:


graybox.png

About a year later we were again asked to update the look of the animation, this time for the JDK 6 release. Our initial reaction was one or more of:

  • "Are they bloody crazy?"
  • "Didn't we just get finished with the first one?"
  • "Has anyone even noticed the first one yet?"

On the other hand, the old animation was already beginning to look a bit dated, so I think we were happy to give the design (and implementation) a much needed makeover. Coleen's new designs were much more sleek and modern looking than the old gray box. And this time they were predominantly bright orange. (Hooray for Sun branding!) The design we settled on looked fantastic, but it was also a bit of a fun challenge for me trying to convert her Photoshop blueprints into Java 2D-isms. Fortunately around that time I had pushed to get LinearGradientPaint (and RadialGradientPaint) included in the JDK, which turned out to be a lifesaver. I also had to figure out how to achieve cheap, efficient drop shadows, glow effects, and soft clipping in Java 2D. (The first two entries in my "Trickery" series on "Soft Clipping" and "Light and Shadow" might make a bit more sense now that you're clued into their origins.) The sequencing of the progress bar and the subsequent fade-out implementation were also thankfully improved by Rita Fisher, resident Java Plugin expert.


[Concision, man, concision! Enough yapping! Show them some pictures, already!]

So without further ado, I present the new "orange box" Java Plugin startup animation...


orangebox.png





The screenshot doesn't really do it justice, so I'd recommend trying the live demo (sandboxed; requires JDK 6) to see the fancy page flips, fades, and so on. You can resize the window to see how the animation behaves at different sizes. Note that the demo is derived from one of the final prototypes (before it was integrated into the JDK), so the behavior might differ slightly in the actual deployment scenario. And before anyone asks, as always you can override this animation (instructions here)
with a static image of your choosing, such as a company logo, if desired. Also, despite the fact that this animation looks significantly more complex than the old one, I'm happy to say that the new animation requires less CPU cycles than the old one; in both cases, we promise we're not slowing the applet startup process by displaying this animation (applet startup is usually I/O bound, and the animation requires very few compute cycles).

The new animation unfortunately missed the original JDK 6 release due to time constraints, but I'm glad to report that it's now available in early builds of JDK 6u1 and JDK 7. If you have either of those installed, try loading a large applet (the animation is usually only visible for larger applets that take a while to download) and let us know your thoughts. Hope you enjoy the new look!

* ... who unfortunately is leaving Sun as of today... Why, Coleen, why?




In my ears: King Geedorah, "Take Me To Your Leader"


In my eyes: Woody Allen, "Side Effects" [a nice diversion from my ongoing battle with Faulkner...]

Related Topics >>