Home > javafx > JavaFX – Text Effects

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

var dzone_style = ‘2’;

Advertisements
Categories: javafx Tags: ,
  1. Dave
    November 18, 2009 at 2:18 AM

    Cool!

  2. Charles Tam
    November 18, 2009 at 3:08 PM

    Thanks, very nice example.

  3. November 19, 2009 at 1:11 AM

    Hi Rakesh,
    I liked the Eboss Text effect very much .
    Thank you so much for the code .
    But is there any specific reason why you have chosen :
    light: SpotLight {
    x: 58.0
    y: 211.0
    z: 100.0
    pointsAtX: 100.0
    pointsAtY: -311.0
    pointsAtZ: -105.0
    color: Color.WHITE
    }
    Can you please make it more modular .
    Thanks

  4. November 19, 2009 at 1:45 AM

    @Rakesh I updated sample to reverse the engrave approach and simulate emboss. I selected SpotLight purely based on the look obtained from the sample, no particular reason for the same.

  5. November 19, 2009 at 2:55 AM

    Hi Rakesh Menon,
    Thanks for the modified code .
    I liked it so much .
    From the above screen shot
    i see that if light source ( white shadow )
    is at the Top, then the shadow comes in the bottom part ( black shadow ) and it looks
    elevated and vice verca . I’ll try to implement this concept for objects other than text and will check if it works .
    By the way, i have got a similar reply in a forum when i tried to implement the deep text effect .
    http://forums.sun.com/thread.jspa?messageID=10844582&#10844582
    Thanks

  6. November 19, 2009 at 8:37 PM

    @Rakesh Thanks! Share your experience with other objects.. You may be interested in below sample as well..
    http://jfxstudio.wordpress.com/2009/07/14/fun-with-spheres/

  7. November 21, 2009 at 4:03 AM

    Hi Rakesh,
    Thanks for the above link .
    The light shadow and dark shadow effect can be implemented for any JavaFx Node very easily .
    For a node if we apply brightness = +1 then it will be light shadow and if we apply brightness = -1 it will be nothing but dark shadow . Like you have just did for the text, i have tried to place the dark and light shadows at y+1 and y-1 but it did not help . I mean the object/ JavaFx node did not look elevated to deeper . Infact i have tried this effect for some images and gradient buttons but no luck 😦 .
    You may try something similar and let me know your feedback .
    Thanks

  8. November 25, 2009 at 7:57 AM

    You inspired me to have a go, here are some more cool text effects with JavaFX http://fxexperience.com/2009/11/text-effects/

  9. November 26, 2009 at 3:37 AM

    @Jasper Looks great! 🙂 looking forward to “50 Stunning JavaFX Text Effect Tutorials”

  10. Vas
    January 6, 2010 at 6:54 PM

    Hi Rakesh,
    Great Examples so far.
    Is there a way to wrap text around a particular shape or path.
    Your help is greatly appreciated.
    Thanks,
    Vas

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: