In this tech tip, you will see how easy it is to add a custom splash screen to browser applets.

The following applet is the Analog Clock sample from javafx.com. The applet on the right has an animated GIF custom splash screen. You can easily add your own custom splash screen, using any JPG, GIF, or PNG file.

Quick startup times are critical to the user experience of your JavaFX applications. Instead of having your users watch the Java logo spin as your browser applet is loaded, you can capture their attention, shorten their perceived startup time, and brand your application by customizing your splash screen.

A custom splash screen is especially useful during cold startups, which require additional time for the Java Runtime Environment (JRE) to start and load into memory. Warm startups do not present as much of a problem, because the JRE is already loaded into memory, and JavaFX technology capitalizes on JRE performance improvements to warm starts.

The important point with a custom splash screen is to keep the image file size small so that it does not interfere with startup time.

Customizing the Splash Screen

Here's how to implement the custom splash screen.

1. Place your JPG, GIF, or PNG file in the same location as the other applet files that are targeted for deployment. In this example, the image file was saved to the /dist folder.
2. Prepare the script that calls your browser applet, as shown in the following example. For more information about how to generate and configure browser applet scripts, see the article JavaFX Applets in the Browser.
   The highlighted code configures the custom splash screen. The loading URL can be absolute or relative.
3. Change the width and height dimensions of the loading image to match those of your image.

<script src="http://dl.javafx.com/1.3/dtfx.js"></script>
<script>
    javafx(
        {
            loading_image_url: "dist/customsplash.gif",
            loading_image_width: 240, 
            loading_image_height: 320,
            archive: "dist/AnalogClock.jar",
            width: 240,
            height: 320,
            code: "analogclock.Main",
            name: "AnalogClock"
        }
    );
</script>    

Try It

• Create a splash screen for one of your own applications.

Related Links

• Article: JavaFX Applets in the Browser
• Article: How to Create a Splash Screen