JavaFX Moving Image

Moving Text and Image

To make the text move and load an image using JavaFX is very simple. The benefit of JavaFX is, it can load Photoshop extension images. I will also talk a little bit about working with text Fonts and Size here. We will need to import this packages

The first three packages should be familiar, we've used it in the previous section. The last two packages, we use it for animations.

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

import javafx.animation.transition.TranslateTransition;
import javafx.animation.*;

Now, lets observe an example so it gives us a clear idea on how it works

Moving Text Example

/* * The program demonstrate moving of texts, use of Fonts and Size * * Created on Nov 20, 2009, 11:32:14 PM */ package movingtext; import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.text.*; import javafx.animation.transition.TranslateTransition; import javafx.animation.*; /** * @author JJ */ // Create a variable to holds text var holdText : Text; // Create a transition of the text var trans = TranslateTransition{ // Sets the speed of the text as 10 second duration: 15s // Bind the text into the node node: bind holdText // Sets the text to move in the Y-axis, which is the vertical direction toY: -200 // Sets the text to be ease out interpolator: Interpolator.EASEOUT // Repeats indefinite repeatCount: Timeline.INDEFINITE } Stage{ // Sets the title of the stage title:"Moving Text" // Sets the width and height of the stage width: 700 height: 500 // Create the scene for the stage scene : Scene{ /* *Here we create the text that will be display on the window *We set the property of the text in here such as the size, font, textOrigin and Aligment * */ content:[ holdText = Text{ textOrigin : TextOrigin.TOP textAlignment : TextAlignment.JUSTIFY font : Font.font("SansSerif", FontWeight.BOLD, 24) content: "You cry and tell me I'm not your prince\n" "I don't mind, changing our story into a love story\n" "Since the day you say you love me\n" "Stars shine every night\n" "I start to panic, haven't heard you telling me your favorite story\n" "You might not believe in love stories\n" "But we can turn ours into one\n" "We will have a happy ending like every stories\n" "You run up to me with tears running down\n" "You say I'm not your prince\n" "We can't be like a love story\n" "But hear this, no matter what you say or do, I'll always be by your side\n" } ] } } // Plays the animation trans.play();

Click here to download the example

In JavaFX, using a colon " : ", it means assign something to the variable. Notice, we use var to declare a variable that holds a text and TranslateTransition. A variable can hold pretty much anything, value, string or characters. Inside TranslateTransition we create the duration of the text, which is the speed of the text, we bind the text we want to animate, the position the text is moving, how it moves, and the repetition time. Look closely how we assign Font to font with size and types. In the end we have to use the play method to play the animation.

Moving Image

To make an image to move by itself, the idea is the same as making a text move by itself. The following example makes an image to move in the Y direction linearly.

Example

/* The program demonstrate simple animation It makes a single image move * */ package movingimage; import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.image.*; import javafx.animation.*; import javafx.scene.layout.ClipView; import javafx.animation.transition.TranslateTransition; /** * @author JJ */ // Assign ImageView to img var img:ImageView; /* Creates the animation of the image Duration sets the moving speed of the image toY makes the image moves in the Y direction Interporlator tells the image to move linearly And the animation will repeat Indefinitely * */ var trans = TranslateTransition { duration: 30s node: bind img toY:-820 interpolator: Interpolator.LINEAR repeatCount: Timeline.INDEFINITE } Stage { // Sets the title, width and height of the window title:"Moving Image" width: 800 height: 600 scene:Scene { /* Here we use ClipView layout to hold the image Then assign the position of the layout to 50 and 60 * */ content: [ ClipView { layoutX:50 layoutY:60 node: // Assign the location of the image to img img = ImageView { image:Image { url: "http://www.cppjj.com/JavaFX/Photos/water.jpg" } } } ] } } // Cause the animation to play trans.play();

Click here to download the example

Note: We always need to have the play() method, if we forgot to put it in the animation will not play.