JavaFX – Text Effects


Bookmark and Share

We can create emboss and engrave text effects by using layers of nodes and Light Effects API. In below screenshots, the first two are generated using layers of nodes and third one using Light effects API.


 


 

JankoAtWarpSpeed has many tutorials related to building of functional and good looking web sites. The tutorials can also be adapted for implementing engrave text effect in JavaFX. I followed the steps mentioned in “Two simple ways to create text embossing effect” tutorial and reproduced the engrave effect in JavaFX! The same approach can used for emboss by moving the shadow nodes in opposite direction.

For third effect, I used the SpotLight API. The values specified for this is obtained from Light Effect Sample. Another sample code is available in JavaFX API Docs of SpotLight.


To launch click on above image or

Try it out and let me know feedback.. Please do share other approach..

Also refer to stunning text effects blog entry by Jasper Potts

Advertisements

JavaFX – Light Effect


JavaFX provides many APIs for Lighting effects.

There are also different light types such as

As you might have noted, there are many attributes available in each of these classes to control the light. To be frank, I’m not really familiar with the details of those attributes. But I still would like to use the APIs to generate light effects.

For this I have written a program which will generate the source code for the light effect. The user just needs to change the slider and monitor the changes in light. Once the user is happy about the effect, he can just copy the code that is shown and use it in his application!

For Applet mode, click on above image

For standalone mode

Now you too can enjoy using light effects in your application! Simple?!

JavaFX – BlendMode Effect


Just thought of demonstrating use of JavaFX BlendMode effect API to combine and render multiple nodes. Since this requires blending of multiple nodes, we apply this effect to Group by specifying its blendMode attribute.

For Applet mode, click on right image above.

For standalone mode

Here we create two ImageView and add it to group. The blendMode attribute is bound to one of element of an array of blend modes available in JavaFX. This is done so that we can just change the index to switch to another blend mode.


var blendGroup = Group {
    
    // Specify BlendMode
    blendMode: bind blendMode[index]
    
    content: [
        ImageView {
            image: Image {
                url: "{__DIR__}images/sky.jpg"
            }
        },
        ImageView {
            image: Image {
                url: "{__DIR__}images/baloon.jpg"
            }
        },
    ]
    
    translateX: 5
    translateY: 5
};

Source

JavaFX – Glow Effect


This sample is just to demonstrate how easy it is to add an effect to a Node.
First we initialize the Glow effect as shown below. The level attribute is bound to glowLevel variable so as to change the glow value at runtime.


var glowLevel = 0.0;
var glow = Glow {
    level: bind glowLevel
}

Now we will instantiate an ImageView and load the Image as shown below.


var imageView = ImageView {
    image: Image {
        url: "{__DIR__}images/light.jpg"
    }
    effect: bind glow
}

Create a Timeline which will run 5 times with auto-reverse. This Timeline is used for updating the value of glowLevel.


var timeline = Timeline {
    repeatCount: 15
    autoReverse: true
    keyFrames: [
        KeyFrame {
            time: 0s
            values: glowLevel => 0.0 ]
        },
        KeyFrame {
            time: 3s
            values: glowLevel => 0.85 ]
        }
    ]
}
timeline.play();

Click on above image for Applet mode.


The glow effect is added to the candles! Simple?!

Source

var dzone_url = “http://blogs.sun.com/rakeshmenonp/entry/javafx_glow_effect”;
var dzone_style = ‘2’;

“Can JavaFX do this?”


Couple of weeks back I had a session and booth at Sun Tech Days, Hyderabad. Many asked if JavaFX can really do all what Flex does? We demonstrated many samples that we had. But still wanted to show some sample which matches real website. So here is a sample which mimics Adobe – Discover your Shortcut to Brilliant” website.

For Applet mode, click on above image

For standalone mode

Let me know your comments/suggestions…