Tuesday, December 09, 2008

3D E'FX's in JavaFX

Me and Vikram was looking today some of the cool flash examples and I have seen the button effect at some place, when you press the button it really goes like inside and coming out. But that was an effect achieved by the images(two different images, one unpressed button and one pressed button) and then we thought to simulate this effect by code. Somehow we are able to do that in FX, here is the final outcome:




What we have tried to do is pressing one button will put the other in unpressed mode and vice-versa. This has been achieved by some of the cool API's of JavaFX. And we have used the DistantLight effect of JavaFX which gives a lighting effect in its awesome way. Actually this can be more cooler but I left that for developer to modify it according to their need :). But this is a modular code and can be used in any of the button place.


Here is the simple code for the same(again code is not written in the most optimized way but in the best way for understanding) :



package lighteff;

import javafx.scene.effect.light.DistantLight;
import javafx.scene.effect.Lighting;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

var factor = 5;
var scale = 1.0;
var factor1 = 10;
var scale1 = 0.85;

Stage {
title: "Control Panel"
width: 290
height: 180
style: StageStyle.UNDECORATED
scene: Scene {
fill: Color.BLACK
content: [
Group {
effect: Lighting {
light: DistantLight {
azimuth: 90
elevation: 60
}
surfaceScale: bind factor
}
content: [
Circle {
centerX: 100,
centerY: 100
radius: 40
fill: Color.RED


onMousePressed: function( e: MouseEvent ):Void {
scale = 0.85;
factor = 10;
scale1 = 1.0;
factor1 = 5;
}
},
Text {
fill: Color.WHITE
scaleX: bind scale
scaleY: bind scale
font: Font {
size: 24
}
x: 71,
y: 105
content: "Press"
}
]
},
Group {
effect: Lighting {
light: DistantLight {
azimuth: 90
elevation: 60
}
surfaceScale: bind factor1
}
content: [

Circle {
centerX: 200
centerY: 100
radius: 40
fill: Color.BLUE
onMousePressed: function( e: MouseEvent ):Void {
scale1 = 0.85;
factor1 = 10;
scale = 1.0;
factor = 5;
}
},
Text {
fill: Color.WHITE
scaleX: bind scale1
scaleY: bind scale1
font: Font {
size: 24
}
x: 171,
y: 105
content: "Press"
}
]
}
]

}
}

No comments: