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

1. Click the new project icon (or choose New Project from the File menu).
2. Choose JavaFX from the Category menu.
3. Choose JavaFX Script Application from the Projects menu.
4. Click Next.
5. Type slideshow as the project name.
6. 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.

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

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.

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.

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.

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.

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.

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

Related Documentation

This article focused on specific steps for creating an image slideshow with fade transitions. Follow these links to view additional documentation for each topic.

NetBeans IDE

• Getting Started with JavaFX Technology (NetBeans)
• JavaFX Core Tutorial: Getting Started with JavaFX Script

Stage and Scene

• JavaFX Core Tutorial: Using Objects
• JavaFX Core Tutorial: Packages
• JavaFX GUI Tutorial: Presenting UI Objects in a Graphical Scene
• JavaFX GUI Tutorial: Using Declarative Syntax
• API Documentation: javafx.stage.Stage
• API Documentation: javafx.scene.Scene

Colors

• JavaFX GUI Tutorial: Presenting UI Objects in a Graphical Scene
• API Documentation: javafx.scene.paint.Color

Images

• JavaFX GUI Tutorial: Adding the Image Node
• API Documentation: javafx.scene.image.Image
• API Documentation: javafx.scene.image.ImageView

Sequences

• JavaFX Core Tutorial: Sequences
• JavaFX Core Tutorial: The for Expression
• JavaFX Language Reference: Sequence Types
• JavaFX Language Reference: For Expressions

Data Binding

• JavaFX Language Reference: Binding
• JavaFX Core Tutorial: Data Binding and Triggers

Animation Timelines

• JavaFX GUI Tutorial: Creating Animated Objects
• API Documentation: javafx.animation.Timeline
• API Documentation: javafx.animation.KeyFrame

Fade Transitions

• API Documentation: javafx.animation.transition.FadeTransition