Wednesday Nov 18, 2009

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>

Tuesday Mar 17, 2009

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!

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

For Applet mode, click on above image

For standalone mode

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


<script type="text/javascript">var dzone_url = "http://blogs.sun.com/rakeshmenonp/entry/javafx_light_effect";</script> <script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="http://widgets.dzone.com/widgets/zoneit.js"></script>

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