Chris Campbell's Blog

Orange Box: New Java Plugin Animation

[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:

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?"

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

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

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...]

Comments

• Looking great, but the acid orange is a little bit strong on the eyes since it takes so much space.

  Posted by: kirillcool on February 02, 2007 at 11:29 AM

• I like it, now how about a uniform loading screen for applets and web start applications? Especially since both of them tend to sa "Java starting.." this can confuse users, as different look and feels might lead them to think different versions and what not.

  Posted by: atehrani on February 02, 2007 at 12:11 PM

• Yeah, they might have gone too far with the orange.. imagine that on half of a screen. My eyes, my eyes!

  But the animation is pretty..

  Dmitri

  Posted by: trembovetski on February 02, 2007 at 12:35 PM

• Wouldn't it be better if it started as gray, flashed to the current color and then tuned back to some nice gray-orange, all very shooth?

  Posted by: mikaelgrev on February 02, 2007 at 02:44 PM

• Chris mentioned to me that the image won't get larger than what he had shown, so no full-screen orange attack (unless you have multiple applets on the same page! =)

  Dmitri
  

  Posted by: trembovetski on February 02, 2007 at 04:14 PM

• At last you made it public! Congratulations Chris ;-)

  Posted by: gfx on February 02, 2007 at 04:33 PM

• Very cool, thanks.

  Posted by: aronsmith on February 02, 2007 at 05:28 PM

• Looks gorgeous but I agree with the others, the orange color is a bit aggressive on my screen.

  Posted by: vprise on February 03, 2007 at 03:39 AM

• Is the "Come visit us a Java.com" included too? I have mixed feelings about that. The effects and animation are cool but I don't like that branding there. It will prompt users to abandon the site containing the applet, plus the java.com (sorry to say this) actually has little useful content, specially for the non-english speaking public. If a user is seeing that animation they already have a java 6 runtime and update scheduler installed, they have little to gain from java.com

  Posted by: numeropi on February 03, 2007 at 04:53 AM

• The defenders of Swing/Java RCP etc. say that end user experience is much more smother than it used to be in early days of java. Well....look at the error below on FireFox 2.0:
  ===========================================
  An error occurred while launching/running the application.

  Title: Java Plugin Animation ("Orange Box")
  Vendor: Chris Campbell
  Category: Download Error

  The application has requested a version of the JRE that is currently not locally installed. Java Web Start was unable to automatically download and install the requested version. This JRE must be installed manually.

  Error Code 11 (11 Could not locate requested version) returned from server when accessing resource: (http://java.sun.com/products/autodl/j2se, 1.6+)
  ===========================================

  I still remember, in 2001(almost 5 years back!), arguing with one of my colleagues about the improvements in Java Plugin/WebStart Plugin technologies that are going to make JRE installations invisible to the end user. At that time, there was a talk of Mozilla browser shipping with latest JRE and automatic upgrades as needed without end user involvement etc, etc... We are in 2007 now. Almost after 4 major releases of java (1.3, 1.4, 1.5 and 1.6), auto upgrade of JRE still sucks, to say the least.

  Posted by: rmadarapu on February 03, 2007 at 07:25 AM

• I have 1.5 and 1.6 installed, but webstart use 1.5 when I click the button. Only a blank window is played... :(
  Swing is such a great client technology, please fix JRE deployement!

  
  

  Posted by: arnaudmasson on February 03, 2007 at 08:29 AM

• rmadarapu: Chris clearly stated that *this particular* webstart application requires JDK 1.6 to work properly. Java is in constant evolution, but you have to keep the pace. Install the latest JRE and you'll be able to launch pretty much everything.

  Posted by: krakerjaak on February 03, 2007 at 08:41 AM

• What a difference. The other one looked like it was designed in 1950.

  Posted by: jseltzer on February 03, 2007 at 12:20 PM

• One more note. Can you fix webstarts intro logo now. Please make it smaller and, since in jdk6 it's up for...ever, make it show progress as well.

  Posted by: jseltzer on February 03, 2007 at 12:23 PM

• For those asking about Java Web Start and Java Plugin enhancements, please remember I'm not a deployment engineer; I was just responsible for the graphical implementation of this particular animation. Please direct further questions to the Java Deployment forums...

  @mikaelgrev, @vprise, @kirillcool: Our goal with this design was to literally burn the Java logo into the retinas of millions of our users worldwide. Got a problem with it? (Yes, I'm joking; always have to have the "just joking" disclaimer on java.net...) Your opinion does count of course, so if you feel strongly about it, please discuss it on the above forums.

  @rmadarapu: Java SE 6 hasn't yet been made available for auto-download; I think that will happen soon when 6u1 ships. So just be patient and everything will work soon; no need to get uppity.

  Thanks, Chris.

  Posted by: campbell on February 03, 2007 at 12:46 PM

• Where I'm working, we deliver an applet-based portal (predates the portlet API). There can frequently be 6 or more applets per page, so the orange colour is very aggressive. Maybe it can be made more neutral, or can be a special applet parameter (e.g. com.sun.applet.loadingColor = #CCC)..? It can also cause garish displays when the customer's site is already using a clashing colour theme.

  The branding is also intrusive when you're selling a branded product and you see the same branding message repeated 6 times in the same screen...

  - Chris

  Posted by: chris_e_brown on February 05, 2007 at 12:41 AM

• Chris, as Chris explained, you can override this animation if you want to brand the applet in y our own way.

  Posted by: gfx on February 05, 2007 at 01:56 AM

• gfx, chris: thanks for the instructions on how to disable it, that'll teach me to look at bright orange animations before I have my morning coffee... :-(- Chris

  Posted by: chris_e_brown on February 05, 2007 at 04:58 AM

• BTW, the JNLP works on Mac if you have the SE 6 DP (from ADC, and note that it's NDA'ed) and you use the /Applications/Utilities/Java SE 6/Java Preferences application to set 6 as your preferred JVM. And I sure hope I don't get a nastygram for saying that publicly.

  Posted by: invalidname on February 05, 2007 at 07:06 AM

• How about the nice muted down blue that they use on Sun's site and Sun video podcasts etc.

  Posted by: hchaudh1 on February 05, 2007 at 09:09 AM

• I like it, but I seem to be in the minority. It's very "Flash-esque" and I think it's appropriate considering recent Swing competitors like Flex etc. I think it's very RIA rather than just desktop

  @arnaudmasson - you can change this in the java control panel. Click java tab, View java application runtime settings and check 1.6

  Posted by: sjlum on February 05, 2007 at 09:53 AM

• Referring to the post by rmadarapu

  Could it be due to the fact that this is only available with the latest, greatest builds of the JDK, the ones which are not officially "released". Anyone?

  Posted by: hchaudh1 on February 05, 2007 at 12:38 PM

• Totally sexy -- I love it! Way to go!

  Posted by: prime21 on February 05, 2007 at 01:16 PM

• Looks good to me! Well done...
  

  Posted by: psynixis on February 05, 2007 at 01:29 PM

• definitely sexy! looking forward to see when loading an app(let)..

  Posted by: zero on February 05, 2007 at 03:46 PM

• Nice~Can we get to choose which colour it is going to be shown in, btw?

  Posted by: alexlamsl on February 06, 2007 at 02:59 AM

• Way too intrusive. People were getting annoyed with the animation in the 5.0 version, they'll be apalled having to look at the glaring orange of the 6.0 version (unless they're on a site operated by EasyJet or Orange, which use an orange theme in which case they'll just think it's part of the site).

  Posted by: jwenting on February 06, 2007 at 05:07 AM

• Very nice and warm, I like it

  Posted by: bvansomeren on February 06, 2007 at 02:22 PM

• I hope one day we can have our own Custom-Applet Loading Animations, just like in Flash.

  
  Is there any way we can over-ride the default behavior and have our own Applet-Loading Animation ?
  

  Posted by: kishoresjava on February 11, 2007 at 05:36 AM

• Nice work!
  But i notice that in large applets the logo appears in the top left corner... I think that if it appears in center off the applet it should have a better effect.

  Posted by: brunyan on April 21, 2007 at 01:11 PM

• Glad you kept the coffee cup warning icon - we've noticed that whenever it comes up, we might as well go get a cup of coffee.

  Posted by: 8java on May 07, 2007 at 03:54 PM

• Beautiful, Sleek, Warm & Sexy. I especially like the "orange" touch, regardless what the others may think. :)
  I was wondering if we can have a peek at the source code? Is it publicly available?

  Posted by: gregkotsaftis on June 22, 2007 at 04:29 AM

• Can I replace the Java animation with an animated GIF. I have been able to replace it with a static gif but my aim is to display an animated gif. Thanks.

  Posted by: ssthota on September 12, 2007 at 08:35 AM

This work is licensed under a Creative Commons License.