Image flickers for split-second during FadeTransition - Javafx

Question

I'm currently trying to build a game, and I have an intro sequence of images with accompanying text for the background story of the game. In the beginning, I fade in an image with accompanying text, and then fade both out. Then, I begin the next image-text pairing once the previous fade is complete, and I do this until the background story is complete, but when I do that the image and text flicker for a split-second before the fade in begins for every image and text. I've tried a number of things but can't seem to get rid of the flicker, can anyone help?

This is the function I use for this part in the intro:

private void backgroundStory (Stage stage, MediaPlayer mediaPlayer, String nameEntry, int width, int height, Color color) {

            Group backstoryRoot = changeScene(stage, width, height, color);
            GridPane backstoryPane = new GridPane();

            backstoryRoot.getChildren().add(backstoryPane);

            Label storyLabel1 = createLabel("Sometimes, life can get monotonous...");

            backstoryPane.getColumnConstraints().add(new ColumnConstraints(width));
            RowConstraints initialConstraint = new RowConstraints ((height/2)+20);
            backstoryPane.getRowConstraints().add(initialConstraint);

            int fadeDuration = 4000;
            FadeTransition storyTextTransition1 = storyTextFade(storyLabel1, fadeDuration);
            backstoryPane.getChildren().add(storyLabel1);
            GridPane.setValignment(storyLabel1, VPos.BOTTOM);
            GridPane.setHalignment(storyLabel1, HPos.CENTER);

            storyTextTransition1.setOnFinished(new EventHandler<ActionEvent>() {

                @Override
                public void handle(ActionEvent event) {

                    backstoryPane.getChildren().remove(storyLabel1);
                    backstoryPane.getRowConstraints().remove(initialConstraint);
                    backstoryPane.getRowConstraints().add(new RowConstraints(25));

                    VBox vbox = new VBox (10);
                    backstoryPane.add(vbox, 0, 1);
                    vbox.setAlignment(Pos.TOP_CENTER);

                    ImageView dayAndNight = createImage ("Images/Day_And_Night.jpg");
                    Label storyLabel2 = createLabel("I was living in the city, following the same routine day and night.");
                    vbox.getChildren().add(dayAndNight);
                    vbox.getChildren().add(storyLabel2);
                    storyImageFade(dayAndNight, fadeDuration);
                    FadeTransition storyTextTransition2 = storyTextFade(storyLabel2, fadeDuration);

                    String officeReception = "Images/Office_Reception.jpg";
                    String receptionText = "Seeing the same faces every morning.";

                    FadeTransition storyTextTransition3 = nextPicture (storyTextTransition2, officeReception, receptionText, fadeDuration, vbox);


                    String office = "Images/Office.jpg";
                    String officeText = "Doing the same work every day.";
                    FadeTransition storyTextTransition4 = nextPicture (storyTextTransition3, office, officeText, fadeDuration, vbox);
                }
            });


            //mediaPlayer.stop();
            //introExplanation (stage, nameEntry, width, height, color);
        }

These are the functions that are called within it:

private Label createLabel(String labelText) {
            Label storyLabel = new Label(labelText);
            Font storyFont = Font.font( "Blackadder ITC", 25 );
            storyLabel.setTextFill(Color.INDIANRED);
            storyLabel.setFont(storyFont);
            return storyLabel;
        }

        private FadeTransition storyTextFade(Label label, int duration) {
            FadeTransition storyTransition = new FadeTransition(Duration.millis(duration), label);
            storyTransition.setFromValue(0);
            storyTransition.setToValue(1);
            storyTransition.setCycleCount(2);
            storyTransition.setAutoReverse(true);
            storyTransition.play();
            return storyTransition;
        }

        private void storyImageFade(ImageView image, int duration) {
            FadeTransition imageTransition = new FadeTransition(Duration.millis(duration), image);
            imageTransition.setFromValue(0);
            imageTransition.setToValue(1);
            imageTransition.setCycleCount(2);
            imageTransition.setAutoReverse(true);
            imageTransition.play();
        }

        private ImageView createImage (String imageName) {
            Image image = new Image(imageName);
            ImageView imageview = new ImageView(image);
            imageview.setFitWidth(500);
            imageview.setFitHeight(500);
            //imageview.setPreserveRatio(true);
            imageview.setSmooth(true);
            imageview.setCache(true);
            return imageview;
        }

        private FadeTransition nextPicture (FadeTransition transition, String image, String imageLabel, int fadeDuration, VBox vbox) {
            ArrayList<FadeTransition> transitionList = new ArrayList<FadeTransition>();
            transition.setOnFinished(new EventHandler<ActionEvent>() {

                @Override
                public void handle(ActionEvent event) {

                    vbox.getChildren().clear();
                    ImageView imageview = createImage (image);
                    storyImageFade(imageview, fadeDuration);

                    Label storyLabel = createLabel(imageLabel);
                    FadeTransition storyTextTransition = storyTextFade(storyLabel, fadeDuration);
                    transitionList.add(storyTextTransition);

                    vbox.getChildren().add(imageview);
                    vbox.getChildren().add(storyLabel);
                }
            });
            return transitionList.get(0);
        }

Thanks!

Answer 1

This is my first response, so I do apologize if I'm not responding appropriately.

I was facing the same issue when transitioning between scenes. My solution was to set the node opacity to 0 before adding the node to the container.

For your case, it appears as though all of your labels and images are created in the createLabel and createImage methods, and the resulting values are what are being faded in.

private Label createLabel(String labelText) {
    Label storyLabel = new Label(labelText);
    Font storyFont = Font.font( "Blackadder ITC", 25 );
    storyLabel.setTextFill(Color.INDIANRED);
    storyLabel.setFont(storyFont);

    // Set the opacity before returning the object
    storyLabel.setOpacity(0);

    return storyLabel;
}

private ImageView createImage (String imageName) {
    Image image = new Image(imageName);
    ImageView imageview = new ImageView(image);
    imageview.setFitWidth(500);
    imageview.setFitHeight(500);
    //imageview.setPreserveRatio(true);
    imageview.setSmooth(true);
    imageview.setCache(true);

    // Set the opacity before returning the object
    imageview.setOpacity(0);

    return imageview;
}

I hope this helps.