JavaFX Article | Creating an Image Slide Show

Creating an Image Slideshow

Skill Level Intermediate
Product JavaFX
Key Features Images, Animated Fade Transitions
Last Updated November 2009

In this article, you will learn how to program an image slideshow, complete with animated fade transitions. Click the image below to watch the video, or read the written text that follows for a more traditional, tutorial-style presentation.

Watch a video screencast of this tutorial: 640x480 | 1280x720

Use these instructions to program the following applet:

1) Create the Slideshow Project

To create the slideshow project within NetBeans IDE:

Click the new project icon (or choose New Project from the File menu).
Choose JavaFX from the Category menu.
Choose JavaFX Script Application from the Projects menu.
Click Next.
Type slideshow as the project name.
Click Finish.

These steps create the Main.fx source file and place it into the slideshow package. Delete any auto-generated code, leaving only the package statement at the top of the file.

This image shows the contents of Main.fx, which so far contains only a package statement. Figure 1: Main.fx, with the package statement shown at the top of the file.

2) Create the Stage and Scene

Next, create the application's frame by importing the Stage and Scene classes, then creating the Stage and Scene objects. (You do not need to know every detail of these two classes here. Just remember that you set the application's title on the stage, but the width and height are set on the scene.)

Source Code: Create the Stage and Scene

package slideshow;

import javafx.stage.Stage;
import javafx.scene.Scene;

Stage {
    title: "JavaFX Slideshow"
    scene: Scene {
        width: 400
        height: 300
    }
}

Click the green triangle to compile and run the application, which by default has a white background.

Figure 2: The stage and scene, with white (default) background.

3) Set the Background Color

Now import the Color class and set the scene's fill to black. (Tip: You can use NetBeans IDE's code completion feature to take the guesswork out of locating package, class, or variable names.) This color will show through during each fade-in or fade-out.

Source Code: Set the Background Color

package slideshow;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;

Stage {
    title: "JavaFX Slideshow"
    scene: Scene {
        width: 400
        height: 300
        fill: Color.BLACK
    }
}

Figure 3: The stage and scene with black (custom) background.

4) Load and Render Images

Next, import the Image and ImageView classes, then use a for loop to load the image data into a sequence named images. (The difference between these two classes is that Image loads the image data, while ImageView -- a graphical node -- displays it on-screen.) Add one more variable (currImg) to track the currently displayed image, then assign a new ImageView object to the scene's content.

Source Code: Load and Render Images

package slideshow;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;

def images = for(i in [1..4]){Image {url: "{__DIR__}pic{i}.jpg"};}
var currImg = images[0];

Stage {
    title: "JavaFX Slideshow"
    scene: Scene {
        width: 400
        height: 300
        fill: Color.BLACK
        content: ImageView {image: bind currImg};

    }
}

Note: This example assumes the images to be in the same directory as the .fx source code. (You can determine this by the presence of the special __DIR__ variable.) Therefore, you must add pic1.jpg, pic2.jpg, pic3.jpg, and pic4.jpg to the file system prior to running this application. The images for this slideshow are all 400x300, which exactly matches the size of the scene.

Figure 4: Rendering an image to the screen.

5) Add a Timeline

Now import the Timeline class, then create a Timeline object. This particular timeline repeats indefinitely, changing the image every five seconds. Note the use of the convenient "at" syntax, which provides literal construction of KeyFrame objects.

Source Code: Add a Timeline

package slideshow;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.animation.Timeline;

def images = for(i in [1..4]){Image {url: "{__DIR__}pic{i}.jpg"};}
var currImg = images[0];

Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [at(0s){currImg => images[0]},         
                at(5s){currImg => images[1]},
                at(10s){currImg => images[2]},
                at(15s){currImg => images[3]},
                at(20s){currImg => images[0]}]
}.play();

Stage {
    title: "JavaFX Slideshow"
    scene: Scene {
        width: 400
        height: 300
        fill: Color.BLACK
        content: ImageView {image: bind currImg};
    }
}

Compile and run the application again to see the change take effect.

6) Add a Fade Transition

The FadeTransition class enables you to declaratively program the fade-ins and fade-outs for this slideshow. To add this effect, create a FadeTransition object, then modify the timeline to invoke its play() function .5 seconds before each image change. The following code also widens the scope of the ImageView object, making it accessible to both the fade and scene objects.

Source Code: Add a Fade Transition

package slideshow;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.animation.Timeline;
import javafx.animation.transition.FadeTransition;
import javafx.animation.KeyFrame;

def images = for(i in [1..4]){Image {url: "{__DIR__}pic{i}.jpg"};}
def imageView = ImageView {image: bind currImg};
var currImg = images[0];

def fade = FadeTransition {
    duration: .5s
    node: imageView
    fromValue: 1.0
    toValue: 0.1
    repeatCount: 2
    autoReverse: true
}

Timeline {
    repeatCount: Timeline.INDEFINITE
    keyFrames: [at(0s){currImg => images[0]},
                KeyFrame{time: 4.5s action:function(){fade.play();}},
                at(5s){currImg => images[1]},
                KeyFrame{time: 9.5s action:function(){fade.play();}},
                at(10s){currImg => images[2]},
                KeyFrame{time: 14.5s action:function(){fade.play();}},

                at(15s){currImg => images[3]},
                KeyFrame{time: 19.5s action:function(){fade.play();}},
                at(20s){currImg => images[0]}]
}.play();

Stage {
    title: "JavaFX Slideshow"
    scene: Scene {
        width: 400
        height: 300
        fill: Color.BLACK
        content: imageView
    }
}

The most difficult part of creating this effect is simply knowing which variables to initialize. But a quick glance at the API documentation reveals the following:

duration: The length of this Transition, in milliseconds.
node: The target node of this Transition.
fromValue: Specifies the start opacity value for this Transition.
toValue: Specifies the stop opacity value for this Transition.
repeatCount: Defines the number of cycles in this animation.
autoReverse: Defines whether this animation reverses direction on alternating cycles.

After the FadeTransition object has been created, you can freely invoke its play() function. Here, the fade begins half a second before each image changes. Because the fade itself lasts for that exact amount of time, the effect fits perfectly.

This image shows an image fading in and out. Figure 5: After one image finishes fading out, the next image will begin fading in.

FX