JavaFX Summary

Summary

The example is a short summary of what we have learn in the previous few sections. The example demonstrate how to animate text, loading image, loading audio, creating buttons, and button event handling.

/* The program summarizes Text, audio, image and animation It animates the text and play audio * */ package summarybirthday; /** * @author JJ */ import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.text.*; import javafx.animation.transition.TranslateTransition; import javafx.animation.*; import javafx.scene.layout.*; import javafx.scene.image.*; import javafx.scene.media.*; import javafx.scene.paint.Color; import javafx.scene.control.Button; // Assign Text to txt var txt:Text; // Assign MediaPlayer to musicPlay var musicPlay : MediaPlayer; // Assigns the TranslateTransition definition to txtMove var txtMove = TranslateTransition { duration: 25s repeatCount: Timeline.INDEFINITE interpolator: Interpolator.LINEAR toY: -90 node: bind txt } Stage { // Sets the title, width, and height of the window title:"Summary Birthday" width: 700 height: 750 scene:Scene { content: [ /* Using the ClipView layout to hold the text By using the ClipView layout we can ensure That the text will not touches the image * */ ClipView { // Sets the position of the ClipView layout layoutX:200 layoutY:500 // Sets the size of the ClipView layout width:300 height:400 node: txt = Text { // Sets the start position of the text layoutY: 50 textOrigin: TextOrigin.TOP textAlignment: TextAlignment.JUSTIFY fill: Color.BLUE // Sets the font of the text font:Font.font("Times New Roman", FontWeight.BOLD, 16 ) content: "Happy birthday to you\n" "Happy birthday to you\n" "Wish you have a good health\n" "Wish you have a happy family\n" "Happy birthday to you\n" "Happy birthday, happy birthday to you\n" "Happy happy birthday to youuuuu\n" } } , // Loads an image from a website ImageView { image:Image { url:"http://www.cppjj.com/Photos/p0RR271245473584.gif" } } , // Using VBox layout to hold two buttons VBox { layoutX:600 layoutY:600 content: [ // Creates a play button Button { text:"Play" action: function() { musicPlay.play() } } , // Creates a stop button Button { text:"Stop" action: function() { musicPlay.stop() } } ] } ] } } // Loads a song from the website musicPlay = MediaPlayer { repeatCount: MediaPlayer.REPEAT_FOREVER media:Media { source:"http://www.cppjj.com/Photos/ShengriKuaile.wma" } } // Play the text animation txtMove.play()

Click here to download the example

Lets see a more interesting example. In the following example we will have a ball bounce back and forth by itself.

Example

/* The program makes a ball bounce back and forth * */ package randomballs; /** * @author JJ */ import javafx.scene.*; import javafx.scene.Group; import javafx.stage.Stage; import javafx.animation.*; import javafx.scene.paint.*; import javafx.animation.Timeline; import javafx.scene.control.Button; import javafx.scene.shape.*; // The center point of the moving ball var centerX:Number; var centerY:Number; // This is the moving ball var ball:Circle; // The group contains the wall and the ball var ballComponent:Group; // Here we create four walls using rectangle var topWall: Rectangle; var bottomWall: Rectangle; var leftWall: Rectangle; var rightWall: Rectangle; // Sets the visibility of the start button to be true var startButton: Boolean = true; // The animation of the ball var ballAnimation:Timeline; // Controls whether the ball is moving to the right var movingRight: Boolean = true; // Controls whether the ball is moving down var movingDown: Boolean = true; /* Creating the definition of the ball animation In addition to that we call the function checkCollision It controls the direction of the ball * */ ballAnimation = Timeline { keyFrames:KeyFrame { time:10ms action:function() { checkCollision(); if(movingRight) { centerX += 1; } else centerX += -1; if(movingDown) { centerY += 1; } else centerY += -1; } } repeatCount:Timeline.INDEFINITE } // Setting the initial starting position of the ball function initialize() { centerX = 250; centerY = 200; startButton = true; } // Check to see if the ball hits the wall function checkCollision() { if(ball.intersects(rightWall.boundsInLocal) or ball.intersects(leftWall.boundsInLocal)) { movingRight = not movingRight; } if(ball.intersects(topWall.boundsInLocal) or ball.intersects(bottomWall.boundsInLocal)) { movingDown = not movingDown; } } Stage { title:"Random Bounce Ball" scene: Scene { width: 400 height: 400 // Here we sets the background of the window fill: RadialGradient { centerX: 5 centerY: 5 focusX: 0.1 focusY: 0.1 radius: 10 stops: [ Stop { color : Color.BISQUE offset: 0.0 }, Stop { color : Color.BLUE offset: 1.0 }, ] } /* Inside here, we create the size and color of the ball We are creating the four walls, notice that each wall must Have a height and width of at least one pixel * */ content: [ ballComponent = Group { focusTraversable: true content: [ ball = Circle { centerX: bind centerX centerY: bind centerY radius: 6 fill:Color.BLUE }, topWall = Rectangle { x:0 y:0 width: 400 height: 1 }, bottomWall = Rectangle { x:0 y:400 width:400 height:1 }, rightWall = Rectangle { x:400 y:0 width:1 height:400 }, leftWall = Rectangle { x:0 y:0 width:1 height:400 }, // Creating the start button Group { var start: Button; layoutX: 150 layoutY: 350 content: start = Button { text:"Start" visible: bind startButton action: function() { startButton = false; ballAnimation.playFromStart(); } } } ] } ] } } // Initialize the game initialize();

Click here to download the example