JavaFX - Text Effects


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.

<script src="http://dl.javafx.com/1.2/dtfx.js"></script> <script src="/rakeshmenonp/resource/TextEffect/TextEffect.js"></script>


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


<script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="/rakeshmenonp/resource/TextEffect/zoneit.js"></script>

Comments:

Cool!

Posted by Dave on November 18, 2009 at 07:48 AM IST #

Thanks, very nice example.

Posted by Charles Tam on November 18, 2009 at 08:38 PM IST #

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

Posted by Rakesh on November 19, 2009 at 06:41 AM IST #

@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.

Posted by Rakesh Menon on November 19, 2009 at 07:15 AM IST #

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

Posted by Rakesh on November 19, 2009 at 08:25 AM IST #

@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/

Posted by Rakesh Menon on November 20, 2009 at 02:07 AM IST #

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

Posted by Rakesh on November 21, 2009 at 09:33 AM IST #

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

Posted by Jasper Potts on November 25, 2009 at 01:27 PM IST #

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

Posted by Rakesh Menon on November 26, 2009 at 09:07 AM IST #

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

Posted by Vas on January 07, 2010 at 12:24 AM IST #

@Vas JavaFX doesn't directly provide any APIs (apart from PathAnimation, which can be used for one Node) for wrapping text. You will have to use combination of 2D and JavaFX APIs. Its possible to adopt the approach in below sample..

http://www.shinedraw.com/text-effect/flash-vs-silverlight-spiral-text/

Posted by Rakesh Menon on January 13, 2010 at 06:15 AM IST #

Post a Comment:
Comments are closed for this entry.
About


The views expressed on this blog are my own and do not necessarily reflect that of my organization

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today