3D button Effect 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"
                    }
                ]
            }
        ]

    }
}  
Comments:

this is a nice example, its nice to see people doing new things and showcasing javafx which i think is an amazing dev tool in itself..

keep up the good work...

Posted by Aditya on December 09, 2008 at 04:20 AM IST #

This demo will not work on a mobile platform because it uses currently unsupported effects. Is there a way to create the same demo on mobile?

Posted by Dmitry on December 09, 2008 at 12:36 PM IST #

@Aditya: Thanks ! Yes, the power of JavaFX is limitless and we need to show that to the world, then only they will start with it.

@Dmitry: My sincere regret for that. Yes, the effects API is not yet supported in the mobile version, which is still in beta. What I can do right now, is to raise an RFE for this feature, which is I guess done long back. Soon we will see these functionality on Mobile as well :)

Posted by Vaibhav on December 09, 2008 at 01:49 PM IST #

Very nice example. Can you write the code in the most optimized way, please?

Thanks!

Posted by Roger Padilla on December 09, 2008 at 06:50 PM IST #

Thanks Roger !

What we have to change for writing in a optimized way :

1. We have to make a class and simple call of that class will take care of making button.

2. Here in the code, you can see group has been written 2 times, because we want to make 2 buttons. In actually, we have to make 2 instance of class.

I will paste the new code(class version) soon.

thanks for appreciating :)

Posted by Vaibhav Choudhary on December 10, 2008 at 01:09 AM IST #

Done :). Now you can see the modularity of the code :)

Here is main.fx :

//-----
package lighteff;

import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.stage.StageStyle;

var buttons: PressButton[];
var x: Integer[] = [100,200,300,400];
var color: Color[] = [Color.RED, Color.GREEN, Color.BLUE, Color.YELLOWGREEN];
for(i in [0..3]) {
insert PressButton {
x: x[i]
y: 100
color: color[i]
} into buttons
}

Stage {
title: "Control Panel"
width: 490
height: 180
style: StageStyle.UNDECORATED
scene: Scene {
fill: Color.BLACK
content: [
buttons
]

}
}

and here is
PressButton.fx

//---
package lighteff;

import javafx.scene.CustomNode;
import javafx.scene.effect.light.DistantLight;
import javafx.scene.effect.Lighting;
import javafx.scene.Group;
import javafx.scene.input.MouseEvent;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;

public class PressButton extends CustomNode {
public var x = 100;
public var y = 100;
public var factor = 5;
public var scale = 1.0;
public var color: Color = Color.RED;
public override function create(): Node {
return Group {
effect: Lighting {
light: DistantLight {
azimuth: 90
elevation: 60
}
surfaceScale: bind factor
}
content: [
Circle {
centerX: bind x,
centerY: bind y
radius: 40
fill: bind color
onMousePressed: function( e: MouseEvent ):Void {
scale = 0.85;
factor = 10;
}
onMouseReleased: function( e: MouseEvent ):Void {
scale = 1;
factor = 5;
}
},
Text {
fill: Color.WHITE
scaleX: bind scale
scaleY: bind scale
font: Font {
name: "Arial"
size: 24
}
x: bind x-29,
y: bind y+5
content: "Press"
}
]

};
}
}

Posted by Vaibhav Choudhary on December 10, 2008 at 01:28 AM IST #

Vaibhav- please explain if you are using the JNLP to make this work. When I click on "launch" in the web page, the sample starts up as it's own application (outside of the IE browser). Please tell me how to do this. Many thanks.

Posted by MilitaryManNavy on March 22, 2009 at 04:24 PM IST #

to make an application JNLP :

1. just run this application in NB and you will get jar file and jnlp file. you need to modify jnlp file. open that in Text Editor and give the location where you want to load it.

2. if you want to run it on applet, then add applet code.

these links will be useful for you :)
http://javafx.com/docs/tutorials/deploy-applet/
http://javafx.com/docs/tutorials/deploy-using-webstart/

Posted by Vaibhav on March 22, 2009 at 04:40 PM IST #

Vaibhav - Thanks for the links you provided. I am still not able to determine WHICH particular lines in the JNLP file force the application to run outside the browser. When my page which has the link to the JNLP file loads, the application shows inside the browser window.

Posted by MilitaryManNavy on March 23, 2009 at 10:46 PM IST #

JNLP is meant to run outside the browser. it is like a installable. which install once when you run JNLP. It is different from Applet.

I am still now understanding the problem.

Posted by Vaibhav Choudhary on March 24, 2009 at 02:27 AM IST #

Vaibhav - On your "main" web page for your blog, you have many excellent examples - each one has a java "Launch" button. When this "Launch" button is pressed, a download dialog box shows for a few seconds, then your example program executes in a java application window (this window appears separate from the browser window). This is the function I am trying to get you to explain. HOW to make the application run OUTSIDE of the browser, in it's own window.

Posted by MilitaryManNavy on March 25, 2009 at 12:22 AM IST #

hello sir please help me on java.
please tell me how i can run java in my computers

Posted by aftab aki on January 28, 2010 at 05:32 AM IST #

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

Hi, I am Vaibhav Choudhary working in Sun. This blog is all about simple concept of Java and JavaFX.

Search

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