Friday Mar 06, 2009

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();

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

Click on above image for Applet mode.


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

Source

<script type="text/javascript">var dzone_url = "http://blogs.sun.com/rakeshmenonp/entry/javafx_glow_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