JavaFX Object Effect

Object Effect

One of the best thing about JavaFX is, it allows us to create objects effects easily. All we need is to define what kind of effects we want inside the object. Let see an example to have a more clear understanding on it.

Example

Click here to download the example

We are able to put multiple effects on an object. By using the keyword " input " we are able to input multiple effects. Lets observe a basic example.

/* * Demonstrate the effect of an image * * Created on Jan 13, 2010, 8:06:44 PM */ package csgrapheffect; import javafx.stage.Stage; import javafx.scene.Scene; import javafx.scene.effect.*; import javafx.scene.image.*; import javafx.scene.control.*; import javafx.scene.paint.*; /** * @author JJ */ //Assign the image to effectImage var effectImage = Image { preserveRatio:true url:"{__DIR__}effect.jpg" } //Assign effectImage to ImageView so it can be display var displayImage : ImageView; //Assign effect to change var changeEffect : Effect; //Create bloom button var bloomButton : Button; //Create drop shadow button var dropShadowButton : Button; //Create a glow button var glowButton : Button; Stage { title: "Image Effect" scene: Scene { width: 1100 height: 740 content: [ //Display the image to the screen displayImage = ImageView { layoutX:100 layoutY:50 smooth:true image:effectImage effect:bind changeEffect } //Making the image Bloom bloomButton = Button { layoutX:100 layoutY:600 text:"Bloom" action:function() { changeEffect = Bloom { threshold: 0.5 input:InnerShadow { choke: 0.5 offsetX: 10 offsetY: 10 radius: 10 color: Color.WHEAT } } } } dropShadowButton = Button { layoutX:200 layoutY:600 text:"Drop Shadow" action:function() { changeEffect = DropShadow { offsetX: 10 offsetY: 10 color: Color.BLACK radius: 10 } } } glowButton = Button { layoutX:350 layoutY:600 text:"Glow" action:function() { changeEffect = Glow { level: 1 input: DropShadow { offsetX: 10 offsetY: 10 color: Color.BLACK radius: 10 } } } } ] } }

Click here to download the example

This example create three buttons, a click of the button puts an effect on the image. We create a changeEffect variable so that we can use it to bind the effect.

The code above, we create a variable to hold the location of the image. Notice, we use "{__DIR__}" that is we are assuming the image is in the same directory as the source code.

Notice, the code above on the effect, we bind the changeEffect. What it does is every time the user clicks a button, it will change the effect of the image. Keep in mind that if we don't use the bind keyword, the effect of the image will not change.

//Making the image Bloom bloomButton = Button { layoutX:100 layoutY:600 text:"Bloom" action:function() { changeEffect = Bloom { threshold: 0.5 input:InnerShadow { choke: 0.5 offsetX: 10 offsetY: 10 radius: 10 color: Color.WHEAT } } } } dropShadowButton = Button { layoutX:200 layoutY:600 text:"Drop Shadow" action:function() { changeEffect = DropShadow { offsetX: 10 offsetY: 10 color: Color.BLACK radius: 10 } } } glowButton = Button { layoutX:350 layoutY:600 text:"Glow" action:function() { changeEffect = Glow { level: 1 input: DropShadow { offsetX: 10 offsetY: 10 color: Color.BLACK radius: 10 }

Here we create three buttons, a click of the button will change the effect of the image. Notice, we have multiple effect when the user clicks of a button. We use the "input" keyword to help us accomplish the multiple effect.