X

Vaibhav's Blog Space

  • Java
    December 8, 2008

3D button Effect in JavaFX

Guest Author

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"
                    }
                ]
            }
        ]
    }
}

Join the discussion

Comments ( 13 )
  • Aditya Monday, December 8, 2008

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


  • Dmitry Tuesday, December 9, 2008

    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?


  • Vaibhav Tuesday, December 9, 2008

    @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 :)


  • Roger Padilla Tuesday, December 9, 2008

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

    Thanks!


  • Vaibhav Choudhary Tuesday, December 9, 2008

    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 :)


  • Vaibhav Choudhary Tuesday, December 9, 2008

    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"

    }

    ]

    };

    }

    }


  • MilitaryManNavy Sunday, March 22, 2009

    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.


  • Vaibhav Sunday, March 22, 2009

    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/


  • MilitaryManNavy Monday, March 23, 2009

    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.


  • Vaibhav Choudhary Monday, March 23, 2009

    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.


  • MilitaryManNavy Tuesday, March 24, 2009

    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.


  • Tag Heuer watches Sunday, December 20, 2009
  • aftab aki Thursday, January 28, 2010

    hello sir please help me on java.

    please tell me how i can run java in my computers


Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.