Generating a spotlight on text is very simple using JavaFX.Should use a javafx.animation.Timline class for generating the Spotlight effect on a text.





Example1:




The screenshot above is the simple example of generating the spotlight effect on text.Look at the below code for the above example.

/*
* SpotlightExample.fx
* Developed 2009 by Vinay Thota to demonstrate spotlight
* effect on text in in JavaFX using timelines.
*/
package spotlight;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.shape.Circle;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.Group;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.scene.text.Text;
import javafx.scene.text.TextOrigin;
import javafx.scene.effect.BlendMode;

var scene:Scene;
var rect : Rectangle;
var spX = 0;

var txt : Text = Text{
content : "www.javafx.com"
fill: Color.WHITE
textOrigin: TextOrigin.TOP
font: Font { size: 34 }
translateX: bind (scene.width - txt.layoutBounds.width) / 2
translateY: bind (scene.height - txt.layoutBounds.height) / 2
}
var circle = Circle{
radius : 50
translateX: bind spX
translateY: bind scene.height / 2
fill : RadialGradient{
centerX : 0.5
centerY : 0.5
stops :[
Stop{offset: 0.0, color: Color.GREEN},
Stop{offset: 0.1, color: Color.DARKGREEN},
Stop{offset: 0.5, color: Color.LIGHTGREEN},
]

}
}
var group = Group{
blendMode: BlendMode.SRC_ATOP
content : [txt,circle]
}

Stage {
title: "Spotlight"
width: 300
height: 100
scene:scene = Scene {
content: group
fill : Color.ORANGERED
}
}

Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse : true
keyFrames: [
KeyFrame { time : 0s
values :[ spX => txt.boundsInParent.minX - 30]
},
KeyFrame { time : 2s
values :[spX => txt.boundsInParent.maxX + 30]
}
]

}.playFromStart();


Example2:




The screenshot above is another simple example of spotlight effect on text.Look at the below code for the above example.

/*
* SpotlightExample2.fx
* Developed 2009 by Vinay Thota to demonstrate spotlight
* effect on text in in JavaFX using timelines.
*/

package spotlight;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.text.Text;
import javafx.scene.text.Font;
import javafx.scene.shape.Circle;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.paint.Color;
import javafx.scene.Group;
import javafx.animation.Timeline;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.scene.text.Text;
import javafx.scene.text.TextOrigin;
import javafx.scene.effect.BlendMode;

/**
* @author vinay
*/
var scene:Scene;
var spY = 90;
var spX = 50;

var txt : Text = Text{
content : "www.javafx.com"
fill: Color.ORANGERED
textOrigin: TextOrigin.TOP
font: Font { size: 34 }
translateX: bind (scene.width - txt.layoutBounds.width) / 2
translateY: bind (scene.height - txt.layoutBounds.height) / 2
}

var circle = Circle{

radius : 50
translateX: bind spX
translateY: bind spY
fill : RadialGradient{
centerX : 0.5
centerY : 0.5
stops :[
Stop{offset: 0.4, color: Color.WHITE},
Stop{offset: 0.5, color: Color.WHITE},
]

}
}

var group = Group{
blendMode: BlendMode.SRC_ATOP
content : [circle,txt]
}

Stage {
title: "Spotlight"
width: 400
height: 230
scene:scene = Scene {
content: group
fill : Color.DARKSLATEBLUE
}
}


var timeline = Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse : true
keyFrames: [
KeyFrame { time: 0s values: spY => 50 },
KeyFrame { time: 2.2s values: spY => 150 tween Interpolator.SPLINE(0,0,0.5,0) },
KeyFrame { time: 2.25s values: spY => 150}
KeyFrame { time: 4.5s values: spY => 50 tween Interpolator.SPLINE(0,0,0,0.5) },
]
}
timeline.playFromStart();

Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse : true
keyFrames: [
KeyFrame { time: 0s values:spX => txt.boundsInParent.minX - 20},
KeyFrame { time: 4s values:spX => txt.boundsInParent.maxX + 20},
]
}.playFromStart();




More...